HTML：常见HTML标签

最新推荐文章于 2024-03-10 07:00:00 发布

zll_@

最新推荐文章于 2024-03-10 07:00:00 发布

阅读量511

点赞数

本文链接：https://blog.csdn.net/qq_45662289/article/details/104111773

版权

HTML与CSS、JS的关系（网页的组成）

(1) HTML:超文本标记语言，是使用标记标签来描述网页的一种语言；(骨架)
(2) CSS:层叠样式表(Cascading Style Sheets)是一种用来为HTML或XML（标准通用标记语言子集）等文件修饰样式的语言。（衣服）
(3) JS:（JavaScript）是一种轻量级的编程语言,后续课程会详细讲解;(行为和功能)

常见HTML标签

1、页面结构标签（元数据 Metadata）

(1) root : 根(看不见) : root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。
(2) <!DOCTYPE>主要作用是决定渲染方式，告诉浏览器的解析器使用哪种规范来解析页面。
(3) <html>…</html>
<html> 与 </html> 表示一个 HTML 文档的顶层标签，所有其他元素必须被此标签包裹。标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。
(4) <head>…</head>
<head>标签用于定义文档的头部，它是所有头部元素的容器。好比书的目录，<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
(5) <meta>
<meta>标记描述不包含在标准 HTML 里的一些文档信息，例如开发工具、作者、网页关键字、网页描述、页面定时刷新及跳转等，这些定义内容并不在网页页面中显示。<meta>标签位于文档的头部。注意：<meta>没有结束标签。
(6) <body>…</body>
<body>元素定义文档的主体,<body>与</body>标签之间的文本是要在浏览器中显示的页面内容。
(7) <title>…</title>
<title>元素可定义文档的标题。<title>是在<head>部分中的元素。
(8) 注释：

2.内容标签

(1) <h1> — <h6>
<h1> — <h6>可定义标题，<h1>…</h1>为一级标题，<h2>…</h2>为二级标题，以此类推，<h1>定义最大的标题，<h6>最小的标题。
(2) <p>…</p>
<p>标签定义段落。
(3) <span>…</span>
<span> 标签被用来组合文档中的行内元素。<span>是在行内定义一个区域，也就是一行内可以被<span>划分成好几个区域，从而实现某种特定效果。
(4) <div>…</div>
<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
(5) <a>…</a>
<a> 标签定义超链接，用于从一张页面链接到另一张页面。标记<a>表示一个链接的开始，标记</a>表示链接的结束。
属性：
href：规定链接指向的页面的 url。（url：资源地址，指要链接到的网页或者文件的地址）
title：用于指定指向链接时所显示的提示信息。
target：规定在何处打开链接文档。（blank：在新窗口打开，self：在同一个窗口中打开，parent:在上一级窗口中打开，top:在浏览器的整个窗口中打开）
(6) <img>
<img> 元素向网页中嵌入一幅图像。注意：<img> 标签没有结束标签。

3.文本标签

(1) <ul>…</ul>
<ul> 标签定义无序列表。
(2) <ol>…</ol>
<ol> 标签定义无序列表。
(3) <li>…</li>
<li> 标签定义列表项目。<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。
属性：type：规定使用哪种项目符号。（有序列表中：A、a、I、i、1；无序列表中：disc、square、circle;）。
(4) <form>…</form>
<form> 标签用于为用户输入创建 HTML 表单。
(5) <input>
<input> 标签用于搜集用户信息。<input> 标签没有结束标签。根据不同的 type 属性值，输入字段拥有很多种形式。
type属性值：
text：单行文本输入框
submit：显示提交按钮，当用户点击该按钮时，浏览器就会将表单的输入信息传送给服务器
reset：显示重置按钮，当用户点击该按钮时，浏览器就会清除表单中所有的输入信息而恢复到初始状态
password：密码输入框
checkbox：复选框
radio：单选按钮
image：图像按钮
file：文件选择输入框
hidden：隐藏框
(6) <textarea>…</textarea>
<textarea> 标签定义多行的文本输入控件。
(7) <select>…</select>
<select> 元素可创建单选或多选菜单。
(8) <option>
<option> 元素定义下拉列表中的一个选项（一个条目）。 <option>元素位于 select 元素内部。

4.高级文本格式化标签

(1) <b>：定义粗体文本（不推荐使用注1）。和 css 的font-weight在视觉上看一样的效果，但是<b>是因为有里面的内容重要才加粗，告诉搜索引擎<b>里面的内容很重要，可能是这个网页的关键词。被收入后，有用户搜索<b>里的内容可能会搜到你的网页，但是你只是为了好看而在 HTML 里平凡使用<b>会让搜索引擎迷惑。
(2) <big>：定义大号字（不推荐使用）。
(3) <em>：定义着重文字。
(4) <i>：定义斜体字。
(5) <small>：定义小号字。
(6) <strong>：定义加重语气。
(7) <sub>：定义下标字。
(8) <sup>：定义上标字。
(9) <ins>：定义插入字。
(10) <del>：定义删除字。
(11) <u>：定义下划线。

5.图片和多媒体标签

(1) <audio> 元素用于在 HTML 文档中表示音频内容。 <audio> 元素可以包含多个音频资源，这些音频资源可以使用 src 属性或者<source> 元素来进行描述；浏览器将会选择最合适的一个来使用。对于不支持<audio>元素的浏览器，<audio>元素也可以作为浏览器不识别的内容加入到文档中。
(2) <video> 元素用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 <video> 标签用于音频内容，但是 <audio> 元素可能在用户体验上更合适。
(3) <img> 元素向网页中嵌入一幅图像。注意：<img> 标签没有结束标签。