01-常用标签

说酒话的猫

已于 2022-02-04 18:24:55 修改

阅读量670

点赞数

分类专栏： HTML 文章标签： html

于 2022-02-04 18:24:02 首次发布

本文链接：https://blog.csdn.net/W_000/article/details/122784589

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.常用标签一

（1）标题标签

标题（Heading）是通过<h1>~<h6>标签进行定义的。<h1>定义最大的标题，<h6>定义最小的标题，h1~h6大小依次递减。将h1用作主标题（最重要的），其后是h2（次重要的），再其次是h3，以此类推。

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

注意：

尽量减少使用h1标签；

浏览器会自动地在标题的前后添加空行（<h~>是块级元素）；

搜索引擎使用标题为您的网页的结构和内容编制索引；

用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的；

确保将HTML标题标签只用于标题，不要仅仅为了生成粗体或大号的文本而使用标题。

（2）段落标签

HTML可以将文档分割为若干段落。

段落是通过<p>标签定义的：

<p>这是一个段落 </p>
<p>这是另一个段落</p>

注意：

浏览器会自动地在段落的前后添加空行。（</p>是块级元素）

（3）换行标签

希望在不产生一个新段落的情况下进行换行（新行），使用 <br> 标签：

<p>这个<br>段落<br>演示了分行的效果</p>

（4）水平线标签

<hr>标签在 HTML 页面中创建水平线。

hr元素可用于分隔内容。

<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>

（5）注释

将注释插入HTML代码中，可以提高其可读性，使代码更易理解。浏览器会忽略注释，也不会显示它们。

<!-- 这是一个注释 -->

（6）列表

无序列表：

一个项目的列表，列表项目使用粗体圆点（典型的小黑圆圈）进行标记。

有序列表：

也是一列项目，列表项目使用数字进行标记。

无序列表使用<ul>标签，有序列表使用<ol>标签，每个列表项始于<li>标签。列表项使用数字来标记：

<ul type="square">
    <li>周杰伦</li>
	<li>林俊杰</li>
	<li>陈奕迅</li>
</ul>

<ol type="A">
	<li>周杰伦</li>
	<li>林俊杰</li>
	<li>陈奕迅</li>
</ol>

列表标签：

（6）div

<div>元素可用于组合其他 HTML 元素的容器，<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

用途：

与CSS一同使用，<div>元素可用于对大的内容块设置样式属性；

文档布局。

（7）span

<span>元素是内联元素，可用作文本的容器，<span> 元素没有特定的含义。

用途：

与CSS一同使用时，<span>元素可用于为部分文本设置样式属性。

（8）格式化标签

2.常用标签二

（1）超链接

使用标签<a>来设置超文本链接。超链接标签用于链接到一个新的URL。

<a href="url">链接文本</a>

常用属性：
        href：需要跳转的地址（必须属性）
         target：窗口打开的方式
                _self 当前窗口（默认）
                _blank 在空白窗口

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

一个未访问过的链接显示为蓝色字体并带有下划线。

访问过的链接显示为紫色并带有下划线。

点击链接时，链接显示为红色并带有下划线。

作为锚点：
a标签的name属性值

<a name="top"></a>

其他的id属性值

<div id="top"></div>

锚点的使用

<a href="#top"></a>

（2）图片

使用<img>标签设置图像。<img>是空标签，即只包含属性，没有闭合标签。

在页面上显示图像，需要使用源属性src（source）。源属性的值是图像的 URL 地址。

<img src="url" alt="some_text">

常用属性：
               src：需要引入的图片的地址（必须属性）
               alt：当图片破损或不存在时，显示文本的内容
               title：当鼠标悬停在图片上时显示的文本
               width：图片的宽度
               height：图片的高度
               border：图片的边框

<img src=" img/timg.jpg" width="500" height="400" border="2" title="新西兰” alt="这是一张风景图”/>

（3）表格

表格由<table>标签来定义。

        tr：行
        td：标准单元格，即指表格数据（table data），即数据单元格的内容，可以包含文本、图片、列表、段落、表单、水平线、表格等等。
        th：表头（字体居中、加粗效果）

表格（table）属性：
        width：表格的宽度
        border：边框
        align：对齐方式

行（tr）属性：
align：行内容的对齐方式

style="border-collapse: collapse 合并边框

<table width="400px" align="center" border="1" style="border-collapse: collapse;">
			<tr bgcolor="aliceblue">
				<th>编号</th>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr align="center" bgcolor="aqua">
				<td>1</td>
				<td>张三</td>
				<td>18</td>
			</tr>
			<tr align="center" bgcolor="aquamarine">
				<td>2</td>
				<td>李四</td>
				<td>19</td>
			</tr>
			<tr align="center" bgcolor="azure">
				<td>3</td>
				<td>王五</td>
				<td>20</td>
			</tr>
		</table>