学HTML就看这篇呀（HTML详解）

复习html5时记录的笔记。
了解网站的基础概念，学习 HTML 基础知识，了解各种常用标签的意义以及基本用法。包括HTML5新增的语法特征。

文章目录

一、HTML概述
- 1.HTTP基础
- 2.什么是HTML
- 3.HTML网页结构
- 4.HTML注释
二、HTML常用标签
- 1.HTML标签
- 2.HTML元素
- 3.HTML常见标签
- 4.容器标签
- 5.HTML列表
- 6.HTML样式
三、HTML 表格与 DIV 应用
- 1.创建表格
- 2.完善表格
- 3.div设置
四、HTML 表单
- 1.创建表单
- 2.插入表单对象
- 3.菜单和列表
- 4.文本域
五、HTML图像与框架
- 1.插入图像
- 2.使用框架（iframe）
六、HTML5简介
- 1.HTML5代码规范
- 2.HTML5 的改变
- 3.新特性和新规则
- 4.新增的结构元素
- 5.废除的元素
七、HTML5表单
- 1.HTML5表单元素
- 2.HTML5表单新增元素
- 3.HTML5输入类型
八、HTML5 Canvas API
- 1.Canvas 元素
- 2.绘制简单图形
- 3.直线绘制
- 4.矩形绘制
- 5.圆和扇形的绘制
- 6.填充和渐变
- 7.文字绘制
- 8.图片绘制
九、HTML5 视频音频与拖放
- 1.HTML5 视频介绍
- 1.HTML5 视频介绍
- 3.HTML5 拖放
十.HTML5 Web Storage 和文件上传
- 1.Web Storage 概述
- 2.localStorage 方法
- 3.sessionStorage 方法
- 4.HTML5 文件上传概述
- 5.如何实现文件上传
- 6.文件读取
总结

一、HTML概述

1.HTTP基础

HTTP概述(转自百科)

超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的 WWW 文件都必须遵守这个标准。设计 HTTP 最初的目的是为了提供一种发布和接收 HTML 页面的方法。1960 年美国人 Ted Nelson 构思了一种通过计算机处理文本信息的方法，并称之为超文本（Hypertext）,这成为了 HTTP 超文本传输协议标准架构的发展根基。Ted Nelson 组织协调万维网协会（World Wide Web Consortium）和互联网工程工作小组（Internet Engineering Task Force ）共同合作研究，最终发布了一系列的 RFC，其中著名的 RFC 2616 定义了 HTTP 1.1。

下图描述了客户端和服务器的交互过程。当用户在浏览器输入网址后，浏览器与服务器建立了一个连接，浏览器给 Web 服务器发送了一个 HTTP 请求，服务器接收并解析请求后，返回响应。HTTP 响应中包含状态代码和返回资源的内容（响应正文）。

常见状态码

200 ：成功。

400 ：客户端请求有语法错误，服务器端不能理解。

401 ：该请求可能未经过授权。

403 ：服务器端收到该请求，但是拒绝为它提供服务，可能是没有权限等等。

404 ：该资源没找到。

500 ：服务器端发生了一个不可预知的错误。

503 ：服务器端当前还不能处理客户端的这个请求，可能过段时间之后才能恢复正常.

2.什么是HTML

HTML（超文本标记语言）是一种用于创建网页的标准标记语言。 HTML 不需要编译，可以直接由浏览器执行，它的解析依赖于浏览器的内核。它不是一种编程语言，而是一种标记语言。

3.HTML网页结构

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 简介</title>
  </head>
  <body></body>
</html>

是我们的文档声明头。他告诉了浏览器，本文档处理的是 HTML 文档。html 标签即根元素，此处表示文档的开始。head 标签是网页的头部，设置网页的相关信息。title 标签设置网页标题。body 标签定义文档的主体，也就是我们的主要内容。

4.HTML注释

在 HTML 中满足以下格式的内容即为注释，被注释的内容将不会被渲染和显示。

<!DOCTYPE html>
<html>
  <body>
    <!--这是一段注释。注释不会在浏览器中显示。-->

    <p>这是一段普通的段落。</p>
  </body>
</html>

二、HTML常用标签

1.HTML标签

HTML 标签是 HTML 语言中最基本的单位，HTML 标签是 HTML（标准通用标记语言下的一个应用）最重要的组成部分。HTML 标签的大小写无关的，例如和表示的意思是一样的，都代表“主体”，推荐使用小写。

双标签（双标记）
双标记也称体标记，是指由开始和结束两个标记符组成的标记。其基本语法格式如下：

<标记名>

<html></html>
<head></head>
<title></title>
<body></body>
<h1></h1>
<p></p>
<div></div>
<span></span>
<a></a>
<ul></ul>

单标签（单标记）

<标记名/>

<br />
<!--换行-->
<hr />
<!--水平分隔线-->
<meta />
<img />

标签的关系

嵌套关系

<head>
  <title> </title>
</head>

并列关系

<head></head>
<body></body>

2.HTML元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

eg：

<p>I am LW</p>

这个元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签

，以及一个结束标签

。元素内容是：I am LW。

3.HTML常见标签

h 系类标签

h 标签有六种 h1，h2，h3，h4，h5，h6，它代表着我们的标题

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 简介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>
  </body>
</html>

p 标签

p 标签是我们的文本标签。删掉上段代码标签里的内容，把下面的内容放到标签里面去。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 简介</title>
    <meta charset="utf-8" />
  </head>
  <body>
<p>我是第一段文字</p>
<p>我是第二段文字</p>
  </body>
</html>

图片标签

HTML 的图像是通过标签来定义的。语法: 。

<!DOCTYPE html>
<html>
<head>
    <title>HTML 简介</title>
    <meta charset="utf-8" />
</head>
<body>
<p>图片</p>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />
</body>
</html>

a 标签

标签是超链接标签，意思就是我们点击它可以跳转到一个网页

<!DOCTYPE html>
<html>
<head>
    <title>HTML 简介</title>
    <meta charset="utf-8" />
</head>
<body>
<a href="https://www.baidu.com/">baidu</a>
</body>
</html>

点击文字,跳转至链接页面

div 标签

标签是一个块级元素，块级元素占据其父元素（容器）的整个空间，可以把它想成一个盒子。
能够设置其宽高，这里的效果是生成一个宽高 200 像素的粉色 div,style后面会讲到。

<!DOCTYPE html>
<html>
<head>
    <title>HTML 简介</title>
    <meta charset="utf-8" />
</head>
<body>
<div style="width:200px;height:200px;background:pink">块级元素</div>
</body>
</html>

换行标签和空格字符

在浏览器显示页面时，浏览器会移除源代码中多余的空格和空行，所有连续的空格或空行都会被认为是一个空格。如果希望在不产生一个新段落的情况下换行，可以使用 lt;br/> 标签。如果想使用空格的话可以使用；字符。

<body>
  <p>这是一段文字 前面有很多空格但是只显示一个</p>
  <p>这是一段文字&nbsp;&nbsp;&nbsp;&nbsp;用了空格字符</p>
  <br />
  <p>上面是换行符</p>
</body>

水平分割线

标签用于在 HTML 页面中创建一条水平线。

<body>
  <hr />
  <hr />
  <hr />
</body>

4.容器标签

两种容器标签 div 和 span。

标签

标签
可将网页页面分割成不同的独立部分，通常用于定义文档中的区域或节。该标签是一个块级元素，浏览器会自动在
和
所标记的区域前后自动放置一个换行符。

标签

标签通常作为文本的容器，它没有特定的含义和样式，只有与 CSS 同时使用才可以为指定文本设置样式属性。该标签是一个内联元素，他与块级元素相反，内联元素不会自动在前后自动放置换行符，因此内联元素会默认显示在同一行。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <style>
      #box {
        width: 200px;
        height: 200px;
        background: red;
      }
    </style>
  </head>
  <body>
    <div id="box">这是div标签，自动换行</div>
    <input type="text" /><span>这是span标签，不自动换行</span>
  </body>
</html>

5.HTML列表

列表作为网页设计的重要内容之一，能够用来制作导航栏和新闻列表等。HTML 列表分为：有序列表（ol），无序列表（ul）以及自定义列表（dl）。

无序列表与有序列表

无序列表是一个项目的列表，此列项目使用实心圆、空心圆、方块进行标记，无序列表使用
标签。同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于
标签。每个列表项始于
标签。

<p>无序列表</p>
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>

<p>有序列表</p>
<ol>
  <li>列表项1</li>
  <li>列表项2</li>
</ol>

可以看到有多少个列表项就有多少个

标签。

无序列表和有序列表的 type 属性：

type 属性定义了列表项前项目符号的类型。

值	备注
disc（默认）	实心圆
circle	空心圆
square	小方块

值	备注
1（默认）	数字表示（1，2，3…)
A	大写字母表示（A,B,C…)
a	小写字母表示（a,b,c…)
I	大写罗马数字表示(I,II,III…)
i	小写罗马数字表示(i,ii,iii…)

举例：

<p>无序列表</p>
<ul type="circle">
  <li>空心圆列表项1</li>
  <li>空心圆列表项2</li>
</ul>

<p>有序列表</p>
<ol type="A">
  <li>列表项1</li>
  <li>列表项2</li>
</ol>

只需要修改 type 属性，就可以看到不同的项目符号了。

自定义列表（dl）
定义：自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以

开始。每个自定义列表项的定义以

开始。自定义列表的列表项前没有任何项目符号。

语法格式：

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  ...
</dl>

例子：

<h2>一个自定义列表：</h2>
<dl>
  <dt>A</dt>
  <dd>abcdefh</dd>
  <dt>1</dt>
  <dd>12345678</dd>
</dl>

在浏览器中的运行效果为：

6.HTML样式

通过 style 属性来改变 HTML 元素的样式。

HTML 样式实例 - 背景颜色

通过 “background-color” 属性值的设置来给背景设置颜色。

<html>
  <body>
    <p style="background-color:red">小丫么小牛马</p>
  </body>
</html>

HTML 样式实例 - 字体、颜色和尺寸

通过对 font-family 属性值的设置来设置字体，通过对 color 属性值的设置来设置颜色，通过对 font-size 属性值的设计来设计字体大小。

<html>
  <body>
    <p style="font-family:arial;color:green;font-size:50px;">小牛马</p>
  </body>
</html>

HTML 样式实例 - 文本对齐

下面的标题“小牛马”相对于页面居中对齐。

<html>
  <body>
    <h1 style="text-align:center">实验楼</h1>
  </body>
</html>

三、HTML 表格与 DIV 应用

1.创建表格

表格由

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

我们先来创建一个简单的表格：

<table>
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

我们发现这个表格没有边框，接下来让我们为它添加一个 border 属性再来看看效果。

<table border="1">
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

在浏览器显示效果为：

2.完善表格

caption 元素定义表格标题

表格一般都有标题，在 HTML 中表格标题通过定义。

<table border="1" width="300px" height="150px">
  <caption>
    表格标题
  </caption>
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

给表格添加表头

表格的表头使用标签进行定义，表头通常用于列名字。

<table border="1" width="300px" height="150px">
  <caption>
    支出表
  </caption>
  <tr>
    <th>支出</th>
    <th>备注</th>
  </tr>
  <tr>
    <td>32</td>
    <td>买苹果</td>
  </tr>
  <tr>
    <td>24</td>
    <td>买饮料</td>
  </tr>
</table>

表格与单元格的属性

表格的其他常用属性：

属性名	含义	常用属性值
cellspacing	设置单元格与单元格之间的距离	单位为px，像素值，默认为2px
cellpadding	设置文字与单元格之间的距离	默认为1px
width	设置表哥的宽度	单位为px
height	设置表格高度	单位为px
bgcolor	设置背景颜色	red，green等

属性的使用和 border 类似，只需要在 table 标签中添加属性即可。

单元格跨行和跨列

绘制表格的时候，我们常常需要合并单元格，而在 HTML 中提供了 colspan（合并列）和 rowspan（合并行）属性来帮助我们实现这一效果。

colspan 又称跨列，rowspan 又称跨行。

<table border="1" width="300px" height="150px">
  <h3>单元跨两列</h3>
  <tr>
    <th>姓名</th>
    <th colspan="2">电话</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>344 22 112</td>
    <td>211 32 123</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>433 31 212</td>
    <td>234 21 654</td>
  </tr>
</table>

<table border="1" cellspacing="0">
  <h3>单元跨两行</h3>
  <tr>
    <th>姓名</th>
    <td>张三</td>
  </tr>
  <tr>
    <th rowspan="2">电话</th>
    <td>344 22 112</td>
  </tr>
  <tr>
    <td>234 21 654</td>
  </tr>
</table>

3.div设置

在网页中可以使用很多个 div，在网页制作中，使用 div 可以将网页中的任何元素布局到网页中的任何位置。

语法：

<div style="样式设置"><div></div></div>

div 和 table 的区别

div 布局：

<div style="width:100%;border:1px solid #d4d4d4">
  <div style="background-color:pink">小牛</div>
  <div style="background-color:skyblue">小马</div>
</div>

table 布局：

<table style="width:100%;border:1px solid #d4d4d4">
  <tr>
    <td style="background-color:pink">小牛</td>
  </tr>
  <tr>
    <td style="background-color:skyblue">小马</td>
  </tr>
</table>

两个布局最终效果相同：

同样的效果，使用 div 布局能比表格更加灵活，但是我们需要根据不同的场景使用不同的布局方式，现在我们来看看两种布局的优缺点。

table 元素布局：

优点
1.理解比较简单。
2.不同的浏览器看到的效果一般相同。

缺点：
1.显示样式和数据绑定在一起。
2.布局的时候灵活度不高。
3.一个页面可能会有大量的 table 元素，代码冗余度高。
4.增加带宽。
5.搜索引擎不喜欢这样的布局。

div 元素布局：

优点：
1.符合 W3C 标准。
2.搜索引擎更加友好。
3.样式的调整更加方便，内容和样式的分离，使页面和样式的调整变得更加方便。
4.节省代宽，代码冗余度低。
5.表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。

四、HTML 表单

1.创建表单

标签用于创建 HTML 表单，常见的表单格式为： ```c ```

name：定义表单的名字。

method：定义表单结果从浏览器传送到服务器的方式，默认参数为：get 。post 安全性更高，因此常用作传输密码等，而 get 安全性较低，一般用于查询数据。

action：发送数据要去的地址。它的值必须是一个有效的 URL，可以是相对 URL 也可以是绝对 URL。如果没有提供此属性或者 action="#"，则数据将被发送到包含表单的页面的 URL。

2.插入表单对象

网页中的表单由许多不同的表单元素组成，这些表单元素包括文字字段、单选按钮、复选框、按钮等。

文字字段

在网页中最常见的表单元素就是文字字段，用户可以在文字字段内输入字符或者单行文本。语法:

<input
  type="text"
  name="控件名称"
  value="文字字段的默认取值"
  size="控件的长度"
  maxlength="最长字符数"
/>

该语法包含了许多参数，除了 type 参数以外，其他的参数都是可选的，可以自行选择。举栗子：

<form name="formBox" method="post" action="">
  姓名：<input type="text" name="name" size="20" /><br />
  年龄:<input type="text" name="age" size="40" value="10" maxlength="3" />
</form>

可以尝试给年龄输入值，如果文本字段长度超过了 3，就不能再输入了。

密码输入框

密码输入框是一种特殊的文字字段，他的各个属性和文字字段是相同的，但是输入进密码输入框的字符全部是“*”表示，保证周围人看不见输入的文本。

<input type="password" name="pwd" />

单选按钮

单选按钮可以使用户从选择列表中选择一个选项。

<form name="formBox" method="post" action="">
  <input type="radio" name="sex" value="male" checked />男<br />
  <input type="radio" name="sex" value="female" />女
</form>

几个单选按钮可以连接在一起，只需要把它们的 name 值设置为相同的。

同一组中只有一个按钮可以同时被选。如果没有选中任何一个，那么整个单选按钮池就被认为处于未知状态，且不会随表单提交。

可以尝试如果 name 不相同或者没有 name 会是什么情况。

复选框

复选框可以让用户从一个选项列表中选择超出一个的选项。

<form name="formBox" method="post" action="">
  <input type="checkbox" name="music" checked />音乐<br />
  <input type="checkbox" name="art" />美术<br />
  <input type="checkbox" name="math" />数学<br />
</form>

复选框可以拥有自己的名字，并不需要属于一个组。

按钮

HTML 表单中，有三种按钮：提交按钮，重置按钮，匿名按钮。我们可以使用