HTML学习日记

2025.10.10 打卡

• HTML中尽量不要省略结束标签，而且空元素最好写
  而不是
  ，这样子做是保证每一个元素都被关闭（空元素在开始标签中关闭）。
  
• 使用小写标签，尽管大写也能解析，但是小写标签更被推荐。
  
• HTML标签使用的是name="value"的形式给出，属性总是在开始标签中给出，同样地，属性和属性值推荐通过小写字母给出。
  
• 元素包括开始标签，元素内容和结束标签。
  
• 默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
  
• 搜索引擎通过标题来索引网页。
  
• HTML中的所有空格和换行都会被显示为一个空格。
  
• 应当避免使用这些标签：
  

标签描述定义居中的内容。 和 定义 HTML 字体。 和 <strike>定义删除线文本<u>定义下划线文本属性描述align定义文本的对齐方式bgcolor定义背景颜色color定义文本颜色

• 基于内容的样式和物理样式：物理样式严格定义了外观，比如斜体就是斜的，但是基于内容的样式仅定义了含义，具体到每个机器都可以不一样，比如<strong>标签（虽然一般都是和<b>一样，而且大家都是用CSS）
  
• 预格式标签中的内容会保留空格和换行。
  
• 总而言之有一堆格式化的东西，没事可以去查查
  
• 链接标签如果要跳转到页面内部的标签，目标标签的id属性也可以用name属性表示。
  
• 如果访问的链接地址是一个文件夹，在url末尾加上/或许能提升性能。（不让会请求两次，见这里）
  
• 关于链接的“跳出框架”
  

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

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

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

• body标签的background属性已经弃用，应该用CSS来设置。
  
• <img />
  <map name="deskmap">
    
  </map>和
  1. 关联图片与映射
  首先，用 <img> 标签插入图片，并通过 usemap 属性指定要使用的映射图名称。
  

1. <img src="https://www.cnblogs.com/workplace.jpg" alt="办公桌" usemap="#deskmap">

复制代码

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

1. <map name="deskmap">
2.   
3. </map>

复制代码

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

• 矩形 (shape="rect")
  coords="x1, y1, x2, y2"，其中 (x1, y1) 是矩形左上角的坐标，(x2, y2) 是右下角的坐标。
  1. [/code]
  2. [*][b]圆形 (shape="circle")[/b]
  3. coords="x, y, radius"，其中 (x, y) 是圆心的坐标，radius 是圆的半径。
  4. [code]

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

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

• 坐标获取困难：手动计算像素坐标非常繁琐且不灵活。通常需要使用专门的图像映射工具（如以前的 Adobe Dreamweaver）或在线生成器来生成 coords 值。
  
• 响应式问题：图像映射最大的缺点是坐标是固定的像素值。如果图片大小随响应式布局发生变化，热点区域的位置会错位，需要借助 JavaScript 库（如 jQuery RWD Image Maps）来修正，非常麻烦。
  
• 现代替代方案：对于现代网页开发，更推荐使用 CSS 和 SVG 来实现类似效果。
  
  
  
  • CSS：将图片作为背景，然后在上面用绝对定位的<map name="deskmap">
      
    </map>标签来模拟可点击区域。
    
  • SVG：如果图片是矢量图，使用 SVG 的<map name="deskmap">
      
    </map>标签包裹图形元素来创建热点，这是最灵活且响应式友好的方式。
    
  
  

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

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

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

  
  

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

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

明天从“HTMLID”看起。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！