HTML5基础知识学习笔记

共计 2081 个字符，预计需要花费 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：没有语义，span 标签也是没有语义

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

内容划分：

• 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）
• 无序列表（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>