HTML 标签和属性

猪八戒1.0

已于 2023-03-27 21:32:24 修改

阅读量927

点赞数

分类专栏： HTML 文章标签： html 前端 servlet

于 2023-03-27 21:31:53 首次发布

本文链接：https://blog.csdn.net/qq_58631644/article/details/129779471

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一些标签

单双标签

双标签。双标签指标签是成对出现的，也就是有一个开始标签和一个结束标签，开始标签用 <标签名> 表示，结束标签用 </标签名> 表示，只有一对标签一起使用才能表示一个具体的含义。例如 <html></html> 表示一个 HTML 文档。

单标签。单标签指标签不是成对出现的，也就是只用一个标签就能表示一个具体的含义，例如   表示换行、<hr> 表示创建一条水平线。为了符合 W3C 规范，单标签必须在标签后面加一个斜杠，即  、<hr/>，所以单标签通用格式为 <标签名/>。

段落标签

换行标签

水平横线

<hr />

标题标签

<h1 align="center"></h1>

h1-h6

文本样式标签

属性：face字体 size大小 color颜色等

文本格式化标签

粗体 或 

文字下画线 <ins></ins> 或 

文字斜体 或 

文字删除线 <del></del> 或 <s></s>

图像标签

<img src="图像路径"/>

alt 图像不能显示时显示文本

title 鼠标悬停图片显示文本

HTML注释

特殊符号

HTML 原代码	显示结果	描述
<	<	小于号或显示标记
>	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	“	引号
®	®	已注册
©	©	版权
™	™	商标
&ensp;		半个空白位
&emsp;		一个空白位
		不断行的空白

HTML基本结构

<html>
    包含<head>、<body>等其他标签
</html>

<head>
  头部标签元素
</head>

<body>
  主体内容
</body>

常用的头部标签：

标签	描述
`<title>`	定义页面标题内容（唯一必须的头部标签）。
`<base>`	当前文档的基准地址，其他相对地址都建立在此基准地址之上。
`<meta>`	有关文档本身的元信息，例如文档的作者，用于查询的关键词，关于文档的描述等。
`<style>`	定义 CSS 层叠样式表的内容。
`<link>`	定义外部文件的链接，最常见的用途是链接外部样式表。
`<script>`	定义页面中程序脚本的内容。

设定关键字、描述和字符集

Keywords 表示关键字定义，content 属性值表示关键字内容，关键字之间要用逗号分隔。

<meta name="Keywords" content="value" />

Description 表示描述定义，content 属性值表示描述内容

<meta name="Description" content="value" />

在中国大陆地区，常用的编码是 GB 码，表示简体中文，字符集应设置为 gb2312 ；中国台湾地区常用的编码是 BIG5 码，表示繁体中文；欧洲地区常用 ISO8859-1 表示英文……

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

HTML5 字符集设置简化写法

<meta charset="UTF-8" />

HTML 块级标签

大多数 HTML 元素被定义为块级元素或内联元素，“块级元素”译为 block level element，“内联元素”译为 inline element。两种元素都有各自的特点。其中块级标签的特点为：

总是以新行开始；

高度、行高、外边距和内边距都可以控制；

宽度缺省是它所在容器的 100%，除非设定一个宽度；

可以容纳行内元素和其他块元素。

<div>其他标签或文档</div>

<p>段落内容</p>

对于段落标签，有一个可选的属性 align，用于表示段落相对浏览器窗口在水平位置上的对齐方式。align 属性有四个可取值，每个可取值的含义如表所示：

值	描述
left	段落左对齐
right	段落右对齐
center	段落居中对齐
justify	对行进行伸展，每行都可以有相等的长度

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>学习前端哪里好？</p>
    <p style="width: 200px; background-color: darkgray" align="center">
      蓝桥软件学院
    </p>
  </body>
</html>

有序列表

<ol>
  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
  …
</ol>

对于 <ol> 标签有两个可选的属性，下表列出了每个属性、可取值和简单描述。

属性	可取值	描述
type	A、a、I、i、1	规定列表的类型，默认为数字
start	start_number	规定列表中的起始点，默认为 1

<ol type="A" start="3">
  <li>华为</li>
  <li>小米</li>
  <li>苹果</li>
  <li>oppo</li>
  <li>三星</li>
</ol>

无序列表

在 HTML 文档中，所谓无序列表，是指以实心圆 ●（默认）、空心圆 ○、实心方块 ■ 开头的，没有顺序的列表项目。

在无序列表中，各个列表项之间没有顺序之分。无序列表由 <ul> 和 </ul> 标签对实现，每个列表项也是由 <li> 标签定义的。

无序列表与有序列表非常类似，不同点在于因为无序列表是无序的，所以不存在 start 这个规定列表起始点的属性。

无序列表的 type 属性可以设置为 disc、circle、square，其中 disc 代表实心圆 ●（默认），circle 代表空心圆 ○、square 代表实心方块 ■。

<ul type="disc">
  <li>华为</li>
  <li>小米</li>
  <li>苹果</li>
  <li>oppo</li>
  <li>三星</li>
</ul>

定义列表

<dl>
  <dt>列表项</dt>
  <dd>列表描述</dd>
</dl>

HTML 行内标签

超链接

<a href="连接地址或文本">文本或者图片</a>

<a> 标签的 target 属性有一个有 4 个保留的目标名称用作特殊的文档重定向操作：

值	描述
_blank	浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self	浏览器在当前窗口载入目标文档。
_parent	浏览器在父窗口载入目标文档。如果这个引用是在窗口或者在顶级框架中，那么它与 _self 等效。
_top	浏览器在最顶端的框架窗体载入目标文档。

文档书签

当一个页面内容特别多时，可以通过给页面建立书签的方式，对同一页面里的内容进行链接。这样用户在浏览网页时，可以通过书签进行页面内的内容跳转，提高浏览者的用户体验效果。

<a name="书签名称">文字</a>

定义了书签后，链接到该书签的超链接的基本语法为：

<a href="#书签名称">链接点</a>

下面通过一个案例，演示使用超链接跳转至本文档的另一个位置，即当用户单击“查看本文档第三部分”这个内部链接时，即可链接到本页面的第三部分位置

<body>
  <p><a href="#d3">查看本文档第三部分</a></p>
  <h2>第一部分</h2>
  <p>这是第一部分的内容！</p>
  <h2>第二部分</h2>
  <p>这是第二部分的内容！</p>
  <h2><a name="d3">第三部分</a></h2>
  <p>这是第三部分的内容</p>
  <h2>第四部分</h2>
  <p>这是第四部分的内容！</p>
  <h2>第五部分</h2>
  <p>这是第五部分的内容！</p>
  <h2>第六部分</h2>
  <p>这是第六部分的内容！</p>
  <h2>第七部分</h2>
  <p>这是第七部分的内容！</p>
  <h2>第八部分</h2>
  <p>这是第八部分的内容！</p>
  <h2>第九部分</h2>
  <p>这是第九部分的内容！</p>
  <h2>第十部分</h2>
  <p>这是第十部分的内容！</p>
</body>

标签

标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 应用样式，那么 元素中的文本与其他文本不会任何视觉上的差异。所以可以这样认为： 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

<span>选中的文本</span>

短语标签

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