jsliang 求职系列 - 39 - HTML 系列总结

一 目录

不折腾的前端，和咸鱼有什么区别

目录
一 目录
二 HTML5 标签
三 结构语义化
3.1 为什么需要语义化
3.2 结构语义化
3.3 头部
3.4 主要内容
3.5 页脚
四 层级关系
五 替换元素和不可替换元素
5.1 替换元素
5.2 不可替换元素
六 行内元素和块级元素
6.1 常见块级元素
6.2 常见行内元素
6.3 行内元素和块级元素转换
七 参考文献

二 HTML5 标签

返回目录

常见的 HTML5 标签有：

• <section> - 章节
• <nav> - 导航
• <article> - 完整独立内容块
• <aside> - 和页面内容关联度较低的内容：例如广告（剩余的）
• <header> - 页面或者文章头部
• <footer> - 页面或者文字尾部
• <main> - 文档主要内容
• <figure> - 一个和文档有关的图例
• <figcaption> - 图例说明
• <mark> - 需要被高亮的引用文字
• <video> - 视频
• <audio> - 音频
• <source> - 为 video 和 audio 指定 媒体源
• <track> - 为 video 和 audio 指定 文本轨道（字幕）
• <canvas> - 位图区域
• <svg> - 矢量图
• <progress> - 进度条
• <meter> - 滑动条

三 结构语义化

返回目录

HTML 有个光荣的任务：

• 在没有 CSS 的情况下，能够清晰的、有结构地表述这个页面的内容。

所以，构建一个页面结构，需要充分考虑到语义化。

3.1 为什么需要语义化

返回目录

• 易修改、易维护
• 无障碍阅读支持
• 搜索引擎良好，利于 SEO
• 面向未来的 HTML，浏览器在未来可能提供更丰富的支持

3.2 结构语义化

返回目录

<!-- 头部 -->
<header>
  <nav></nav>
</header>

<!-- 内容区 -->
<main>
  <!-- 左侧 -->
  <article>
    <!-- 左侧标题 -->
    <header></header>
    <!-- 图片区块 -->
    <figure>
      <img>
      <figcaption></figcaption>
    </figure>
  </article>

  <!-- 右侧 -->
  <aside>
    <!-- 友情链接 -->
    <nav></nav>
    <section></section>
  </aside>
</main>

<!-- 底部 -->
<footer></footer>

3.3 头部

返回目录

<header> 用来表示网页的头部。

头部信息区可以包含 <nav> 导航栏等内容信息。

3.4 主要内容

返回目录

<main> 用来规定出 <header>、<footer> 外的所有内容：

• <aside>：可以存放广告、搜索内容、分享链接等
• <section>：表单、清单、文章分块等内容
• <article>：表示一个完整的、自成一体的内容块。如文章或者新闻报道。
• <figure>：文章插图块
• <figcaption>：文章插图注释

3.5 页脚

返回目录

<footer> 标签内部可以包含版权、来源信息、法律限制等文本或者链接信息。

四 层级关系

返回目录

docoment、window、html、body 的层级关系：

window > document > html > body

• window 是 BOM 的核心对象，它一方面用来获取和设置浏览器的属性和行为，另一方面作为一个全局对象。
• document 对象是一个跟文档相关的对象，拥有一些操作文档内容的功能，但是地位没有 window 高。
• html 元素对象跟 document 元素对象是属于 html 文档的 DOM 对象，可以认为就是 html 源代码中那些标签化成的对象，它们跟 div、select 这些对象没有什么根本区别。

五 替换元素和不可替换元素

返回目录

<input> 和 <img> 虽然是行内元素，但是它们是可以设置宽和高的，因为它们涉及到可替换元素和不可替换元素。

5.1 替换元素

返回目录

替换元素 就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

例如：

• <img> 根据 src 属性来读取图片信息并显示出来
• <input> 根据标签的 type 属性来决定是显示输入框，还是单选按钮。

替换元素有：<img>、<input>、<textarea>、<select>、<object>。

5.2 不可替换元素

返回目录

HTML 大多数元素都是不可替换的，即其内容直接展现给浏览器。

例如：

• <p> 直接全部展示

六 行内元素和块级元素

返回目录

整体比较：

块级元素	行内元素
独占一行。默认情况下宽度自动填充父元素宽度	宽度随元素内容变化。相邻的行内元素会排列在同一行内，直到一行排不下，才会换行。
可以设置 width、height	设置 width、height 无效
可以设置 margin 和 padding	可以设置 margin-left、margin-right、padding-left、padding-right
对应：display: block	对应 display: inline

6.1 常见块级元素

返回目录

• <div> - 标签块
• <h1>、<h2>、<h3>、<h4>、<h5>、<h6> - 标题 1 - 标题 6
• <form> - 表单
• <hr> - 水平线
• <ul> - 无序列表
• <ol> - 有序列表
• <li> - 定义列表项目，用于 ul 和 li 中
• <p> - 段落
• <table>、<thead>、<tbody>、<thead>、<th>、<tr>、<td> - 表格元素

6.2 常见行内元素

返回目录

• <a> - 超链接或者锚点
• <b> - 字体加粗
• <br> - 换行
• <code> - 定义计算机代码文本
• <i> - 斜体
• <img> - 图片
• <input> - 输入框
• <label> - 为 input 进行标记/标注
• <button> - 按钮
• <textarea> - 多行文本框

6.3 行内元素和块级元素转换

返回目录

display 属性可以使行内元素和块级元素之间转换。

• display: inline - 转换为行内元素
• display: block - 转换为块级元素
• display: inline-block - 转换为行内块元素

七 参考文献

返回目录

本系列参考 8 篇文章。

• [x] MDN - HTML5 标签列表【阅读建议：5min】
• [x] html5语义化标签【阅读建议：5min】
• [x] 块级元素与内联元素总结【阅读建议：5min】
• [x] html中内联元素和块级元素的区别【阅读建议：5min】
• [x] MDN - HTML5 标签列表【阅读建议：5min】
• [x] html5语义化标签【阅读建议：5min】
• [x] 块级元素与内联元素总结【阅读建议：5min】
• [x] html中内联元素和块级元素的区别【阅读建议：5min】

---

jsliang 的文档库由 梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议 进行许可。<br/>基于 https://github.com/LiangJunrong/document-library 上的作品创作。<br/>本许可协议授权之外的使用权限可以从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处获得。