html加载富文本

主流浏览器内核

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>标签都是双标签，且是容器级标签

标签级别

标题标签之间是不能互相嵌套的，下一级标题与上级标题之间通过同级关系书写，下一级标题解释说明的是前面距离最近的上一级标题

权重

标题标签对于呈现文档结构非常重要，使用时要根据标签的重要程度进行选择，其中<h1>标签最重要，<h2>标签次重要，以此类推
<h1>在整个HTML中的权重非常高，内部应该放置HTML中最重要的内容，比如logo
<h1>由于非常重要，内部的文字对于提高搜索引擎排名也非常重要，为了防止作弊，如果一个页面出现多个<h1>,反而降低权重。约定俗成的，一个页面中只会出现一个<h1>

段落标签

段落(paragraph) 是通过标签进行定义的
<p>标签是双标签，且为文本级标签。内部只能放置文本、图片、表单元素，或者废弃的<font>标签等

段落标签的作用

<p>标签的作用是给标签内部的内容添加一个完整段落的语义,不负责内容自动换行的样式.换行的效果是由css决定的

换行标签

<br/> (breaking) 标签是HTML中一个简单的换行符
<br />标签是一个单标签
在需要换行的位置可以使用<br />标签书写,但是<br />与<p>不同,<br />没有建立新的段落的语义,只是简单的进行强制换行
备注: 23 23

src属性和路径

如果需要插入一张图片到HTML中，<img>标签必须设置src属性
src:全称source资源，属性值是图片查找的路径
路径:指的是寻找文件时所历经的线路，在HTML中有特殊的书写语法
路径分为相对路径和绝对路径，不同的方式出发点和参考位置不同

相对路径

相对路径查找文件时，需要从HTML文件本身出发，根据相对的位置进行查找，包含三种方向：

同级查找:指目标文件与HTML文件位于同一级,直接书写文件名+后缀格式;<img src="smile01.jpg">

子级查找:指目标文件在与HTML文件同一级的文件夹的内部,需要先查找文件夹名称，然后通过关闭符号/进入文件夹查找里面的文件;如果有多层文件夹，需要/进入多层

<img src="data:images/smile02.png>
<img src="data:images/tupian/smile03.jpg">

上级查找:指目标文件在HTML文件所在文件夹的更上一级,需要跳出当前文件夹到上一层,路径写法利用../表示跳出一级，如果跳出多级书写多次../,直到找到文件

<img src-=../../smile04.jpg" />
<img srec-="../images/smile01.jpg" />

绝对路径

绝对路径查找文件时,不需要从HTML文件出发,而是直接从电脑的盘符出发进行查找,或者使用网址形式查找
盘符出发:例如从c盘或者d盘出发查找图片,书写时以c:/开头,后续类似子级查找写法直至找到目标文件

<img src="C:/Users/teacher/Documents/htm/case/images/smile02.png" />

网址形式:要查找的文件是来自网络资源，路径写法以http://开头

<img src="http://img3.imgtn.bdimg.com/it/u=1084243323,278941980&fm=26&gp=0.jpg" />

从盘符出发的绝对路径的缺点:

a.盘符出发的路径不可移植，不可移动。
b.盘符出发的路径容易出现中文字符，中文的路径容易出现错误。

路径实际应用

a.建议多使用相对路径，可以适当使用网址形式的绝对路径
b.使用相对路径必须将图片或文件与HTML同时上传，而且需要保持相对位置不变

提示文本title

title:设置的是鼠标悬停时的提示文本
属性值:自定义的提示文字内容

替换文本alt

alt:设置的是图片查找错误时，出现的替换文本
如果能正常找到图片，替换文本是不显示的
属性值:自定义的替换内容

<img src="smile01.png'alt="这是张微笑的表情">

<img>总结

<img>标签最为重要的属性为srC,尽量使用alt属性对图片进行说明，添加相对关键词可以有利于SEO搜索引擎优化。其他属性可以根据需求进行设置。

<img src="smile01.png" alt="这是一张微笑 的表情">

音频标签

音频使用
<audio> 是双标签。
同图片一样，需要使用src属性设置音频查找的路径。
音频文件支持的格式包括: .mp3、 .ogg、 .WMA。

音频控制条

音频加载后不会自动显示播放器的控制条，需要使用controls属性进行设置，属性值也是
controls

<audio src="audio.mp3" controls="controls" ></audio>

视频标签

视频的设置方法与音频非常类似
视频使用<video>标签进行定义
<video> 是双标签
使用src属性设置视频查找的路径

视频控制条属性

视频也需要使用controls属性设置控制条，属性值也是controls
<video src="video.mp4" controls="controls" >

超级链接标签

在HTML中使用<a>标签可以创建链接
a全称anchor, 锚的意思
<a>为双标签
作用:在指定的位置添加超级链接，提供用户进行点击和跳转
<a>标签可以实现两种跳转:跨页面跳转、页面内跳转。实现跳转的方式需要用到一些标签属性

href属性

href全称hypertext reference,超文本引用，用于规定链接的目标地址
属性值:链接目标的路径地址。可以使用相对路径或网址形式的绝对路径
href属性非常重要，<a>标签要想实现点击跳转，必须设置该属性，拥有这个属性<a>标签在
鼠标移上时才会显示一个小手指针状态
书写方式： <a href="目标地址">链接内容

target属性

使用target属性，可以定义被链接的文档在何处跳转显示
属性值有两种:
_self: 默认值，表示跳转的页面在当前窗口打开，不会打开新的窗口
_blank: 空白的，表示跳转的页面在新窗口打开

设置锚点

设置锚点，也就是设置跳转目标位置，有两种设置方式
①在目标位置找到任意一个标签，给它添加id属性，id的属性值必须是唯一的。id的属性值自定义规则:必须以字母开头，后面可以有字母、数字、下划线和横线，区分大小写。

<h2 id="mubiao">目标位置</h2>

页面内锚点跳转

这种跳转方式实现的是从某个位置跳转到同页面的另一个位置
制作方法分为两个步骤，分别是设置锚点、添加链接
设置锚点

设置锚点，也就是设置跳转目标位置，有两种设置方式
①在目标位置找到任意-个标签，给它添加id属性，id的属性值必须是唯一的。id的属性值自定义规则:必须以字母开头，后面可以有字母、数字、下划线和横线，区分大小写<h2 id="mubiao">目标位置
②在目标位置添加一个空的<a>标签，只设置一个name属性，name属性值设置方式与id相同，也必须是唯一的<a name="mubiao">

添加链接

链接到锚点，在需要点击的位置设置<a>标签，给a的href属性设置属性值为#id属性值或者#加a的name属性值

跨页面锚点跳转

这种跳转方法综合了跨页面跳转和锚点跳转
制作方法也分为两个步骤，分别是设置锚点、添加链接
第一步:设置锚点，方式与页面内锚点跳转一致，在目标网页的指定位置设置使用id或name属性
第二步:链接到锚点，添加超级链接时href属性需要更改。属性值写为页面的路径#id
<ahref=" new.html#mubiao">点击文本</ahref=>

列表

列表用于制作HTML中的一系列项目
通常我们会将内容相关、结构相似、样式相近的内容使用列表结构进行搭建
根据项目的内容不同，可以有三种语义的列表结构:无序列表、有序列表、定义列表

无序列表标签

无序列表需要两个标签参与，分别是<u|>和<li>
ul: unordered list,表示定义一个无序列表的大结构
li: list item,列表项，定义的是无序列表内的某一项
<u>和<li>是嵌套关系，快捷键: ul>li
*一个列表中可以有任意个列表项。

<ul>
<li>列表项1</i>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
注意事项
1. <u|>内部只能嵌套<li>, <|i>标签不能脱离<ul>单独书写。
2. <li>标签是一个经 典的容器级标签，内部可以放置任意内容， 甚至可以放一组ul>li无序列表结构.
3. 无序列表的列表项<|i>之间，没有顺序的先后之分，它们的重要程度是相同的。

有序列表标签

有序列表的语法与无序列表非常类似，只是在语义上有差异
有序列表由两个标签组成，分别是<o|>和<li>
ol: ordered list,表示定义-一个有序的列表的大结构
li: list item,定义的是有序列表的每一项。<ol>和<li> 是嵌套关系，快捷键: ol>li
<o|>标签内部可以嵌套任意多个<|i>标签注意事项

<o|>内部只能嵌套<|i>标签，而<li>不能脱离<o|>单独书写
<li>标签是一一个经典的容器级标签，内部可以放置任意内容，甚至可以放ol>li
有序列表的列表项<li>之间，存在顺序先后之分，根据内容的顺序需要合理调整书写位置
有序列表的作用只是搭建有顺序的列表结构，前面的数字排序样式不是<o|>标签的作用,
而是css负责的

自定义列表

自定义列表不仅仅是一-列项目，而是项目及其注释的组合
由三个标签组成完整的结构，包含<dl>、 <dt>和<dd>
dl: definition list,表示定义一个自定义列表的大结构
dt: definition term,表示定义自定义列表中的一个主题或者术语
dd: definition description,定义解释项，表示描述或解释前面的定义主题
<dl>内部只能嵌套<dt>和<dd>, <dt> 与<dd>是同级关系注意事项

<dl>内部只能嵌套<dt>和<dd>, <dt> 与<dd>不能脱离<d|>单独书写
dl内部可以放多组dt和dd,每个dd解释说明的是前面的距离最近的一一个dt
每个dt后面可以有0到多个解释项的dd,每个dd解释的都是前面距离最近的一个dt
dt和dd标签也是容器级标签，内部可以放置任意内容
定义列表中的缩进样式由css负责，标签只负责搭建语义结构
配合着css布局效果，最好每个d|中只添加一-组dt和dd,便于后期管理

布局标签

<div>和<span>标签常用作布局工具，我们俗称盒子，后期h5也增加了更多的布局标签
<div>和<span>都是没有具体明确的语义的
<div>标签
div:全称division, 分割、区域、跨度的意思。俗称大盒子
<div>是双标签，是最经典的容器级标签，内部可以放置任意内容。
作用:多用于划分网页区域，进行结构布局。一般将相关的内容使用<div>包裹起来，整体设置大的布局效果。
<span>标签
span:小区域、小跨度的意思。俗称小盒子
<span>也是双标签，容器级标签
作用:在不改变整体效果的情况下，可以辅助进行局部调整

表格基础

创建一个简单的表格至少有三个标签组成，分别是<table>、<tr>、 <td>标签
table:表格，定义的是整个的表格大结构
tr: table rows,表格的行，定义的是表格由多少行组成
td: table data,表格数据，也叫表格单元称，定义的是每一 -行内部的单元格
三者的关系: table>tr>td.- 个表格中有多个行，每个行中有多个单元格<table>的属性

<table>标签可以添加border边框属性
属性值:数字，表示像素值

表格的单元格之间有默认的空隙，会导致双线边框
解决方法:设置标签样式属性style
属性值: border-collapse : collapse;表示边框塌陷

表头单元格

如果要绘制表头，使用标签<th>, table head data,表头单元格
在表格中绘制的时候，替换的是<td>的位置
<th>标签中自带默认的css样式效果，文字显示粗体居中单元格属性
表格的单元格可以进行合并，通过<th>和<td>的两个属性可以进行合并设置
rowspan:跨行和并。上下的合并
colspan: 跨列合并。左右的合并
属性值:数字，数字是几表示跨几行或跨几列合并制作技巧

先列出所有行<tr>,以最小単元格刃棕准
再添加毎一-行的<td>或<th> 単元格
划分单元格所在行时，顶边对齐的属于同一行
将所有行和列写完后，再查看哪个单元格有芳行或跨列，属性值的个数要参考最小
的单元格

分区标签

<table>内部最直接的子级包含四个分区标签，他们]都是双标签
caption:表格的标题，内部书写标题文字
thead: table head,表格的头部。内部嵌套tr>th
tbody: table body,表格的主体。内部嵌套tr>td
tfoot: table foot,表格的页脚。内部嵌套tr>td
四个分区可以选择性的进行组合
注意:不论书写顺序如何颠倒，浏览器中的加载顺序都是自动按照caption、thead、tbody、tfoot执行的制作技巧
1.先书写大分区标签结构
2.填充每个分区的内部内容
3.如果有合并单元格内容，进行单元格合并

HTML标签-表单

表单的组成

HTML表单用于搜集不同类型的用户输入，表单元素就是网页中提供用户进行输入或点击
的小控件
在HTML中，一个完整的表单通常由表单域、提示信息和表单控件(也称为表单元素) 3个
部分构成功能
表单域:相当于一一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，
表单中的数据就无法传送到后台服务器
提示信息:一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作
表单控件:包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。表单域标签
HTML表单域使用<form>标签进行定义
<form>标签是一个功能性标签，填写的表单信息要想正确的提交到后台服务器，必须放在一个<form>标签之内
<form>标签为双标签，容器级标签表单域标签属性
<form>标签通过对应属性规定提交数据的方法和提交位置

<form action="data.php" method="get" name"first"></form>

<input>

<input>标签是最重要的一个表单元素
<input>标签为单标签，本身相当于一个特殊的文本
<input>标签需要通过标签属性实现各种功能单行文本输入框：text
<input>标签的type属性值为text
定义提供用户输入的单行文本输入框，不能输入多行文字
常用value属性定义默认的输入文字密码输入框：password
<input>标签的type属性值为password
定义提供用户输入密码框
password 字段中的字符会被做掩码处理（显示为星号或者实心圆）单选框：radio
<input>标签的type属性值为radio
定义提供用户点击选择的单选框
单选框一般都是成组出现的，多个单选框组成一组选择的情况
同一组单选框之间必须是互斥的关系，通过给同- -组单选框都设置相同的name属性
值实现复选框：checkbox
<input>标签的type属性值为checkbox.
定义提供用户点击选择的多选框。
复选框允许用户在有限数量的选项中选择零个或多个选项。
同一组复选框最好也设置相同的name属性。

<input type="checkbox" name="hobby"/>唱歌
<input type="checkbox" name="hobby"/>代码
<input type="checkbox" name="hobby"/>运动

默认选中设置

单选框和复选框都可以提前设置默认选项
<input>标签有一个checked属性，如果不设置表示默认没有选中
属性值如果设置为“checked”，表示该项默认被选中按钮
<input>标签有四种形式的按钮:

ata-draft-node="block" data-draft-type="table" data-size="normal" data-row-style="normal"> 属性名属性值描述

文件上传：file

<input>标签的type属性值为file
定义文件上传按钮，可以提供用户选择本地文件进行上传服务器
<input type="file" multiple="multiple">使用input的multiple属性，可以决定是否可以选择多个文件
<input type="file" multiple="multiple" />
文本域<textarea>文本域使用<textarea>标签定义，制作可以输入多行文本的区域<textarea>标签为双标签，本身相当于一一个特殊的文字文本域可以设置默认输入的文字，在双标签之间书写默认文字
<textarea>属性<textarea>有两个标签属性，可以设置显示区域大小。rows:行，属性值是数字，数字是几表示文本框显示的最大行数，如果超过了行数，会被隐藏并且出现滚动条。cols:列，属性值是数字，数字是几，表示在出现滚动条之后，每一行显示的最大字
节数(一个汉字按2字节计算)

<textarea rows="5" cols="30">请书写一个200字的自我介绍</textarea>

下拉菜单

HTML 中的下拉菜单提前设置一些选项，然后可以通过点击选择其中一项
下拉菜单需要至少两个标签完成结构:
<select>:选择，表示定义下拉菜单整体结构
<option>:选项，表示定义下拉菜单的每一项两个标签都是双标签，文本级标签
关系: select>option, option可以有任意多项
默认选中项,默认情况下，选中的是第一-项
下拉菜单可以通过给<option>标签设置selected属性，属性值为selected,更改默认
选中项
分组管理
下拉菜单中如果选项变得复杂，可以将<option>进行分组管理
可以使用<optgroup>标签对选项进行分组，<optgroup> 是一个双标签
关系: select>optgroup>option
<optgroup>可以设置一个label属性,表示给这一组选项添加一个分组标签名，分组
标签<optgroup>是不能被点击选择的
<lable>
<label>标签的作用是帮表单元素定义标注(标记)
如果将表单控件与提示内容使用<label>进行绑定后，当用户鼠标点击<label>内的提
示内容时，浏览器就会自动将焦点转到和标签相关的表单控件上。
第一种绑定方法：
1.给表单元素设置id属性
2.然后将需要绑定的其他内容用<label>标签包裹
3.给<label>标签设置for属性，属性值为绑定的表单元素的id属性值

<input type="radio" name="sex" checked="checked" id="nan"><lable for="nan">难</lable>

第二种绑定方法：
如果绑定内容和表单元素写在一起，可以化简绑定写法
直接使用<lable>标签将绑定内容与表单元素一起进行嵌套

<lable><input type="radio" name="sex">男</lable>

字符实体

特殊记住的：&nbsp &lt &gt &copy