html加载富文本_HTML基础

主流浏览器内核

1. IE/Edge - Trident
2. FireFox - Gecko
3. Safari - Webkit
4. Chrome - Webkit 升级到 Blink
5. Opera - Presto 升级到 Webkit 升级到 Blink

HTML

1. HTML叫做超文本标记语言(Hypertext Markup Language) ,用于搭建网页的结构
2. HTML是一种纯文本格式的文件，内部只能书写文字内容，不能添加图片、音频、视频等，但是在网页中给用户呈现的效果却包含了文字以外的内容，这种效果就是HTML语言区别于其他文件的不同之处

网页的组成 前端三层

• 前端三层: HTML (结构层)、Css(样式层)、JavaScript (行为层)

HTTP协议

1. Hypertext Transfer Protocol:超文本传输协议。是客户端浏览器或其他程序与WEB服务器之间的应用层通信协议
2. HTTP请求 HTTP响应

纯文本格式

1. 纯文本格式，就是没有任何文本修饰的，没有任何粗体,下划线,斜体,图形,符号或特殊字符及特殊打印格式的文本,只保存文本,不保存其格式设置

格式对比

• 纯文本格式 - 最常见的是.txt文件。在存储和传输过程中,只能保存文字,不能保存内容
• 纯文本格式特点:

1. 文件只能保存文本，不保存其他的格式或非文本内容，有利于网络传输
2. 所有的纯文本格式文件，可以通过直接更改扩展名的方式更改保存格式
3. 纯文本格式文件可以使用任意的纯文本编辑器进行查看和编辑

• 富文本格式 - 与纯文本对应，最常见的是.rtf文件，类似.doc文件，内部可以保存文本的样式、图片等
  html css js文件都是纯文本格式文件

标签级别

• 根据标签内部可以存放的元素内容不同，可以将双标签划分为两个级别
• 容器级:标签内部可以存放任意内容，包含容器级标签。比如h1, div等
• 文本级:标签内部只能存放文字或类似文字的内容，比如存放图片、表单元素等。比如p等

HTML元素的特性

1. 元素间对空格、换行、缩进等形成的空白不敏感，有无空白对在浏览器中加载的效果没有影响。浏览器识别的是元素的开始和结束以及互相之间的嵌套关系。

段落内容
段落内容
段落内容
段落内容
段落内容

1. 空白折叠现象:元素内容如果是文本，所有文字(类似文字内容)之间如果有空格、换行、缩进等空白字符，在浏览器中加载时，连接在一起的空白会折叠成一个空格显示，这就是空白折叠现象

HTML属性规范

1.书写位置:必须写在开始标签或者单标签之内，与标签名之间用空格进行分隔
2.属性包含:属性名(key) 、属性值(value) 。属性名与属性值之间的写法通常称做键值对写法，HTML标签属性的键值对写法是k=”v”。XHTML要求属性值必须在双引号内部

3.一个标签内可以设置多个不同的属性，属性与子性之间使用空格进行分隔，每个属性的键值对写法都是k="v"

浏览器打开快捷键

• 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版本

HTML5 版本

注释语法

• 在很多代码技术中都可以添加注释内容，我们也可以向HTML源代码添加注释
• HTML注释语法:
  
  快捷键：ctrl + /

标题标签

标题(Heading),是通过
-
六个标签分别来对六个级别的标题进行定义的
定义最大的标题，
 定义最小的标题
- 
标签都是双