html5基础（网页基本标签、图像标签、超链接、列表、表格、媒体元素、iframe框架、表单）

网页的基本信息

1.DOCTYPE声明

文档类型的声明，约束HTML文档结构，检验是否符合相关Web标准，同时告诉浏览器，使用哪种规范来解释这个文档中的代码。DOCTYPE声明必须位于HTML文档第一行

<!DOCTYPE html>

2.title标签

<title>搜狐-中国最大的门户网站</title>

3.meta标签

描述网页的摘要信息，文档内容类型、搜索关键字网站提供的功能和服务的详细描述。

属性:charset表示字符集编码

常用的编码有以几种:

gb2312:简体中文，一般用于包含英文和中文的页面。
ISO-885901：纯英文，一般用于只包含英文的页面。
big5:繁体，一般用于带有繁体字的页面。
UTF-8:国际性通用的字符编码，同样适用于中文和英文的页面。和gb2312相比，国际通用性更好。

注意：标签里有个属性lang=“en”,它的意思是表示页面是英文的。

网页的基本标签

1.标题标签

HTML共提供了六级标题h1~h6

<h1> 字号最大，<h6> 字号最小

2.段落标签

<p>…</p>段落标签

3.换行标签*

<br/>强制换行

4.水平线标签**

<hr/>表示一条水平线

5.字体样式标签**

<strong>加粗</strong>
<em>倾斜</em>

注释和特殊符号

1.注释

<!-- 注释内容 -->

当页面的HTML结构复杂或内容较多时，需要添加必要的注释方便代码阅读或维护。

2.特殊符号*

&nbsp；空格
&gt；大于号(>)
&lt；小于号(<)
&quot；引号(")
&copy；版权符号@

图像标签

常见的图像格式：

(1)JPG格式
(2)GIF格式
(3)BMP格式
(4)PNG格式

图像标签的基本语法：

<img src="图片地址" alt="图像显示不出来的代替文字" title="鼠标悬停提示文字" width="图片宽度" height="图片高度"/>

超链接标签

<a href="链接地址" target="目标窗口位置">链接文本或图像</a>

href:表示链接地址的路径
target:指定链接在哪个窗口打开，常用的取值有_self(自身窗口)、_blank(新建窗口)。
超链接可以是文本链接，也可以是图像超链接。
当超链接href链接路径为“#”时，表示空链接

超链接的应用场合

页面间链接:从一个页面链接到另一个页面
锚链接:常用于目标页内容很多，需定位到目标页内容的某个具体位置时

（1）name为a标签的属性，marker为标记名。

<a name="marker">目标位置乙</a>

（2）设置甲位置链接路径href属性值为"#标记名"

<a href="#marker">当前位置甲</a>

功能性链接:单击链接时启动本机自带的某个应用程序

行内元素和块元素

块元素的特征：无论内容多少，该元素独占一行
行内元素特征：内容撑开宽度，左右都是行内元素可以排在一行

列表

1.无序列表

<ul><li>第一项</li><li>第二项</li>
</ul>

无序列表的特性：

没有顺序，每个
标签独占一行(块元素)。
默认
标签项前面有个实心小圆心。

2.有序列表

<ol><li>第一项</li><li>第二项</li>
</ol>

有序列表的特性：

有顺序，每个
标签独占一行(块元素)
默认
标签项前面有顺序标记

3.定义列表

<dl><dt>标题一</dt><dd>第1项</dd><dd>第2项</dd><dd>第3项</dd>
<dt>标题二</dt><dd>第1项</dd><dd>第2项</dd><dd>第3项</dd>
</dl>

没有顺序，每个dt标签，dd标签独占一行(块元素)
默认没有标记
一般用于(一个标题下有一个或多个列表项)*n的情况

表格

1.基本表格

<!--这是一个三行两列的表格-->
<table border="边框宽度"><tr><th>1行1列的标题</th><th>1行2列的标题</th></tr><tr><td>1行1列的单元格</td><td>1行2列的单元格</td></tr><tr><td>2行1列的单元格</td><td>2行2列的单元格</td></tr>
</table>

tr为行，td为列,th为标题

显示表格的轮廓，在

标签里设置border边框属性，指定边框的宽度。

跨列

<table><tr><td colspan="所跨的列数">单元格内容</td></tr>
</table>

colspan的意思是跨列。

跨行

<!--
1.rowspan为行的意思。即跨行
2.跨行是指单元格在垂直方向上的合并
--><table><tr><td rowspan="所跨的行数">单元格内容</td></tr>
</table>

媒体元素

添加视频

HTML5中video元素是用来播放视频文件的，支持Ogg、MPEG4、Webm、等视频格式。

<video src="视频路径" controls></video>。

src指定要播放的视频文件的路径。
controls提供播放、暂停、和音量控件。
width和height设置视频的宽度和高度。
autoplay自动播放。
如果浏览器不支持video元素，可以在video元素中间插入一段文字用于提示

添加音频

HTML5中audio元素是用来播放音频文件的，支持Ogg、MP3、WAV、等频格式。

<!--属性可以较上面添加视频为参考-->
<audio src="音频路径" controls></audio>

source元素(音频和视频都能用)

<!--
video标签很难让每种浏览器都支持这种格式
source元素嵌套在video里面，并且可以出现多次  ，每个source元素对应一种格式的视频。
-->
<video autoplay><source src="video/video.webm"/><source src="video/video.mp4"/>你的浏览器不支持video标签
</video>

页面布局分析

header:标题头部区域的内容(用于页面或页面中的一块区域)。
footer：标记脚部区域的内容(用于页面或页面中的一块区域)。
section:Web页面中的一块独立区域。
article：独立的文章内容。
aside:相关内容或应用(常用与侧边栏)。
nav:导航类辅助内容。

iframe框架

<!--<iframe> 框架的主要作用是使页面中的部分内容用框架实现，一般用与引用站外的页面内容。-->
<iframe src="引用页面地址" name="框架标记名"></iframe>

iframe的属性使用

常用属性name、width、height。

(1)在被打开的框架上加name属性：

<iframe name="窗口标记名" src="链接地址"/>

(2)在超链接上设置target目标窗口属性为希望显示的框架窗口名：

<a href="链接地址" target="窗口标记名">下边显示第二页</a>

表单

1.表单标签及表单属性：

<!--action此属性指示服务器上处理表单输出的程序。action="URL"如果action的值为空，则默认表单提交到本页。
-->
<!--method属性告诉浏览器如何将数据发送给服务器method=(get || post)(1)post方法提交方式不会改变地址栏状态，表单数据不会被显示(2)get方法提交方式，地址栏状态会发生变化
--><fo action="../abc.html" method="post"><input type="text" name="username" /><input type="password" name="pwd" /><input type="submit" />
</form>

input元素的常用属性：

type：指定表单元素类型。

文本框：type = “text”
密码框：type = “password”
单选按钮：type = “radio”
复选框：type = “checkbox”
按钮：

普通按钮：type = “button”	属于普通按钮，需要和事件关联使用。
提交按钮：type = “submit”	点击表单将会提交到action属性所指定的URL,并传递数据.
重置按钮：type = ”reset“	填写或输入的数据清空

图片按钮：type = “image”
邮箱文本框：type = “email”

如果输入的不是有效邮箱地址，则不允许提交
数字文本框：

number类型的属性
value：规定的默认值
max：规定允许的最大值
min：规定允许的最小值
setp：规定合法的数字间隔(如果step=“2”，则合法的数字是-2、0、2、4等

网址框：type = “url”
滑块：type = “range”
搜索框：type = “search”
文件域：type = “file”
多行文本域

<textarea name="textarea" cols="显示的列数" rows="显示的行数">文本内容</textarea

<!--
添加checked属性默认选中此选项
--><form action="" method="post"><!--单选按钮--><input type="radio" name="gen" value="男" checked/>男<input type="radio" name="gen" value="女" />女<!--复选框--><br/>爱好：<input type="checkbox" name="interest" value="运动" checked/>运动<input type="checkbox" name="interest" value="聊天" />聊天<input type="checkbox" name="interest" value="玩游戏" />玩游戏<!--普通按钮--><input type="button" value="点击" /><!--提交按钮--><input type="submit" /><!--重置按钮--><input type="reset" /><!--图片提交按钮--><input type="image" src="../1.img" /><!--邮箱文本框--><input type="email" /><!--网址框--><input type="url" />
</form>

name：指定表单元素的名称。
value:指定表单元素的初始值。如果type为radio类型，则必须指定一个值
size:此属性指定表单元素的初始宽度。如果type为text类型或password类型，则表格元素以字符为单位(框的长短)
maxlength：此属性用于指定可在text或password元素中输入的最大字符数。默认值为无限大
checked:此属性用于与指定按钮是否被选中。当输入类型为redio(单选按钮）或checkbox(复选框)时，使用此属性.

设置表单的隐藏域

将type属性设置为hidden隐藏类型即可创建一个隐藏域
例如，在登录页面中使用隐藏域保存用户的userid信息

表单的只读与禁用设置

只读：readonly(input属性)
禁用：disabled(input属性)

W3C HTML5标准中，规定对于布尔类型的属性，属性值可以省略

表单元素的标注

对表单元素进行标注，目的是为了增强鼠标的可用性

<label for="表单元素的id">标注的文本</label>

对于表单元素而言，其name属性和id属性是必需的。
name属性由表单负责处理，而id属性是给标签和表单元素关联使用的。

表单的初级验证

placeholder提示

placeholder属性用于input类型的文本框提供一种提示，这种提示可以描述文本框期待用户输入何种内容
在输入为空时显示，当在文本框写入内容时消失。
required必填项

required属性用于规定文本框填写内容不能为空，否则不允许用户提交。
pattern验证输入格式

pattern属性用于验证input类型文本框中用户输入的内容是否与自定义的正则表达式相匹配。