HTML(含HTML5）复习总结。【1天吐血整理】

部分图片暂时未导入图床，之后有空添加

HTML：超文本标记语言
超文本：超链接文档，从一个文档链接到另一个文档
URL：统一资源定位符

遵循规则
scheme://host.domain:port/path/filename
流行scheme：

http 超文本传输协议

https 安全超文本传输协议

ftp 文件传输协议

tag：html标签，如<b> </b> 尖括号包围的关键词，通常成对出现。开始和结束，也即开放和闭合。
语义元素：清楚地向浏览器和开发者描述其意义，如form table
浏览器：Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容
浏览器内核：Chrome-webkit
MVC：设计模式。Model，View（视图），Controller

1）最上面的一层，是直接面向最终用户的"视图层"（View）。它是提供给用户的操作界面，是程序的外壳。

2）最底下的一层，是核心的"数据层"（Model），也就是程序需要操作的数据或信息。

3）中间的一层，就是"控制层"（Controller），它负责根据用户从"视图层"输入的指令，选取"数据层"中的数据，然后对其进行相应的操作，产生最终结果。

MVVM：Model-View-ViewModel，mvc的改进版

vm层（视图模型层）通过接口从后台m层（model层）请求数据，vm层继而和v（view层）实现数据的双向绑定

实现了前后端更好的分离（前端需要的数据只需要请求后端的接口即可）

响应式web设计：RWD-Responsive Web Design，能够以可变尺寸传递网页，对于平板和移动设备是必需的
HTML 标签对大小写不敏感：<P> 等同于 <p>
从输入url到页面渲染完成经历了什么：

1.dns域名解析

2.发起tcp连接，三次握手

3.发送HTTP请求，接受HTTP响应

4.断开TCP连接（四次挥手）

5.浏览器解析HTML代码，请求js，css等资源，最后进行页面渲染，呈现给用户

css加载与js加载区别

css是并行加载，js是串行加载

HTML

元素

标题：h1 - h6
段落：p

默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

链接：a <a href=“http://www.w3school.com.cn”>This is a link</a>

target属性：定义被链接的文档在何处显示

target="_blank" 在新窗口打开文档

name属性：命名锚

例如：<a name=“tips”>基本的注意事项 - 有用的提示

<a href="#tips">有用的提示通过点击链接，跳回到锚处，常用于导航，百度百科中常见（侧边），可用id属性代替name属性

假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生

发送邮件：

<a href=“mailto:[email protected]?subject=Hello%20again”>发送邮件

注意：应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。

图像：img <img src=“w3school.jpg” width=“104” height=“142” />

alt 属性用来为图像定义一串预备的可替换的文本: alt=“big boat”

假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

背景图片：<body background="/i/eg_background.jpg">

图片在文字中如何对齐：

<p>图像在文本中

<p>图像在文本中

<p>图像在文本中

请注意，bottom 对齐方式是默认的对齐方式。

还有align = “left” “right”

调整图像尺寸： <img src="/i/eg_mouse.jpg" width=“50” height=“50”>

把图像当作链接：

<a href="/example/html/lastpage.html">
<img border=“0” src="/i/eg_buttonnext.gif" />
</a>

用a标签包裹 img标签

<map>定义图像地图，<area>定义图像地图中的可点击区域

可通过此链接学习

水平线：<hr /> 用于分割内容，创建水平线

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NXMvK0RS-1616834908545)(/Users/neo/Desktop/frontend/img资源.assets/image-20210324205827258.png)]

<br />换行，是关闭空元素的正确方法，使用它，而不是<br>,更有保障
<table>:

每个表格均有若干行（由标签定义），每行被分割为若干单元格（由标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border=“1”> 来显示边框

表格的表头使用 <th> 标签进行定义。
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
若td内容为空，需使用空格占位符：<td> </td>
如何实现跨行或跨列的表格单元格 th属性： colspan=“2” rowspan=“2”

table属性

单元格边距：cellpadding=“10”，单元格边沿与其内容之间的空白

单元格间距：cellspacing=“10”，单元格之间的空白

向表格（整个table）或表格单元（某个td）添加背景颜色或背景图像

在table或td中加属性 bgcolor 或 background

表格单元中排列内容在td中用属性 align=“left”诸如此类

frame属性：属性值有 box above below hsides vsides

列表：
- 无序列表
  此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
```
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
```
- 有序
  列表项目使用数字进行标记。
```
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
```
- 定义列表
  自定义列表不仅仅是一列项目，而是项目及其注释的组合。
```
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
```
块元素和内联元素

大多数 HTML 元素被定义为块级元素或内联元素。

可以通过

和将 HTML 元素组合起来。

布局：

html5提供的新语义元素定义了网页的不同部分，但只是定义，修饰还是得靠css，如header,nav,section,article,aside,footer,details,summary

html头部元素

以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

title
- 定义浏览器工具栏中的标题
- 提供页面被添加到收藏夹时显示的标题
- 显示在搜索引擎结果中的页面标题
meta 提供关于 HTML 文档的元数据, 用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据

link

<link> 标签定义文档与外部资源之间的关系。
<link> 标签最常用于连接样式表：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

html元素：以<p> 元素为例:

<p>This is my first paragraph.</p>

这个

元素定义了 HTML 文档中的一个段落。

这个元素拥有一个开始标签

，以及一个结束标签
。
元素内容是：This is my first paragraph。

属性

html属性：

属性总是以名称/值对的形式出现，比如：name=“value”。

属性总是在 HTML 元素的开始标签中规定。

适用于大多元素的属性：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AGfTZOyC-1616834908546)(/Users/neo/Desktop/frontend/img资源.assets/image-20210324205105263.png)]

style属性

<p style="background-color:green">This is a paragraph.</p>
淘汰了 bgcolor属性；

<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
淘汰了<font></font>标签

<h1 style="text-align:center">This is a heading</h1>
淘汰了 align 属性:<h1 align="center">This is heading 1</h1>

事件属性

在某种条件下触发动作，可参考链接

window事件
form事件
Keyboard 事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kcNbkvRE-1616834908546)(/Users/neo/Desktop/frontend/img资源.assets/image-20210325105840798.png)]
Mouse 事件
media事件媒介触发，video audio

注释

html注释：

<!-- This is a comment -->

文本格式化

HTML 可定义很多供格式化输出的元素，比如粗体和斜体字

文本格式化
预格式文本【pre标签
计算机输出标签
地址
缩写和首字母缩写
文字方向
块引用
删除字效果和插入字效果

可参考链接

具体标签

b 加粗 strong 效果差不多

使用 em 标签来表示强调的文本，应该使用 strong 标签来表示重要文本，应该使用 <mark> 标签来表示标注的/突出显示的文本。

在没有其他合适标签更合适时，才应该把 标签作为最后的选项

i 斜体
del 删除字
q 短引用，会为里面的内容包围引号
blockquote 块引用，会缩进处理
address 定义文档或文章的联系信息（作者/拥有者），内容以斜体出现
bdo 反向输出内容

框架

垂直框架

<frameset cols="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0dz38KFq-1616834908547)(/Users/neo/Desktop/frontend/img资源.assets/image-20210324225129228.png)]

水平框架

<frameset rows="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

假设浏览器无法处理框架 noframes
<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>

混合框架

<frameset rows="50%,50%">

<frame src="/example/html/frame_a.html">

<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>

</frameset>

框架的边界是可以拖动的，但如果在frame中加属性 noresize=“noresize”

则不可拖动

内联框架 iframe

<iframe src="/i/eg_landscape.jpg"></iframe>

文件路径

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HVOYEpZD-1616834908547)(/Users/neo/Desktop/frontend/img资源.assets/image-20210324230042036.png)]

绝对文件路径是指向一个因特网文件的完整 URL：
<img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower">

字符实体

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sJRtCjLp-1616834908548)(/Users/neo/Desktop/frontend/img资源.assets/image-20210324230806791.png)]

html4速查手册

html标签参考手册

表单

用于搜集不同类型的用户输入

form 元素定义html表单
- action属性：提交表单时执行的动作
- method属性：提交表单时使用的http方法（get或post）
  - get：查询，且没有敏感信息，数据在地址栏可见
  - post：更新，或包含敏感数据，数据在地址栏不可见
- accept-charset：规定在被提交表单中使用的字符集（默认：页面字符集）如：UTF-8
表单内包含表单元素
- input【最重要的表单元素】
  - type属性：text【文本输入】, radio【单选按钮】,submit【提交表单按钮】,password[password 字段中的字符会被做掩码处理,***], checkbox[复选框，可选0或多个]
  - name属性：果要正确地被提交，每个输入字段必须设置一个 name 属性。
  - value属性：规定输入字段的初始值
- fieldset 组合表单数据， legend元素为fieldset元素定义标题
  
  fieldset将表单框起来显示，legend后换行
- select：下拉列表
```
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

<option> 元素定义待选择的选项。
添加 selected 属性来定义预定义选项
<option value="fiat" selected>Fiat</option>  
```
- textarea: 多行输入字段，即文本域
- button：可点击的按钮

html5新增表单元素

datalist：为 <input> 元素规定预定义选项列表,用户会在他们输入数据时看到预定义选项的下拉列表

即下拉列表和输入框的结合体

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

Html5新增输入类型：input的 type属性值
- color:用于应该包含颜色的输入字段,颜色选择器会出现输入字段中
- date:用于应该包含日期的输入字段,日期选择器会出现输入字段中
- datetime:用户选择日期和时间（有时区）。
- datetime-local:允许用户选择日期和时间（无时区）
- email:包含电子邮件地址的输入字段
- month:允许用户选择月份和年份。
- number:用于应该包含数字值的输入字段，能堆数字做出限制
- range:包含一定范围内的值的输入字段,输入字段能够显示为滑块控件
- search:用于搜索字段（搜索字段的表现类似常规文本字段）
- tel:用于应该包含电话号码的输入字段
- time:允许用户选择时间（无时区)
- url:用于应该包含 URL 地址的输入字段
- week:允许用户选择周和年
input输入限制属性：
html5为input新增属性：
- autocomplete:规定表单或输入字段是否应该自动完成,当自动完成开启，浏览器会基于用户之前的输入值自动填写值。on or off
- autofocus：当页面加载时 <input> 元素应该自动获得焦点。即出现输入框高亮，且有竖线一闪一闪，表示正在输入。
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height 和 width：元素的高度和宽度
- list
- min 和 max
- multiple：如果设置，则规定允许用户在元素中输入一个以上的值。
  
  multiple 属性适用于以下输入类型：email 和 file。
```
接受多个值的文件上传字段：
Select images: <input type="file" name="img" multiple>
```
- pattern (regexp):用于检查 <input> 元素值的正则表达式
```
Country code: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
只能包含三个字母的输入字段（无数字或特殊字符）
```
- placeholder:用以描述输入字段预期值的提示（样本值或有关格式的简短描述）
- required:提交表单之前必须填写输入字段。
- step:合法数字间隔。如果 step=“3”，则合法数字应该是 -3、0、3、6、等等。
为form新增属性
- autocomplete:同上
- novalidate:规定在提交表单时不对表单数据进行验证

html5

变化

新的结构元素
新的表单元素 datalist
input新的输入类型：email，number，color
在客户端存储数据
- HTML5 提供了两种在客户端存储数据的新方法：
  - localStorage - 没有时间限制的数据存储。第二天、第二周或下一年之后，数据依然可用。
  - sessionStorage - 针对一个 session 的数据存储。当用户关闭浏览器窗口后，数据会被删除。
  之前，这些都是由 cookie 完成的。但速度慢，效率不高。
  
  在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

新的属性语法

empty 如 disabled，不需要属性值
无引号，单，双。。
图像 canvas svg 元素
媒体audio video

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>
例子使用了两个不同的音频格式。HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 <embed> 元素。
  
  
  <video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>
  例中使用了 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。

HTML5 定义了八个新的语义 HTML 元素。所有都是块级元素

为确保老式浏览器可用
header, section, footer, aside, nav, main, article, figure {
     
     
 display: block; 
}

可自定义元素

<!DOCTYPE html>
<html>

<head>
<title>Creating an HTML Element</title>
<script>document.createElement("myHero")</script>
<style>
myHero {
      
      
 display: block;
 background-color: #ddd;
 padding: 50px;
 font-size: 30px;
} 
</style> 
</head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

<myHero>My First Hero</myHero>

</body>
</html>

已添加的 JavaScript 语句 document.createElement("myHero")，仅适用于 IE。