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 篇文章。

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