HTML5权威指南笔记（一）

￡神魔★判官ぃ 2022-07-14 04:12 236阅读 0赞

# HTML5权威指南笔记（一） #

今天的笔记主要内容有：1、元素选用原则。2、元数据元素说明文档。3：link元素。4：注音符号。5：自定义列表。6：使用插图。

在开始今天的总结之前，先讲一下我个人的一个收获：*之前我做一个页面的想法是，div是万能的，做什么都是用div来做；今天发现，我的思路彻底错了：对于div的使用要慎重，优先考虑具有语义重要性的元素，万不得已不要使用div。*

*  元素的选用原则  
    \-问问自己打算如何发挥一个元素的语义作用，如果不能马上答出就不用这个元素。  
    \-不要误用元素，只宜将元素用于它们原定的用途，如果找不到就是用通用（如span或者div）。  
    \-具体为佳，如果已有元素能恰当表明内容的类型，就不使用通用元素。  
    \-对用户不要想当然。
 *  元数据元素说明文档
    
    \-base元素：用来设置一个基准的URL，让HTML文档中的相对链接在此基础上进行解析。  
    \*1、使用href属性：指定基准URL，不指定时以当前文档的URL为基准。  
    \*2、target属性：告诉浏览器该如何打开URL。
    
    \-meta元素：指定文档的各类元数据。

<table> 
 <thead> 
  <tr> 
   <th>元数据名称</th> 
   <th align="center">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>application name</td> 
   <td align="center">当前页面所属web应用系统的名称</td> 
  </tr> 
  <tr> 
   <td>auther</td> 
   <td align="center">当前页面的作者名</td> 
  </tr> 
  <tr> 
   <td>description</td> 
   <td align="center">当前页面的说明</td> 
  </tr> 
  <tr> 
   <td>generator</td> 
   <td align="center">用来生成HTML的软件名称</td> 
  </tr> 
  <tr> 
   <td>keywords</td> 
   <td align="center">一批以逗号分开的字符串，用来描述页面的内容</td> 
  </tr> 
 </tbody> 
</table>

meta的另一种用途为声明页面所用的字符编码。  
meta的最后一种用途是模拟http标头字段。  
***http-equiv：属性的用途是指定所要模拟的标头字段名称，字段值则由content属性指定。下面这段代码的作用是间隔五秒刷新，若在刷新时间间隔值后面加分号再加上一个URL，那么浏览器会在指定时间后跳转到指定的URL。***

*  link元素
 *  link元素可以为页面定义网站标志。  
    ![网站标志][20161126203219815]

\-link元素可以预先获取资源。

当前页面加载时，要求加载page2.com，为用户打开这个页面做准备。

*  注音符号
 *  ruby /rt /rp元素帮助读者掌握文字的正确发音的符号，位于这些文字的上方或右方。

浏览器支持注音符号效果：  
![注音1][1]

浏览器不支持注音符号效果：  
![注音2][2]

*  自定义列表  
    \-有序列表中，将li标签的value值赋值为几，便从几开始排序。

![排序][20161126205303059]  
更为复杂的ul自定义排序，会在以后的笔记中总结。

*  使用插图 figure
 *  figure(插图):一个独立的单元，可带标题。figcaption元素即为标题。

<figure>
        <figcaption>这是插图标题 figcaption </figcaption>
        <p>这里是插图figure的内容。</p>
    </figure>

![figure][]

[20161126203219815]: /images/20220714/6c7045c7688f49609b3881da97f81863.png
[1]: /images/20220714/74f74ed1bb9842b49bb8eac8694526af.png
[2]: /images/20220714/b97ff1487a574caf93438b1c3bf5df38.png
[20161126205303059]: /images/20220714/edca24acad0e4d76bfa6bd316973dfe8.png
[figure]: /images/20220714/e4d878338a6c41b2a7dba7ec493413d3.png