首页 > Web开发 > 详细

HTML学习笔记之标签进阶

时间：2019-02-13 00:28:23      阅读：192      评论：0      收藏：0      [点我收藏+]

目录

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>

<iframe> 属性定义内联框架，用于在网页内显示网页，常用的属性如下：

  • 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> 定义内嵌对象，是 HTML 4.01 多媒体标签

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

<embed> 定义嵌入内容，是 HTML 5 多媒体标签

<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> 定义内嵌对象，是 HTML 4.01 多媒体标签

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

<embed> 定义嵌入内容，是 HTML 5 多媒体标签

<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> 标签提供关于 HTML 文档的元数据，元数据不会显示在页面上，但是对于机器是可读的，常用于规定页面的描述、关键词、作者、最后修改时间等

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

<link> 标签定义文档与外部资源之间的关系，常用于连接样式表

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

<style> 标签定义文档样式信息

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

<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 源代码中使用字符实体，一些常用的字符实体列举如下：

字符名称 字符显示 实体名称 实体编号
空格 &nbsp; &#160;
左单引号 ‘ &lsquo; &#8216;
右单引号 ’ &rsquo; &#8217;
左双引号 “ &ldquo; &#8220;
右双引号 ” &rdquo; &#8221;
引号 " &quot; &#34;
撇号 ‘ &apos; &#39;
lambda λ &lambda; &#923;
alpha α &alpha; &#945;
beta β &beta; &#946;
gamma γ &gamma; &#947;
delta δ &delta; &#948;
epsilon ε &epsilon; &#949;
zeta ζ &zeta; &#950;
eta η &eta; &#951;
theta θ &theta; &#952;
sigma σ &sigma; &#963;
phi φ &phi; &#966;
psi ψ &psi; &#968;
omega ω &omega; &#969;
less than < &lt; &#60;
greater than > &gt; &#62;
for all ? &forall; &#8704;
exists ? &exists; &#8706;
prod ∏ &prod; &#8719;
sum ∑ &sum; &#8721;
square root √ &radic; &#8730;
integral ∫ &int; &#8747;
not equal ≠ &ne; &#8800;
equivalent ≡ &equiv; &#8801;
less or equal ≤ &le; &#8804;
greater or equal ≥ &ge; &#8805;

HTML学习笔记之标签进阶

原文：https://www.cnblogs.com/wsmrzx/p/10367593.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！