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）三个方面
-
结构标准：结构用于对网页元素进行整理和分类，主要包括XML和XHTML两个部分
-
样式标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
-
行为标准：行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分
主要体现在：HTML标签闭合、标签小写、不乱嵌套、页面结构编写符合语义化、使用外链 css 和 js 脚本、结构行为表现的分离等
2.2 Web标准的好处
- 让Web的发展前景更广阔
- 内容能被更广泛的设备访问
- 更容易被搜寻引擎搜索
- 降低网站流量费用
- 使网站更易于维护
- 提高页面浏览速度
3.文档类型<!DOCTYPE>
3.1 定义
<!DOCTYPE> 标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用
<!DOCTYPE>标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能将该网页作为有效的XHTML文档，并按指定的文档类型进行解析
3.2 HTML5的DOCTYPE
HTML5只需要写 <!DOCTYPE html>即可，因为HTML5 不基于 SGML(标准通用标记语言)，因此不需要对 DTD 进行引用，但是需要 DOCTYPE 来规范浏览器的行为（让浏览器按照它们应该的方式来运行）
4.字符集
GB2312 简单中文 包括6763个汉字
BIG5 繁体中文 港澳台等用
GBK包含全部中文字符 是GB2312的扩展，加入对繁体字的支持，兼容GB2312
UTF-8则包含全世界所有国家需要用到的字符
5.HTML骨架结构(以HTML5为例)
<!DOCTYPE html>
<!-- 定义DOCTYPE文档类型 -->
<html lang="zh">
<!-- lang属性规定元素内容的语言代码 -->
<head>
<!-- 定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等 -->
<meta charset="UTF-8"><!-- 定义网页字符集信息，charset属性值是当前网页字符集编码 -->
<title>页面标题</title><!-- 定义页面的标题 -->
</head>
<body>
<!-- 网页的主体部分 -->
</body>
</html>
6.HTML常用标签
6.1 常用的语义化标签
- 标题标签
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>
- 段落标签
<p> 文本内容 </p>
- 文本格式化标签
<strong>加粗强调 <em>斜体强调 <del>删除 <ins>插入
- 列表
<ul>无序列表 <ol>有序列表 以上二者中的每一项都是<li>
<dl>自定义列表 <dt>是每一项的标题 <dd>是每一项的内容
6.2 常用的功能性标签
- 图像标签
<img src="图片路径" alt="图像不能显示时的文本" title="鼠标悬停时的文本">
- 链接标签
<a href="链接目标的url地址" target="链接页面的打开方式">文本或图像</a>
target属性取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式
- 表格标签
<table><!-- 定义表格 -->
<caption></caption><!-- 表格标题 -->
<thead><!-- 表格头部 -->
<tr><!-- 表格一行 -->
<th></th><!-- 表头项 -->
<th></th>
<th></th>
</tr>
</thead>
<tbody><!-- 表格主体 -->
<tr>
<td></td><!-- 表格的一个单元格 -->
<td></td>
</tr>
</tbody>
</table>
表格中<caption><thead><tbody>一般都可以忽略
可以使用colspan属性跨列合并 rowspan属性跨行合并
6.3 表单
- input控件
<input type="text">单行文本输入框
<input type="password">密码输入框
<input type="radio">单选框
<input type="checkbox">复选框
<input type="button">按钮
<input type="submit">提交按钮
<input type="reset">重置按钮
<input type="file">文件域
<!--
name属性定义控件名称
value属性定义控件值
checked用于设定单选和复选框被默认选中的项
maxlength设置输入字符的最大个数
-->
- textarea控件
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
- 下拉菜单
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
<!--
1.<select></select>中至少应包含一对<option></option>。
2.在option 中定义selected =" selected "时，当前项即为默认选中项。
-->
- 普通按钮button
<button>按钮文字</button>
- 表单域
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
<!--
action 在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
method 用于设置表单数据的提交方式，其取值为get或post
name 用于指定表单的名称，以区分同一个页面中的多个表单
-->
7.HTML语义化的优势
（1）HTML 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；
（2）即使在没有样式 CSS 的情况下也能以一种文档格式显示，并且是容易阅读的；
（3）搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，有利于 SEO；
（4）使阅读源代码的人更容易将网站分块，便于阅读、维护和理解。
8.网站优化三大标签
8.1 网页title标题
title具有不可替代性，是我们的内页第一个重要标签，是搜索引擎了解网页的入口，和对网页主题归属的最佳判断点
建议：
首页标题：网站名（产品名）- 网站的介绍
8.2 关键字Keywords
Keywords是页面关键词，是搜索引擎关注点之一。Keywords应该限制在6～8个关键词。 用英文逗号 关键词1,关键词2
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
<meta name="keywords" content="小米,小米5s,红米Note4,小米MIX,小米商城" />
8.3 网站说明Description
简要说明我们网站的主要做什么的
Description作为网站的总体业务和主题概括，多采用“我们是…”“我们提供…”“×××网作为…”“电话：010…”之类语句
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
- 描述中出现关键词，与正文内容相关，这部分内容是给人看的，所以要写的很详细，让人感兴趣， 吸引用户点击。
- 同样遵循简短原则，字符数含空格在内不要超过 120 个汉字。
- 补充在 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 |
197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
