HTML学习笔记之标签进阶

1、框架
2、表单
3、音频
4、视频
5、文档类型
6、头部元素
7、样式
8、脚本
9、实体

1、框架

使用框架允许我们在同一个浏览器窗口中显示多个页面，其中每份 HTML 文档称为一个框架，并且每个框架之间都是独立的

<frameset> 标签定义如何将窗口分割为框架，rows/columns 属性规定每行或每列占据屏幕的面积

<frame> 标签定义放置在每个框架中的 HTML 文档，src 属性规定 HTML 文档的地址

<noframes> 标签定义在 <frame> 标签不能正常显示时的提示信息

<frameset cols="25%,75%">
    <frame src="frame_a.html">
    <frame src="frame_b.html">
    <noframes>
        <body>Your browser does not support the frame tag.</body>           </noframes>
</frameset>

name：规定 iframe 的名称，用于被 target 属性引用
src：规定在 iframe 中显示的文档的 URL
srcdoc：规定在 iframe 中显示的 HTML 内容
height：规定 iframe 的高度
width：规定 iframe 的宽度
marginheight：规定 iframe 顶部和底部的边距
marginwidth：规定 iframe 的左侧和右侧的边距
frameborder：规定是否显示 iframe 的边框

2、表单

可以使用 <form> 标签 定义表单，用于接受不同类型的用户输入，具有以下属性：

属性	描述
name	规定识别表单的名称，对于 DOM 使用：document.forms.name
accept-charset	规定在被提交表单中使用的字符集，默认为页面字符集
enctype	规定被提交数据的编码，默认为 url-encoded
action	规定在提交表单时执行的动作
target	规定 action 属性中地址的目标，默认为 _self
method	规定在提交表单时使用的 HTTP 方法，默认为 GET
autocomplete	HTML5 新增属性，规定浏览器是否自动完成表单，默认为开启
novalidate	HTML5 新增属性，规定浏览器不验证表单

在 <form> 标签下，包括在 HTML5 中新增的 3 个表单元素，共有 7 个表单元素

（1）<input>

<input> 元素可以定义不同的输入类型，常用的属性如下：

属性	描述
name	重要属性，如果希望正确提交，每个输入字段必须设置 name 属性
type	重要属性，定义不同的输入类型
value	规定输入字段的默认值
placeholder	HTML5 新增属性，规定用以描述输入字段预期值的提示
checked	规定输入字段的默认值
disabled	规定输入字段被禁用
readonly	规定输入字段无法修改
required	HTML5 新增属性，规定输入字段必需填写
min	HTML5 新增属性，规定输入字段的最小值
max	HTML5 新增属性，规定输入字段的最大值
maxlength	规定输入字段的最大字符数
size	规定输入字段的宽度（以字符计）
step	HTML5 新增属性，规定输入字段的合法数字间隔
pattern	HTML5 新增属性，规定输入字段满足的正则表达式

type 属性是 <input> 元素中的一个重要属性，它决定着 <input> 元素的类型，常用的值如下：

可选值	描述
text	定义单行文本输入字段
password	定义密码输入字段
submit	定义表单数据提交按钮
radio	定义单选按钮
checkbox	定义复选按钮
button	定义按钮
number	定义包含数字的输入字段
date	定义包含日期的输入字段
color	定义包含颜色的输入字段
range	定义包含一定范围内的值的输入字段
email	定义包含邮件地址的输入字段
tel	定义包含电话号码的输入字段
url	定义包含 URL 地址的输入字段
search	定义搜索字段，类似于常规文本字段
month	允许用户选择月份和年份
week	允许用户选择周和年份
time	允许用户选择时间（无时区）
datetime	允许用户选择日期和时间（有时区）
datetime-local	允许用户选择日期和时间（无时区）

<form>
    First name:<br/>
    <input type="text" name="firstname" /><br/>
    Last name:<br/>
    <input type="text" name="lastname" /><br/>
</form>

（2）<select>

<select> 元素用于定义下拉列表

（3）<textarea>

<textarea> 元素用于定义多行文本输入字段

（4）<button>

<button> 元素用于定义按钮

（5）<datalist>

<datalist> 元素是 HTML5 中新增的表单元素，用于定义选项列表

（6）<keygen>

<keygen> 元素是 HTML5 中新增的表单元素，用于定义表单的密钥对生成器字段

（7）<output>

<output> 元素是 HTML5 中新增的表单元素，用于定义不同类型的输出，例如脚本输出

3、音频

为了确保音频文件在所有浏览器中和所有硬件上都能够播放，我们可以使用以下标签：

<object>

<object height="100" width="100" data="song.mp3"></object>

<embed>

<embed height="100" width="100" src="song.mp3" />

<audio>

<audio> 定义声音，是 HTML 5 多媒体标签，其属性及值列举如下：

属性	值	描述
autoplay	autoplay	就绪后马上播放
controls	controls	显示播放控件
loop	loop	循环播放
muted	muted	静音播放
preload	preload	就绪后等待播放，若设置 autoplay，则忽略 preload
src	url	指定待播放音频的 URL

<audio controls="controls">
    <!-- mp3格式在 Internet Explorer、Chrome、Safari 中有效 -->
    <source src="song.mp3" type="audio/mp3" />
    <!-- ogg格式在 Firefox、Opera 中有效 -->
    <source src="song.ogg" type="audio/ogg" />
    <!-- 如果失败，显示错误信息 -->
    Your browser does not support the audio tag.
</audio>

最佳解决方案

先尝试使用 <audio> 以 mp3 或 ogg 格式播放音频，如果失败，将再尝试使用 <embed> 播放音频

<audio controls="controls">
    <source src="song.mp3" type="audio/mp3" />
    <source src="song.ogg" type="audio/ogg" />
    <embed height="100" width="100" src="song.mp3" />
</audio>

4、视频

为了确保视频文件在所有浏览器中和所有硬件上都能够播放，我们可以使用以下标签：

<object>

<object data="movie.swf" width="320" height="240"/>

<embed>

<embed src="movie.swf" width="320" height="240"/>

<video>

<audio> 定义视频，是 HTML 5 多媒体标签，其属性及值列举如下：

属性	值	描述
autoplay	autoplay	就绪后马上播放
controls	controls	显示播放控件
loop	loop	循环播放
muted	muted	静音播放
preload	preload	就绪后等待播放，若设置 autoplay，则忽略 preload
src	url	指定待播放视频的 URL
poster	url	指定点击播放按钮前或进行视频下载时显示的图像
width	pixels	设置视频播放器的宽度
height	pixels	设置视频播放器的高度

<video width="320" height="240" controls="controls">
    <source src="movie.mp4" type="video/mp4" />
    <source src="movie.ogg" type="video/ogg" />
    <source src="movie.webm" type="video/webm" />
    Your browser does not support the video tag.
</video>

最佳解决方案

先尝试使用 <video> 以 mp4、ogg 或 webm 格式播放视频，如果失败，再尝试使用 <embed> 播放

<video width="320" height="240" controls="controls">
    <source src="movie.mp4" type="video/mp4" />
    <source src="movie.ogg" type="video/ogg" />
    <source src="movie.webm" type="video/webm" />
    <object data="movie.mp4" width="320" height="240">
        <embed src="movie.swf" width="320" height="240" />
    </object>
</video>

5、文档类型

<!DOCTYPE> 声明 必须位于 HTML 文档的第一行，它不是 HTML 标签，但是却为浏览器提供一项声明，说明页面是使用哪个 HTML 版本编写的，以下是几个常用的 <!DOCTYPE> 声明：

HTML5

<!DOCTYPE html>

HTML 4.01 Strict

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素，不允许框架集

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素，但不允许框架集

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素，并且允许框架集

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素，不允许框架集，且必须以格式正确的 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 元素和属性，包括展示性的和弃用的元素，但不允许框架集，且必须以格式正确的 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 包含所有 HTML 元素和属性，包括展示性的和弃用的元素，并且允许框架集，且必须以格式正确的 XML 来编写标记

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

6、头部元素

<head> 元素 是所有头部元素的容器，以下标签都可以添加到 <head> 中：

<title>

<title> 标签用于定义文档标题，它在所有的 HTML/XHTML 文档中都是必需的

<head>
    <title>Title of the document</title>
</head>

<base>

<base> 标签用于为页面上所有链接规定默认地址

<head>
    <base href="......" />
    <base target="_blank" />
</head>

<meta>

<meta name="keywords" content="HTML, XHTML, HTML5" />

<link>

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

<style>

<head>
    <style type="text/css">
        <!-- 这里定义样式 -->
    </style>
</head>

<script>

<head>
    <script type="text/javascript" src="myscripts.js"></script>
</head>

7、样式

样式可以规定 HTML 元素的表现形式，将内容与表现分离

当样式需要被应用到很多页面的时候，外部样式表 将是理想的选择，外部样式表在 CSS 文件中定义，在 <link> 标签中引用，<link> 标签被包含在 <head> 标签中

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

当单个文件需要特别样式时，就可以使用 内部样式表，内部样式表在 <style> 标签中定义，<style> 标签被包含在 <head> 标签中

<head>
    <style type="text/css">
        ......
    </style>
</head>

当需要应用特殊样式到个别元素时，就可以使用 内联样式，内联样式在 style 属性中定义，style 属性被包含在几乎所有元素的属性中

<div style="......"></div>

8、脚本

脚本使得 HTML 页面具有更强的动态和交互效果

<script> 标签 用于定义客户端脚本，既可以在标签中包含脚本语句，也可以通过 src 属性引用外部脚本文件

<script type="text/javascript">
    document.write("Hello World")
</script>

<noscript> 标签 通常配合 <script> 标签使用，提供无法使用脚本时的替代内容，当浏览器禁用脚本或浏览器不支持客户端脚本时发挥作用

<script type="text/javascript">
    document.write("Hello World")
</script>
<noscript>
    Your browser does not support JavaScript!
</noscript>

9、实体

在 HTML 中，某些字符是预留的，不能直接使用，如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体，一些常用的字符实体列举如下：

字符名称	字符显示	实体名称	实体编号
空格		` `	` `
左单引号	‘	`‘`	`‘`
右单引号	’	`’`	`’`
左双引号	“	`“`	`“`
右双引号	”	`”`	`”`
引号	"	`"`	`"`
撇号	'	`'`	`'`

lambda	λ	`λ`	`Λ`
alpha	α	`α`	`α`
beta	β	`β`	`β`
gamma	γ	`γ`	`γ`
delta	δ	`δ`	`δ`
epsilon	ε	`ε`	`ε`
zeta	ζ	`ζ`	`ζ`
eta	η	`η`	`η`
theta	θ	`θ`	`θ`
sigma	σ	`σ`	`σ`
phi	φ	`φ`	`φ`
psi	ψ	`ψ`	`ψ`
omega	ω	`ω`	`ω`

less than	<	`<`	`<`
greater than	>	`>`	`>`
for all	∀	`∀`	`∀`
exists	∃	`&exists;`	`∂`
prod	∏	`∏`	`∏`
sum	∑	`∑`	`∑`
square root	√	`√`	`√`
integral	∫	`∫`	`∫`
not equal	≠	`≠`	`≠`
equivalent	≡	`&equiv;`	`≡`
less or equal	≤	`≤`	`≤`
greater or equal	≥	`≥`	`≥`

字符名称	字符显示	实体名称	实体编号
空格		` `	` `
左单引号	‘	`‘`	`‘`
右单引号	’	`’`	`’`
左双引号	“	`“`	`“`
右双引号	”	`”`	`”`
引号	"	`"`	`"`
撇号	'	`'`	`'`

lambda	λ	`λ`	`Λ`
alpha	α	`α`	`α`
beta	β	`β`	`β`
gamma	γ	`γ`	`γ`
delta	δ	`δ`	`δ`
epsilon	ε	`ε`	`ε`
zeta	ζ	`ζ`	`ζ`
eta	η	`η`	`η`
theta	θ	`θ`	`θ`
sigma	σ	`σ`	`σ`
phi	φ	`φ`	`φ`
psi	ψ	`ψ`	`ψ`
omega	ω	`ω`	`ω`

less than	<	`<`	`<`
greater than	>	`>`	`>`
for all	∀	`∀`	`∀`
exists	∃	`&exists;`	`∂`
prod	∏	`∏`	`∏`
sum	∑	`∑`	`∑`
square root	√	`√`	`√`
integral	∫	`∫`	`∫`
not equal	≠	`≠`	`≠`
equivalent	≡	`&equiv;`	`≡`
less or equal	≤	`≤`	`≤`
greater or equal	≥	`≥`	`≥`

字符名称	字符显示	实体名称	实体编号
空格		` `	` `
左单引号	‘	`‘`	`‘`
右单引号	’	`’`	`’`
左双引号	“	`“`	`“`
右双引号	”	`”`	`”`
引号	"	`"`	`"`
撇号	'	`'`	`'`

lambda	λ	`λ`	`Λ`
alpha	α	`α`	`α`
beta	β	`β`	`β`
gamma	γ	`γ`	`γ`
delta	δ	`δ`	`δ`
epsilon	ε	`ε`	`ε`
zeta	ζ	`ζ`	`ζ`
eta	η	`η`	`η`
theta	θ	`θ`	`θ`
sigma	σ	`σ`	`σ`
phi	φ	`φ`	`φ`
psi	ψ	`ψ`	`ψ`
omega	ω	`ω`	`ω`

less than	<	`<`	`<`
greater than	>	`>`	`>`
for all	∀	`∀`	`∀`
exists	∃	`&exists;`	`∂`
prod	∏	`∏`	`∏`
sum	∑	`∑`	`∑`
square root	√	`√`	`√`
integral	∫	`∫`	`∫`
not equal	≠	`≠`	`≠`
equivalent	≡	`&equiv;`	`≡`
less or equal	≤	`≤`	`≤`
greater or equal	≥	`≥`	`≥`