2. 关于HTML的一些知识

2017-06-27 本文已影响0人 Joey的企鹅

HTML、XML、XHTML 的区别

HTML：超文本标记语言（HyperText Markup Language）是一种用于创建网页的标准标记语言。这是一种基础技术，常与CSS、JavaScript一起用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。是语法较为松散的、不严格的Web语言。
XML：可扩展标记语言。主要用于存储数据和结构，语法较为严谨。
XHTML：可扩展超文本标记语言，基于XML，作用与HTML类似，但语法更严格。

语义化HTML是一种编写HTML的方式。选择合适的标签、使用合理的代码结构，便于开发者阅读，同时让浏览器和机器很好地解析。
语义化的好处：

清晰的页面结构：样式去掉或丢失的时候，也能让页面呈现清晰的结构，增强页面的可读性。
支持更多的设备：屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。如果你使用的含语义的标记，屏幕阅读器会根据你的标签来判断网页的内容，而不是一个字母一个字母的拼写出来。
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。
便于团队开发和维护：在团队中大家都遵循同一个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。

Html指的是结构；CSS指的是样式；JavaScript指的是行为。
写 HTML 的时候先不管样式, 重点放在HTML的结构和语义化上，让 HTML 能体现页面结构或者内容。
用CSS设置样式，减少 HTML 与 CSS 契合度（即内容与样式分离）
写 JS 的时候，尽量不要用 JS 去直接操作样式，而是通过给元素添加删除class来控制样式变化（即行为分离）。
这样做的优点
分离原则下，大部分页面代码写在了CSS中，页面体积容量变得更小、代码更加简洁，使得浏览器加载速度更快。
修改页面时避免了破坏页面架构和样式，更加效率、省事。
在不同的浏览器下现实的效果统一。
更好地被搜索引擎收录。基于内容与样式分离的原则，html的语义化就是首要考虑的,网页中语义化的标签代码就会更加适合搜索引擎。

指定字符集
<meta charset="utf-8">
向搜索引擎说明你的网页的关键词
<meta name="keywords" content="">
告诉搜索引擎你的站点的主要内容
<meta name="description" content="">
告诉搜索引擎你的站点的制作的作者
<meta name="author" content="your name">
渲染方式
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
如果浏览器用的是IE内核，用最新的edge去渲染，如果用的是chrome内核，用chrome去渲染。
移动端展示
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" >

DOCTYPE是docunment type（文档定义）的简写，用来说明web设计中所用的html或xhtml的类型，指出浏览器或者其他阅读程序按照什么样的规则集去解释文档中的标记。

在严格模式中，浏览器以其支持的最高标准呈现页面。
在混杂模式中，又称怪异模式或兼容模式，浏览器用自己的方式解析代码，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。

它是html5标准网页声明,告诉浏览器用最新的 HTML5标准来解析渲染页面。

Internet explorer 使用的是Trident
Firefox使用的是Gecko。
Safari和Chrome使用的是WebKit，还有国产的大部分双核浏览器其中一核就是WebKit。

标签	应用场景
`<html>`	HTML 页面的根元素
`<head>`	用于定义文档的头部
`<body>`	用于定义文档的内容
`<h1>`	标题（大小随数字变化）
`<p>`	段落
`<a herf="xxx" target="_blank" title="xxx">`	链接
`![](x)`	图片
`<strong>`	加重文本
`<em>`	强调文本
`<br>`	换行
`<ul>`	无序列表
`<ol>`	有序列表
`<table>`	表格
`<tr>`	表格中的行
`<td>`	表格中的列
`<th>`	表格的表头
`<button>`	按钮
`<b>`	加粗
`<iframe>`	嵌入平面

网址插入：
<a href="http://xxxx.com" target="_blank" title="xxx">名称</a>
跳转：
<a href="#xxxx">名称</a> + <p id="xxxx">名称</p>
图片插入：
![](x)
划分区块：
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div>
无序列表：
<ul class="nav"><li>xxxxx</li></ul>
注：ul的直接子元素是li
有序列表
<ol><li>xxxxx</li></ol>
展示一系列“标题+内容”的场景
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容2.1</dd> <dd>内容2.2</dd> <dt>标题3</dt> <dd>内容3</dd> </dl>
按钮：
<button>名称</button>
表格
<table> <tr> <th>表头1</th> <th>表头2</th> </tr> <tr> <td>数据</td> <td>数据</td> </tr> <tr> <td>数据</td> <td>数据</td> </tr> </table>