HTML5 标签简介（三）

最新推荐文章于 2022-10-13 00:39:03 发布

hoo_chsodene

最新推荐文章于 2022-10-13 00:39:03 发布

阅读量1.3k

点赞数

分类专栏： HTML5 文章标签： HTML5 标签

本文链接：https://blog.csdn.net/hoo_chsodene/article/details/8954097

版权

HTML5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文的主要内容参考于 w3shool 网站。本文是自己对 HTML5 标签学习的一个简单梳理。如果你发现了文中的错误，请通过评论及时告诉我，避免对别人产生误导；如果你发现有不明白的地方，也可以通过评论告诉我，大家可以相互交流；如果你想转载我的博文，请在你的博文开头或末尾处注明，并附上该博文的链接地址，也请通过评论及时告诉我你转载后的链接地址，以便我能看到其他人在你转载处的评论。

35<em> 36<embed> 37<form> 38<fieldset> 39<figure> 40<figcaption> 41<footer> 42<h1> - <h6> 43<head> 44<header> 45<hgroup> 46<hr> 47<html> 48<i> 49<iframe> 50<input>

<em> 呈现为被强调的文本。支持 HTML5 中的全局属性和事件属性。

<!DOCTYPE HTML>
<html>
<body>

<embed src="http://www.w3school.com.cn/i/helloworld.swf" />

</body>
</html>

它的属性：

height	pixels	设置嵌入内容的高度。
src	url	嵌入内容的 URL。
type	mime_type	定义嵌入内容的类型。请参阅 MIME types，或IANA MIME Types 其中列出了标准的 MIME 类型。
width	pixels	设置嵌入内容的宽度。

支持 HTML5 中的全局属性和事件属性。

<form> 标签用于创建供用户输入的 HTML 表单。form 元素包含一个或多个表单元素，比如：

button
input
keygen
object
output
select
textarea

下例子是带 input 元素的表单：

<!DOCTYPE HTML>
<html>
<body>

<form action="/html5/form_action.asp">
<table>
  <tr>
    <td>First name:</td><td><input type="text" name="fname" value="Mickey" /></td></tr>
  <tr>
    <td>Last name:</td><td><input type="text" name="lname" value="Mouse" /></td></tr>
</table>
<input type="submit" value="Submit" />
</form>

<p>点击"提交"按钮，输入的数据会发送到服务器上名为 "form_action.asp" 的页面。</p>

</body>
</html>

当然上面的例子中也可以不用 table 等元素，我只是为了对齐的目的。它的属性：

accept-charset	charset_list	规定服务器可处理的表单数据字符集。详见 accept-charset 属性。
action	URL	规定当提交表单时向何处发送表单数据。详见 action 属性。
autocomplete	on off	规定是否启用表单的自动完成功能。
enctype	application/x-www-form-urlencoded multipart/form-data text/plain	规定在发送表单数据之前如何对其进行编码。详见 enctype 属性。
method	get post	规定用于发送 form-data 的 HTTP 方法。详见 method 属性。
name	form_name	规定表单的名称。
novalidate	novalidate	如果使用该属性，则提交表单时不进行验证表单的输入。
target	_blank _self _parent _top framename	规定在何处打开 action URL。

支持 HTML5 中的全局属性和事件属性。

<fieldset> 标签用于从逻辑上将表单中的元素组合起来。<fieldset> 标签会在相关表单元素周围绘制边框。<legend> 标签为 fieldset 元素定义标题。例：

<!DOCTYPE html>
<html>
<body>

<form>
  <fieldset>    <legend>Personalia:</legend>
    Name: <input type="text" /><br />
    Email: <input type="text" /><br />
    Date of birth: <input type="text" />
  </fieldset>
</form>


</body>
</html>

它的属性：

   
   disabled disabled 规定应该禁用表单元素组合（fieldset）。
form form_id 规定 fieldset 所属的一个或多个表单。详见 form 属性。
name value 规定 fieldset 的名称。
支持 HTML5 中的全局属性和事件属性。

disabled	disabled	规定应该禁用表单元素组合（fieldset）。
form	form_id	规定 fieldset 所属的一个或多个表单。详见 form 属性。
name	value	规定 fieldset 的名称。

<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。例子：

<!DOCTYPE HTML>
<html>
<body>

<p>上海卢浦大桥是当今世界第一钢结构拱桥，是世界上跨度最大的拱形桥。它也是世界上首座完全采用焊接工艺连接的大型拱桥（除合拢接口采用栓接外），现场焊接焊缝总长度达4万多米，接近上海市内环高架路的总长度。卢浦大桥像澳大利亚悉尼的海湾大桥一样具有旅游观光的功能。</p>

<figure>
  <p>黄浦江上的的卢浦大桥</p>
  <p>拍摄者：W3School 项目组，拍摄时间：2010 年 10 月</p>
  <img src="/i/shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

</body>
</html>

请使用 figurecaption （下一个元素会讲解）为 figure 添加标题。支持 HTML5 中的全局属性和事件属性。

<figcaption> 标签定义 figure 元素的标题（caption）。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。例：

<!DOCTYPE HTML>
<html>
<body>

<p>上海卢浦大桥是当今世界第一钢结构拱桥，是世界上跨度最大的拱形桥。它也是世界上首座完全采用焊接工艺连接的大型拱桥（除合拢接口采用栓接外），现场焊接焊缝总长度达4万多米，接近上海市内环高架路的总长度。卢浦大桥像澳大利亚悉尼的海湾大桥一样具有旅游观光的功能。</p>

<figure>
  <figcaption>黄浦江上的的卢浦大桥</figcaption>
  <img src="/i/shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

</body>
</html>

支持 HTML5 中的全局属性和事件属性。

<footer> 标签定义 section 或 document 的页脚。在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。假如您使用 footer 来插入联系信息，应该在 footer 元素内使用 address 元素。例：
```
<!DOCTYPE HTML>
<html>
<body>

<footer>This document was written in 2010.</footer>

</body>
</html>
```
支持 HTML5 中的全局属性和事件属性。

<h1> - <h6> 这里 <h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。例：

<!DOCTYPE HTML>
<html>
<body>

<h1>This is header 1</h1>
<h2>This is header 2</h2>
<h3>This is header 3</h3>
<h4>This is header 4</h4>
<h5>This is header 5</h5>
<h6>This is header 6</h6>

</body>
</html>

支持 HTML5 中的全局属性和事件属性。

<head> 标签是所有头部元素的容器。位于 <head> 内部的元素可以包含脚本、指引浏览器找到样式表、提供元信息，等等。下面是可用在 head 部分的标签：
- <base>
- <link>
- <meta>
- <script>
- <style>
- <title>
给个例子：
```
<!DOCTYPE HTML>
<html>
<head>
<title>文档的标题</title>
</head>

<body>
文档的内容 ......
</body>

</html>
```
请记得始终为文档规定标题！支持 HTML5 中的全局属性。

<header> 标签定义文档的页眉（介绍信息）。例：

<!DOCTYPE HTML>
<html>
<body>

<header>
<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>
</header>

<p>The rest of my home page...</p>

</body>
</html>

支持 HTML5 的全局属性和事件属性。

<hgroup> 标签用于对网页或区段（section）的标题进行组合。例：
```
<!DOCTYPE HTML>
<html>
<body>

<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>

<p>The rest of the content...</p>

</body>
</html>
```
请使用 <figcaption> 标签为元素组添加标题。支持 HTML5 的全局属性和事件属性。
<hr> 标签水平线，它应该定义内容中的主题变化。支持 HTML5 的全局属性和事件属性。
<html> 标签告知浏览器这是一个 HTML 文档。html 元素是 HTML 文档中最外层的元素。html 元素也可称为根元素。它的属性：
manifest url 定义一个 URL，在这个 URL 上描述了文档的缓存信息。
xmlns http://www.w3.org/1999/xhtml 定义 XML namespace 属性。
如果您出于某种原因，希望定义 xmlns 属性，唯一合法的值是 "http://www.w3.org/1999/xhtml"。支持 HTML5 中的全局属性。
<i> 标签呈现斜体的文本。<i> 标签定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本。支持 HTML5 的全局属性和事件属性。
<iframe> 标签创建包含另一个文档的行内框架。仅支持 src 属性。例：
```
<!DOCTYPE HTML>
<html>
<body>

<iframe src="/index.html"></iframe>

</body>
</html>
```
支持 HTML5 的全局属性和事件属性。

manifest	url	定义一个 URL，在这个 URL 上描述了文档的缓存信息。
xmlns	http://www.w3.org/1999/xhtml	定义 XML namespace 属性。

<input> 标签规定用户可输入数据的输入字段。根据不同的 type 属性，输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等。例：

<!DOCTYPE HTML>
<html>
<body>

<form action="/example/html5/demo_form.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" />
</form>

</body>
</html>

它的属性特别多：

accept	list_of_mime_types	规定可通过文件上传控件提交的文件类型。（仅适用于 type="file"）详见 accept 属性。
alt	text	规定图像输入控件的替代文本。（仅适用于 type="image"）
autocomplete	on off	规定是否使用输入字段的自动完成功能。
autofocus	autofocus	规定输入字段在页面加载时是否获得焦点。（不适用于 type="hidden"）
checked	checked	规定当页面加载时是否预先选择该 input 元素。（适用于 type="checkbox" 或 type="radio"）
disabled	disabled	规定当页面加载时是否禁用该 input 元素。（不适用于 type="hidden"）
form	formname	规定输入字段所属的一个或多个表单。
formaction	URL	覆盖表单的 action 属性。（适用于 type="submit" 和 type="image"）详见 formaction 属性。
formenctype	见注释	覆盖表单的 enctype 属性。（适用于 type="submit" 和 type="image"）详见 formenctype 属性。
formmethod	get post	覆盖表单的 method 属性。（适用于 type="submit" 和 type="image"）详见 formmethod 属性。
formnovalidate	formnovalidate	覆盖表单的 novalidate 属性。如果使用该属性，则提交表单时不进行验证。详见 formnovalidate 属性。
formtarget	_blank _self _parent _top framename	覆盖表单的 target 属性。（适用于 type="submit" 和 type="image"）详见 formtarget 属性。
height	pixels %	定义 input 字段的高度。（适用于 type="image"）。为图片指定高度和宽度是一个好习惯。
list	datalist-id	引用包含输入字段的预定义选项的 datalist 。
max	number date	规定输入字段的最大值。请与 "min" 属性配合使用，来创建合法值的范围。
maxlength	number	规定文本字段中允许的最大字符数。
min	number date	规定输入字段的最小值。请与 "max" 属性配合使用，来创建合法值的范围。
multiple	multiple	如果使用该属性，则允许一个以上的值。详见 multiple 属性。
name	field_name	规定 input 元素的名称。 name 属性用于在提交表单时搜集字段的值。
pattern	regexp_pattern	规定输入字段的值的模式或格式。例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。详见 pattern 属性。
placeholder	text	规定帮助用户填写输入字段的提示。详见 placeholder 属性。
readonly	readonly	指示字段的值无法修改。详见 readonly 属性。
required	required	指示输入字段的值是必需的。详见 required 属性。
size	number_of_char	规定输入字段中的可见字符数。详见 size 属性。
src	URL	规定图像的 URL。（适用于 type="image"）
step	number	规定输入字的的合法数字间隔。详见 step 属性。
type	button checkbox date datetime datetime-local email file hidden image month number password radio range reset submit text time url week	规定 input 元素的类型。详见 type 属性。
value	value	对于按钮：规定按钮上的文本对于图像按钮：传递到脚本的字段的符号结果对于复选框和单选按钮：定义 input 元素被点击时的结果。对于隐藏、密码和文本字段：规定元素的默认值。注释：不能与 type="file" 一同使用。注释：对于 type="checkbox" 以及 type="radio"，是必需的。详见 value 属性。
width	pixels %	定义 input 字段的宽度。（适用于 type="image"）

支持 HTML5 全局属性和事件属性。

hoo_chsodene

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 标签简介（三）

本文的主要内容参考于w3shool网站。本文是自己对 HTML5 标签学习的一个简单梳理。如果你发现了文中的错误，请通过评论及时告诉我，避免对别人产生误导；如果你发现有不明白的地方，也可以通过评论告诉我，大家可以相互交流；如果你想转载我的博文，请在你的博文开头或末尾处注明，并附上该博文的链接地址，也请通过评论及时告诉我你转载后的链接地址，以便我能看到其他人在你转载处的评论。
复制链接

扫一扫