HTML - 标签

喜闻樂见

已于 2022-04-01 15:28:26 修改

阅读量506

点赞数

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

于 2022-04-01 09:51:28 首次发布

Zero

本文链接：https://blog.csdn.net/weixin_43707799/article/details/123888723

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章出处 W3School

颜色名列表

标题

范围1-6（超过6，标签无效）
<h数字>内容</h数字>

<h1>1这是一个标题</h1>
<h2>2这是一个标题</h2>
...
<h6>6这是一个标题</h6>

显示：

1这是一个标题

2这是一个标题

6这是一个标题

7这是一个标题
100这是一个标题

段落

<p>内容</p>

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

显示：

这是一个段落

链接

<a href="链接">显示名称</a>

<a href="http://www.baidu.com">百度</a>

显示：
百度

图像

<img src="图片地址" width="显示图片宽度(px)" height="显示图片高度(px)"/>

<img src="xxx.jpg" width="100" height="200"/>

原图：
111
显示：

水平线

<hr/>

显示：

注释

<!-- 这是注释 -->

显示：

折行

<p>
	第一段。
	<br/>第二段。
	<br/>第三段。
</p>

显示：

第一段。
第二段。
第三段。

样式

<!-- 
	font-family：字体系列
	color：字体颜色
	font-size：字体大小
	text-align：对齐方式
	background-color：背景颜色
-->
<p style="font-family:arial;color:red;font-size:20px;text-align:center;background-color:red">
	内容
</p>

缩写

<!-- 
	光标移到缩写内容，会显示出 title中的内容
-->
<acronym title="1这里是详细内容！">1缩写内容。</acronym>
<dfn title="2这里是详细内容！">2缩写内容。</dfn>
<dfn><abbr title="3这里是详细内容！">3缩写内容。</abbr></dfn>

1缩写内容。
2缩写内容。
3缩写内容。

块引用

<blockquote>这是长引用。</blockquote>
这是<q>短引用</q>。

显示：

这是长引用。

这是短引用。

浏览器通常会对 blockquote 元素进行缩进处理。

文本格式化标签

<tt>1、呈现类似打字机或者等宽的文本效果。</tt>
<i>2、显示斜体文本效果。</i>
<b>3、呈现粗体文本效果。</b>
<big>4、呈现大号字体效果。</big>
<small>5、呈现小号字体效果。</small>
<del>6、呈现删除效果。</del> 
<ins>7、呈现插入字效果。</ins>
<bdo dir="rtl">8、文字从右向左输出。</bdo> <!-- rtl：从右向左输出 -->
<em>9、呈现着重文字。</em>
<strong>10、呈现加重语气。</strong>
11、呈现<sub>下标字</sub>
12、呈现<sup>上标字</sup>
<br/>
13、定义文档或文章的联系信息
<address>
	此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。<br/>
	文章出自于小明<br/>
	邮箱地址：213123123@xxx.com<br/>
	地址：xxxxxx
</address>
14、用于<cite>著作</cite>标题。

显示：
1、呈现类似打字机或者等宽的文本效果。
2、显示斜体文本效果。
3、呈现粗体文本效果。
4、呈现大号字体效果。
5、呈现小号字体效果。
~~6、呈现删除效果。~~
7、呈现插入字效果。
8、文字从右向左输出。
9、呈现着重文字
10、呈现加重语气。
11、呈现_下标字
12、呈现^上标字

13、定义文档或文章的联系信息

此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。
文章出自于小明
邮箱地址：213123123@xxx.com
地址：xxxxxx

14、用于著作标题。

列表

<!-- 
无序列表
<ul type="disc"></ul>
	disc：实心圆
	circle：空心圆
	square：实心体
 -->
<ul>
	<li>A</li>
	<li>B</li>
</ul>


<!-- 
有序列表
<ol type="A"></ol>
	A：大写字母列表
	a：小写字母列表
	I：大写罗马字母列表 I II III IV
	i：小写罗马字母列表 i ii iii iv
 -->
<ol>
	<li>A</li>
	<li>B</li>
</ol>


<!-- 定义列表 -->
<dl>
	<dt>Coffee</dt>
		<dd>Black hot drink</dd>
	<dt>Milk</dt>
		<dd>White cold drink</dd>
</dl>

显示：

Coffee

Black hot drink

Milk

White cold drink

嵌套列表

<ul>
	<li>A</li>
	<li>
		B
		<ul>
			<li>1</li>
			<li>2</li>
		</ul>
	</li>
	<li>C</li>
</ul>

显示：

A
B
- 1
- 2
C

分组标签 < div >

<!-- 普通形式 -->
<p>段落一</p>
<p>段落二</p>

<!-- 分组形式,里面的内容都会有颜色 -->
<div style="color:#0F0">
	<p>段落一</p>
	<p>段落二</p>
</div>

表格

<!--
	tr：行  td：列
-->
<table border="1">
	<tr>
		<td>第一行 第一列</td>
		<td>第一行 第二列</td>
	</tr>
	<tr>
		<td>第二行 第一列</td>
		<td>第二行 第二列</td>
	</tr>
</table>

显示：

第一行第一列	第一行第二列
第二行第一列	第二行第二列

表头

<table border="1">
	<th>头</th>
	<th>头头</th>
	<tr>
		<td>第一行 第一列</td>
		<td>第一行 第二列</td>
	</tr>
</table>

头	头头
第一行第一列	第一行第二列

空单元

<!-- 
	有些没有显示边框的，加个空格占位符:  &nbsp;
-->
<table border="1">
	<tr>
		<td>第一行 第一列</td>
		<td>第一行 第二列</td>
	</tr>
	<tr>
		<td></td>
		<td>&nbsp;</td>
	</tr>
</table>

第一行第一列
	第一行第二列

带标题

<caption>我的标题</caption>
<table border="6">
	<tr>
		<td>第一行 第一列</td>
		<td>第一行 第二列</td>
	</tr>
</table>

我的标题

第一行第一列

第一行第二列

跨行跨列

<!-- 跨行：colspan -->
<table border="1">
	<tr>
		<th>姓名</th>
		<th colspan="2">电话</th>
	</tr>
	<tr>
		<th>小明</th>
		<th colspan="2">13225465238</th>
	</tr>
</table>

<!-- 跨列：rowspan -->
<table border="2">
	<tr>
		<th>姓名</th>
		<th>小明</th>
	</tr>
	<tr>
		<th rowspan="2">地址</th>
		<th>xxxx</th>
	</tr>
	<tr>
		<td>嘻嘻嘻嘻</td>
	</tr>
</table>

姓名	电话
小明	13225465238

姓名	小明
地址	xxxx
地址	嘻嘻嘻嘻

带标签

<table border="3">
	<tr>
		<td>
			第一行第一列：段落
			<p>段落一</p>
			<p>段落二</p>
		</td>
		<td>
			第一行第二列：包含一个表格
			<table border="1">
				<tr>
					<td>A</td>
					<td>B</td>
				</tr>
				<tr>
					<td>C</td>
					<td>D</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td>
			第二行第一列
			<ul>
				<li>A</li>
				<li>B</li>
				<li>C</li>
			</ul>
		</td>
		<td>
			内容
		</td>
	</tr>
</table>

第一行第一列：段落

段落一

段落二

第一行第二列：包含一个表格

A	B
C	D

第二行第一列

内容

边距间隔

<!--
	cellpadding：边距
	cellspacing：间隔
-->
<table border="1" cellpadding="10" cellspacing="20">
	<tr>
		<td>A</td>
		<td>B</td>
	</tr>
</table>

表格背景

<table background="red">
	<tr>
		<td>A</td>
		<td>B</td>
	</tr>
</table>

<table background="xxx.jpg">
	<tr>
		<td>A</td>
		<td>B</td>
	</tr>
</table>

单元背景

<table>
	<tr>
		<td bgcolor="red">A</td>
		<td background="xxx.png">B</td>
	</tr>
</table>

单元排列

<table width="400" border="1">
 <tr>
  <th align="left">消费项目....</th>
  <th align="right">一月</th>
  <th align="right">二月</th>
 </tr>
 <tr>
  <td align="left">衣服</td>
  <td align="right">$241.10</td>
  <td align="right">$50.20</td>
 </tr>
 <tr>
  <td align="left">化妆品</td>
  <td align="right">$30.00</td>
  <td align="right">$44.45</td>
 </tr>
 <tr>
  <td align="left">食物</td>
  <td align="right">$730.40</td>
  <td align="right">$650.00</td>
 </tr>
 <tr>
  <th>总计</th>
  <th>$1001.50</th>
  <th>$744.65</th>
 </tr>
</table>

消费项目....	一月	二月
衣服	$241.10	$50.20
化妆品	$30.00	$44.45
食物	$730.40	$650.00
总计	$1001.50	$744.65

表格边框（frame）

<p>Table with frame="box":</p>
<table frame="box">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="above":</p>
<table frame="above">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="below":</p>
<table frame="below">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="hsides":</p>
<table frame="hsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="vsides":</p>
<table frame="vsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>