HTML 语义

html4

基本文档：html、head、body...
基本标签：h1-h6、p、br、hr、
文本格式化：strong、b、em、i、small、strong、del、sub、sup...
链接：a、link
图片：img、map、area
区块：div、span
三大列表：ul li、ol li、dl dt dd
表格：table、caption、th、tr、td、thead、tbody、tfoot
框架：iframe
表格：form、input、select、option、textarea、button、label
实体：&It、&gt、&copy、&nbsp...

什么叫语义化

指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化），便于开发者阅读，维护和写出更优雅的代码和同时，让浏览器和爬虫和辅助技术更好解析。通俗理解：用正确的标签做正确的事

语义化的好处

利于 seo 优化（也就是搜索引擎和抓取，搜索引擎的爬虫也依赖于标记来确定上下文和各大关键字的权重）
在样式丢失的时候，还是可以比较好的呈现结构
更好的支持各种终端，例如无障碍阅读和有声小说等；
利于团队开发和维护，W3C 给我们定了一个标准，那么团队中遵循这个标准，那么代码的差异就会搜小，在开发和维护的时候就可以提高效率

学会如何写出更优的 html

结构搭建上
代码校验
良好的代码排版
语义化设计
布局规范
标签嵌套规范
网站代码优化

结构搭建上

采用 HTML5 标准时开头应该加上
应在 head 标签中引入 css 文件，这样浏览器就可以在输出 HTML 之前获取 CSS 信息
在 body 标签的末尾引入 js 文件，这样可以在页面显示之后再编译 js 文件，以加快页面读取速度，同时有助于 hs 对页面中的元素进行操作
对元素的操作应添加在 js 代码中，而不是在 html 添加，后期难以维护

代码校验

在项目中加入校验过程：可以在代码编辑器中使用 HTMLHint，SublimeLinter 这类代码校验插件，也可以在 build 的时候使用 HTMLHint with Grunt 这类校验工具，还可以通过 W3C HTML validato 等网站在线检测代码
尽量采用 HTML5 标准
确保正确的 HTML 层级：嵌套元素时确保元素首尾完整，在一个有大量内容的元素的结束标签后应添加注释，这样有助于后期 debug，特别是在使用模板的时候；
在所有不能自动化结束的元素末尾添加结束标签
li 结束标签不是必须的，所以有些人认为可以不写 li，这可以接受，但是 ul 和 ol 标签一定要加
video 和 audio 元素必须要有结束标签

良好的代码排版

在项目中保持统一的 HTML 代码风格
使用代码编辑器来帮助你自动排版，比如 Sublime Text 中使用自带 Reindent，也可以找一些排版工具来帮助你。同样的可以使用一些在线工具；比如 Beautifier 和 JS Beautifier
在 HTML 中缩进来分层更易于阅读，如果代码编辑器没有自动缩进功能可以自行修改相应设置。当你发现 HTML 层级更深的时候，那就表示你需要重构一下你的 HTML 了
用更直接易读的方式写 HTML 代码，注意标签的相互嵌套关系
元素要按照常规放置，比如 footer 元素最好是放在 html 页面底部，虽然理论上它放在任何位置都可以正常运行

语义化设计

标签使用 h1-h6，列表使用 ul 或者 ol
在适当的地方使用 html5 的新元素，比如 header、footer、nav、aside
正文中的文本内容要用 p 标签，内容的结构化可以使用 html 的新元素（或 div）
修改文本样式时，em 和 strong 要比 i 和 b 更好些，因为前者语义化明显
form 中包含 label 元素，input 要有 type，placeholder 以及其他必要的属性，即使值为空都可以
尽量减少无意义标签，例如 span 和 div
尽量减少使用标签本身的 css 属性，例如 b、font、s 等标签，如果需要这些样式、那么使用 css 样式进行添加。
在需要强调的部门，使用 strong、em，但是样式尽量使用 css 样式来描述
使用表格时，标题用 caption，表头用 th，单元格用 td。
列表搭建时，使用<ul>无序列表<ul>``<ol>有序列表<ol>``<dl>自定义列表
每个 input 标签对应的说明文本都需要使用 label 标签，并且通过 input 设置 id 属性，在 lable 标签中设置 for = id 来说明文本和相对应的 input 关联起来，或者直接在 label 中内嵌控件。

布局规范

p 元素来放大文字，而不是用来布局。在浏览器自身样式中默认 p 有 margin 和其它样式
想实现换行可以使用 block 元素或者 css 的 display 属性，尽量避免使用 br 来换行。文字内容中的换行可以用 br，但是通常很少这样用。
不要滥用 div，w3c 对 div 的描述是这样的：当没有其他元素可用时才能使用 div，如果想让 link 和 img 这类元素能够在结尾换行，可以在样式中添加 display:block, 这样要比把他们放进 div 或者使用 br 换行要好很多
必须知道哪些是块级元素，这样就可以避免把块级元素放在 div 里面，比如列表就不需要放在 div 里面

布局规范

table 是用来放在表格数据中，不是用来布局的
flex box 现在越来越流行，学一学没有坏处
盒模型一定要掌握，必须知道什么时候用 padding，什么时候该用 margin；是 top 和 left
使用 margin 的规则：通常情况下，margin 都是添加元素的 bottom 和 right，有时，也可以是 top 或者 left。无论如何，尽量避免同时在 bottom 和 top 或者 right 和 left 添加 margin，可以用 last-of-type 选择器来去掉最后一个子元素的 margin

标签嵌套规范

块元素可以包含内联元素或某些块元素，但是内联元素却不能包含元素，它只能包含其它的内联元素
- <div><h1></h1><p></p><div> ✅
- <a herf='#'><span></span></a> ✅
- <span><div></div></span> ❌
块级元素不能放在 p 里面
- <p><ol><li></li></ol></p> ❎
- <p><div></div></p> ❎
有几个特殊的块级元素只能包含内嵌元素，不能包含块级元素
这几个特殊的标签是：h1-h6 p dt
ul,li/ol,li/dl,dt,dd 拥有父子级关系的标签；ul、ol 一下只能更 li,dl 下只能跟 dt,dd
a 里面不能嵌套 a 标签

网站代码优化

要多为用户考虑，不同的设备条件、使用环境以及输入法等都会给你的 HTML 带来不同的体验

网页的 title，keyword，descrption 一定要写，要精简全面
网页使用语义化代码
a 标签设置 title 属性；外部链接还要设置 rel 属性 --rel='nofollow',nofollow 值会使得网络爬虫不顺着链接爬出
所有的标题使用 h1 标签，样式可以使用 css 设置
br 标签只能用于文本换行
table 一定要使用 caption 设置表格题目
strong 用来设置重标，em 设置斜体
img 标签一定要设置其 alt 属性

html 及拓展

DOCTYPE

文档声明
声明帮助浏览器正确地显示网页
定义这个文档的类型，浏览器会先识别这句话，会按照这个类型去解析这个文档
HTML 也要多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全地显示 HTML 页面
一般高版本兼容低版本，所以工作中默认写高版本就可以了 (HTML5 文档声明）
文档声明不区分大小写
文档声明必须放在第一行（因为浏览器是从上到下解析的）
必须写文档声明，如果不写就会发生怪异事件
文档声明不是一个标签，它只是一个申明

meta meta: 元信息，该标签提供关于 HTML 文档的元数据。元数不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

html

<meta charset='UTF-8'/> 申明编码
<meta name="keword" content=""/> 页面关键词
<meta name="decrption" content=""/> 页面描述
<meta charset='viewport' content="width=devie-width,intial-scale==1"/> 视口-移动设备
<meta name="author" content="author name"/> 定义作者
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 使用ie最新版本

1
2
3
4
5
6

HTML Entity 在编写 HTML 页面时，需要用到"<"、">"、"空格"等符号，直接输入这些符号时，会错误的把它们与标记混在一起，非常不利于编码。那么需要把这些字符进行转义，以另一种方式书写，以及相同的形式展现。

在 HTML 中，这些字符可称为 HTML Entity, 即 HTML 字符实体。
一个 HTML Entity 都含有 2 种转义格式：Entity Name 和 Entity Number

作用：

显示 HTML 保留字符，如<、>、&、"等（联想到防御 XSS 攻击）
表示给定的字符编号可能无法表示文档集的其他字符，如 ASCII 编码想显示中文，使用水表示“水”

Entity Name 格式：&entityName

说明："&"开头，";"结尾以语义的形式描述字符。如字符"<", 英文名称为"less than",Entity Name 为"&It", 取自"less than"2 个字母的首字母

Entity Number 格式化：&#entityNumber;

说明："&#开头"，";"结尾，以编号的形式描述字符。此编号可以为十进制或者十六进制，以 (&#x) 开头数字格式

SVG 矢量图形

SVG 指可伸缩矢量图
SVG 用来定义网格的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 何 XSL 之类的 W3C 是一整体

SVG 优势与其他图像格式想必（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索，索引，脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下放大

浏览器支持

ie9+ ,firefox,opera,chrome,safari 支持内联 svg

svg 使用把 svg 直接嵌入 HTML 页面

svg 代码以 svg 元素开发，包括 svg 和关闭</svg>。这是根元素。 width 和 height 属性可设置此 svg 文档的宽度和高度。 version 属性可定义所使用的 svg 版本，xmIns 属性可定义 SVG 命名空间 stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 5px，黑边框 fill 填充的颜色

HTML 语义 #

html4 #

什么叫语义化 #

语义化的好处 #

学会如何写出更优的 html #

结构搭建上 #

代码校验 #

良好的代码排版 #

语义化设计 #

布局规范 #

布局规范 #

标签嵌套规范 #

网站代码优化 #

html 及拓展 #

HTML 语义

html4

什么叫语义化

语义化的好处

学会如何写出更优的 html

结构搭建上

代码校验

良好的代码排版

语义化设计

布局规范

布局规范

标签嵌套规范

网站代码优化

html 及拓展