HTML学习笔记1

1.常见浏览器及其内核

1.1 浏览器内核

浏览器内核又可以分成两部分：渲染引擎(Rendering Engine)和JavaScript引擎

渲染引擎：它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后输出到显示设备上

JavaScript引擎：负责解析并执行 JavaScript 语言来实现网页的动态效果

1.2 主流浏览器及其内核分类

Trident：IE内核

Gecko：FireFox内核

Presto：Opera原内核(现为Blink)

Webkit：Safari、Chrome内核(现在Chrome是Blink内核，是Webkit的分支)

EdgeHTML：Edge浏览器内核

浏览器的内核不同，他们工作原理、解析也就不同，显示就会有差别

2.Web标准

2.1 Web标准的概念

Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面

1. 结构标准：结构用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分

2. 样式标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS

3. 行为标准：行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分

主要体现在：HTML标签闭合、标签小写、不乱嵌套、页面结构编写符合语义化、使用外链 css 和 js 脚本、结构行为表现的分离等

2.2 Web标准的好处

1. 让Web的发展前景更广阔
2. 内容能被更广泛的设备访问
3. 更容易被搜寻引擎搜索
4. 降低网站流量费用
5. 使网站更易于维护
6. 提高页面浏览速度

3.文档类型

3.1 定义

标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用

标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能将该网页作为有效的XHTML文档，并按指定的文档类型进行解析

3.2 HTML5的DOCTYPE

HTML5只需要写 即可，因为HTML5 不基于 SGML(标准通用标记语言)，因此不需要对 DTD 进行引用，但是需要 DOCTYPE 来规范浏览器的行为（让浏览器按照它们应该的方式来运行）

4.字符集

GB2312 简单中文 包括6763个汉字

BIG5 繁体中文 港澳台等用

GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312

UTF-8则包含全世界所有国家需要用到的字符

5.HTML骨架结构(以HTML5为例)

6.HTML常用标签

6.1 常用的语义化标签

1. 标题标签

、
、
、
、
和

2. 段落标签

  文本内容  

3. 文本格式化标签

加粗强调 斜体强调 删除 插入

4. 列表

无序列表 
有序列表 以上二者中的每一项都是

自定义列表 
是每一项的标题 
是每一项的内容

6.2 常用的功能性标签

1. 图像标签

2. 链接标签

文本或图像
target属性取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式

3. 表格标签

表格中一般都可以忽略
可以使用colspan属性跨列合并 rowspan属性跨行合并

6.3 表单

1. input控件

单行文本输入框
密码输入框
单选框
复选框
按钮
提交按钮
重置按钮
文件域

2. textarea控件

       文本内容

3. 下拉菜单

        选项1
        选项2
        选项3
       ...

4. 普通按钮button

按钮文字

5. 表单域

       各种表单控件

7.HTML语义化的优势

（1）HTML 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；

（2）即使在没有样式 CSS 的情况下也能以一种文档格式显示，并且是容易阅读的；

（3）搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，有利于 SEO；

（4）使阅读源代码的人更容易将网站分块，便于阅读、维护和理解。

8.网站优化三大标签

8.1 网页title标题

title具有不可替代性，是我们的内页第一个重要标签，是搜索引擎了解网页的入口，和对网页主题归属的最佳判断点

建议：

首页标题：网站名（产品名）- 网站的介绍

8.2 关键字Keywords

Keywords是页面关键词，是搜索引擎关注点之一。Keywords应该限制在6～8个关键词。 用英文逗号 关键词1,关键词2

8.3 网站说明Description

简要说明我们网站的主要做什么的

Description作为网站的总体业务和主题概括，多采用“我们是…”“我们提供…”“×××网作为…”“电话：010…”之类语句

1. 描述中出现关键词，与正文内容相关，这部分内容是给人看的，所以要写的很详细，让人感兴趣， 吸引用户点击。
2. 同样遵循简短原则，字符数含空格在内不要超过 120 个汉字。
3. 补充在 title 和 keywords 中未能充分表述的说明。

文本格式化标签

标签	描述
<b>	定义粗体文字
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

“计算机”输出标签

标签	描述
<code>	定义计算机代码
<kbd>	定义键盘吗
<samp>	定义计算机代码样本
<var>	定义变量
<pre>	定义预格式文本

引文、引用以及标签定义

标签	描述
<abbr>	定义缩写
<address>	定义地址
<bdo>	定义文字方向
<blockquote>	定义长的引用语
<q>	定义短的引用语
<cite>	定义引用、引证
<dfn>	定义一个定义项目

HTML 表格标签

标签	描述
<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格的单元
<caption>	定义表格的标题
<colgroup>	定义表格列的组
<col>	定义表格列的属性
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚

HTML 列表标签

标签	描述
<ol>	定义有序列表
<ul>	定义无序列表
<li>	定义列表项
<dl>	定义列表
<dt>	定义列表项目
<dd>	定义自定义列表项的描述

HTML 分组标签

标签	描述
<div>	定义了文档的区域，块级 (block-level)
<span>	用来组合文档中的行内元素， 内联元素(inline)

HTML表单标签

标签	描述
<from>	定义供用户输入的表单
<input>	定义输入与
<textarea>	定义文本域
<label>	定义了 <input> 元素的标签，一般为输入标题
<filedset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist>	指定一个预先定义的输入控件选项列表
<keygen>	定义了表单的密钥对生成器字段
<output>	定义一个计算结果

HTML 字符实体标签

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
“	引号	"	"
’	撇号	'	'
￠	分	¢	¢
£	镑	£	£
¥	元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©
®	注册商标	®	™
™	商标	™
×	乘号	×	×
÷	除号	÷	÷

字符	URL 编码
€	%80
£	%A3
©	%A9
®	%AE
À	%C0