HTML5完整指南，带你快速上手-阿里云开发者社区

W3C

万维网联盟
1994年成立，是web技术领域权威的具有国际影响力的国际中立技术标准机构
http://www.w3.org/
http://www.chinaw3c.org/

W3c标准包括

结构化标准语言（XML、HTML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）

注释

<!-- 注释内容 -->

网页基本信息

DOCTYE声明

DOCTYE声明：是使用规范说明，用于告诉浏览器使用的是什么规范，常见的是HTML 默认的也是HTML 可以省略，需要在整个文件最前面。（在HTML标签前面）

书写方式：

<!DOCTYPE html>

html标签

总的标签，除了DOCTYE声明和部分注释其他的代码均应该在HTML标签代码中。

不在该标签中的内容不会进行显示。

改标签中的 lang 用于设置语言。

<!-- 默认是en 为英文；zn是中文 -->
<html lang="en">
</html>

head标签

头部标签，用于定义网页头部的信息。

mate标签

网站描述性标签，用来描述网站的一些信息。

一般用于做 SEO

属性：name，contentcharset 等

charset : 网页编码常见的有UTF-8 、GBK

name ：当值是 keywords 时表示网站的关键词描述、当值是description 表示对描述网站

content: 对 name 的值进行说明。

title标签

网页标题标签，用于定义网页标题，是单标签

<title>我的第一个网页</title>

body标签

网页主体标签，用于定义网页主体的内容（信息）

基本信息展示——hello world

<!DOCTYPE html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="三岁学编程之HTML">
    <meta name="description" content="三岁在这里和你一起学HTML5">
    <title>我的第一个网页</title>
</head>
<body>
Hello World ！
</body>
</html>

网页基本标签

标题标签

分为6级，1-6使用<h1> </h1> - <h6> </h6>

<!-- 标题标签 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

段落标签

<p> </p> 双标签

这里是
三岁
<p>这里是</p>
<p>三岁</p>

这里是三岁

这里是

三岁

换行标签

换行标签是单标签用<br /> 来表示

<p>这里是 <br /> 三岁</p>

这里是

三岁

水平线标签

水平线标签使用<hr /> 来表示

字体样式标签

粗体：<strong> </strong>

斜体：<em> </em>

<p>
粗体：<strong>I Love You </strong> <br>
斜体：<em>I Love You</em>
</p>

粗体：I Love You

斜体：I Love You

注释和特殊符号

注释之前说了

特殊符号：

内容	标签	展示
空格	` `
大于	`>`	>
小于	`<`	<
版权所有符	`©`	©
星号	`&ast;`	*
前花括号	`{`	{

图像标签

图像标签：<img>

属性：

src :图像地址（可以是相对，也可以是绝对）

alt:图像的替代文字

title:鼠标悬停提示文字

width:图像的宽度

height：图像的高度

路径说明

相对路径：指的是和你当前位置一个比较

../ : 表示上一级目录

绝对路径指的是：图片的绝对位置，一般从盘符或者根目录开始

链接标签

超链接

链接标签使用<a> </a>来表示

属性：

href : 链接路径

target: 目标窗口位置（_self、_blank、_top、_parent)

属性值	含义
`_self`	在自己的网页中（默认）
`_blank`	在新标签中打开
`_top`	在整个窗口中打开
`_parent`	在父框架中打开

锚链接

需要一个锚标记
跳转到标记

锚链接通过在href中添加 #来实现

例如

<!--xxxx.html -->
<a href="#top"></a>
<!-- 需要进行跳转的html页面 -->
<a href="xxxx.html#top">回到xxxx的顶部</a>

功能性链接

比如qq、邮箱链接

例如：

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img bor

行内元素和块元素

块元素

无论内容多少，该元素单独占一行

例如:<h1></h1>、<p></p>

行内元素

不会单独起一行，可以在行内进行添加

例如：<a></a>、<strong></strong>、<em><em>

列表标签

什么是列表

列表是信息资源的一种展示方式。可以使信息结构化和条理化，并以列表的形式展示出来，以便于浏览。

有序

使用<ol>进行定义，里面的列使用<li>进行分隔

举例

<ol>
  <li>python</li>
  <li>java</li>
  <li>运维</li>
  <li>前端</li>
  <li>c/c++</li>
</ol>

python
java
运维
前端
c/c++

无序

使用<ul>进行定义，里面的列使用<li>进行分隔

举例：

<ul>
  <li>python</li>
  <li>java</li>
  <li>运维</li>
  <li>前端</li>
  <li>c/c++</li>
</ul>

python
java
运维
前端
c/c++

定义

标签：<dl></dl>

列表名称：<dt></dt>

列表内容：<dd></dd>

举例：

<dl>
  <dt>课程</dt>
  <dd>python</dd>
  <dd>java</dd>
  <dd>运维</dd>
  <dd>前端</dd>
  <dd>c/c++</dd>
</dl>

课程

python

java

运维

前端

c/c++

表格标签

什么是表格标签

使用表格的方式对数据的理解更加方便

基本结构

单元格

行

<tr></tr>

列

<td></td>

跨行

在<tr>标签中加上元素rowspan里面的数值就是跨的行数

跨列

在<tr>标签中加上元素colspan里面的数值就是跨的列数

示例

<!-- border 边框线 -->
<table border="1">
    <tr>
        <!--    colspan 跨行    -->
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
        <td>科目</td>
        <td>内容</td>
        <td>成绩</td>
    </tr>
    <tr>
        <td rowspan="2">python</td>
        <td>python基础</td>
        <td>B</td>
    </tr>
    <tr>
        <td>爬虫</td>
        <td>C</td>
    </tr>
    <tr>
        <td rowspan="2">JAVA</td>
        <td>JAVA基础</td>
        <td>A</td>
    </tr>
    <tr>
        <td>jAVAWEB</td>
        <td>C</td>
    </tr>
</table>

效果展示：

视频和音频

视频元素

<video src="path" controls autoplay></video>

属性：

src : 资源路径必选

controls: 控制条（进度条信息）可选

autoplay: 自动播放可选

音频元素

<audio src="path" controls autoplay></audio>

属性值与视频相同

页面结构分析

元素名	描述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
`nav`	导航类辅助内容

`iframe`内联框架

<iframe src="path" name="nameFrame"></iframe>

属性值说明：

src : 引用页面的地址

name: 框架表示名

width: 宽度

height: 高度

表单

form标签

<from action="表单提交位置" method="get/post"></from>

属性值说明：

action : 表单提交的位置，可以是网站也可以是一个请求处理地址

method ：值有post和get,是数据提交方式

getget方式提交我们可以在URL中看到参数的内容，不安全但是高效

post 在URL中查不到，数据在Form Data中（审查元素中），较为安全

文本框

input标签来表示

<input type="text……" name=" "></input>

属性说明：

type：属性值，不同的属性数据不一样

例如：text ：文本框；password：密码框；submit:提交按钮；reset：重置按钮

下拉框

<select name="列表名称"></select>

里面的内容：<option value="选项的值"></option> 属性selected 表示默认

文本域（多行文本）

<textarea name="名称" cols="宽度" rows="高度">默认内容</textarea>

文件域

<input type="file" name="定义值" />

邮件验证

<input type="email" name="email" />

验证规则比较简陋数据中间有@即可

URL验证

<input type="url" name="url" />

鼠标可用性增强

<label for="mark">内容</label> 点击内容就可以指向for里面的id属性

<input type="text" id="mark"> 点击什么内容就可以指向id为mark的文本框

内容举例：

这里为了把按钮放在一起所以不符合实际编写规范

<body >
<!--表单-->
    <form action="xxx" method="get">
        <!--文本框-->
        <p> 名字：<input type="text" name="useername"> </p>
        <!--密码框-->
        <p> 密码：<input type="password" name="pwd"></p>
        <!--单选标签，需要相同name才可以实现单选-->
        <p>性别：
            <input type="radio" name="sex" value="boy" />男
            <input type="radio" name="sex" value="girl" />女
        </p>
        <p>爱好:
            <input type="checkbox" value="sleep" name="hobby">睡觉
            <input type="checkbox" value="code" name="hobby">敲代码
            <input type="checkbox" value="chat" name="hobby">聊天
            <input type="checkbox" value="roll" name="hobby">卷
        </p>
        <!--      按钮      -->
        <p>
            <!-- 自定义标签  -->
            <input type="button" name="but1" value="自定义标签">
        </p>
        <p>
            <!--  提交 -->
            <input type="submit">
            <!--  重置   -->
            <input type="reset">
        </p>
        <!--  下拉框  -->
        <p>地区：
            <select name="列表名称" >
                <option value="选项的值" selected>北京</option>
                <option value="选项的值">上海</option>
                <option value="选项的值">浙江</option>
                <option value="选项的值">深圳</option>
            </select>
        </p>
        <p>
            <!--   文本域     -->
            <textarea name="data" cols="50" rows="10">写入数据 </textarea>
        </p>
        <p>
            <!--  文件域  -->
            <input type="file" name="files">
            <!-- 设置一个假的上传按钮-->
            <input type="button" name="上传" value="点击上传">
        </p>
        <p>邮件验证：
            <!-- 邮件验证 -->
            <input type="email" name="email" />
        </p>
        <p>url验证：
            <!-- url验证 -->
            <input type="url" name="url" />
        </p>
        <p>数字验证：
            <!--  数字验证 -->
            <input type="number" name="num" max="100" min="10" step="10" />
        </p>
        <p>滑块<br /> 10
            <!-- 滑块 -->
            <input type="range" name="range" max="100" min="10" step="2" />100
        </p>
        <p>搜索：
            <!-- 搜索框 -->
            <input type="search" name="search" />
        </p>
    </form>
</body>