HTML 文字标签、段落标签、列表标签、链接标签和表格

最新推荐文章于 2023-06-19 22:59:14 发布

Xbory

最新推荐文章于 2023-06-19 22:59:14 发布

阅读量970

点赞数 5

文章标签： html html5 前端

本文链接：https://blog.csdn.net/qq_58642780/article/details/121961981

版权

文章目录

HTML

HTML

<!--
<!DOCTYPE html> 文档的声明
<html> 标记文档的开始和结束
	<head> 文档的头部
		<meta charset="utf-8" /> 源信息标记
		<title>测试</title> 标题
	</head>
	<body>  主体内容
    </body>
</html>   
-->

一.文字标签

特殊符号	符号码	特殊符号	符号码
回车	&quot	空格	&nbsp
&	&amp	"
<	&lt	«	&laquo
>	&gt	»	&raquo
©	&copy	®	&reg

<!--<h1>~<h6>显示标题文字，字号逐渐减小-->
<h1>文字内容</h1>  
<u>下划线标签</u>
<sub>下标标签</sub>
<sup>上标标签</sup>
<em>斜体</em>
<stong>加粗</stong>
<strike>删除线标签</strike>
<front size="3" color="red" face="字体">改变文字的字体、字号以及颜色</front>

二.段落标签

<p>
    修饰段落，自动换行，《p》可也单独使用，也可以成对使用
</p>
<nobr>
    修饰段落，自动换行在HTML5中，使用了此标签后，当文字内容过长时，浏览器下方会出现滚动条。
</nobr>
<p align="left">
    align的属性值有left,center,right,align可用于多个标签，不是只有《p》
</p>

三.列表标签

1.有序列表

<ol type="A" start ="1">
    <li>小猫</li>
    <li>小狗</li>
    <li>小兔子</li>
    <li>小马</li>
</ol>

运行结果：
在这里插入图片描述
“start”和“type”为有序列表的属性值。
start的属性值为数值。
type的属性值有1，a，A，i，I。
含义分别为：阿拉伯数字，小写英文字母，大写英文字母，小写罗马字母和大写罗马字母。

2.无序列表

<ul type="circle">
    <li>列表项1</li>
    <li>列表项2</li>
</ul>

运行结果：

type”为无序列表的属性
type的属性值有circle，disc ，quare含义分别为：空心圆，实心圆和实心正方形。

3.插入列表

<dl>
    <dt>需要解释的名词</dt>
    <dd>对名词的解释说明</dd>
</dl>

运行结果：
在这里插入图片描述

四.链接标签

1.文本链接

<a href=""> </a>

双引号里面写链接地址。
在写链接地址时，既可以使用绝对地址，也可以使用相对地址。为方便起见，通常使用相对地址。

2.书签链接

步骤：
创建书签：

<a name ="link"> </a>

链接地址：

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

作用：返回到某一位置。
例如：回到顶部，回到底部。
注意：
建立书签链接时，两个步骤没有顺序之分。即在代码中，既可以先建立书签代码在上，链接地址代码在下，也可以链接地址代码在上，建立书签代码在下。

五.表格

1.绘制表格

border属性设置表格的边框。默认的情况下，表格的边框为0。
height设置表格的高度。
width设置表格的宽度。
align设置表格的对齐方式。左对齐left、右对齐right、居中center。
bgcolor定义表格的背景颜色。
background可以为表格的背景加入一张背景图片。
cellspacing是单元格内容与单元格外框之间的距离
cellpadding是单元格与单元格之间的距离

<table border="5" height="200" width="400" align="center" bgcolor="yellow" background="img/13.jpg">   </table>

运行结果：
在这里插入图片描述

2.行标签属性

某一行高度和其他行高度不相等时，需要使用height属性。
通过设置bordercolor的属性单独为边框设置颜色。
通过设置bgcolor的属性单独为行设置背景颜色。
通过设定行属性align的值，改变本行的水平对齐方式。
通过设定行属性valign的值，来改变本行的垂直对齐方式：居上(top)、居中(middle)和居下(bottom)。

<tr height="30" bordercolor="red" bgcolor="yellow" align="right" valign="top" ></tr>

3.单元格标签

height、width、align、valign、bgcolor、background与之前的相同。
colspan水平方向上是跨过多个列，用来合并单元格。
rowspan垂直方向跨过多少行。

<td height="30" bordercolor="red" bgcolor="yellow" align="right" valign="top" colspac="3" rowspan="2" ></td>

4.表头标签

在这里插入图片描述

<th></th>

5.表格的结构标签

1.表首

表首，用于定义表格最上端表首的样式，可以设置背景颜色、文本对齐方式、文字对齐方式等。

<thead> </thead>

2.表主体

表主体标签用于定义表格主体的样式。

<tbody> </tbody>

3.表尾

使用标签用于定义表尾的样式。

<tfoot> </tfoot>

实例：

<table border="3" height="200" width="400" cellpadding="10" align="center">
			<caption>学生表</caption>
			<!-- 表首 -->
			<thead bgcolor="red" align="left" valign="center"><!-- align:文字水平居左，valign:文字垂直居中 -->
				<tr>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
					<th bgcolor="aqua">班号</th>
				</tr>
			</thead>
			<!-- 表主体 -->
			<tbody bgcolor="yellow" align="left" valign="center">
				<tr>
					<td>张三</td>
					<td>男</td>
					<td rowspan="2">18</td><!-- 数值方向两个单元格 -->
					<td>1班</td>
				</tr>
				<tr>
					<td>李四</td>
					<td rowspan="2">女</td><!-- 数值方向两个单元格 -->
					<td>2班</td>
				</tr>
				<tr>
					<td>王五</td>
					<td>17</td>
					<td>3班</td>
				</tr>
				<tr>
					<td colspan="4">赵六</td>
				</tr>
			</tbody>
			<!-- 表尾 -->
			<tfoot bgcolor="pink" align="center">
				<<tr height="70">
					<td colspan="4">这是表尾哦！</td>
				</tr>
			</tfoot>
		</table>

运行结果：
在这里插入图片描述

Xbory

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
HTML 文字标签、段落标签、列表标签、链接标签和表格

文章目录HTML一.文字标签二.段落标签三.列表标签1.有序列表2.无序列表3.插入列表四.链接标签1.文本链接2.书签链接五.表格1.绘制表格2.行标签属性3.单元格标签4.表头标签5.表格的结构标签1.表首2.表主体3.表尾HTML<!--<!DOCTYPE html> 文档的声明<html> 标记文档的开始和结束 <head> 文档的头部 <meta charset="utf-8" /> 源信息标记 <title>测试
复制链接

扫一扫