本文详细讲解了浏览器内核如Chrome、Firefox的WebKit和Trident的区别，以及HTML的结构、表现和行为。介绍了HTML的基础，包括其作用、标签结构、注释和文档结构，重点阐述了HTML5文档的构成和常用标签的应用。
1、浏览器及内核
-
web浏览器是用于读取HTML文件，并将其作为网页显示
-
浏览器最重要的部分或其核心是渲染引擎，我们一般称为内核；
-
内核的作用负责对网页语法的解释并渲染网页；
-
五大浏览器：chrome、safari、Firefox、Opera、IE
1.chrome 谷歌浏览器
生产商：Google
内核：webkit、blink
2.Firefox 火狐浏览器
生产商：Mozilla
内核：gecko
3.Safari 苹果浏览器
生产商：苹果公司
内核：webkit
4.opera 欧朋浏览器
生产商：挪威欧普拉软件公司
内核：presto blink
5.IE 浏览器
生产商：微软公司 Microsoft
内核：trident
其他浏览器：
大部分国产的浏览器（qq浏览器，uc浏览器，猎豹浏览器，360浏览器）基本上是在IE浏览器的内核上进行的二次开发
现在国内市场上有许多双内核的浏览器，使用的是trident,webkit内核
2、页面的三大组成部分
-
结构：给页面搭建基本的框架结构。 html ，类比于建房子的时候要搭的地基跟钢筋。
-
表现：页面的美化，装饰。 css 相当于给房子加背景和家具的排列布局。
-
行为：页面的轮播图，返回顶部... javascript 相当于房子加灯的开关。
结构层html和表现层css，是 W3C 制定的规范，万维网联名。
行为层js，是 ECMA 制定的规范，欧洲计算机协会。
2、HTML介绍
1、什么是HTML
-
HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言。
通过HTML标记（标签）对网页中的文本、图片、多媒体等内容进行描述。
说明：
-
“超文本”：不仅能承载简单的文字、还能包含超链接、图片、音频、视频等。
-
“标记语言”：标记语言是由一套标记标签组成的。
-
2、HTML文档——网页
HTML文档也被称为网页
-
后缀名.html
-
文件名格式： 主文件名.后缀名
创建HTML文档
-
1）新建一个后缀名为.html的文件
-
2）添加基本结构：英文状态下!回车
-
3) 输入HTML：5
3、标记（标签）
构成网页的基本单位
-
标签：由尖括号括起来的关键词
-
单标签：<标签名 >或 <标签名 />
-
双标签：
<开始标签名>[内容]</结束标签名>
-
-
元素：标签及内容的整体
-
属性
<标签名 属性名1="属性值1" 属性名2="属性值2"></标签名>
<后面的第一个单词叫做标签的名字，标签名空格之后的叫做标签的属性。
-
属性由属性名和属性值组成，属性名和属性值用等号连接
-
属性值用引号引起来。 多个属性之间用空格隔开。
4、HTML注释
<!-- html注释内容 --> HTML中的注释以`<!--`开头，以`-->`结束，开始和结束中间为注释内容。
web浏览器是用于读取HTML文件，并将其作为网页显示
浏览器最重要的部分或其核心是渲染引擎，我们一般称为内核；
内核的作用负责对网页语法的解释并渲染网页；。
-
说明：
-
“超文本”：不仅能承载简单的文字、还能包含超链接、图片、音频、视频等。
-
“标记语言”：标记语言是由一套标记标签组成的。
-
-
后缀名.html
-
文件名格式： 主文件名.后缀名
-
1）新建一个后缀名为.html的文件
-
2）添加基本结构：英文状态下!回车
-
3) 输入HTML：5
-
后缀名.html
-
文件名格式： 主文件名.后缀名
-
1）新建一个后缀名为.html的文件
-
2）添加基本结构：英文状态下!回车
-
3) 输入HTML：5
-
标签：由尖括号括起来的关键词
-
单标签：<标签名 >或 <标签名 />
-
双标签：
<开始标签名>[内容]</结束标签名>
-
-
元素：标签及内容的整体
-
属性
-
属性由属性名和属性值组成，属性名和属性值用等号连接
-
属性值用引号引起来。 多个属性之间用空格隔开。
-
注释即对代码的解释和说明，不会被浏览器解析执行
-
注释内容不会出现在网页中，只是对代码的一个说明
-
语法
-
ctrl + /
-
alt + shift + a: 可以在一行代码的后面进行注释
5、HTML文档的基本结构
<!DOCTYPE html> <!-- <!doctype> 文件类型定义DTD 作用：告诉浏览器该文档的版本信息，让浏览器解析器知道使用哪种语法解析文档 文档第一代码是HTML5标准网页声明，告知浏览器用HTML5标准解析此网页。 不是标签，是声明语句 必须写在HTML文档的第一行 --> <html lang="en"> <!-- 网页的根元素 定义整个HTML文档，包含head和body lang属性 - 作用：定义当前文档显示文字的语言 - 语法：lang=“en” (lang是language的简写) - 取值: en定义语言为英语 zh-CN定义语言为中文 --> <head> <!-- 网页的头部信息 其内容不会显示在网页中 定义文档的头部，包含文档的标题（title），可以包含文档脚本（script），样式（style），meta信息以及更多的其他信息。 --> <meta charset="UTF-8"> <!-- 文档字符集 字符集(Character set)是多个字符的集合，便于计算机识别和存储各种文字。 在<head>标签内,通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。 charset属性:设置编码方式 UTF-8：万国码，通用性较好 (2)常用的字符集 - UTF-8被称为万国码，包含全世界所有国家需要用到的字符 - GB2312简单中文，包括6763个汉字 - GBK包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312 - BIG5繁体中文，港澳台等用 --> <title>标题</title> <!-- 网页标题 添加到收藏夹时的标题显示在搜索引擎结果中的页面标题。 --> </head> <body> <!-- 网页的主体内容 定义文档的主体，在浏览器窗口中可以看到的所有内容都包含在它内部。--> 父子关系——嵌套关系 兄弟关系——并列关系 </body> </html>
6、常用HTML标签
1）块级标记
-
div标签 搭建网页结构的基本标签——盒子；无语义标签
-
<div>[内容]</div> <div> 文字内容</div> <div> <div></div> </div>
- 特性 - 宽度默认撑满整个父元素 - 高度默认由内容撑开 - 独立成行——垂直布局 作用：可以用来划分页面的区块，里面嵌套任何的标签
-
h系列标签：标题标签 标题标签中文字大小依次减小，重要程度依次减弱。 注意事项：h1标题一个页面中只有一个，h2~h6是可以有多个的。
-
<h1>title1</h1> <h2>title2</h2> <h3>title3</h3> <h4>title4</h4> <h5>title5</h5> <h6>title6</h6>
- 特性 - 宽度默认撑满整个父元素 - 高度默认由内容撑开 - 独立成行——垂直布局 - 自带外间距 - 自带加粗效果 应用场景： - logo - 文章页标题、内容章节标题 - 产品标题 - 模块标题等
-
p标签：段落标记
-
<p>[文字]</p>
- 特性 - 宽度默认撑满整个父元素 - 高度默认由内容撑开 - 独立成行——垂直布局 - 自带外间距 应用场景：文章中的段落、页面中的文字块 注意：p标签不能嵌套块级标签，例如：div，p,h1~h6
-
hr标签：水平分割线 块级标记
- 特性 - 默认自带间距、自带边框 作用：在页面中显示一条水平线
!DOCTYPE html 代码的作用？
文档第一代码是HTML5标准网页声明，告知浏览器用HTML5标准解析此网页。 不是标签，是声明语句
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
