共计 2758 个字符，预计需要花费 7 分钟才能阅读完成。
一 目录
不折腾的前端，和咸鱼有什么区别
| 目录 |
|---|
| 一 目录 |
| 二 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 > bodywindow是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/ 处取得。
