2. HTML知识点汇总

2017-04-09 本文已影响0人石林涛

HTML、XML、XHTML 的区别：

HTML，超文本标记语言，是语法较为松散的、不严格的Web语言。

XML，可扩展标记语言，主要用于存储数据和结构。

XHTML，可扩展超文本标记语言，基于XML，作用与HTML类似，但语法更严格。

HTML 语义化

语义化 HTML 就是选择合适的标签、使用合理的代码结构来编写HTML的方式，使代码更具可读性，也使得浏览器的爬虫和机器能对代码更好地解析。

要实现HTML的语义化，就要求开发者掌握常用的HTML标签，理解各种标签所代表的含义，在不同的场景能使用合适的标签，尽量不使用没有语义信息的标签。

语义化带来的是更清晰的页面结构，使页面可读性更强；更清晰的代码结构，更利于开发团队的开发和维护；更好的适应性，可以支持更多的设备的不同表现形式；与机器更良好的沟通，使浏览器更容易渲染表现，也使搜索引擎更容易获取有效信息。

内容与样式分离的原则

写 HTML 的时候不管样式, 重点在HTML的结构和语义化上，让 HTML 能体现页面结构或者内容。之后再去用CSS写样式。

HTML 内不允许出现属性样式，尽量不要出现行内样式。

页面展现的所有样式，都由CSS来负责实现。

写 JS 的时候，尽量不要用 JS 去直接操作样式，而是通过给元素添加删除class来控制样式变化。

CSS与HTML分离的优点：

使页面载入得更快由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小，相对于表格嵌套的方式的逐层加载速度快。
修改设计时更有效率在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式，而表格布局则更不省事。
保持视觉的一致性

DIV+CSS最重要的优势之一是保持视觉的一致性，以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。

更好地被搜索引擎兼容

由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中代码更加适合搜索引擎。

对浏览者和浏览器更具亲和力

由于CSS富含丰富的样式，使页面更加灵活性，更加的美观，它可以根据不同的浏览器，而达到显示效果的统一和不变形。

常见的meta标签

<meta charest="UTF-8">编码格式为UTF-8，避免乱码
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 让浏览器指定内核解析，解决兼容性
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> 适应移动端，同时初值宽度为原始，用户不可调整宽度
<meta name="keywords" content=""> keywords用来告诉搜索引擎你网页的关键字是什么。

举例：<metaname="keywords" content="science,education,culture,politics,ecnomics，relationships,entertaiment,human">
<meta name="description" content="">description (网站内容描述),用来告诉搜索引擎你的网站主要内容。
举例：<metaname="description"content="Thispageisaboutthemeaningofscience,education,culture.">

文档声明

文档声明的作用是告诉浏览器用何种方式渲染页面。

严格模式是指用doctype告诉浏览器用何种方式渲染页面；

混杂模式是指不用doctype告诉浏览器，让其自行解析渲染。

<!doctype html>是指告诉浏览器用最新的html5规范渲染页面。

浏览器乱码

浏览器出现乱码一般是由于在制作页面时使用非英文字符时，保存的编码格式与浏览器解析时的解码格式不匹配造成的。

为了解决这个问题，就要在页面保存时就在HTML的<head>里添加<meta charset="">来声明编码格式，来告诉浏览器应该用什么解码格式来解码。例如使用UTF-8来编码的页面，添加<meta charset="utf-8">来告诉浏览器使用UTF-8格式来解码，就不会出现乱码了。

常见浏览器及其内核

常见浏览器有IE、Google Chrome、Safari、opera、Firefox等，还有360安全浏览器、搜狗浏览器、QQ浏览器、猎豹安全浏览器等国内浏览器。

Trident(IE内核)：IE浏览器，很多国内浏览器，以及很多双核浏览器的其中“一核”都是Trident。
Gecko：FireFox浏览器等。
Webkit：Chrome浏览器，Safari浏览器等。
Chromium/Blink：Chromium fork 自开源引擎 WebKit，却把 WebKit 的代码梳理得可读性提高很多，Chrome浏览器就使用Chromium内核，搜狗、360、QQ浏览器等等双核浏览器的一核都是Chromium。2013年谷歌宣布 Chromium 项目中研发 Blink 渲染引擎，内置于 Chrome 浏览器之中。
Presto：Opera浏览器先前使用的内核，Opera 在 2013 年 2 月宣布放弃 Presto后使用 WebKit 分支的 Chromium 引擎作为自家浏览器核心引擎，在 Chrome 推出 Blink 引擎之后，Opera也转而使用Blink 作为浏览器核心引擎。

目前移动端系统内置浏览器的内核， iOS 平台主要是 WebKit，

Android 4.4 之前的系统浏览器内核是 WebKit；Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分支 Blink；Windows Phone 8 系统浏览器内核则是 Trident。

HTML常见标签及场景

<h1-6></h>标题标签，数字1到6代表了6个等级的标题，数字越小代表嵌套在里面的文本像素越大
<p></p>段落标签，用来存放一段或几段文字
<div></div>块级标签，通常用来标记目标代码块，方便对目标区域代码进行修改。
<span></span>行内级标签，用来标记目标代码块，方便对目标区域代码进行修改。
<ul></ul><ol></ol><li></li>列表标签，ul代表无序列表，ol代表有序列表。li标签即为对应列表中的项目
<strong><em>强调标签，strong表示很重要，em表示较重要
<a></a> 锚标签，用来指向外部链接或者内部链接，其中herf属性代表所指向的url,target属性可以控制herf中的链接以什么方式打开
<img>图片链接，src属性用来存放图片的链接，title属性用于在图片出错的情况下用文字描述该图片
<iframe>标签，用于嵌入页面。src属性表示你想要嵌入页面的url，name属性可以用来控制嵌入的页面
<table><theader><tbody><tfoot><tr><th>标签为表格标签，theader表示表头，tfoot表示表尾，在tbody里面有多少个tr就表示有多少行，每个tr里面有多少个th标签就表示每一行有多少列.但一般不用thead,tbody,tfoot这些鬼东西
<dl><dt><dd>用于展示一系列 “标题：内容...”的场景 dt表示标题，dd表示内容。