HTML学习日记

2025.10.10 打卡

  1. HTML中尽量不要省略结束标签，而且空元素最好写<br />而不是<br>，这样子做是保证每一个元素都被关闭（空元素在开始标签中关闭）。
  2. 使用小写标签，尽管大写也能解析，但是小写标签更被推荐。
  3. HTML标签使用的是name="value"的形式给出，属性总是在开始标签中给出，同样地，属性和属性值推荐通过小写字母给出。
  4. 元素包括开始标签，元素内容和结束标签。
  5. 默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
  6. 搜索引擎通过标题来索引网页。
  7. HTML中的所有空格和换行都会被显示为一个空格。
  8. 应当避免使用这些标签：
标签 描述
<center> 定义居中的内容。
<font> 和 <basefont> 定义 HTML 字体。
<s> 和 <strike> 定义删除线文本
<u> 定义下划线文本
属性 描述
align 定义文本的对齐方式
bgcolor 定义背景颜色
color 定义文本颜色

  1. 基于内容的样式和物理样式：物理样式严格定义了外观，比如斜体就是斜的，但是基于内容的样式仅定义了含义，具体到每个机器都可以不一样，比如<strong>标签（虽然一般都是和<b>一样，而且大家都是用CSS）

  2. 预格式标签<pre>中的内容会保留空格和换行。

  3. 总而言之有一堆格式化的东西，没事可以去查查

  4. 链接标签如果要跳转到页面内部的标签，目标标签的id属性也可以用name属性表示。

  5. 如果访问的链接地址是一个文件夹，在url末尾加上/或许能提升性能。（不让会请求两次，见这里）

  6. 关于链接的“跳出框架”

在网页开发中，<iframe>（内联框架）是一个HTML标签，它可以在一个网页内部嵌入另一个独立的网页。就像一个“画中画”。有时候，如果你在一个被嵌套在<iframe>里的网页上点击链接，默认情况下，这个新链接的内容会在同一个<iframe>这个小框里打开，这可能会导致用户体验很差（比如页面看起来被禁锢了）。
​​“跳出框架”在这里就是指：让链接跳出这个小框框，在整个浏览器窗口（或新标签页）中打开。​​
​​如何实现？​​
通过给链接的 target属性设置特定的值：
target="_top"：在当前窗口的顶级框架（即跳出所有嵌套的框架）中打开。
target="_parent"：在父框架中打开（跳出一层框架）。
target="_blank"：在一个全新的浏览器标签页中打开。

  1. 电子邮件链接：在<a>标签的href属性中，使用mailto:后跟电子邮件地址。点击这个链接，会​​自动打开用户电脑上默认的邮件客户端​​（如 Outlook、Mail 等），并自动在收件人字段填写邮箱地址。
    还可以加额外参数。

电子邮件链接

注意：应该使用%20来替换单词之间的空格，这样浏览器就可以正确地显示文本了。

  1. body标签的background属性已经弃用，应该用CSS来设置。

  2. <img /> <map> 和 <area>
    1. 关联图片与映射
    首先，用 <img> 标签插入图片，并通过 usemap 属性指定要使用的映射图名称。

<img src="workplace.jpg" alt="办公桌" usemap="#deskmap">

2. 创建映射容器
然后，用 <map> 标签创建映射，其 name 或 id 必须与 usemap 的值（去掉#）匹配。

<map name="deskmap">
  <!-- 热点区域将在这里定义 -->
</map>

3. 定义热点区域 (<area>)
在 <map> 内部，使用一个或多个 <area> 标签来定义可点击区域。以下是不同形状的示例：

  • 矩形 (shape="rect")
    coords="x1, y1, x2, y2"，其中 (x1, y1) 是矩形左上角的坐标，(x2, y2) 是右下角的坐标。

    <area shape="rect" coords="34, 44, 270, 350" alt="电脑" href="computer.html">

  • 圆形 (shape="circle")
    coords="x, y, radius"，其中 (x, y) 是圆心的坐标，radius 是圆的半径。

    <area shape="circle" coords="337, 300, 44" alt="咖啡杯" href="coffee.html">

  • 多边形 (shape="poly")
    coords="x1, y1, x2, y2, x3, y3, ..."，按顺序列出多边形每个顶点的坐标。非常适合定义不规则形状。

    <area shape="poly" coords="301, 26, 381, 50, 365, 150, 275, 155" alt="台灯" href="lamp.html">

⚠️ 重要提示和现代替代方案

  1. 坐标获取困难：手动计算像素坐标非常繁琐且不灵活。通常需要使用专门的图像映射工具（如以前的 Adobe Dreamweaver）或在线生成器来生成 coords 值。

  2. 响应式问题：图像映射最大的缺点是坐标是固定的像素值。如果图片大小随响应式布局发生变化，热点区域的位置会错位，需要借助 JavaScript 库（如 jQuery RWD Image Maps）来修正，非常麻烦。

  3. 现代替代方案：对于现代网页开发，更推荐使用 CSS 和 SVG 来实现类似效果。

    • CSS：将图片作为背景，然后在上面用绝对定位的 <a> 标签来模拟可点击区域。
    • SVG：如果图片是矢量图，使用 SVG 的 <a> 标签包裹图形元素来创建热点，这是最灵活且响应式友好的方式。

总结：
虽然 <map> 和 <area> 标签仍然有效且被浏览器支持，但由于其固有的响应式问题，在现代网页开发中已较少使用。了解它的概念是很有价值的，但在实际项目中，建议优先考虑基于 CSS 或 SVG 的更灵活的解决方案。

  1. table的border、frame属性也弃用了。

  2. 正如您看到的，其中一个单元没有边框。这是因为它是空的。在该单元中插入一个空格后，仍然没有边框。

这是老浏览器，新的现代浏览器会显示边框。

  1. col和colgroup可以设置某几列的样式，看这里。

明天从“HTMLID”看起。

2025.10.11 打卡

  1. class和id都是大小写敏感的，同一个HTML页面中ID是唯一的。

  2. iframe的width和height属性并没有被弃用，但是也可以用CSS来实现。

  3. iframe设置name="demo"之后<a>的target="demo"理论上可以在iframe里面打开新页面，但是实际上请求会被拒绝。

简单来说，就是我的网站和目标网站不同源，然后为了安全，防止iframe里面的网站窃取数据，浏览器会拒绝这个请求。

  1. script 定义客户端脚本；nonscript为不支持脚本的用户定义替代内容（没有JS的时候显示的）。

  2. HTML中，/表示网站根目录，本地就是项目根目录。如果打开当前目录的地址，不要加/。

  3. head中的title元素：

  • 定义浏览器工具栏中的标题
  • 提供页面被添加到收藏夹时显示的标题
  • 显示在搜索引擎结果中的页面标题
  1. <base>标签为页面上的所有链接规定默认地址或默认目标（target）。
<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>
  1. <meta>标签的作用。

8.1. 字符集声明：<meta charset="utf-8">
8.2. 实现响应式布局：<meta name="viewport" content="width=device-width, initial-scale=1.0">
8.3. 搜索引擎优化（SEO优化）:

<!-- 页面描述，通常会显示在搜索引擎结果页的标题下方 -->
<meta name="description" content="这是一个关于前端开发中meta标签作用的精彩说明页面。">

<!-- 页面关键词 (现代搜索引擎已大幅降低其权重，但仍可提供) -->
<meta name="keywords" content="meta标签, 前端开发, SEO, viewport, 字符编码">

<!-- 注明页面作者 -->
<meta name="author" content="Your Name">

8.4. 社交媒体富媒体预览：当你在微信、Twitter、LinkedIn、Facebook 等分享链接时，这些平台会抓取特定的 标签来生成漂亮的“卡片”式预览，而不是干巴巴的链接。
​​Open Graph (由Facebook发起，已成为行业标准)​​

<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page.html">

​​Twitter Cards​​

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="页面标题">
<meta name="twitter:description" content="页面描述">
<meta name: "twitter:image" content="https://example.com/image.jpg">

注意：每个 meta 元素只能用于一种用途。如果想要使用的特性不止一个，那就应该在 head 元素中添加多个 meta 元素。

  1. 响应式开发可以用现成的CSS框架来实现，比如Bootstrap。

  2. <kbd>,<code>,<samp>都会忽略多余的空格和换行，如果要显示，要用<pre>。

好像用code包pre和pre包code都可以。

  1. 请始终定义图像尺寸。这样做会减少闪烁，因为浏览器会在图像加载之前为图像预留空间。

  2. 等号两侧不推荐有空格

  3. 避免一行代码超过80个字符

  4. HTML里面的转义字符叫做字符实体。

  5. &#数字;可以显示unicode字符。

  6. frame已经弃用，别管他了。

  7. URL编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。

URL 不能包含空格。URL 编码通常使用 + 来替换空格。

  1. fieldset可以用来组合表单元素

  2. 包含敏感信息的表单应该用post方法发送。

  3. form的autocomplete属性：启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。注意他不是布尔属性，而且还有高级的属性值，比如密码箱之类的。

  4. form的novalidate：关闭自动验证，指浏览器会自己检测必填项，或者邮箱地址符不符合规范之类的。

10.12 打卡

  1. <label> 标签可以为 <input> 元素提供注解，感觉主要作用就是你写了一个复选框，但是这个框很小，你把文本内容放进一个 <label> ，这样你点击文本，就可以选中这个框。感觉没啥大用，但是尽量还是写上吧。（省略是“糟糕”的做法）

  2. Canvas是位图画布，SVG是矢量图画布，HTML中可以使用它们来绘制图形，后面学会CSS和JS再来看看吧。

  3. <embed> 废弃了，<object> 可以用嵌入pdf文件阅读器，但是先不用细究。

  4. 现在播放音频：<audio>，播放视频：<video>。

  5. 还可以页面内播放youtube或者bilibili之类的，但是可能要看具体的api。（用<iframe>播放）

  6. HTML API 在学完JS之后再回来看就行。

明天从CSS开始看！

posted @ 2025-10-10 21:36  Zlc晨鑫  阅读(11)  评论(0)    收藏  举报