HTML5基础知识学习笔记

共计 2069 个字符，预计需要花费 6 分钟才能阅读完成。

一个网页由哪些部分组成（网页标准）？

• 内容（骨骼）- HTML
• 样式（皮肤）- CSS
• 行为（动作）- JavaScript

HTML+CSS= 植物人，HTML+CSS+JavaScript= 人。

HTML 开发者平时用的最多的网站 MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML

HTML 的英文全称是 Hyper Text Markup Language，即超文本标记语言，超文本可以是图片、标题、链接、表格等等。

HTML 语法

• 标签和属性不区分大小写，推荐 小写
• 空标签可以不闭合，比如 input、meta
• 属性值推荐用 双引号 包裹
• 某些属性值可以省略，比如 required、readonly

语义化标签：

• h1-h6：语义 (含义) 标题
• p：语义 (含义) 段落
• div：没有语义

语义化标签默认的效果不重要，语义最重要！

内容划分：

• header

  • nav

• main

  • article
• aside
• footer

标题

• h1 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo
• h2~h6 没有使用次数的限制
• h1~h6 不能互相嵌套

文本格式化

为文本添加特殊格式，以 突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。

工作中建议使用 strong、em、ins、del（这些标签自带强调含义），不要使用 b、i、u、s。

超链接

作用是点击跳转到其他页面。

• 跳转到本地文件，用相对路径
• target=”_blank” 新窗口跳转页面
• href=”#” 表示空连接，不会跳转

多媒体标签

音频

<audio src="./preview.mp3" controls loop autoplay></audio>

在 HTML5 中，如果属性名和属性值完全一样，可以简写为一个单词。

• controls：显示音频控制面板
• loop：循环播放
• autoplay：自动播放（浏览器一般会禁用自动播放）

视频

<video src="./preview.mp4" controls loop muted autoplay></video>

muted：静音播放，想要自动播放，必须有 muted 属性。

列表

• 有序列表（ordered list）
  1. 无序列表（unordered）
     • 自定义列表（definition list）

     自定义列表

     dt 是自定义列表的标题，dd 是自定义列表的描述 / 详情。

     <dl>
       <dt> 服务中心 </dt>
       <dd> 申请售后 </dd>
       <dd> 联系方式 </dd>
     </dl>

     表格

     <table border="1">
       <tr>
         <th> 姓名 </th>
         <th> 语文 </th>
         <th> 数学 </th>
       </tr>
       <tr>
         <td> 张三 </td>
         <td>100</td>
         <td>120</td>
       </tr>
       <tr>
         <td> 总结 </td>
         <td> 班级第一 </td>
         <td> 全市第一 </td>
       </tr>
     </table>

     tr：行，th：表头单元格，td：内容单元格。

     表格结构标签

     用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰，了解即可，一般不用。

     <table border="1">
       <caption>
         表格标题
       </caption>
       <thead>
         <tr>
           <th> 姓名 </th>
           <th> 语文 </th>
           <th> 数学 </th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td> 张三 </td>
           <td>100</td>
           <td>120</td>
         </tr>
       </tbody>
       <tfoot>
         <tr>
           <td> 总结 </td>
           <td> 班级第一 </td>
           <td> 全市第一 </td>
         </tr>
       </tfoot>
     </table>

     合并单元格

     rowspan：跨行合并，colspan：跨列合并。

     <table border="1">
       <thead>
         <tr>
           <th> 姓名 </th>
           <th> 语文 </th>
           <th> 数学 </th>
           <th> 总分 </th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td> 张三 </td>
           <td>100</td>
           <td rowspan="2">120</td>
           <td>220</td>
         </tr>
         <tr>
           <td> 李四 </td>
           <td>101</td>
           <!-- <td>120</td> -->
           <td>221</td>
         </tr>
       </tbody>
       <tfoot>
         <tr>
           <td> 总结 </td>
           <td> 班级第一 </td>
           <td colspan="2"> 全市第一 </td>
           <!-- <td> 全市第一 </td> -->
         </tr>
       </tfoot>
     </table>

     字符实体

     作用是在网页中显示预留字符。

     • 空格： 
     • 小于号：<
     • 大于号：>

     字符实体官方列表：https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references

     input

     list 属性

     <input list="countries" />
     <datalist id="countries">
       <option>USA</option>
       <option>Canada</option>
       <option>Mexico</option>
     </datalist>