HTML5
W3C
- 万维网联盟
- 1994年成立，是web技术领域权威的具有国际影响力的国际中立技术标准机构
- www.w3.org/
- www.chinaw3c.org/
W3c标准包括
- 结构化标准语言（XML、HTML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）
标签
标签分类：
-
单标签
只有一个由一个标签和
/生成 ，例如<br /> -
双标签
由一个标签对组成且成对存在，分别叫做
开放标签和闭合标签例如：<body>和</body>
注释
<!-- 注释内容 -->
网页基本信息
DOCTYE声明
DOCTYE声明：是使用规范说明，用于告诉浏览器使用的是什么规范，常见的是HTML 默认的也是HTML 可以省略，需要在整个文件最前面。（在HTML标签前面）
书写方式：
<!DOCTYPE html>
html标签
总的标签，除了DOCTYE声明和部分注释其他的代码均应该在HTML标签代码中。
不在该标签中的内容不会进行显示。
改标签中的 lang 用于设置语言。
<!-- 默认是en 为英文；zn是中文 -->
<html lang="en">
</html>
head标签
头部标签，用于定义网页头部的信息。
mate标签
网站描述性标签，用来描述网站的一些信息。
一般用于做 SEO
属性：name，content charset 等
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
注释和特殊符号
注释之前说了<!-- -->
特殊符号：
| 内容 | 标签 | 展示 |
|---|---|---|
| 空格 | | |
| 大于 | > | > |
| 小于 | < | < |
| 版权所有符 | © | © |
| 星号 | * | * |
| 前花括号 | { | { |
图像标签
图像标签：<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 border="0" src="http://wpa.qq.com/pa?p=2::52" alt="这里是三岁" title="这里是三岁"/></a>
行内元素和块元素
块元素
无论内容多少，该元素单独占一行
例如:<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 | 指定的元素类型。例如txt(文本框)、paddword(密码框)、checkbox（复选框）、radio、submit、reset、file、hidden、image和button(按钮),默认是text |
name | 指定表单元素的名称 |
value | 元素的初始化。type为radio时必须指定一个值（默认值） |
size | 指定表单的初始宽度。当type为text或paddword时，表单元素的东大小以字符为单位。对于其他的类型，宽度以像素为单位 |
maxlength | type为text或password时，输入的最大字符数 |
checked | type为radio或checkbox时，指定按钮是非被选中 |
readonly | 数据只读，不可以修改 |
disabled | 禁用不可以选中 |
hidden | 隐藏文本框 |
placeholdr | 提示信息（引导信息） |
required | 禁止为空 |
pattern | 正则表达式 |
属性说明：
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>
效果展示：
