HTML学习

简介

​ HyperText Markup Language 超文本标记语言,后缀名.htm .html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>摆烂基地(blog.lrdhappy.com)</title>
</head>
<body>
    <h1>第一个标题</h1>
    <p>第一个段落。</p>
</body>
</html>
  • <!DOCTYPE html> 声明为 HTML5 文档,不区分大小写
  • <html> 元素是 HTML 页面的根元素,定义了整个 HTML 文档
  • <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容,定义了 HTML 文档的主体
  • <h1> 元素定义一个大标题
  • <p> 元素定义一个段落

Html基础

标题

HTML 段落是通过标签 <h> 来定义的,可选范围<h1> - <h6> 

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

段落

HTML 段落是通过标签 <p> 来定义的

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

链接

HTML 链接是通过标签 <a> 来定义的,在href 属性中指定链接的地址

<a href="https://blog.lrdhappy.com/">摆烂基地链接</a>

请始终将正斜杠添加到子文件夹。假如这样书写链接：href=“https://www.runoob.com/html”，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=“https://www.runoob.com/html/”。

target 属性

值 描述
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。

在新窗口打开文档

<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>

<!-- rel="noopener noreferrer"
意思是不会打开其他的网站，因为恶意病毒可能会修改你的浏览器空白页地址。-->

id 属性

在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id=“tips”）"：

<a href="#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到"有用的提示部分(id=“tips”）"：

<a href="https://www.runoob.com/html/html-links.html#tips">访问有用的提示部分</a>

访问链接指定位置

<h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p>

<p>
<a href="#C4">查看章节 4</a>
</p>

邮件

参数 描述
mailto:name@email.com 邮件接收地址
cc=name@email.com 抄送地址
bcc=name@email.com 密件抄送地址
subject=subject text 邮件主题
body=body text 邮件内容
? 第一个参数分隔符
& 其他参数分隔符

多个邮件地址用 ; 隔开，空格用 %20 代替

<p>
这是一个电子邮件链接：
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
发送邮件</a>
</p>

<p>
这是另一个电子邮件链接：
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>
</p>

图片

HTML 图像是通过标签 <img> 来定义的,在浏览器无法载入图像时，替换文本属性(alt)告诉读者失去的信息

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" alt="这是一张图片">

不同目录

<img src="/images/test.png" width="258" height="390" />
<p></p>
<img src="../test.png" width="259" height="390" />

相同目录下

<img src="test.jpg" width="300" height="120"/>

来源于网络

<img src="https://www.baidu.com/img/flexible/logo/pc/peak-result.png" width="300" height="120"/>

图片可点击区域

<area> 标签定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）。

<area> 元素始终嵌套在 <map> 标签内部

<map> 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。

<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性

<h4 style="text-align: center;">也可以点击图片上的文字试试
        <br>
        <img src="/images/link.png" height="400" width="400" alt="导航图片" usemap="#mylinkpng">
    </h4>
    <map name="mylinkpng">
        <area shape="rect" coords="0,0,80,80" href="#music" target="_blank">
        <area shape="rect" coords="320,0,400,80" href="#talk" target="_blank">
        <area shape="rect" coords="160,160,240,240" href="#about" target="_blank">
        <area shape="rect" coords="0,320,80,400" href="#fun" target="_blank">
        <area shape="rect" coords="320,320,400,400" href="#vedio" target="_blank">
</map>

矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))
<area shape="rect" coords="x1,y1,x2,y2" href=url>
圆形：(圆心坐标为(X1,y1)，半径为r)
<area shape="circle" coords="x1,y1,r" href=url>
多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)
<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>

创建图片链接

<p>创建图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

<p>无边框的图片链接:
<a href="http://www.runoob.com/html/html-tutorial.html">
<img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

注释

<!-- 这是一个注释 -->

href src

  • href(Hypertext Reference)表示超文本引用,在link和a元素使用
  • src(source)表示来源地址，在 img、script、iframe 等元素上，是引入
<link href="reset.css" rel=”stylesheet“/>

<script src="script.js"></script>

Html语法

元素

开始标签 元素内容 结束标签
<p> 这是一个段落 </p>
<a href="default.html"> 这是一个链接 </a>
<br> <br /> 换行
<hr> 水平线
  • 某些 HTML 元素具有空内容
  • 空元素在开始标签中进行关闭
  • 大多数 HTML 元素可以嵌套
  • 大多数 HTML 元素可拥有属性
  • htm标签大小写不敏感

没有内容的 HTML 元素被称为空元素,空元素是在开始标签中关闭的,在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法

属性

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现，比如：
<a href="https://blog.lrdhappy.com">摆烂基地</a>

​ 属性值应该始终被包括在引号内,一般使用双引号,也可以使用单引号,若属性值本身就含有双引号，那么必须使用单引号，例如：name=‘John “ShotGun” Nelson’

属性 描述
class 为html元素定义一个或多个类名,类名从样式文件引入,class=" " （引号里面可以填入多个class属性）
id 定义元素的唯一id
style 规定元素的行内样式（inline style）
title 描述了元素的额外信息 (作为工具条使用)

折行

在不产生一个新段落的情况下进行换行

<p>这个<br>段落<br>演示了分行的效果</p>

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

文本格式化

标签 描述
<b> <strong> 粗体,使用网页阅读器（盲人），strong 会重读，b 则不会
<i> <em> 斜体,<em> 标签告诉浏览器把其中的文本表示为强调的内容
<small> 小号字
<big> 大号字
<sub> 下标字
<sup> 上标字
<ins> 插入字/下划线 <u>下划线
<del> 删除字
<kbd> 键盘码(推荐CSS)
<code> 代码(推荐CSS)
<samp> 计算机代码样本(推荐CSS)
<var> 定义变量(推荐CSS)
<pre> 定义预格式文本
<abbr> 定义缩写<abbr title="World Health Organization">WHO</abbr>
<address> 地址,文档所有者联系信息,斜体
<bdo> 指定文本方向,rtl为反向ltr正向<bdo dir="rtl">该段落文字从右到左显示。</bdo>
<blockquote> 定义一个摘自另一个源的块引用(长)<blockquote cite="http://www.worldwildlife.org/who/index.html"><br/>For 50 years<br/></blockquote>
<q> 标记一个短的引用,浏览器经常会在这种引用插入引号
<cite> 定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题,引用的文本将以斜体显示
<dfn> 定义一个定义项目(推荐CSS) 
<pre>
此例演示如何使用 pre 标签
对空行和    空格
进行控制
</pre>

头部

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> ,<base>

title

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必须的。

  • 定义了浏览器工具栏的标题
  • 当网页添加到收藏夹时，显示在收藏夹中的标题
  • 显示在搜索引擎结果页面的标题
<head> 
<meta charset="utf-8"> 
<title>文档标题</title>
</head>

base

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接

<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
<body>
<img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"
<br><br>
<a href="http://www.runoob.com">菜鸟教程</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
</body>

<link> 标签定义了文档与外部资源之间的关系。

<link> 标签通常用于链接到样式表:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

style

<style> 标签定义了HTML文档的样式文件引用地址.

<style> 元素中你也可以直接添加样式来渲染 HTML 文档

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

meta

​ meta标签描述了一些基本的元数据,不显示在页面上,但会被浏览器解析,通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="摆烂基地">

定义网页作者:

<meta name="author" content="Lrdhappy">

每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">

script

<script>标签用于加载脚本文件，如： JavaScript

表格

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

  • border="1"有边框
  • tr td 顺序可变 改变表格方向
  • th表头
  • thead 表格的页眉 第一行
  • tbody 表格的主体
  • tfoot 表格的页脚 末行
  • caption 定义标题,标签必须直接放置到 <table> 标签之后
  • colgroup 定义表格列的组
  • col 定义表格列属性
  • span属性规定列组应该横跨的列数

<table> 标签常用属性：

border="1"   表格边框的宽度
bordercolor="#fff"   表格边框的颜色
cellspacing="5"   单元格之间的间距
width="500"   表格的总宽度
height="100"   表格的总高度
align="right"   表格整体对齐方式    (参数有  left、center、right)
bgcolor="#fff"   表格整体的背景色

<tr> 标签的常用属性:

bgcolor="#fff"    行的颜色
align="right"    行内文字的水平对齐方式    (参数有left、center、right)
valign="top"     行内文字的垂直对齐方式    (参数有top、middle、bottom)

<td>、<th> 标签的常用属性:

width="500"    单元格的宽度，设置后对当前一列的单元格都有影响
height="100"   单元格的高度，设置后对当前一行的单元格都有影响
bgcolor="fff"  单元格的背景色
align="right"  单元格文字的水平对齐方式    (参数left、center、right)
rowspan="3"    合并垂直水平方向的单元格
colspan="3"    合并水平方向单元格
valign="top"   单元格文字的垂直对齐方式    (参数middle、bottom、top) 

<table border="1" >
    <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>
<table border="0" align="center">
        <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>
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2 
        <table border="1"  align="center">水平标题
            <tr>
                <th>Name</th>
                <th>Telephone</th>
                <th>Telephone</th>
            </tr>
            <tr>
                <td>Bill Gates</td>
                <td>555 77 854</td>
                <td>555 77 855</td>
            </tr>
        </table>

        <h4  align="center">垂直标题:</h4>
        <table border="1"  align="center">
            <tr>
                <th>First Name:</th>
                <td>Bill Gates</td>
            </tr>
            <tr>
                <th>Telephone:</th>
                <td>555 77 854</td>
            </tr>
            <tr>
                <th>Telephone:</th>
                <td>555 77 855</td>
            </tr>
        </table>
水平标题
Name Telephone Telephone
Bill Gates 555 77 854 555 77 855
First Name: Bill Gates
Telephone: 555 77 854
Telephone: 555 77 855 
<!-- <colgroup> 和 <col> 标签 设置背景色-->
<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>
ISBN Title Price
3476896 My first HTML $53 
<table border="1">
            <thead>
                <tr>
                    <th>Month</th>
                    <th>Savings</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td>Sum</td>
                    <td>$180</td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>January</td>
                    <td>$100</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>$80</td>
                </tr>
            </tbody>
        </table>
Month Savings
Sum $180
January $100
February $80 
<h4 style="text-align:center">课程表</h4>
<table border="1" cellpadding="10" width="100%">
    <tr>
	    <th colspan="2">时间\日期</th>
	    <th>一</th>
	    <th>二</th>
	    <th>三</th>
	    <th>四</th>
	    <th>五</th>
    </tr>

    <tr>
	    <th rowspan="2">上午</th>
	    <th>9:30-10:15</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
    </tr>

    <tr>
	    <th>10:25-11:10</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
    </tr>

    <tr>
    <th colspan="7"></th>
    </tr>

    <tr>
	    <th rowspan="2">下午</th>
	    <th>14:30-15:15</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
    </tr>

    <tr>
	    <th>15:25-16:10</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
	    <th>语文</th>
    </tr>
 </table>
时间\日期 一 二 三 四 五
上午 9:30-10:15 语文 语文 语文 语文 语文
10:25-11:10 语文 语文 语文 语文 语文
下午 14:30-15:15 语文 语文 语文 语文 语文
15:25-16:10 语文 语文 语文 语文 语文

列表

无序列表

<ol>标签,表项使用<li>

<h4>嵌套列表：</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

嵌套列表：

  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk
<h4>圆点列表：</h4>
<ul style="list-style-type:disc">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>圆圈列表：</h4>
<ul style="list-style-type:circle">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>正方形列表：</h4>
<ul style="list-style-type:square">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

圆点列表：

  • Apples
  • Bananas
  • Lemons
  • Oranges

圆圈列表：

  • Apples
  • Bananas
  • Lemons
  • Oranges

正方形列表：

  • Apples
  • Bananas
  • Lemons
  • Oranges

有序列表

<ol>标签,表项使用<li>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
  1. Coffee
  2. Tea
  3. Milk
  1. Coffee
  2. Tea
  3. Milk
<h4>编号列表：</h4>
<ol><!--默认1 数字列表-->
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>大写字母列表：</h4>
<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>小写字母列表：</h4>
<ol type="a">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>罗马数字列表：</h4>
<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>小写罗马数字列表：</h4>
<ol type="i">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

编号列表：

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

大写字母列表：

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

小写字母列表：

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

罗马数字列表：

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

小写罗马数字列表：

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

自定义列表

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

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Coffee
- black hot drink
Milk
- white cold drink

区块

  • HTML 可以通过<div>和 <span>将元素组合起来

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

  • 块级元素在浏览器显示时，通常会以新行来开始（和结束）。如:<h1>, <p>, <ul>, <table>

  • 内联元素在显示时通常不会以新行开始。

    实例: <b>, <td>, <a>, <img>

  • HTML <div> 元素是块级元素，可用于组合其他 HTML 元素的容器。没有特定的含义,浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是文档布局。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

  • HTML <span> 元素是内联元素，可用作文本的容器,没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

<!-- 文档中的一个区域将显示为蓝色 -->
<div style="color:#0000FF">
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>
<!-- 对文本中的一部分进行着色 -->
<p>后面文字是 <span style="color:blue">蓝色</span> 的</p>

布局

div布局

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>DivStyle</title>
</head>

<body>

    <div id="container" style="width:500px">

        <div id="header" style="background-color:#FFA500;">
            <h1 style="margin-bottom:0;">主要的网页标题</h1>
        </div>

        <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
            <b>菜单</b><br>
            HTML<br>
            CSS<br>
            JavaScript
        </div>

        <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
            内容在这里</div>

        <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
            版权 © blog.lrdhappy.com</div>

    </div>

</body>

table布局

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>TableStyle</title>
</head>
<body>
    <table width="500" border="0">
        <tr>
            <td colspan="2" style="background-color:#FFA500;">
                <h1>主要的网页标题</h1>
            </td>
        </tr>
        <tr>
            <td style="background-color:#FFD700;width:100px;">
                <b>菜单</b><br>
                HTML<br>
                CSS<br>
                JavaScript
            </td>
            <td style="background-color:#eeeeee;height:200px;width:400px;">
                内容在这里</td>
        </tr>
        <tr>
            <td colspan="2" style="background-color:#FFA500;text-align:center;">
                版权 © blog.lrdhappy.com</td>
        </tr>
    </table>
</body>
</html>

表单和输入

表单用于收集用户的输入信息。,HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器

文本框及密码框

name属性必须指定,否则数据不会发送给服务器

<form action="">
        First name: <input type="text" name="firstname"/><br/>
        Last name: <input type="text" name="lastname"/>
    	OtherTest: <input type="text" name="lastname" value="test"/><!--文本框中出现test-->
</form>
<form action="">
        Username: <input type="text" name="user"/><br/>
        Password: <input type="password" name="password"/>
</form>

单选按钮

同一个name属性只能选一个

<form action="">性别:
            <input type="radio" name="sex" value="male">男
            <input type="radio" name="sex" value="female">女  
</form>

复选框

<form>
喜欢的编程语言: <br>
            <input type="checkbox" name="vehicle" value="HTML">HTML<br>
            <input type="checkbox" name="vehicle" value="CSS">CSS<br>
</form>

下拉列表

  • value：提交数据到服务器的值（后台程序PHP使用）
  • name：为控件命名，以备后台程序 ASP、PHP 使用
  • checked：当设置 checked=“checked” 时，该选项被默认选中
<form>
    你是生物吗<br>
    <input type="radio"  value="YES" checked="checked">YES<br />
    <input type="radio" value="NO">NO<br>
</form>

<form action="">
<select name="country">
    <option value="china">中国</option>
    <option value="usa">美国</option>
    <option value="uk">英国</option>
    <option value="japan">日本</option>
</select><br>
</form>

<!--多组标签 可用于下拉框 省 市-->
<select>
    <optgroup label="Swedish Cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="German Cars">
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </optgroup>
</select>

预选列表

<form action="">学习专业:
    <select name="majority">
        <option value="cs">CS</option>
        <option value="ee">EE</option>
        <option value="se" selected>SE</option>
    </select>
</form>

使用隐藏在下拉列表中的默认空白值实现SELECT标记

<form>
  <select>
    <option selected disabled hidden style="display: none" value=""></option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
 </select>
</form>
  • selected：使此选项成为默认选项。
  • disabled：使此选项无法点击。
  • style=“display:none”：使此选项不在旧版浏览器中显示。
  • hidden：使此选项不显示在下拉列表中。

多行文本框

value值为开始到结束标签内容,包含空白

<textarea name="info" rows="10" cols="30">
    个人简介:
</textarea>

按钮

<input type="button" value="Hello world!">
<button>HELLO!</button>

提交 重置

​ 当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。action 属性会对接收到的用户输入数据进行相关的处理:

<form name="input" action="html_form_action.php" method="get">
        Username: <input type="text" name="user">
			<input type="submit" value="提交">
            <input type="reset" value="重置">
</form>

输入数据会传送到 html_form_action.php 文件，该页面将显示出输入的结果。

以上实例中有一个 method 属性，它用于定义表单数据的提交方式，可以是以下值：

  • post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
  • get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 **?**作为分隔符，一般用于不敏感信息，如分页等。
<!-- 以下表单使用 GET 请求发送数据到当前的 URL，method 默认位 GET。 -->
<form>
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>

<!-- 以下表单使用 POST 请求发送数据到当前的 URL。 -->
<form method="post">
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>

<!-- 表单使用 fieldset, legend, 和 label 标签 -->
<form method="post">
  <fieldset>
    <legend>Title</legend>
    <label><input type="radio" name="radio"> Select me</label>
  </fieldset>
</form>

带边框表单

<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>

发送邮件表单

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>

form表单元素

<label> 标签的 for 属性应当与相关元素的 id 属性相同,label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件

<!-- 以下表单使用 GET 请求发送数据到当前的 URL，method 默认位 GET。 -->
<form>
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>

<!-- 以下表单使用 POST 请求发送数据到当前的 URL。 -->
<form method="post">
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>

<!-- 表单使用 fieldset, legend, 和 label 标签 -->
<form method="post">
  <fieldset>
    <legend>Title</legend>
    <label><input type="radio" name="radio"> Select me</label>
  </fieldset>
</form>

<button>在 <button> 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处

<input type="button" value="Hello world!"><br>
<button>HELLO!</button><br>
<button type="button">点我!</button> <br>

<optgroup> 标签把相关的选项组合在一起

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

<fieldset> 标签可以将表单内的相关元素分组。标签会在相关表单元素周围绘制边框。通过<legend>定义标题

标签属性

<fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
</fieldset>

<!-- 文本替代图像 alt-->
<form action="demo_form.html">
First name: <input type="text" name="fname"><br>
<input type="image" src="submit.gif" alt="Submit" width="48" height="48">
<!-- 框里 value 显示默认值-->
Username: <input type="text" name="user" value="默认值"><br>
</form>

input type

button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week

框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。iframe:

  • 属性默认以像素为单位, 但是你可以指定其按比例显示 (如：“80%”)
  • frameborder 属性用于定义iframe表示是否显示边框。设置属性值为 “0” 移除iframe的边框
<iframe src="URL"></iframe>

<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>

<iframe src="demo_iframe.htm" frameborder="0"></iframe>
<iframe src="demo_iframe.htm" frameborder="no"></iframe>

<p id="music"><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86
                      src="//music.163.com/outchain/player?type=2&id=1146770&auto=1&height=66"></iframe></p>

<br>
<p id="vedio"><iframe height="480px" width="720px" src="//player.bilibili.com/player.html?aid=425305020"
                      scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe></p>

<!-- iframe 可以显示一个目标链接的页面
目标链接的属性必须使用 iframe 的属性-->
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>

某些网页不希望被嵌套, 响应头中有一选项

X-Frame-Options
他有三个可配置值
DENY：表示该网站页面不允许被嵌套，即便是在自己的域名的页面中也不能进行嵌套。
SAMEORIGIN：表示该页面可以在相同域名页面中被嵌套展示。
ALLOW-FROM uri：表示该页面可以在指定来源页面中进行嵌套展示。

frameset已经淘汰

<html>
	<head></head>
	<frameset rows="20%,*" > <!-- frameborder="no" -->
		<frame src="frames/top.html"/>
		<frameset cols="15%,*">
			<frame src="frames/left.html"/>
			<frameset rows="80%,*">
				<frame src="frames/main.html"/>
				<frame src="frames/bottom.html"/>
			</frameset>
		</frameset>
	</frameset>
</html>

颜色

HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）1600万种不同颜色。

每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。

#000000 rgb(0,0,0)

#FFFFFF rgb(255,255,255)

三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB

RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上扩展包括了 “alpha” 通道，运行对颜色值设置透明度。

div {
background:rgba(255,0,0,0.5);
}

相对于使用 rgb(255,255,0)，使用 rgba(255,255,0,0.5) 可以实现设置颜色透明度的功能，这里的 0.5 表示透明度，范围 0~1，0 表示全透明。

通常我们为了省略一个 0:

div {
    background:rgba(255,0,0,.5);
}

实例：

<p style="background-color:rgb(255,255,0)">
通过 rbg 值设置背景颜色
</p>
<p style="background-color:rgba(255,255,0,0.25)">
通过 rbg 值设置背景颜色
</p>
<p style="background-color:rgba(255,255,0,0.5)">
通过 rbg 值设置背景颜色
</p>
<p style="background-color:rgba(255,255,0,0.75)">
通过 rbg 值设置背景颜色
</p>

WEB安全色 :

数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用,216 跨平台 web 安全色被用来确保：当计算机使用 256 色调色板时，所有的计算机能够正确地显示所有的颜色。

颜色名

141个颜色名称是在HTML和CSS颜色规范定义的（17标准颜色，再加124）。下表列出了所有颜色的值，包括十六进制值。17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色

脚本

​ <script>标签用于定义客户端脚本，比如 JavaScript,<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文

<script>
    document.write("Hello World!");
    document.write("<p>这是一个段落。</p>");
</script>

<p id="demo">
JavaScript 可以触发事件，就像按钮点击。</p>

<script>
function myFunction()
{
	document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>

<button type="button" onclick="myFunction()">点我</button>

​ <noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时,<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容

<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

字符实体

​ HTML 中的预留字符必须被替换为字符实体,一些在键盘上找不到的字符也可以使用字符实体来替换,如需显示小于号，我们必须这样写：&lt; 或 &#60; 或 &#060;,HTML 中的常用字符实体是不间断空格&nbsp;,浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 &nbsp;字符实体

实体名称对大小写敏感！

显示结果 描述 实体名称 实体编号
空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 引号 &quot; &#34;
’ 撇号 &apos; (IE不支持) &#39;
￠ 分 &cent; &#162;
£ 镑 &pound; &#163;
¥ 人民币/日元 &yen; &#165;
€ 欧元 &euro; &#8364;
§ 小节 &sect; &#167;
© 版权 &copy; &#169;
® 注册商标 &reg; &#174;
™ 商标 &trade; &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;

URL

简介

scheme://host.domain:port/path/filename

    • scheme - 定义因特网服务的类型。最常见的类型是 http
    • host - 定义域主机（http 的默认主机是 www）
    • domain - 定义因特网域名，比如 runoob.com
    • :port - 定义主机上的端口号（http 的默认端口号是 80）
    • path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
    • filename - 定义文档/资源的名称
Scheme 访问 用于…
http 超文本传输协议 以 http:// 开头的普通网页。不加密。
https 安全超文本传输协议 安全网页，加密所有信息交换。
ftp 文件传输协议 用于将文件下载或上传至网站。
file 计算机上的文件。

URL字符编码

URL 使用 ASCII 字符集,URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符,URL 不能包含空格。URL 编码通常使用 + 来替换空格。

字符 编号 描述
32 空格（space）
! 33 感叹号（exclamation mark）
" 34 引号（quotation mark）
# 35 数字符号（number sign）
$ 36 美元符号（dollar sign）
% 37 百分比符号（percent sign）
& 38 & 符号（ampersand）
’ 39 撇号（apostrophe）
( 40 左括号（left parenthesis）
) 41 右括号（right parenthesis）
* 42 星号（asterisk）
+ 43 加号（plus sign）
, 44 逗号（comma）
- 45 连字符（hyphen）
. 46 句号（period）
/ 47 斜线（slash）
0 48 数字 0
9 57 数字 9
: 58 冒号（colon）
; 59 分号（semicolon）
< 60 小于号（less-than）
= 61 等于号（equals-to）
> 62 大于号（greater-than）
? 63 问号（question mark）
@ 64 @ 符号（at sign）
A 65 大写字母 A
Z 90 大写字母 Z
[ 91 左方括号（left square bracket）
\ 92 反斜线（backslash）
] 93 右方括号（right square bracket）
^ 94 插入符号（caret）
_ 95 下划线（underscore）
` 96 重音符（grave accent）
a 97 小写字母 a
z 122 小写字母 z
{ 123 左花括号（left curly brace）
| 124 竖线（vertical bar）
} 125 右花括号（right curly brace）
~ 126 波浪线（tilde）

XHTML

  • XHTML 是以 XML 格式编写的 HTML
  • XHTML 指的是可扩展超文本标记语言
  • XHTML 与 HTML 4.01 几乎是相同的
  • XHTML 是更严格更纯净的 HTML 版本
  • XHTML 是以 XML 应用的方式定义的 HTML
  • XHTML 是 2001 年 1 月发布的 W3C 推荐标准
  • XHTML 得到所有主流浏览器的支持

与 HTML 相比最重要的区别：

文档结构

  • XHTML DOCTYPE 是强制性的
  • <html> 中的 XML namespace 属性是强制性的
  • <html>、<head>、<title> 以及 <body> 也是强制性的

元素语法

  • XHTML 元素必须正确嵌套
  • XHTML 元素必须始终关闭
  • XHTML 元素必须小写
  • XHTML 文档必须有一个根元素

属性语法

  • XHTML 属性必须使用小写
  • XHTML 属性值必须用引号包围
  • XHTML 属性最小化也是禁止的
是强制性的

XHTML 文档必须进行 XHTML 文档类型声明（XHTML DOCTYPE declaration）。

<html>, <head>, <title>, 和 <body> 元素也必须存在，并且必须使用 <html> 中的 xmlns 属性为文档规定 xml 命名空间。

下面的例子展示了带有最少的必需标签的 XHTML 文档：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta charset="utf-8">  <title>文档标题</title> </head>  <body> 文档内容 </body>  </html>

XHTML 元素必须合理嵌套

在 HTML 中，一些元素可以不互相嵌套，像这样：

<b><i>粗体和斜体文本</b></i>

在 XHTML 中，所有的元素都必须互相合理地嵌套，像这样：

<b><i>粗体和斜体文本</i></b>

XHTML 元素必须有关闭标签
<p>这是一个段落</p> <p>这是另外一个段落</p>

空元素必须包含关闭标签

错误示例：
分行:<br> 水平线: <hr> 图片: <img src="C:\Users\Dage\Desktop\frontend\happy.gif" alt="Happy face">
正确示例：
分行:<br /> 水平线: <hr /> 图片: <img src="C:\Users\Dage\Desktop\frontend\happy.gif" alt="Happy face" />

XHTML 元素必须是小写

错误示例:
<BODY> <P>这是一个段落</P> </BODY>
正确示例：
<body> <p>这是一个段落</p> </body>

属性名称必须是小写

错误示例：
<table WIDTH="100%">
正确示例:
<table width="100%">

属性值必须有引号

错误示例：
<table width=100%>
正确示例：
<table width="100%">

不允许属性简写

错误示例：
<input checked> <input readonly> <input disabled> <option selected>
正确示例：
<input checked="checked"> <input readonly="readonly"> <input disabled="disabled"> <option selected="selected">

如何将 HTML 转换为 XHTML

  1. 添加一个 XHTML <!DOCTYPE> 到你的网页中
  2. 添加 xmlns 属性添加到每个页面的html元素中。
  3. 改变所有的元素为小写
  4. 关闭所有的空元素
  5. 修改所有的属性名称为小写
  6. 所有属性值添加引号
常见的 DOCTYPE 声明
HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
这个 DTD 与 HTML 4.01 Transitional 相同，但是允许使用框架集内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
这个 DTD 与 XHTML 1.0 Transitional 相同，但是允许使用框架集内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
这个 DTD 与 XHTML 1.0 Strict 相同，但是允许您添加模块（例如为东亚语言提供 ruby 支持）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

使用CSS

CSS 可以通过以下方式添加到HTML中:

  • 内联样式- 在HTML元素中使用"style" 属性
  • 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
  • 外部引用 - 使用外部 CSS 文件

内联样式

<!-- 定义元素颜色-->
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>
<body style="background-color:yellow;">

这是一个标题

这是一个段落。

<!-- font-family（字体），color（颜色），和font-size（字体大小）-->
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

一个标题

一个段落。

<!-- 居中对齐 -->
<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>

居中对齐的标题

这是一个段落。

内部样式表

​ 当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部样式表

​ 当样式需要被应用到很多页面的时候,可以通过更改一个文件来改变整个站点的外观

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<!-- CSS 提供-->
<style>
@import url("标签路径")
</style>

HTML5

改进

HTML5

最小的HTML5文档

下面是一个简单的HTML5文档：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>文档标题</title>
</head>

<body> 文档内容...... </body>

</html>

HTML5 的改进

  • 新元素
  • 新属性
  • 完全支持 CSS3
  • Video 和 Audio
  • 2D/3D 制图
  • 本地存储
  • 本地 SQL 数据
  • Web 应用
  • HTML5 多媒体
  • 添加和删除了一些语义元素

HTML5 应用

使用 HTML5 你可以简单地开发应用

  • 本地数据存储
  • 访问本地文件
  • 本地 SQL 数据
  • 缓存引用
  • Javascript 工作者
  • XHTMLHttpRequest 2

HTML5 图形

使用 HTML5 你可以简单的绘制图形:

  • 使用canvas元素。
  • 使用内联 SVG
  • 使用 CSS3 2D 转换,CSS3 3D 转换

HTML5 使用 CSS3

  • 新选择器
  • 新属性
  • 动画
  • 2D/3D 转换
  • 圆角
  • 阴影效果
  • 可下载的字体

浏览器支持

​ 现代的浏览器都支持 HTML,此外，所有浏览器，包括旧的和最新的，对无法识别的元素会作为内联元素自动处理。可以 “教会” 浏览器处理 “未知” 的 HTML 元素。

HTML5 定了 8 个新的 HTML 语义 元素。所有这些元素都是 块级 元素。为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:

header, section, footer, aside, nav, main, article, figure {    display: block;  }

<!-- 为 HTML 添加新元素-->
<script>
document.createElement("myHero")
</script>
<style>
myHero {
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
}
</style> 
<myHero>我的第一个新元素</myHero>

JavaScript 语句 document.createElement(“myHero”) 是为 IE 9及以后浏览器添加新的元素。如果IE浏览器版本小于IE9,则需要使用资源库解析

<head>
<meta charset="utf-8">
<title>渲染 HTML5</title>
  <!--[if lt IE 9]>
  <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
  <![endif]-->
</head>

Canvas

​ HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器，必须使用脚本来绘制图形。可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

<div id="canvas">
    <canvas id="myCanvas" width="800px" height="500px" style="border:1px solid #000000;">
        </canvas>
<script type="text/javascript">
    var canvas=document.getElementById('myCanvas');
	var ctx=canvas.getContext('2d');
	ctx.fillStyle='#FF0000';
	ctx.fillRect(0,0,80,100);
</script>
</div>

首先，找到 <canvas> 元素:

var c=document.getElementById("myCanvas");

然后，创建 context 对象：

var ctx=c.getContext("2d");

getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75);

设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。

fillRect(*x,y,width,height*) 方法定义了矩形当前的填充方式。

在Canvas上画线，使用以下两种方法：

  • moveTo(x,y) 定义线条开始坐标
  • lineTo(x,y) 定义线条结束坐标
  • 绘制线条我们必须使用到 “ink” 的方法，就像stroke()
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

在canvas中绘制圆形或圆弧, 我们将使用以下方法:

arc(x,y,r,start,stop [,true/false正向反向])

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();//从头开始,防止连线
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

//圆弧
ctx.arc(400, 400, 50, 0, Math.PI, false);

实心文本

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

空心文本

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

渐变

​ 可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

  • x: 渐变的开始圆的 x 坐标
  • y: 渐变的开始圆的 y 坐标
  • r: 开始圆的半径
  • x1: 渐变的结束圆的 x 坐标
  • y1: 渐变的结束圆的 y 坐标
  • r1: 结束圆的半径
  • (x,y) 和 (x1,y1)简单地相同即可(即同心圆)

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
**addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.**使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线,使用 createLinearGradient():

<!-- 创建一个线性渐变 -->
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 创建渐变
var grd=ctx.createLinearGradient(400,400,600,600);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(450,450,550,550);

<!-- 创建一个径向/圆渐变 -->
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

图像

  • drawImage(image,x,y)
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");

img.onload = function() {
	ctx.drawImage(img,10,10);
} 
</script>

SVG

​ SVG 定义为可缩放矢量图形,使用 XML 格式定义图形,在放大或改变尺寸的情况下其图形质量不会有损失。HTML <svg> 元素是 SVG 图形的容器,SVG 有多种绘制路径、框、圆、文本和图形图像的方法。

​ 其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：SVG 图像可通过文本编辑器来创建和修改,可被搜索、索引、脚本化或压缩,可在任何的分辨率下被高质量地打印

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
    <circle cx="200" cy="50" r="40" stroke="black" stroke-width="2" fill="blue" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
    <polygon points="100,10 40,180 190,60 10,60 160,180"
             style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
    <circle cx="200" cy="50" r="40" stroke="black" stroke-width="2" fill="blue" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
    <polygon points="100,10 40,180 190,60 10,60 160,180"
        style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>

SVG 与 Canvas两者间的区别

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas SVG
依赖分辨率 不依赖分辨率
不支持事件处理器弱的 支持事件处理器最适合带有大型渲染区域的应用程序（比如谷歌地图）
文本渲染能力能够以 .png 或 .jpg 格式保存结果图像 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
最适合图像密集型的游戏，其中的许多对象会被频繁重绘 不适合游戏应用

MathML

MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mrow>
        <msup><mi>a</mi><mn>2</mn></msup>
        <mo>+</mo>
        <msup><mi>b</mi><mn>2</mn></msup>
        <mo>=</mo>
        <msup><mi>c</mi><mn>2</mn></msup>
    </mrow>
</math>

拖放

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>图片拖放</title>

    <style type="text/css">
        #div1,
        #div2 {
            float: left;
            margin: 10px;
            width: 350px;
            height: 70px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
    </style>
    <script>
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("Text", ev.target.id);
        }

        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</head>

<body>

    <p>拖动图片到矩形框中:</p>

    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br>
    <img loading="lazy" id="drag1" src="/images/test.png" draggable="true" ondragstart="drag(event)" width="336"
    height="69">
</body>

</html>

设置元素为可拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

<img draggable="true">

拖动什么 - ondragstart 和 setData()

然后，规定当元素被拖动时，会发生什么。

在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev)
{
  ev.dataTransfer.setData("Text",ev.target.id);
}

Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id (“drag1”)。

放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法：

function allowDrop(ev)
{
    ev.preventDefault();
}

进行放置 - ondrop

当放置被拖数据时，会发生 drop 事件。

在上面的例子中，ondrop 属性调用了一个函数，drop(event)：

function drop(ev)
{
  ev.preventDefault();
  var data=ev.dataTransfer.getData("Text");      	ev.target.appendChild(document.getElementById(data));
}

代码解释：

  • 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
  • 通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
  • 被拖数据是被拖元素的 id (“drag1”)
  • 把被拖元素追加到放置元素（目标元素）中

地理位置

HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

var x=document.getElementById("demo");
function getLocation()
{
    if (navigator.geolocation)
    {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
    else
    {
        x.innerHTML="该浏览器不支持获取地理位置。";
    }
}
 
function showPosition(position)
{
    x.innerHTML="纬度: " + position.coords.latitude + 
    "<br>经度: " + position.coords.longitude;    
}
function showError(error)
{
    switch(error.code) 
    {
        case error.PERMISSION_DENIED:
            x.innerHTML="用户拒绝对获取地理位置的请求。"
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML="位置信息是不可用的。"
            break;
        case error.TIMEOUT:
            x.innerHTML="请求用户地理位置超时。"
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML="未知错误。"
            break;
    }
}
function showPosition(position)
{
    var latlon=position.coords.latitude+","+position.coords.longitude;
 
    var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
    +latlon+"&zoom=14&size=400x300&sensor=false";
    document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}

​ getCurrentPosition() 方法返回对象,始终会返回 latitude、longitude 以及 accuracy 属性。

属性 描述
coords.latitude 十进制数的纬度
coords.longitude 十进制数的经度
coords.accuracy 位置精度
coords.altitude 海拔，海平面以上以米计
coords.altitudeAccuracy 位置的海拔精度
coords.heading 方向，从正北开始以度计
coords.speed 速度，以米/每秒计
timestamp 响应的日期/时间

视频

<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

<video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:

  • MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
  • WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
  • Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MP4 video/mp4
WebM video/webm
Ogg video/ogg 
<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8"> 
    <title>软院wo谈会</title> 
</head>
<body>

    <div style="text-align:center">
        <button onclick="playPause()">播放/暂停</button>
        <button onclick="makeBig()">放大</button>
        <button onclick="makeSmall()">缩小</button>
        <button onclick="makeNormal()">普通</button>
        <br>
        <video id="video1" width="100%" height="100%">
            <source src="/images/软院wo谈会-出国、考研、保研、就业.mp4" type="video/mp4">
            您的浏览器不支持 HTML5 video 标签。
        </video>
    </div>

    <script>
        var myVideo = document.getElementById("video1");

        function playPause() {
            if (myVideo.paused)
                myVideo.play();
            else
                myVideo.pause();
        }

        function makeBig() {
            myVideo.width = 560;
        }

        function makeSmall() {
            myVideo.width = 320;
        }

        function makeNormal() {
            myVideo.width = 420;
        } 
    </script>

</body>

</html>

音频

control 属性供添加播放、暂停和音量控件。

在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。

<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

<!-- 自动播放 -->
<audio controls autoplay>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>
<!-- 循环播放 -->
<audio controls loop>
<!-- 静音 -->    
<audio controls muted>
<!-- 设置为预加载的 preload 元素 
auto - 当页面加载后载入整个音频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入音频
-->      
<audio controls preload="none"> 
    
<audio src="horse.ogg" controls>
您的浏览器不支持 audio 元素。
</audio>    

source属性 设置不同屏幕显示的图片
<picture>
  <source media="(min-width:650px)" srcset="https://static.runoob.com/images/runoob-logo.png">
  <source media="(min-width:465px)" srcset="https://static.runoob.com/images/code-icon-script.png">
  <img src="https://static.runoob.com/images/mix/hjkg_icon.png"  style="width:auto;">
</picture>

input新类型

时间 颜色 数字

在input字段主要用于选取颜色
选择你喜欢的颜色: <input type="color" name="favcolor">

从一个日期选择器选择一个日期
生日: <input type="date" name="bday">

定义一个日期和时间控制器（本地时间）（UTC 时间）:
生日 (日期和时间): <input type="datetime" name="bdaytime">

datetime-local 类型允许你选择一个日期和时间 (无时区).
生日 (日期和时间): <input type="datetime-local" name="bdaytime">

在提交表单时，会自动验证 email 域的值是否合法有效:
E-mail: <input type="email" name="email">

定义月与年 (无时区):
生日 (月和年): <input type="month" name="bdaymonth">

定义周和年 (无时区):
选择周: <input type="week" name="week_year">

定义可输入时间控制器（无时区）：
选择时间: <input type="time" name="usr_time">

定义一个数值输入域(限定):
数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">

定义输入电话号码字段:
电话号码: <input type="tel" name="usrtel">

定义输入URL字段:
添加您的主页: <input type="url" name="homepage">

使用下面的属性来规定对数字类型的限定：

属性 描述
disabled 规定输入字段是禁用的
max 规定允许的最大值
maxlength 规定输入字段的最大字符长度
min 规定允许的最小值
pattern 规定用于验证输入字段的模式
readonly 规定输入字段的值无法修改
required 规定输入字段的值是必需的
size 规定输入字段中的可见字符数
step 规定输入字段的合法数字间隔
value 规定输入字段的默认值

输入域 搜索域

range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
定义一个不需要非常精确的数值（类似于滑块控制）:
<input type="range" name="points" min="1" max="10">
max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值

search 类型用于搜索域，比如站点搜索或 Google 搜索。
Search Google: <input type="search" name="googlesearch">

表单

新的表单元素:

  • <datalist>
  • <keygen>
  • <output>

**<datalist>**

<datalist> 元素规定输入域的选项列表。

<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：

使用 <input> 元素的列表属性与 <datalist> 元素绑定.

<input list="browsers">
 
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

<keygen>

​ <keygen> 元素的作用是提供一种验证用户的可靠方法。<keygen>标签规定用于表单的密钥对生成器字段。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>

<output>

​ <output> 标签作为计算结果输出显示(比如执行脚本的输出),Edge 12及更早 IE 版本的浏览器不支持 output 元素。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

新的表单属性

<form> / <input> autocomplete 属性

​ 当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。

<form action="demo-form.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

<form> novalidate 属性

​ 规定在提交表单时不应该验证 form 或 input 域

<form action="demo-form.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

<input> autofocus 属性

​ autofocus 属性是一个布尔属性。规定在页面加载时，域自动地获得焦点。

First name:<input type="text" name="fname" autofocus>

<input> form 属性

​ form 属性规定输入域所属的一个或多个表单。如需引用一个以上的表单，使用空格分隔的列表。位于form表单外的 input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分)

<form action="demo-form.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
</form>
 
Last name: <input type="text" name="lname" form="form1">

<input> formaction 属性

​ The formaction 属性用于描述表单提交的URL地址.会覆盖

元素中的action属性.

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formaction="demo-admin.php"
  value="提交">
</form>

<input> formenctype 属性

​ formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method=“post” 表单)formenctype 属性覆盖 form 元素的 enctype 属性。该属性与 type=“submit” 和 type=“image” 配合使用。

第一个提交按钮已默认编码发送表单数据，第二个提交按钮以 "multipart/form-data" 编码格式发送表单数据:

<form action="demo-post_enctype.php" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
  <input type="submit" formenctype="multipart/form-data"
  value="以 Multipart/form-data 提交">
</form>

<input> formmethod 属性

​ formmethod 属性定义了表单提交的方式。覆盖了 <form> 元素的 method 属性。该属性可以与 type=“submit” 和 type=“image” 配合使用

<form action="demo-form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
  <input type="submit" formmethod="post" formaction="demo-post.php"
  value="使用 POST 提交">
</form>

<input> formnovalidate 属性

​ novalidate 属性是一个 boolean 属性.novalidate属性描述了 <input> 元素在表单提交时无需被验证。会覆盖 <form> 元素的novalidate属性.与type="submit一起使用

<form action="demo-form.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formnovalidate value="不验证提交">
</form>

<input> formtarget 属性

​ formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。覆盖 <form>元素的target属性.formtarget 属性与type=“submit” 和 type="image"配合使用。

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="正常提交">
  <input type="submit" formtarget="_blank"
  value="提交到一个新的页面上">
</form>

<input> height 和 width 属性

​ height 和 width 属性规定用于 image 类型的 <input> 标签的图像高度和宽度。

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

<input> min 和 max 属性

​ min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定约束。适用于以下类型的<input>标签：date pickers、number 以及 range。

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

<input> multiple 属性

​ multiple 属性是一个 boolean 属性.规定<input> 元素中可选择多个值。适用于以下类型的 <input> 标签：email 和 file:

Select images: <input type="file" name="img" multiple>

<input> pattern 属性

pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

<input> placeholder 属性

​ placeholder 属性提供一种提示，描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上。适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。

<input type="text" name="fname" placeholder="First name">
<!--框内显示First name 浏览器提供参考选项-->

<input> required 属性

​ required 属性是一个 boolean 属性.规定必须在提交之前填写输入域（不能为空）。required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

Username: <input type="text" name="usrname" required>

<input> step 属性

​ step 属性为输入域规定合法的数字间隔。如果 step=“3”，则合法的数是 -3,0,3,6 等step 属性可以与 max 和 min 属性创建一个区域值.step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.

<input type="number" name="points" step="3">

新的语义元素

一个语义元素能够清楚的描述其意义给浏览器和开发者。

无语义 元素实例:<div>和 <span> - 无需考虑内容.

语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.

<div id="nav">, <div class="header">, 或者 <div id="footer">, 来指明导航链接, 头部, 以及尾部.

HTML5 提供了新的语义元素来明确一个Web页面的不同部分:

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <figcaption>
  • <figure>
  • <footer>

HTML5 语义元素

<section>
<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。根据W3C HTML5文档: section 包含了一组内容及其标题。

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

<article>

​ <article> 标签定义独立的内容。.

<article>
    <h1>大标题</h1>
    <p>段落</p>
</article>

<nav>

​ <nav> 标签定义导航链接的部分。<nav> 元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在<nav> 元素中

<nav>
    <a href="/html/">HTML</a> |
    <a href="/css/">CSS</a> |
    <a href="/js/">JavaScript</a> |
    <a href="/jquery/">jQuery</a>
</nav>

<aside> 元素

​ <aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。aside 标签的内容应与主区域的内容相关.

<p>My family and I visited The Epcot center this summer.</p>
 
<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

<header>

​ <header>元素描述了文档的头部区域主要用于定义内容的介绍展示区域.在页面中你可以使用多个<header> 元素.

<article>
  <header>
    <h1>Internet Explorer 9</h1>
    <p><time pubdate datetime="2011-03-15"></time></p>
  </header>
  <p>Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的</p>
</article>

<footer>

​ <footer> 元素描述了文档的底部区域.<footer> 元素应该包含它的包含元素.一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等.文档中你可以使用多个 <footer>元素.

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p><time pubdate datetime="2012-03-01"></time></p>
</footer>

<figure> <figcaption>

​ <figure>标签规定独立的流内容（图像、图表、照片、代码等等）。<figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。<figcaption> 标签定义 <figure> 元素的标题.<figcaption>元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

<figure>
  <img loading="lazy" src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

Web 存储

​ 使用HTML5可以在本地存储用户的浏览数据,早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.数据以键/值 对存在, web网页的数据只允许该网页访问使用。

localStorage sessionStorage

​ 客户端存储数据的两个对象为：

  • localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
  • sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

在使用 web 存储前,应检查浏览器是否支持 localStorage 和 sessionStorage:

if(typeof(Storage)!=="undefined")
{
    // 是的! 支持 localStorage  sessionStorage 对象!
    // 一些代码.....
} else {
    // 抱歉! 不支持 web 存储。
}

localStorage 对象

​ localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

// 存储
localStorage.setItem("sitename", "菜鸟教程");
// 查找
document.getElementById("result").innerHTML = "网站名：" +  localStorage.getItem("sitename");
/////
// 存储
localStorage.sitename = "菜鸟教程";
// 查找
document.getElementById("result").innerHTML = localStorage.sitename;

//移除 localStorage 中的 "sitename" :
localStorage.removeItem("sitename");
  • 使用 key=“sitename” 和 value=“菜鸟教程” 创建一个 localStorage 键/值对。
  • 检索键值为 “sitename” 的值然后将数据插入 id=“result” 的元素中。

​ 不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

  • 保存数据：localStorage.setItem(key,value);
  • 读取数据：localStorage.getItem(key);
  • 删除单个数据：localStorage.removeItem(key);
  • 删除所有数据：localStorage.clear();
  • 得到某个索引的key：localStorage.key(index);

​ 键/值对通常以字符串存储，你可以按自己的需要转换该格式。

if (localStorage.clickcount)
{
    localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
    localStorage.clickcount=1;
}
document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";

sessionStorage 对象

​ sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。如何创建并访问一个 sessionStorage：

if (sessionStorage.clickcount)
{
    sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
    sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";

Web Storage 开发一个简单的网站列表程序

网站列表程序实现以下功能：

  • 可以输入网站名，网址，以网站名作为key存入localStorage；
  • 根据网站名，查找网址；
  • 列出当前已保存的所有网站；

以下代码用于保存与查找数据：

//保存数据  
function save(){  
    var site = new Object;
    site.keyname = document.getElementById("keyname").value;
    site.sitename = document.getElementById("sitename").value;  
    site.siteurl = document.getElementById("siteurl").value;
    var str = JSON.stringify(site); // 将对象转换为字符串
    localStorage.setItem(site.keyname,str);  
    alert("保存成功");
}  
//查找数据  
function find(){  
    var search_site = document.getElementById("search_site").value;  
    var str = localStorage.getItem(search_site);  
    var find_result = document.getElementById("find_result");
    var site = JSON.parse(str);  
    find_result.innerHTML = search_site + "的网站名是：" + site.sitename + "，网址是：" + site.siteurl;  
}

<div style="border: 2px dashed #ccc;width:320px;text-align:center;">
    <label for="keyname">别名(key):</label>  
    <input type="text" id="keyname" name="keyname" class="text"/>  
    <br/>  
    <label for="sitename">网站名：</label>  
    <input type="text" id="sitename" name="sitename" class="text"/>  
    <br/>  
    <label for="siteurl">网 址：</label>  
    <input type="text" id="siteurl" name="siteurl"/>  
    <br/>  
    <input type="button" onclick="save()" value="新增记录"/>  
    <hr/>  
    <label for="search_site">输入别名(key)：</label>  
    <input type="text" id="search_site" name="search_site"/>  
    <input type="button" onclick="find()" value="查找网站"/>  
    <p id="find_result"><br/></p>  
</div>

Web SQL

​ Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。

以下是规范中定义的三个核心方法：

  1. openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
  2. transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
  3. executeSql：这个方法用于执行实际的 SQL 查询。

打开数据库

我们可以使用 openDatabase() 方法来打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库，使用代码如下：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

openDatabase() 方法对应的五个参数说明：

  1. 数据库名称
  2. 版本号
  3. 描述文本
  4. 数据库大小
  5. 创建回调,创建回调会在创建数据库后被调用。
//执行查询操作
//执行操作使用 database.transaction() 函数：
//执行后会在 'mydb' 数据库中创建一个名为 LOGS 的表
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {  
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});

//插入数据
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
});
//实例中的 e_id 和 e_log 是外部变量，executeSql 会映射数组参数中的每个条目给 "?"。
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {  
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
  tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [e_id, e_log]);
});

//读取数据
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
 
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
});
 
db.transaction(function (tx) {
   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
      var len = results.rows.length, i;
      msg = "<p>查询记录条数: " + len + "</p>";
      document.querySelector('#status').innerHTML +=  msg;
    
      for (i = 0; i < len; i++){
         alert(results.rows.item(i).log );
      }
    
   }, null);
});

//删除记录使用的格式如下：
db.transaction(function (tx) {
    tx.executeSql('DELETE FROM LOGS  WHERE id=1');
});
//删除指定的数据id也可以是动态的：
db.transaction(function(tx) {
    tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);
});

//更新记录
db.transaction(function (tx) {
    tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');
});
//更新指定的数据id也可以是动态的：
db.transaction(function(tx) {
    tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]);
});

应用程序缓存

​ HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问,通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本

<!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
文档内容......
</body>

</html>

​ 如需启用应用程序缓存，需在文档的<html> 标签中包含 manifest 属性,每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。manifest 文件的建议的文件扩展名是：“.appcache”。

manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置。

​ manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。以 “#” 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.php

FALLBACK:
/html/ /offline.html

manifest 文件可分为三个部分：

  • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
  • NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
  • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
浏览器会从网站的根目录下载这三个文件。无论用户何时与因特网断开连接，这些资源依然是可用的。
CACHE MANIFEST
/theme.css
/logo.gif
/main.js

"login.php" 永远不会被缓存，且离线时是不可用的
NETWORK:
login.php
可以使用星号来指示所有其他资源/文件都需要因特网连接
NETWORK:
*

FALLBACK 小节规定如果无法建立因特网连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件,第一个 URI 是资源，第二个是替补。

FALLBACK:
/html/ /offline.html

Web Worker

​ 当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

检测浏览器是否支持 Web Worker

在创建 web worker 之前，请检测用户的浏览器是否支持它：

if(typeof(Worker)!=="undefined")
{
    // 是的! Web worker 支持!
    // 一些代码.....
}
else
{
    //抱歉! Web Worker 不支持
}

创建 web worker 文件

现在，让我们在一个外部 JavaScript 中创建我们的 web worker。

在这里，我们创建了计数脚本。该脚本存储于 “demo_workers.js” 文件中,以下代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。

var i=0;

function timedCount()
{
  i=i+1;
  postMessage(i);
  setTimeout("timedCount()",500);
}

timedCount();

创建 Web Worker 对象

​ 我们已经有了 web worker 文件，现在我们需要从 HTML 页面调用它。下面的代码检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 “demo_workers.js” 中的代码：

if(typeof(w)=="undefined")
{
    w=new Worker("demo_workers.js");
}

//然后可以从 web worker 发生和接收消息了。
//向 web worker 添加一个 "onmessage" 事件监听器：
w.onmessage=function(event){  document.getElementById("result").innerHTML=event.data;
};

终止 Web Worker

当我们创建 web worker 对象后，它会继续监听消息（即使在外部脚本完成之后）直到其被终止为止。如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：

w.terminate();

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
 
<p>计数： <output id="result"></output></p>
<button onclick="startWorker()">开始工作</button> 
<button onclick="stopWorker()">停止工作</button>
 
<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.</p>
 
<script>
var w;
 
function startWorker() {
    if(typeof(Worker) !== "undefined") {
        if(typeof(w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
    } else {
        document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 Web Workers...";
    }
}
 
function stopWorker() 
{ 
    w.terminate();
    w = undefined;
}
</script>
 
</body>
</html>

var i=0;

function timedCount()
{
    i=i+1;
    postMessage(i);
    setTimeout("timedCount()",500);
}

timedCount();

WebSocket

​ WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

​ 很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

img

​ 浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

​ 以下 API 用于创建 WebSocket 对象

var Socket = new WebSocket(url, [protocol] );
WebSocket 属性 描述
Socket.readyState 只读属性 readyState 表示连接状态，可以是以下值：0 - 表示连接尚未建立。1 - 表示连接已建立，可以进行通信。2 - 表示连接正在进行关闭。3 - 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。
WebSocke 事件 事件处理程序 描述
open Socket.onopen 连接建立时触发
message Socket.onmessage 客户端接收服务端数据时触发
error Socket.onerror 通信发生错误时触发
close Socket.onclose 连接关闭时触发
WebSocket 方法 描述
Socket.send() 使用连接发送数据
Socket.close() 关闭连接

需要创建一个支持 WebSocket 的服务。从 pywebsocket 下载 mod_pywebsocket ,或者使用 git 命令下载,mod_pywebsocket 是一个 Apache HTTP 的 Web Socket扩展

Websocket 使用 ws 或 wss 的统一资源标志符，类似于 HTTPS，其中 wss 表示在 TLS 之上的 Websocket。如：

ws://example.com/wsapi
wss://secure.example.com/

Websocket 使用和 HTTP 相同的 TCP 端口，可以绕过大多数防火墙的限制。默认情况下，Websocket 协议使用 80 端口；运行在 TLS 之上时，默认使用 443 端口。

一个典型的Websocket握手请求如下：

客户端请求

GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: example.com
Origin: http://example.com
Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==
Sec-WebSocket-Version: 13

服务器回应

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s=
Sec-WebSocket-Location: ws://example.com/
  • Connection 必须设置 Upgrade，表示客户端希望连接升级。
  • Upgrade 字段必须设置 Websocket，表示希望升级到 Websocket 协议。
  • Sec-WebSocket-Key 是随机的字符串，服务器端会用这些数据来构造出一个 SHA-1 的信息摘要。把 “Sec-WebSocket-Key” 加上一个特殊字符串 “258EAFA5-E914-47DA-95CA-C5AB0DC85B11”，然后计算 SHA-1 摘要，之后进行 BASE-64 编码，将结果做为 “Sec-WebSocket-Accept” 头的值，返回给客户端。如此操作，可以尽量避免普通 HTTP 请求被误认为 Websocket 协议。
  • Sec-WebSocket-Version 表示支持的 Websocket 版本。RFC6455 要求使用的版本是 13，之前草案的版本均应当弃用。
  • Origin 字段是可选的，通常用来表示在浏览器中发起此 Websocket 连接所在的页面，类似于 Referer。但是，与 Referer 不同的是，Origin 只包含了协议和主机名称。
  • 其他一些定义在 HTTP 协议中的字段，如 Cookie 等，也可以在 Websocket 中使用。

Q.E.D.

大黑山程序猿养殖基地摆烂王