HTML中的常用标签：

谁借莪１个温暖的怀抱￠ 2024-03-26 20:32 40阅读 0赞

标题标签：<h1>~<h6>共6级，每一级字体的大小和粗细都会改变。

段落标签：<p></p>

> 注：每个段落自动换行，忽略内容中连续的空格，空格字符用&nbsp；(特殊字符，全小写）

段内换行标签：<br /> (单标签)。

预留格式标签：<pre> </pre>

文本中的空格和换行符会被保留。使用pre标签可以保留原有的空格和换行，但是不能突出显示段内的某些文字，比如加粗不同字号等，span标签可以解决这个问题

行内组合标签：<span> </span>

<span>标签实现行内块的定义，<span>标签属于行内元素，用来选择特定的文本，以便赋予特殊的样式；当句子或段落中某一部分需要分组时，就可以使用<span>标签。语法：

内容部分

</span>

其中：

Style属性用于设置span元素的行内样式；

Class属性用于CSS的类选择器；

align属性设置span元素内容的对其方式，取值范围是lift，right，center(中)或justify。

水平线标签：<hr /> （单标签）

注释： （快捷：选中后Ctrl+/），其不能用“//”来进行单行注释。

超链接标签：<a href=" URL" name=” ” target =“目标窗口的弹出方式”>文字或图片</a>。

其中：href表示目标链接地址，name表示锚点名称；target: 用于指定链接面的打开方式，其中\_self为默认值，\_blank为在新窗口中打开方式，在其中也可以有title属性，在鼠标指到该链接时显示的提示。

虚拟链接：<a href="\#">文字或图片</a>

锚点链接：当我们点击链接，可以快速定位到页面中的某个位置

在链接文本的href属性中,设置属性值为 \#名字 的形式，如<a href= "\#two”>第2集</a>

找个目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="two">第2集介绍</h3>或者在目标页面中，使用<a>标签来创建锚点标记。创建锚点时，<a>标签必须附带name或id属性。用于指定锚点名称。

例：目标锚点：<a id=”myanchor>这里是我创建的锚点位置</a>

在页面中，创建超链接链接到锚点。创建超链接时，<a>标签的href属性由“\#”+“目标锚点名称”两部分构成。

链接到锚点：

<a href=”\#myanchor”>链接到锚点位置</a>

> 在跨页面的锚点链接中，href属性由“目标页面的绝对路径（或相对路径）”+“\#”+“目标锚点名称”三部分构成。

<a href=”路径\#锚点名称”>链接到目标页面的锚点位置</a>;

插入图像：<img src=" URL" alt="图片信息">

其中URL表示图片的地址，其可以是相对路径也可以是绝对路径，而alt则是表示图片加载不出来时所显示的信息。

图像标签的其他属性:

属性 属性值 说明

src 图片路经 必须属性

alt 文本 替换文本，图像不能显示的文字

title 文本 提示文本，鼠标放到图像上，显示的文字

width 像素 设置图像的宽度

height 像素 设置图像的高度

border 像素 设置图像的边框粗细

文本字体样式：<font>…</font>

元素中的内容斜体：<i>…</i>

网页背景颜色：bgcolor;

对齐方式：align；

元素中的内容被添加一条删除线：<s>…</s>

元素中的内容添加一条下画线：<u>…</u>

元素中的内容以上标的形式显示：<sup>…</sup>

元素中的内容以下标的形式显示：<sub>…</sub>

元素中的内容在显示时比周围的文本大一个字体尺寸：<big>…</big>

元素中的内容在显示时比周围的文本小一个字体尺寸：<small>…</small>

<font>标签设置字体样式：

<font face=”隶书” size=”10” color=”blue”>字体，大小和颜色</font>

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			span{
    				color: blue;
    				font-weight: bold;
    			}
    		</style>
    	</head>
    	<body bgcolor="white">
    		
    		<h1>一级标签：文本内容。h1</h1>
    		<h2>二级标签：文本内容。h2</h2>
    		<h3>三级标签：文本内容。h3</h3>
    		<h4>四级标签：文本内容。h4</h4>
    		<h5>五级标签：文本内容。h5</h5>
    		<h6>六级标签：文本内容。h6</h6>
    		
    		<p>记录自己的学习过程</p>
    		<p>段落内忽略文字的  连续空格
    			，文字不会发生改变。
    		</p> 
    		
    		<p>记录   学习的过程。</p>
    		
    		<p>在文字的段内换行。<br />注意书写规范。</p>
    		
    		<pre>保留文本中的格式，如空 格 之 类如：
    		for(int i=1;i<5;i++)
    			sum+=i;
    		</pre>
    		
    		<p>最近的<span>学习报告</span>指出了...</p>
    		
    		<p>正文的文本内容<hr /></p>
    		
    		<a href="http://www.baidu.com">百度</a><br />
    		<a href="#">虚拟链接</a><br />
    		
    		<img src="#" alt="图片信息"><br />
    		<img src="http://www.baidu.com" alt="图片信息"><br />  
    		<img src="picture/sev.jpg" alt="图片信息"><br />  
    		
    		</body>
    </html>

结果：

![e77d14e3dc0d49b295b7555720092e66.png][]

区域标签：<div> </div> ;

<div>标签用来表达一个逻辑区块，属于块级元素。通过<div>标签将网页中的某一特定区域用边框围起来，并赋予指定的样式。

语法：

内容部分

……

</div>

其中：

Style属性用于设置div元素的行内样式；

Class属性用于CSS的类选择器；

align属性设置div元素内容的对其方式，取值范围是lift，right，center(中)或justify。

![c6d10db088b64568bd6a6ba6952573bf.png][]

列表元素：

1.  有序列表：语法形式：

<ol>

……

</ol>

<li>标签用于展示某一列表项，其内容包含在<li>..</li>之间。

通过type属性可以指定有序列表编号的样式：1代表阿拉伯数字（1,2…），a代表小写字母（a，b，…），A代表大写字母（A，B…），i代表小写的罗马数字（i，ii，iii…）,I代表大写的罗马数字（I，II，III..）。

通过start属性指定列表序号的开始位置，例如start=“3”表示从3开始编号。

![9759b89cdb3a4730b6cc46133e1a05ee.png][]

无序列表：

有序列表：语法形式：

……

</ul>

Type属性图像前缀可以是circle（圆），disc（点），square(方块),nono等类型。

![fcada2260c5a4677b95bacd2089c5a6c.png][]

定义列表：将项目与描述成对显示，用<dl>标签来实现定义列表，语法形式：

<dl>

<!- - 第一项结开始- ->

<!- - 第一项结束- ->

<!- - 第二项结开始- ->

<!- - 第二项结束- ->

……

</dl>

一个定义列表中可以定义1~n个子项；每一个子项都有两部分构成---标题(dt)和描述(dd),且成对出现。

<dt>…</dt>标签用于存放标题内容。

<dd>…</dd>标签用于存放描述内容。

![2ea15ee59548426ea9921b1b61593266.png][]

[e77d14e3dc0d49b295b7555720092e66.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/dd6834db5dc748b086c37b550394fc86.png
[c6d10db088b64568bd6a6ba6952573bf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/a2564b0c25914b8e8fc2de24204bef0b.png
[9759b89cdb3a4730b6cc46133e1a05ee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/23f7a6bb8a8c459f9207d6a566389ca8.png
[fcada2260c5a4677b95bacd2089c5a6c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/dd8bed4e27924d139c7f7c52855eba9d.png
[2ea15ee59548426ea9921b1b61593266.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/ee294f55220a4cf0a0ca3e19024ec34c.png