一 目录
不折腾的前端,和咸鱼有什么区别
目录 |
---|
一 目录 |
二 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/ 处获得。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。