来吧,HTML5之基础标签(下)

时间:2021-08-23 21:04:49

<dialog> 标签 定义对话框或窗口。

<dialog> 标签是 HTML 5 的新标签。目前只有 Chrome 和 Safari 6 支持 <dialog> 标签。

<dir> 标签定义目录列表。不赞成使用dir标签,请使用css样式:

来吧,HTML5之基础标签(下)

<div> 标签  可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

<div> 是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符。

其实就是可以对文档的布局起作用,分成一块一块的,现在web设计主流的div+css就是依照此来布局的。

<embed> 标签  定义嵌入的内容,比如插件。<embed> 标签是 HTML 5 中的新标签。

例如你在网页中嵌入一个mp3文件:

来吧,HTML5之基础标签(下)来吧,HTML5之基础标签(下)

<fieldset> 标签  (其实就是有个标题的框)将表单内容的一部分打包,生成一组相关表单的字段。当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。<legend> 标签为 fieldset 元素定义标题。

来吧,HTML5之基础标签(下)

<figcaption> 标签定义 figure 元素的标题(caption)。<figure> 标签规定独立的流内容(图像、图表、照片、代码等等)如下:

来吧,HTML5之基础标签(下)

<footer> 标签  定义文档或节的页脚。<footer> 标签是 HTML 5 中的新标签。

<form> 标签  用于为用户输入创建 HTML 表单。表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menustextareafieldsetlegend 和 label 元素。表单用于向服务器传输数据。

来吧,HTML5之基础标签(下)

<frame> 标签  定义 frameset 中的一个特定的窗口(框架)。frameset 中的每个框架都可以设置不同的属性,比如 border、scrolling、noresize 等等。

其实相当于是个布局框架,分割的几个部分可以分别填充不同的html文档。实现导航等作用。如:

<html>
<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />
</frameset>
</html>

frameset 元素 可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独立的文档。在其最简单的应用中,frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。说白了就是分割几行几列。为frame服务。

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

<header> 标签  是 HTML 5 中的新标签。有了页脚了,这是页眉。对主页的介绍作用。

<hr> 标签  在 HTML 页面中创建一条水平线。

<i> 标签  显示斜体文本效果。

来吧,HTML5之基础标签(下)

iframe 元素  会创建包含另外一个文档的内联框架(即行内框架)。不过不支持的浏览器显示不出来iframe标签中的数据。

来吧,HTML5之基础标签(下)

如果在chrome浏览器中预览,上面会显示test图片。

来吧,HTML5之基础标签(下)

<input> 标签  用于搜集用户信息。根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

<keygen> 标签  规定用于表单的密钥对生成器字段。当提交表单时,私钥存储在本地,公钥发送到服务器。H5的新元素。

<label> 标签  为 input 元素定义标注(标记)。主要是文本显示。

<li> 标签定义列表项目。<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。

来吧,HTML5之基础标签(下)

<link> 标签  定义文档与外部资源的关系。<link> 标签最常见的用途是链接样式表。

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

<main> 标签  规定文档的主要内容。

<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。<main> 标签是 HTML 5 中的新标签。

<map> 标签 定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。

<mark> 标签  定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。<mark> 标签是 HTML 5 中的新标签。

来吧,HTML5之基础标签(下)

<meta> 标签  位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。还可以用meta标签重定向页面。

<meter> 标签  定义已知范围或分数值内的标量测量。也被称为 gauge(尺度)。例子:磁盘用量、查询结果的相关性,等等。

注释:<meter> 标签不应用于指示进度(在进度条中)。如果标记进度条,请使用 <progress> 标签。

<meter value="3" min="0" max="10">十分之三</meter>
<meter value="0.6">60%</meter> 

<nav> 标签  定义导航链接的部分。<nav> 标签是 HTML 5 中的新标签。在nav标签内的导航组可表示可以导航到何处,一般是a标签。如下:

来吧,HTML5之基础标签(下)

当在浏览器点击home的时候显示test.jpg,点击previous的时候,显示test.mp3。

<object> 标签  用于包含对象,比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。

object 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持,这一点并未实现。而幸运的是,object 对象提供了解决方案。如果未显示 object 元素,就会执行位于 <object> 和 </object> 之间的代码。通过这种方式,我们能够嵌套多个 object 元素(每个对应一个浏览器)。

注释:不要对图像使用 <object> 标签,请使用 <img> 标签代替。

<ol> 标签  定义有序列表。

<optgroup> 标签  把相关的选项组合在一起。用法如下:

来吧,HTML5之基础标签(下)

option 元素  定义下拉列表中的一个选项(一个条目)。

<output> 标签  定义不同类型的输出,比如脚本的输出。<output> 标签是 HTML 5 中的新标签。

<p> 标签  定义段落默认情况下,空格只显示一个。

param 元素  允许您为插入 XHTML 文档的对象规定 run-time 设置,也就是说,此标签可为包含它的 <object> 或者 <applet> 标签提供参数。

<pre> 标签  的一个常见应用就是用来表示计算机的源代码。(其实和段落差不多,不过保留了空格等)

<progress> 标签  标示任务的进度(进程)。进度条。可以用css改变效果。

<q> 标签  在本质上与 <blockquote> 是一样的。不同之处在于它们的显示和应用。<q> 标签用于简短的行内引用。如果需要从周围内容分离出来比较长的部分(通常显示为缩进的块),请使用 <blockquote> 标签。

<rp> 标签  在 ruby 注释中使用,<rp> 标签是 HTML 5 的新标签。以定义不支持 ruby 元素的浏览器所显示的内容。

ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。

<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

<s> 标签  可定义加删除线文本定义。不赞成使用,早晚会消失的。

<script> 标签  用于定义客户端脚本,比如 JavaScript。

网页上会打印hello world。

来吧,HTML5之基础标签(下)

<section> 标签  定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。<section> 标签是 HTML 5 中的新标签。其实和div差不多。

<select&> 元素  中的 <option> 标签用于定义列表中的可用选项。

提示:select 元素是一种表单控件,可用于在表单中接受用户输入

<small> 标签  呈现小号字体效果。<small> 标签和它所对应的 <big> 标签一样,但它是缩小字体而不是放大。如果被包围的字体已经是字体模型所支持的最小字号,那么 <small> 标签将不起任何作用。

<source> 标签  为媒介元素(比如 <video> 和 <audio>)定义媒介资源。<source> 标签是 HTML 5 中的新标签。

拥有两份源文件的音频播放器。浏览器应该选择它所支持的文件(如果有的话):

<audio controls>
   <source src="horse.ogg" type="audio/ogg">
   <source src="horse.mp3" type="audio/mpeg">
 Your browser does not support the audio element.
</audio>

<span> 标签  被用来组合文档中的行内元素。

注释:span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。以为 span 应用 id 或 class 属性,这样既可以增加适当的语义,又便于对 span 应用样式。

<style> 标签  用于为 HTML 文档定义样式信息。在 style 中,您可以规定在浏览器中如何呈现 HTML 文档。type 属性是必需的,定义 style 元素的内容。唯一可能的值是 "text/css"。style 元素位于 head 部分中。

<sub> 标签  可定义下标文本。包含在 <sub> 标签和其结束标签 </sub> 中的内容将会以当前文本流中字符高度的一半来显示,但是与当前文本流中文字的字体和字号都是一样的。

提示:无论是 <sub> 标签还是和它对应的 <sup> 标签,在数学等式、科学符号和化学公式中都非常有用。

来吧,HTML5之基础标签(下)

<summary> 标签  包含 details 元素的标题,"details" 元素用于描述有关文档或文档片段的详细信息。<summary> 标签是 HTML 5 中的新标签。上面有示例。Details的实例。

<sup> 标签  可定义上标文本。和sub标签对应,一个显示在上面,一个显示在下面。

<table> 标签  定义 HTML 表格。例如定义一个三行两列的表格:

来吧,HTML5之基础标签(下)

Td代表列,tr代表行。

<textarea> 标签  定义多行的文本输入控件。文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。

<title> 元素  可定义文档的标题。

提示:<title> 标签是 <head> 标签中唯一要求包含的东西。

<track> 标签  为诸如 video 元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件,当媒介播放时,这些文件是可见的。<track> 标签是 HTML 5 中的新标签。

<tt> 标签  呈现类似打字机或者等宽的文本效果。

<u> 标签  可定义下划线文本。

<video> 标签定义视频,比如电影片段或其他视频流。H5新标签。

来吧,HTML5之基础标签(下)

Word Break Opportunity (<wbr>) 规定在文本中的何处适合添加换行符。

提示:如果单词太长,或者您担心浏览器会在错误的位置换行,那么您可以使用 <wbr> 元素来添加 Word Break Opportunity(单词换行时机)。

<p>
如果想学习 AJAX,那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。
</p>