目录
网页的显示过程
网页的显示过程 – 用户角度
1.用户在浏览器输入一个网站；
2.浏览器会找到对应的服务器地址，请求静态资源（可以存放在世界上任何一个地方）；
3.服务器返回静态资源给浏览器；
4.浏览器对静态资源进行解析和展示；
网页的显示过程 – 前端工程师
1.开发项目（HTML/CSS/JavaScript/Vue/React）
2.打包、部署项目到服务器里面
浏览器的渲染引擎
浏览器最核心的部分是渲染引擎（Rendering Engine），一般也称为“浏览器内核”,负责解析网页语法，并渲染（显示）网页
不同浏览器的内核
常见的浏览器内核有:
- Trident （ 三叉戟）：IE、360安全浏览器、搜狗高速浏览器、百度浏览器、UC浏览器；
- Gecko（ 壁虎） ：Mozilla Firefox；
- Presto（急板乐曲）-> Blink （眨眼）：Opera
- Webkit ：Safari、360极速浏览器、搜狗高速浏览器、移动端浏览器（Android、iOS）
- Webkit -> Blink ：Google Chrome
不同的浏览器内核有不同的解析、渲染规则，所以同一网页在不同内核的浏览器中的渲染效果也可能不同
什么是标记语言（markup language ）
- 由无数个标记（标签、tag)组成；
- 是对某些内容进行特殊的标记，以供其他解释器识别处理；
什么是超文本（ HyperText ）
表示不仅仅可以插入普通的文本（Text），还可以插入图片、音频、视频等内容；
还可以表示超链接（HyperLink），从一个网页跳转到另一个网页
完整的html结构
文档声明
<!DOCTYPE html>用于声明文档类型
↑这个HTML文档声明，告诉浏览器当前页面是HTML5页面；
让浏览器用HTML5的标准去解析识别内容；
必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题；
◼ HTML5的文档声明比HTML 4.01、XHTML 1.0简洁非常多(了解即可)
html元素
html元素是一个html文档的根(顶级元素),所以也被称为根元素,所有其他元素必须是此元素的后代。
◼ W3C标准建议为html元素增加一个lang属性，作用是
帮助语音合成工具确定要使用的发音;
帮助翻译工具确定要使用的翻译规则;
◼ 比如常用的规则：
lang=“en”表示这个HTML文档的语言是英文；
lang=“zh-CN”表示这个HTML文档的语言是中文
head元素
包含文档的配置信息(也称为元数据),包括文档的标题、引用的文档样式和脚本等
常见的设置有哪些呢？一般会至少包含如下2个设置。
◼ 网页的标题：title元素
◼ 网页的编码：meta元素
可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误会导致乱码；
一般都使用utf-8编码，涵盖了世界上几乎所有的文字
body元素
在浏览器窗口看到的东西
html元素
查询文档:
HTML 元素参考 - HTML（超文本标记语言） | MDN (mozilla.org)
img标签
是可替换元素(?)
常见属性src与alt
src必写,表示图片路径
alt:
- 当图片加载不成功（错误的地址或者图片资源不存在），那么会显示这段文本；
- 屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义；
a标签
<a> 元素（或称锚元素）可以通过href创建通向:
其他网页、文件、电子邮件地址、同一页面内的位置或任何其他 URL 的超链接。
<ul>
<li><a href="https://example.com">Website</a></li>
<li><a href="https://github.com/coderwhy/HYMiniMall/archive/master.zip">download</a></li>
<li><a href="mailto:m.bluth@example.com">Email</a></li>
<li><a href="tel:+123456789">Phone</a></li>
</ul>
a元素有两个常见的属性：
href：Hypertext Reference的简称
指定要打开的URL地址；
也可以是一个本地地址；
target：该属性指定在何处显示链接的资源。
_self：默认值，在当前窗口打开URL；
_blank：在一个新的窗口中打开URL；
_parent：在父窗口中打开URL
_top：在顶层窗口中打开UR
锚点链接
锚点链接有两个重要步骤：
在要跳到的元素上定义一个id属性；
定义a元素，并且a元素的href指向对应的id；
iframe元素
内联框架元素
它能够将另一个 HTML 页面嵌入到当前页面中。
html全局属性
所有html元素都能设置,反例是alt或者href这种
全局属性常见的有:id,class,style,title
字符实体
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
字符实体以&开头分号结尾:
字符实体常用于保留字符(<>等会被解析为html代码)以及不可见字符(如果不换行的空格)
认识url
统一资源定位符 (URL:uniform resource locator)
url的格式
[协议类型]://[服务器地址]:[端口号]/[文件路径][文件名]?[查询]#[片段ID]
元素的语义化
定义:用正确的元素做正确的事情
◼ 标签语义化的好处
方便代码维护；
减少让开发者之间的沟通成本；
能让语音合成工具正确识别网页元素的用途，以便作出正确的反应；
有利于SEO(search engine optimization搜索引擎优化)；
什么是seo
SEO就是指按照搜索引擎的算法，提升你的文章在搜索引擎中的自然排名
html5新增元素
◼ Web端事实上一直希望可以更好的嵌入音频和视频, 特别是21世纪以来, 用户带宽的不断提高, 浏览器因为和视频变得非常容易.
在HTML5之前是通过flash或者其他插件实现的, 但是会有很多问题;
比如无法很好的支持HTML/CSS特性, 兼容性问题等等;
◼ HTML5增加了对媒体类型的支持：
音频：<audio>
视频：<video>
◼ Video和Audio使用方式有两个：
一方面我们可以直接通过元素使用video和autio；
另一方面我们可以通过JavaScript的API对其进行控制；
video
◼ 每个视频都会有自己的格式, 浏览器的video并非支持所有的视频格式
audio
◼ 每个音频都会有自己的格式, 浏览器的audio并非支持所有的视频格式
input元素的拓展内容
◼ HTML5对input元素也进行了扩展，在之前我们已经学习过的其中几个属性也是HTML5的特性：
placeholder：输入框的占位文字
multiple：多个值
autofocus：最多输入的内容
◼ 另外对于input的type值也有很多扩展：
date
time
number
tel
color
email
等等...
全局属性data-*
◼ 在HTML5中, 新增一种全局属性的格式 data-*, 用于自定义数据属性:
data设置的属性可以在JavaScript的DOM操作中通过dataset轻松获取到；
通常用于HTML和JavaScript数据之间的传递；
◼ 在小程序中, 就是通过data-来传递数据的, 所以该全局属性必须要掌握.
扫一扫
1057
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
