1. 网页的组成
- HTML 网页的内容结构
- CSS 网页的视觉体验
- Javascript 网页的交互处理
2. 游览器渲染内核
-
浏览器最核心的部分是渲染引擎（Rendering Engine）,一般称为“游览器内核”。
负责解析网页语法，应渲染（显示）网页
不同的游览器内核有不同的解析渲染原则，所以同一网页在不同内核 的浏览器中的渲染效果也可能不同 -
常见的游览器内核有
Trident:IE、360安全浏览器、360极速浏览器、搜狗高速浏览器、百度浏览器、UC浏览器
Gecko:Mozilla Firefox
Presto->Blink:Opera
Webkit:Safari、360极速浏览器、搜狗高速浏览器、移动端浏览器（Android、ioS）
Webkit->Blink:Google Chrome
-
前端工程师特别关注的游览器有
image.png
-
建议
建议使用Google Chrome浏览器为默认浏览器，功能强大、快速稳定作为前端开发工程师
不建议默认使用360、QC搜狗等等诸如此类浏览器，有失逼格（小心被鄙视）
众多浏览器中，让开发者发毛次数最多的是ie浏览器因为它最独特
不过从IE8.0版本开始逐渐正常起来
3. HTML文件
-
HTML文件扩展名是html/htm
-
因历史遗留问题，Win95\Win98系统的文件拓展名不能超过3字符，所以使用.htm现在都是使用.html
-
一般我们也称HTML文件为网页文件
-
什么是HTML?
HTML用来描述网页的内容和结构，由浏览器负责解析HTML转换成具体的图文界面
比如浏览器会将左边的HTML代码转换成右边的网页界面
image.png
- HTML的全称是Hyper Text Markup Language，超文本标记语言
-
为什么叫超文本标记语言？
-
标记语言？
下图是HTML代码（HTML文档），由无数个标记（标签、tag）
组成由标签和内容组成的称为元素（element）
一般的说法：head元素、<head> 标签，img元素、<img> 标签
下图中的html.head.meta、title、body.img、div、ul，li、br、input都是组成HTML文档的元素
image.png
-
超文本？
页面内可以包含图片、链接，甚至音乐、视频等非文字元素
4.常用元素
常用元素
5.元素的书写格式
image.png
- 可以注意到，上图的代码里面
-
html、head、title.body、div、ul、li包含 了具体内容，书写格式是标签对
image.png
-
meta、img、br、input没有包含具体内容，书写格式是单标签
image.png
6.元素的嵌套
- 一个元素可以嵌套（包含）其他元素
image.png
-
下图的嵌套写法是错误的，不符合HTML语法
image.png
注意
有语法错误的HTML代码，还是可以被浏览器识别显示出来，但意义不大
eg:
image.png
- 嵌套的意义
元素嵌套的含义是什么？
把多个功能相似的、临近的元素包装成一个整体来使用，方便对它们进行归类、统一操作
7. 元素的属性
每一个元素都可以拥有自己的属性，属性可以增强元素的功能书写形式是：<起始标签属性名="属性值">
image.png
上图中的html、meta.body元素均拥有属性，其中body元素拥有3个属性
属性名都是小写，而且是无序的，谁先谁后不影响实际效果
属性值可以使用双引号、单引号括住，也可以省略引号。建议统-使用双引号
8.注释
注释-般用来解释某段代码的具体含义、作用
<！--注释内容-->
注释是只给开发者看的，浏览器并不会把注释显示给用户看多写注释的好处
方便回忆、检查旧代码
方便程序员之间的团队协作
方便旧项目的交换
快捷键ctrl+shift +/ & ctrl+/
9.HTML简史
image.png
10.文档声明
image.png
- <！DOCTYPE html>
HTML文档声明，告诉浏览器当前页面是HTML5页面，让浏览器用HTML5的标准去解析识别HTML文档
必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题
HTML 5的文档声明比HTML 4.01、XHTML 1.0简洁非常多
11.html元素
html元素是HTML文档的根元素，一个文档中只能有一个，其他所有元素都是它的后代元素W3C标准建议为html元素增加一个lang属性，
- 作用是
帮助语音合成工具确定要使用的发音
帮助翻译工具确定要使用的翻译规则
head元素
*head元素里面的内容是--些“元数据”（元数据：描述数据的数据）
一般用于描述网页的各种信息，比如字符编码、网页标题、网页图标
- title元素
网页的标题 - meta元素
可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误会导致乱码一般都使用UTF-8编码，涵盖了世界上几乎所有的文字在HTML5之前，meta标签的写法也是比较复杂的 -
以下列出的元素大多数情况下都是在head元素内部使用
meta
title
style
link
base
script
noscritpt
image.png
12.body元素
-
body元素里面的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构
image.png
13.官方文档
不要完全相信任何非一手的技术资料，尤其是中文资料！！！
官方文档才是最权威的参考资料，可以尽情查看HTML5相关的一切信息https://www.w3.org https://www.w3.org/standards/techs/html HTML5代码规范检测器
https://validator.w3.org/
网友评论