认识HTML标签的第一章

简介: 认识HTML标签的第一章

HTML <!--...--> 标签

实例

HTML 注释:

<!--这是一段注释。注释不会在浏览器中显示。-->
<p>这是一段普通的段落。</p>

定义和用法

注释标签用于在源代码中插入注释。注释不会显示在浏览器中。

您可使用注释对您的代码进行解释,这样做有助于您在以后的时间对代码的编辑。当您编写了大量代码时尤其有用。

使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯(这样就不会把脚本显示为纯文本):

<script type="text/javascript">
<!--
function displayMsg()
{
alert("Hello World!")
}
//-->
</script>

注释:注释行结尾处的两条斜杠 (//) 是 JavaScript 注释符号。这可以避免 JavaScript 执行 --> 标签。

标准属性

注释标签不支持任何标准属性。

如需更多有关 HTML 标准属性的信息,请访问 标准属性

事件属性

注释标签不支持任何事件属性。

如需更多有关 HTML 事件属性的信息,请访问 事件属性

HTML <!DOCTYPE> 声明

实例

<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
文档的内容......
</body>
</html>

定义和用法

<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。

<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML,所以不需要引用 DTD。

提示:请始终向 HTML 文档添加 <!DOCTYPE> 声明,这样浏览器才能获知文档类型。

所有浏览器都支持 <!DOCTYPE> 声明。

HTML <a> 标签

实例

指向 百度 的超链接:

<a href="http://www.baidu.com.cn">W3School</a>

定义和用法

<a> 标签定义超链接,用于从一张页面链接到另一张页面。

<a> 元素最重要的属性是 href 属性,它指示链接的目标。

在所有浏览器中,链接的默认外观是:

未被访问的链接带有下划线而且是蓝色的

已被访问的链接带有下划线而且是紫色的

活动链接带有下划线而且是红色的

提示:您可能已经注意到了,百度站点内的链接外观与默认的链接外观非常不同。您可以使用 CSS 伪类 向文本超链接添加复杂而多样的样式。

全局属性

<a> 标签支持 HTML 中的全局属性

事件属性

<a> 标签支持 HTML 中的事件属性

HTML <abbr> 标签

实例

标记一个缩写:

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

定义和用法

<abbr> 标签指示简称或缩写,比如 "WWW" 或 "NATO"。

通过对缩写进行标记,您能够为浏览器、拼写检查和搜索引擎提供有用的信息。

<abbr> 标签最初是在 HTML 4.0 中引入的,表示它所包含的文本是一个更长的单词或短语的缩写形式。

提示和注释

提示:可以在 <abbr> 标签中使用全局的 title 属性,这样就能够在鼠标指针移动到 <abbr> 元素上时显示出简称/缩写的完整版本。

全局属性

<abbr> 标签支持 HTML 中的全局属性

事件属性

<abbr> 标签支持 HTML 中的事件属性

HTML <audio> 标签

实例

一段简单的 HTML 5 音频:

<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>

定义和用法

<audio> 标签定义声音,比如音乐或其他音频流。

属性

3449bb3a11f747a3a5b2692445d3d74f.png

全局属性

<audio> 标签支持 HTML 中的全局属性

事件属性

<audio> 标签支持 HTML 中的事件属性

HTML <big> 标签

HTML5 中不支持

<big> 标签在 HTML 4 中用于定义更大的文本

定义和用法

<big> 标签呈现大号字体效果。

使用 <big> 标签可以很容易地放大字体。这简直不能再简单了:浏览器显示包含在 <big> 标签和其相应的 </big> 标签之间的文字时,其字体比周围的文字要大一号。但是,如果文字已经是最大号字体,这个 <big> 标签将不起任何作用。

更妙的是,可以嵌套 <big> 标签来放大文本。每一个 <big> 标签都可以使字体大一号,直到上限 7 号文本,正如字体模型所定义的那样。

但是使用 <big> 标签的时候还是要小心,因为浏览器总是很宽大地试图去理解各种标签,对于那些不支持 <big> 标签的浏览器来说,它经常将其认为是粗体字标签。

HTML <body> 标签

实例

一个简单的 HTML 文档,带有最基本的必需的元素:

<html>
<head>
  <title>文档的标题</title>
</head>
<body>
  文档的内容... ...
</body>
</html>

定义和用法

body 元素定义文档的主体。

body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)

可选的属性

bb87a1ff72094feea474eebfe5e5e84b.png

全局属性

<body> 标签支持 HTML 中的全局属性

事件属性

<body> 标签支持 HTML 中的事件属性

 

HTML <br> 标签

br是一个换行标签

定义和用法

<br> 可插入一个简单的换行符。

<br> 标签是空标签(意味着它没有结束标签,因此这是错误的:<br></br>)。在 XHTML 中,把结束标签放在开始标签中,也就是 <br />。

请注意,<br> 标签只是简单地开始新的一行,而当浏览器遇到 <p> 标签时,通常会在相邻的段落之间插入一些垂直的间距。

clear 属性

如果您希望文本流在内联表格或图像的下一行继续输出,请使用 clear 属性,该属性有三个可选的值:left、right 或者 all,每个值都代表一个边界或两边的边界。

更多有关 <br> 标签的 clear 属性的信息。

全局属性

<br> 标签支持 HTML 中的全局属性

事件属性

<br> 标签支持 HTML 中的事件属性

HTML <button> 标签

实例

以下代码标记了一个按钮:

<button type="button">Click Me!</button>

所有主流浏览器都支持 <button> 标签。

重要事项:如果在 HTML 表单中使用 button 元素,不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 </button> 之间的文本,而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来创建按钮。

定义和用法

<button> 标签定义一个按钮。

在 button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

<button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像。

唯一禁止使用的元素是图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。

请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。

d44bea2dbcd344c59bde028431136a08.png

全局属性

<button> 标签支持 HTML 中的全局属性

事件属性

<button> 标签支持 HTML 中的事件属性

本篇文章就先认识到这,期待博主下一篇文章,请点赞支持

相关文章
|
2月前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
65 5
|
1月前
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
94 49
|
4月前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
64 0
|
24天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
35 5
|
1月前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
1月前
|
存储 移动开发 前端开发
|
2月前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
52 2
|
2月前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
43 1
|
3月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
180 1
|
3月前
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
350 1