HTML_02_头部

最新推荐文章于 2022-07-13 14:37:42 发布
最新推荐文章于 2022-07-13 14:37:42 发布
阅读量483 收藏
点赞数 1
分类专栏： # HTML/H5 文章标签： HTML HEAD
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pre_eminent/article/details/79441649
版权




HTML 文本格式化

HTML 中存在一些格式化文本的标签，它们可以被直接使用，而不用您再去写样式进行调整。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>beyond</title>
</head>
<body>
<b>加粗文本</b><br/>
<i>斜体文本</i><br/>
这个是<code>Code代码</code>啦<br/>
这个是<sub>下标</sub><br/>
这个是<sup>上标</sup><br/>
</body>
</html>

运行效果如下:


HTML 格式化标签

HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式，如：粗体 or 斜体

这些 HTML 标签被称为格式化标签。

lamp通常标签 <strong> 替换加粗标签 <b> 来使用， <em> 替换 <i>标签使用。 
然而，这些标签的含义是不同的： 
<b> 与<i> 定义粗体或斜体文本。 
<strong> 或者 <em> 意味着你要呈现的文本是重要的，所以要突出显示。
现今所有主要浏览器都能渲染各种效果的字体。
Examples

本站实例

文本格式化 
此例演示如何在一个 HTML 文件中对文本进行格式化

代码如下:

<!DOCTPYE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>beyond</title>
</head>
<body>

<strong>这个文本是加粗Strong的</strong><br/>
<em>这个文本是em斜体的</em><br/>
<big>这个文本是big放大的(HTML5不再支持)</big><br/>
<small>这个文本是small缩小的</small><br/>

<b>加粗文本</b><br/>
<i>斜体文本</i><br/>
这个是<code>Code代码</code>啦<br/>
这个是<sub>下标</sub><br/>
这个是<sup>上标</sup><br/>

</body>
</html>

运行效果如下:



预格式文本 
此例演示如何使用 pre 标签对空行和空格进行控制。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>beyond</title>
</head>
<body>
<pre>
	这个pre标签里的空格     和空行



	会原封不动地显示在浏览器里
</pre>

</body>
</html>

效果如下:



"计算机输出"标签 
此例演示不同的"计算机输出"标签的显示效果。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<title>beyond</title>
</head>
<body>

<code>这个是Code代码块</code><br/>
<kbd>这个kbd键盘输入</kbd><br/>
<tt>这个tt打字机文本</tt><br/>
<samp>这个是samp计算机样本</samp><br/>
<var>这个是var计算机变量</var><br/>

<p>
	<b>注释:</b>这些个标签常用于显示计算机编程代码
</p>
</body>
</html>

效果如下:



地址 
此例演示如何在 HTML 文件中写地址。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<title>beyondの心中の动漫神作</title>
</head>
<body>
<address>
	code by <a href="mailto:***@qq.com">beyond</a><br>
	live at:<br>
	***.com<br>
	Laputa,天空の城<br>
</address>
</body>
</html>

运行效果如下:



缩写和首字母缩写 
此例演示如何实现缩写或首字母缩写。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<title>beyondの心中の动漫神作</title>
</head>
<body>

<abbr title="我们仍未知道那年夏天所见到的花的名字">那朵花</abbr>
<br/><br/><br/>

<acronym title="HyperText Markup Language">HTML</acronym>
<br/><br/>
<p>当把鼠标移到标签包裹的文本上时,title属性值就会显示</p>
<p>acronym : 首字母缩略词,HTML5已弃用</p>
</body>
</html>


效果如下:



文字方向 
此例演示如何改变文字的方向。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<title>beyondの心中の动漫神作</title>
</head>
<body>

<p>正常顺序</p>
<p>
	<bdo dir="rtl">不是正常顺序</bdo>
</p>

<p>  说明: bdo 标签, 它有个dir方向属性, 其值rtl表示从右到左</p>
<p>  解释: bdo 标签,它允许你指定文字方向并重载用于文本方向计算的  双向算法(bidirectional algorithm)</p>
</body>
</html>

效果如下:



块引用 
此例演示如何实现长短不一的引用语。(quot)

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<title>beyondの心中の动漫神作</title>
</head>
<body>

<p>
面码在纸条上如此写道:
	<q>最喜欢仁太了,对仁太的这种喜欢是想要成为仁太新娘子的喜欢</q>
</p>

</body>
</html>

效果如下:



删除字效果和插入字(下划线)效果 
此例演示如何标记  删除文本(delete)  和  插入文本(insert)。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<title>beyondの心中の动漫神作</title>
</head>
<body>

<p>
	do not go gentle into that <del>peace</del> <ins>good</ins> night
</p>

</body>
</html>

效果如下:


HTML 文本格式化标签 

标签描述
<b>定义粗体文本
<em>定义着重文字
<i>定义斜体字
<small>定义小号字
<strong>定义加重语气
<sub>定义下标字
<sup>定义上标字
<ins>定义插入字 (下划线效果)
<del>定义删除字

HTML "计算机输出" 标签

标签描述
<code>定义计算机代码
<kbd>定义键盘码
<samp>定义计算机代码样本
<var>定义变量
<pre>定义预格式文本

HTML 引文, 引用, 及标签定义

标签描述
<abbr>定义缩写
<address>定义地址
<bdo>定义文字方向,如dir="rtl"
<blockquote>定义长的引用
<q>定义短的引用语
<cite>定义引用、引证
<dfn>定义一个定义项目。


HTML <blockquote> 标签 

<blockquote> 标签同样是对文本进行引用，不同的是该标签引用的是长文本。

<blockquote> 标签内的内容会自动有缩进。 

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<title>beyondの心中の动漫神作</title>
</head>
<body>
<h1>未闻花名</h1>

<p>
	下面这段话来自未闻花名最后一集:
</p>
<blockquote cite="http://baidu.com/s?wd=那朵花">
	在我们走过的季节里，
	路旁盛开的花朵也在不断变化，
	那个季节盛开的花是叫什么来着？
	轻轻摇曳着，一碰会微微刺痛，
	靠近一闻，隐约有股青涩的阳光的气息。
	那气息渐渐地淡去，我们也在慢慢长大。
	可是，那朵花一定还在某个地方盛开着……
	对，我们永远都会继续实现那朵花的愿望。
</blockquote>

</body>
</html>

运行效果如下:



标签定义及使用说明

<blockquote> 标签定义摘自另一个源的块引用。

浏览器通常会对 <blockquote> 元素进行缩进。

提示和注释

提示：如果标记是不需要段落分隔的短引用，请使用<q>。 

HTML 4.01 与 HTML5之间的差异

在 HTML 4.01 中，<blockquote> 标签定义一段长引用。

在 HTML5 中，<blockquote> 标签定义摘自另一个源的块引用。

HTML 与 XHTML 之间的差异

注释：如需把页面作为 XHTML 进行验证，那么 <blockquote> 元素必须包含块级元素，比如：

<blockquote> 
<p>Here is a long quotation.</p> 
</blockquote>

属性

属性值描述
citeURL规定引用的来源。


HTML <cite> 标签

<cite> 标签表示它所包含的文本  对  某个参考文献  的引用，比如  书籍或者杂志  的 标题 。

<cite> 标签中的文本将会以斜体显示。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<title>beyondの心中の动漫神作列表</title>
</head>
<body>
<img src="http://wx3.sinaimg.cn/large/ce98cd4cgy1fp17h8ip14j20m80m81kx.jpg" width="210" height="210" alt="那朵花">
<p>
	动漫 <cite>未闻花名</cite> 放送于2011年
</p>



</body>
</html>

运行效果如下:


标签定义及使用说明

<cite> 标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。

注释：人名不属于作品的标题。

提示：<cite> 标签还有一个不为人知的功能：

使用该标签，您或其他人可以从文档中  自动摘录参考书目。

例如：浏览器能够自动整理引用表格，并把它们作为脚注或者 独立的文档 来显示。

也就是说，文档的内容可以通过浏览器以不同的方式展示给用户。

HTML 4.01 与 HTML5之间的差异

在 HTML5 中， <cite> 标签定义作品的标题。

在 HTML 4.01 中， <cite> 标签定义一个引用。



HTML <dfn> 标签

<dfn> 标签可标记那些对特殊术语或短语的定义。

<dfn> 元素是一个内嵌元素。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<title>beyondの心中の动漫神作列表</title>
</head>
<body>

<dfn>这个是dfn标签的效果</dfn>

</body>
</html>

效果如下:


标签定义及使用说明

<dfn> 标签是一个短语标签，用来定义特殊术语或短语。

提示：我们并不反对使用这个标签，但是如果您只是为了达到某种视觉效果而使用这个标签的话，我们建议您使用 CSS ，这样可能会取得更丰富的效果。

所有短语标签：

标签描述
<em>呈现为被强调的文本。
<strong>定义重要的文本。
<dfn>定义特殊术语或短语。
<code>定义计算机代码文本。
<samp>定义样本文本。
<kbd>定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var>定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。



HTML 链接

HTML 使用 超级链接a标签 与网络上的另一个文档相连。

说句毫不客气的话,几乎可以在所有的网页中找到链接。

点击链接可以从一张页面跳转到另一张页面。

Examples

尝试一下 - 实例

如何在 HTML 文档中创建链接。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<title>beyondの心中の动漫神作列表</title>
</head>
<body>

<p>
	点击打开<a href="beyond2.jpg">图片链接</a>
</p>

<p>
	点击在线观看<a href="http://baidu.com/s?wd=anohana">未闻花名</a>
</p>

</body>
</html>

运行效果如下:


HTML 超链接（链接）

HTML使用标签 <a>来设置超文本链接，是可以从一个页面  指向 另一个目的端  的链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，

您可以点击这些内容来跳转到  新的文档  或者  当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。


在标签<a> 中使用了href属性来描述  链接的地址。

默认情况下，链接将以以下形式出现在浏览器中：

  • 一个未访问过的链接显示为蓝色字体并带有下划线
  • 访问过的链接显示为紫色并带上下划线
  • 点击链接那电光火石的一刹那，链接显示为红色并带上下划线

HTML 空链接

HTML 空链接：指指向链接后，鼠标变成手形，但单击后 仍停留在当前页面。

临时加的空链接，主要为了能更好的看到最终的效果。

基本语法：

<a href="#">这是一个空链接</a>

其中“ # ”表示空链接。

效果如下:

<p>
	这是一个<a href="#">空链接</a>
</p>


HTML 链接语法

链接的 HTML 代码很简单。

它类似这样：:

<a href="urlString">Link text</a>

href 属性描述了链接的目标。.

For Example

<a href="http://www.baidu.com/s?wd=anohana">未闻花名</a>

上面这行代码显示为：未闻花名

点击这个超链接会把用户带到 未闻花名 的详细页面。


提示: "链接文本" 不必一定是文本喔。

图片或其他 HTML 元素都可以成为链接。

HTML 链接 - target 属性

使用 Target 属性，你可以定义  被链接的文档  在何处显示(如:在新的出口打开，还是在原有的窗口中打开)

下面的这行会在新窗口打开文档：

实例

<a href="http://www.baidu.com/s?wd=anohana" target="_blank">未闻花名</a>

提示：默认的被链接文档会在原有的窗口中打开的。

但是,如果将 target 属性设置为 "_blank" ,则文档就会在新窗口打开喔~


HTML 链接 - id 属性

id 属性可用于在一个 HTML 文档中创建书签标记。

提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于网民来说是隐藏的。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<title>beyondの心中の动漫神作列表</title>
</head>
<body>

点击查看<a href="#copyright">关于我们</a>


<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<a id="copyright">Copyright © 2018 Powered by beyond</a> 
<a href="#top">回到顶部</a>


</body>
</html>

效果如下:


实例

在HTML文档底部插入id,写上一些版权信息,将添加一个回到顶部的链接:

<a id="copyright">Copyright © 2018 Powered by beyond</a> <a href="#top">回到顶部</a>


在HTML文档的页面顶部,创建"关于我们"的链接,并起名id 为 top:

<a href="#copyright" id="top">关于我们</a>


或者，从另一个页面html_24.html创建一个链接到"html_23.html中的关于我们(id="copyright"）部分":


点击之后,会自动在当前窗口打开html_23.html并且定位到id="copyright"的关于我们 的页面部分

<a href="html_23.html#copyright">关于我们</a>

注意事项 - 有用的提示

千万注意: 请始终将正斜杠添加到子文件夹。

假如这样书写链接：href="http://localhost/app"，就会向服务器产生两次 HTTP 请求。

第1次请求地址是:http://localhost/app, 返回状态码是301 Moved Permanently

第2次请求地址是:http://localhost/app/,返回状态码是200 OK

这是因为服务器会添加正斜杠到这个地址后面，然后创建一个新的请求，就像这样：href="http://localhost/app/"

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<title>beyondの心中の动漫神作列表</title>
</head>
<body>

点击查看<a href="http://localhost/app/">关于我们</a>


</body>
</html>

如图所示:

localhost下面有一个app目录,

app目录里有一个index.html



点击链接后,连续发送了两次请求,如图所示:




这是因为服务器发现没有斜杠之后,

它会自己另外再去添加一个正斜杠到这个地址，

然后重新创建一个新的请求，就像这样：href="http://localhost/app/"

Examples

更多实例

图片链接 
如何使用图片链接。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<title>beyondの心中の动漫神作列表</title>
</head>
<body>

<img src="http://wx3.sinaimg.cn/large/ce98cd4cgy1fp17h8ip14j20m80m81kx.jpg" width="220" height="220" alt="未闻花名">


</body>
</html>

效果如下:



在当前页面链接到指定位置 如何使用书签

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<title>beyondの心中の动漫神作列表</title>
</head>
<body>

<p>查看<a href="#anohana">未闻花名</a></p>

<p><a id="air">AIR的介绍</a></p>
<p><a id="k-on">轻音少女的介绍</a></p>
<p><a id="tiger">龙与虎的介绍</a></p>
<p><a id="anohana">未闻花名的介绍</a></p>

</body>
</html>

效果如下:



跳出框架 
本例演示如何跳出框架，假如你的页面被固定在框架之内。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<title>beyondの心中の动漫神作列表</title>
</head>
<body>
跳出框架演示
<p>查看<a href="http://baidu.com/s?wd=anohana" target="_top">未闻花名</a></p>


</body>
</html>

效果如下:



创建电子邮件链接 
本例演示如何如何链接到一个邮件。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<title>beyondの心中の动漫神作列表</title>
</head>
<body>
<p>
	联系beyond:
	<a href="mailto:username@qq.com?Subject=Hello%20Beyond" target="_top">
		发送邮件
	</a>
</p>

<p>
	<b>注意:</b>单词间的空格必须用 %20 代替
</p>

</body>
</html>

效果如下:


创建电子邮件链接 2 
本例演示更加复杂的邮件链接。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<title>beyondの心中の动漫神作列表</title>
</head>
<body>
<p>
	联系beyond:
	<a href="mailto:beyond@qq.com?cc=keke@qq.com&bcc=loli@qq.com&subject=hello%20I'%20m%20beyond&body=I%20wanna%20play%20a%20game" target="_top">
		发送邮件2
	</a>
</p>

<p>
	<b>注意:</b>单词间的空格必须用 %20 代替
</p>

</body>
</html>

效果如下:


HTML 链接标签

标签描述
<a>定义一个超级链接

HTML <head>

HTML 头部元素包含关于文档的概要信息，也被称为元信息（meta-information）。

Examples

查看在线实例

<title> - 定义了HTML文档的标题 
使用 <title> 标签定义HTML文档的标题

<base> - 定义了所有链接的URL 
使用 <base> 定义页面中所有链接默认的链接目标地址。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<title>beyondの心中の动漫神作列表</title>
	<base href="http://localhost/static/images/" target="_blank"/>
</head>
<body>

<img src="jennifer.png" width="100" height="100" /><br/>
因为在head的base标签中设置了基础路径,<br/>
所以图片的完整链接就是"http://localhost/static/images/beyond.jpg"
<br/><br/>

<a href="http://www.baidu.com/s?wd=anohana">未闻花名</a>
<br/>
这个a标签将打开新的窗口,即使没设置target="_blank"属性<br/>
但是,在head的base中设置了默认的所有a标签打开的target为_blank

</body>
</html>


效果如下:



<meta> - 提供了HTML文档的meta标记 
使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。

特别注意:虽然meta标签不会在页面上显示,但是对SEO极其重要!

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta name="description" content="免费零基础教程">
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作列表</title>
</head>
<body>

meta标签虽然不显示,但对SEO极其重要

</body>
</html>

效果如下:



HTML <head> 元素

<head> 元素包含了所有的头部标签元素。

在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种 meta 信息。

可以添加在头部区域的元素标签为: 

<title>, <meta>, <base>, <link>, 

<style>, <script>  和 <noscript>。


<head> 元素描述了文档的各种属性和信息，

其中包括文档的标题、在 Web 中的位置以及和其他文档的关系等。

HTML <title> 元素

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必须的。

<title> 元素:

  • 定义了浏览器工具栏的标题
  • 当网页添加到收藏夹时，显示在收藏夹中的标题
  • 显示在搜索引擎结果页面的标题

一个简单的 HTML 文档:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>

HTML <base> 元素

<base> 标签描述了基本的链接地址/链接目标，

该标签作为HTML文档中所有的链接标签的默认链接:

<head>
<base href="http://localhost/static/images/" target="_blank">
</head>

提示：

在 HTML 中，<base> 标签没有结束标签；

在 XHTML 中，<base> 标签必须被正确地关闭。


HTML <link> 元素

<link> 标签定义了文档与外部资源之间的关系。

<link> 标签通常用于链接到样式表:

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

HTML <style> 元素

<style> 标签定义了HTML文档的样式文件引用地址.

在<style> 元素中你需要指定样式文件来渲染HTML文档:

<head>
<style type="text/css">
body {background-color:rgb(241,241,241);}
p {color:#1782d2}
</style>
</head>

HTML <meta> 元素

meta标签描述了一些基本的元数据。

<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器和搜索引擎解析,极其重要!!!

META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容 或 重新加载页面），

搜索引擎（关键词），或其他Web服务。


<meta>一般放置于 <head>区域

<meta> 标签- 使用实例

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, JavaScript">

为网页定义描述内容:

<meta name="description" content="Free tutorials on Web">

定义网页作者:

<meta name="author" content="beyond">

每67秒中刷新当前页面:

<meta http-equiv="refresh" content="67">

HTML <script> 元素

<script>标签用于加载脚本文件，如： JavaScript等。

<script> 元素在以下章节会详细描述。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>

	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="30">
	<meta name="description" content="免费零基础教程">
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作列表</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestyle.css">

	<style type="text/css">
		body {
			background-color: rgb(241,241,241);
		}
		p {
			color: #1782d2;
		}
	</style>
</head>
<body>

<p>meta标签虽然不显示,但对SEO极其重要</p>

</body>
</html>

效果如下:



HTML head 元素

标签描述
<head>定义了文档的信息
<title>定义了文档的标题
<base>定义了页面链接标签的默认链接地址
<link>定义了一个文档和外部资源之间的关系
<meta>定义了HTML文档中的元数据
<script>定义了客户端的脚本文件
<style>定义了HTML文档的样式文件




附录:

HTML 参考手册- (HTML5 标准)

按字母顺序排列

New : HTML5新标签

标签描述
<!--...-->-->√定义注释
<!DOCTYPE>-->√定义文档类型
<a>-->√定义超文本链接
<abbr>-->√定义缩写
<acronym>定义只取首字母的缩写，不支持HTML5  ???Excuse Me???
<address>定义文档作者或拥有者的联系信息
<applet>定义嵌入的 applet。HTML5中不支持使用。
<area>定义图像映射内部的区域
<article>New定义一个文章区域
<aside>New定义页面的侧边栏内容
<audio>New-->√定义音频内容
<b>-->√定义文本粗体
<base>定义页面中所有链接的默认地址或默认目标。
<basefont>定义页面中文本的默认字体、颜色或尺寸。HTML5不支持使用。
<bdi>New允许您设置一段文本，使其脱离其父元素的文本方向设置。
<bdo>-->√定义文字方向, 例如:从右往左,就是 dir="rtl"
<big>定义大号文本，HTML5不支持使用。
<blockquote>定义长的引用
<body>-->√定义文档的主体
<br>-->√定义换行
<button>定义一个点击按钮
<canvas>New定义图形，比如图表和其他图像,标签只是图形容器，您必须使用脚本来绘制图形
<caption>定义表格标题
<center>定义居中文本。HTML5不支持使用。
<cite>定义引用(citation)
<code>-->√定义计算机代码文本
<col>-->√定义表格中一个或多个列的属性值
<colgroup>定义表格中供格式化的列组
<command>New定义命令按钮，比如单选按钮、复选框或按钮
<datalist>New定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<dd>定义定义列表中项目的描述
<del>-->√定义被删除文本 (删除线效果)
<details>New用于描述文档或文档某个部分的细节
<dfn>定义定义项目
<dialog>New定义对话框，比如提示框
<dir>定义目录列表。HTML5不支持使用。
<div>定义文档中的节
<dl>定义列表详情
<dt>定义列表中的项目
<em>定义强调文本
<embed>New定义嵌入的内容，比如插件。
<fieldset>定义围绕表单中元素的边框
<figcaption>New定义<figure> 元素的标题
<figure>New规定独立的流内容（图像、图表、照片、代码等等）。
<font>定义文字的字体、尺寸和颜色。HTML5不支持使用。
<footer>New定义 section 或 document 的页脚。
<form>-->√定义了HTML文档的表单
<frame>-->√定义框架集的窗口或框架
<frameset>-->√定义框架集
<h1> to <h6>-->√定义 HTML 标题
<head>-->√定义关于文档的信息
<header>New定义了文档的头部区域
<hr>-->√定义水平线
<html>-->√定义 HTML 文档
<i>-->√定义斜体字
<iframe>-->√定义内联框架
<img>-->√定义图像
<input>-->√定义输入控件
<ins>-->√定义被插入文本 (下划线效果)
<kbd>定义键盘文本
<keygen>New规定用于表单的密钥对生成器字段。
<label>定义 input 元素的标注
<legend>定义 fieldset 元素的标题。
<li>定义列表的项目
<link>定义文档与外部资源的关系
<map>定义图像映射
<mark>New定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。
<menu>定义菜单列表。HTML5不支持使用。
<meta>定义关于 HTML 文档的元信息。
<meter>New定义度量衡。仅用于已知最大和最小值的度量。
<nav>New定义导航链接的部分
<noframes>定义针对不支持框架的用户的替代内容。HTML5不支持
<noscript>-->√定义针对不支持客户端脚本的用户的替代内容。
<object>定义内嵌对象
<ol>定义有序列表。
<optgroup>定义选择列表中相关选项的组合。
<option>-->√定义选择列表中的选项。
<output>New定义不同类型的输出，比如脚本的输出。
<p>-->√定义段落。
<param>定义对象的参数。
<pre>-->√定义预格式文本。
<progress>New定义运行中的进度（进程）。
<q>-->√定义短的引用。
<rp>New<rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
<rt>New<rt> 标签定义字符（中文注音或字符）的解释或发音。
<ruby>New<ruby> 标签定义 ruby 注释（中文注音或字符）。
<s>不赞成使用。定义加删除线的文本。
<samp>定义计算机代码样本。
<script>-->√定义客户端脚本。
<section>New<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<select>定义选择列表（下拉列表）。
<small>定义小号文本。
<source>New<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<span>定义文档中的节。
<strike>HTML5不支持，不赞成使用。定义加删除线文本。
<strong>-->√定义强调文本。
<style>定义文档的样式信息。
<sub>-->√定义下标文本。
<summary>New<summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。
<sup>-->√定义上标文本。
<table>-->√定义表格。
<tbody>定义表格中的主体内容。
<td>-->√定义表格中的单元。
<textarea>-->√定义多行的文本输入控件。
<tfoot>定义表格中的表注内容（脚注）。
<th>-->√定义表格中的表头单元格。
<thead>定义表格中的表头内容。
<time>New定义日期或时间，或者两者。
<title>-->√定义文档的标题。
<tr>-->√定义表格中的行。
<track>New<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。
<tt>定义打字机文本。
<u>不赞成使用。定义下划线文本。
<ul>定义无序列表。
<var>定义文本的变量部分。
<video>New<video> 标签定义视频，比如电影片段或其他视频流。
<wbr>New规定在文本中的何处适合添加换行符。


未完待续,下一章节,つづく


pre_eminent
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html+css+js
qq_43174912的博客
03-21 1633
2021年3月16日 一、标签内容 1.<!DOCTPYE html>声明为HTML5文档 （1）<!DOCTPYE html>用于游览器正确显示网页 （2）<meta charset="UTF-8>用于声明用中文输出 2.<html>元素是html页面的根元素 3.<head>元素包含了文档的元(meta)数据 4.<title>元素描述了文档的标题 5.<...
HTML 文本格式化
老狼的专栏
02-26 291
HTML 文本格式化 加粗文本斜体文本电脑自动输出尝试一下 » HTML 格式化标签 HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如：粗体or斜体 这些HTML标签被称为格式化标签（请查看底部完整标签参考手册）。 通常标签 <strong> 替换加粗标签 <b> 来使用, ...
HTML基础知识点大全
m0_69674158的博客
05-04 6829
一、什么是HTML HyperText Markup Language，即超文本标记语言 二、第一个HTML <！doctpye html> <html> <head></head> <body></body> <html> 三、常用的标签🀄️🀄️🀄️ 1⃣️p 标签 ，段落标签，占整行 2⃣️img 图片标签： ①src 图片路径：绝对路径http://xxx.xx/xx/x.jpg 相对路径..
my_project_02
03-04
在"my_project_02"这个项目中，我们可以推测它是一个与HTML相关的项目，可能是某个学习实例、个人作品集或者小型网站的源代码。下面我们将深入探讨HTML的基本概念、结构以及如何使用它来创建网页。 HTML由一系列的...
pizzeria_v02
02-09
HTML文件通常包含元素标签，如`<head>`、`<body>`、`<h1>`、`<p>`和`<img>`等，它们定义了页面的头部信息、主体内容、标题、段落和图像等。HTML与CSS（层叠样式表）和JavaScript一起工作，共同实现网页的布局、样式...
12c_02_04_watch_configurator
03-22
1. **头部（Head）**：包含元数据，如字符集声明（`<meta charset="UTF-8">`），页面标题（`<title>`），以及可能的CSS（Cascading Style Sheets）和JavaScript引用，这些都用于页面的样式和交互性。 2. **主体...
IAT339_P02_Website
03-19
学习HTML，你需要理解各种标签的作用，如`<head>`定义头部信息，`<body>`包含网页主体，`<h1>`到`<h6>`定义标题，`<p>`表示段落，`<a>`用于链接等。同时，HTML也通过`<div>`和`<span>`等容器元素来实现布局控制。 ...
作品--HTML页面--源文件+素材.zip_web页面素材_网页 html
最新发布
09-23
1. **理解HTML结构**：查看HTML源代码，学习如何组织头部、主体和脚部等部分，以及如何使用段落、标题、链接、列表等元素。 2. **学习CSS样式**：分析CSS文件，理解如何设置颜色、大小、布局，以及如何应用媒体查询...
!DOCTYPE html 的作用
态度决定一切
06-04 1万+
1.定义：DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器； 2.作用： 声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。 document.compatMode： BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。 CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。 ...
HTML基础教程
皓轩的专栏
10-22 2659
HTML 简介         Hypertext Markup Language, 中文也就是超文本链接标示语言。HTML（HyperTextMark-upLanguage）即超文本标记语言，是WWW的描述语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们
＜!DOCTYPE html＞ 的作用
summerriver1的博客
07-13 9002
的作用
lucene-使用lius解析html
深未来技术
12-23 4452
1、代码package liusextract;import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.UnsupportedEncodingException;import lius.index.html.JTidyHtmlIndexe
<!DOCTYPE html>很重要
热门推荐
hejisan的专栏
11-29 1万+
噩梦开始的源头：之前写html或者jsp页面，从来不注意doctype的声明，也不太明白doctype的作用。直到最近碰到了一个非常奇葩的bug：某一个页面在IE7和8，Chrome，ff等下正常，但是在IE9下显示有问题，我就开始找啊找，各种调试，各种log，终于在httpWatch里边找到了答案：DOCTYPE未声明。于是我给页面添加了,果然奏效了。 下面我就尽可能简洁扼要的说一下DOC
html_css_四分之一圆
pre_eminent的JAVA学习园地
05-27 3228
需求: 效果: 代码: <!DOCTYPE html> <html> <head> <title>四分之一圆</title> <style type="text/css"> .class_div_bg { width: 400px; height: 200px; background-...
html_table_colspan无法对齐的问题
pre_eminent的JAVA学习园地
05-24 2158
正常情况, 如图所示: 当第3行,分别为3个td时, 第1行和第2行能够正常显示colspan的2列宽度。 异常情况, 如图所示: 当第3行改成colspan=3时, 第1行和第2行的宽度就不一样了,无法对齐！ 解决方法, 如图所示: 给table加上table-layout: fixed;样式即可 理由: table-layout 用来显示表格单元格、行、...
HTML5_02_数学公式_拖放_定位_多媒体
pre_eminent的JAVA学习园地
03-08 1047
HTML5 MathML  数学标记语言MathML 与 HTML相似度很高，但是比较繁琐。它继承了 角括号 和 双标签（&lt;标签&gt;内容&lt;/标签&gt;）的用法。HTML5 可以在文档中使用 MathML 元素，对应的标签是 &lt;math&gt;...&lt;/math&gt; 。MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写...
HTML_06_字符实体
pre_eminent的JAVA学习园地
03-07 928
HTML 脚本JavaScript 是可插入 HTML 页面的编程代码。JavaScript 使 HTML 页面具有更强的动态和交互性。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。在线实例插入一段脚本如何将脚本插入 HTML 文档。代码如下:&lt;!DOCTPYE html&gt; &lt;html&gt; &lt;head&gt; &lt;link rel="ic...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值