![bf7e14437eb211f1025536c0d51792d1.png](https://i-blog.csdnimg.cn/blog_migrate/33940730e08a13c79ce0beb3dddf45bc.jpeg)
主流浏览器内核
- IE/Edge - Trident
- FireFox - Gecko
- Safari - Webkit
- Chrome - Webkit 升级到 Blink
- Opera - Presto 升级到 Webkit 升级到 Blink
HTML
- HTML叫做超文本标记语言(Hypertext Markup Language) ,用于搭建网页的结构
- HTML是一种纯文本格式的文件,内部只能书写文字内容,不能添加图片、音频、视频等,但是在网页中给用户呈现的效果却包含了文字以外的内容,这种效果就是HTML语言区别于其他文件的不同之处
网页的组成 前端三层
- 前端三层: HTML (结构层)、Css(样式层)、JavaScript (行为层)
HTTP协议
- Hypertext Transfer Protocol:超文本传输协议。是客户端浏览器或其他程序与WEB服务器之间的应用层通信协议
- HTTP请求 HTTP响应
纯文本格式
- 纯文本格式,就是没有任何文本修饰的,没有任何粗体,下划线,斜体,图形,符号或特殊字符及特殊打印格式的文本,只保存文本,不保存其格式设置
格式对比
- 纯文本格式 - 最常见的是.txt文件。在存储和传输过程中,只能保存文字,不能保存内容
- 纯文本格式特点:
- 文件只能保存文本,不保存其他的格式或非文本内容,有利于网络传输
- 所有的纯文本格式文件,可以通过直接更改扩展名的方式更改保存格式
- 纯文本格式文件可以使用任意的纯文本编辑器进行查看和编辑
- 富文本格式 - 与纯文本对应,最常见的是.rtf文件,类似.doc文件,内部可以保存文本的样式、图片等
html css js文件都是纯文本格式文件
标签级别
- 根据标签内部可以存放的元素内容不同,可以将双标签划分为两个级别
- 容器级:标签内部可以存放任意内容,包含容器级标签。比如h1, div等
- 文本级:标签内部只能存放文字或类似文字的内容,比如存放图片、表单元素等。比如p等
HTML元素的特性
- 元素间对空格、换行、缩进等形成的空白不敏感,有无空白对在浏览器中加载的效果没有影响。浏览器识别的是元素的开始和结束以及互相之间的嵌套关系。
<p>段落内容</p><p>段落内容</p><p>段落内容</p><p>段落内容</p><p>段落内容</p>
- 空白折叠现象:元素内容如果是文本,所有文字(类似文字内容)之间如果有空格、换行、缩进等空白字符,在浏览器中加载时,连接在一起的空白会折叠成一个空格显示,这就是空白折叠现象
HTML属性规范
1.书写位置:必须写在开始标签或者单标签之内,与标签名之间用空格进行分隔
2.属性包含:属性名(key) 、属性值(value) 。属性名与属性值之间的写法通常称做键值对写法,HTML标签属性的键值对写法是k=”v”。XHTML要求属性值必须在双引号内部<p k="v">
3.一个标签内可以设置多个不同的属性,属性与子性之间使用空格进行分隔,每个属性的键值对写法都是k="v"
<p k="v" k="v" k="v"></p>
浏览器打开快捷键
- alt + b 提前安装好 open in browser插件
- Mac 复制单行快捷键 alt + shift + ⬆️⬇️
- 按住鼠标滚轮拖动,可以输入多行文字
- ctrl + enter 自动换行
title标签
- 作用1: 让页面拥有一个属于自己的标题
- 作用2: title中的关键字可以作为搜索引擎抓取时的关键字,提高SEO搜索引擎优化
- 作用3: 内部的内容会显示在搜索结果的标题部分
- 作用4: 作为浏览器收藏夹默认的网页标题
- 建议网页必须添加title标签内部内容,内容尽量精简,提取网页的关键字
DTD
- 完整的HTML文件的第一行内容叫做文档定义类型,英文DocType Definition,简称DTD。也称作文档声明类型,DocType Declaration
作用:告知浏览器该网页使用的是哪个版本的HTML规范,让浏览器按照对应版本的HTML语法进行解析页面
不同版本的DTD
XHTML1.O版本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML5 版本
<!DOCTYPE html>
注释语法
- 在很多代码技术中都可以添加注释内容,我们也可以向HTML源代码添加注释
- HTML注释语法:
<!-- 书写注释语法 -->
快捷键:ctrl + /
标题标签
标题(Heading),是通过<h1>-<h6>六个标签分别来对六个级别的标题进行定义的
<h1>定义最大的标题,<h6> 定义最小的标题
<h1>- <h6>标签都是双