HTML基本标签（二）

最新推荐文章于 2023-04-02 14:32:57 发布

moonVivian

最新推荐文章于 2023-04-02 14:32:57 发布

阅读量625

点赞数

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

本文链接：https://blog.csdn.net/HanQiuyue123/article/details/81571420

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、b标签：粗体，双标签，例如<b>html</b>

2、i标签：斜体，双标签，例如<i>html</i>

3、del标签：删除线，双标签，例如<del>html</del>。注意：s和strike标签也能实现，但是已经过时了。

4、p标签：段落标签，双标签，p标签只有一个align属性

注意：不建议使用align属性，推荐使用text-align样式代替，CSS 语法：<p style="text-align:right">内容</p>

5、hr标签：水平线标签，单标签，其属性有color（水平线颜色）、noshade（设定水平线的颜色为纯色，而不是有阴影的颜色）、size（水平线高度，单位：像素）、width（水平线宽度，单位：像素或%）以及align

6、hn标签：标题标签，双标签，n的值为1~6，其中<h1></h1> 定义最大的标题；<h6></h6> 定义最小的标题;只有一个align属性其值和p标签align属性一样，但不建议使用该align属性，推荐使用text-align样式代替，其使用方法和值参见p标签。

7、img标签：图像标签，单标签，该标签有src属性（图片URL）和alt属性（图片不存在时的替代文本）两个必需的属性，还有一些其它属性

8、a标签：超链接标签，双标签

下面例子为对上述标签的练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="https://www.so.com/s">
			<b>加粗</b><br />
			<i>斜体</i><br />
			<del>文本删除</del><br />
			<b>
				<p style="text-align: center;">文本居中</p>
			</b>
			
			<!--跳转----a标签-->
			<a href="http://www.baidu.com" target="_blank">百度一下</a><br />
			
			<!--图片-->
			<img src="HBuilder.png" width="120px" height="50px" alt="picture" /><br />
			
			<!--标题-->
			<h1 align="center">标题1</h1>
			<h2 align="center">标题2</h2>
			<h3 align="center">标题3</h3>
			<h4 align="center">标题4</h4>
			<h5 align="center">标题5</h5>
			<h6 align="center">标题6</h6>
			
			<p align="center"> 兴唐IT</p>
			<hr size="30px" noshade="noshade" color="aqua" width="1200px" align="center" />
			
			<ol type="a">
				<li>111111</li>
				<li>222222</li>
				<li>333333</li>
			</ol>
			
			<ul type="circle">
				<li>11111111111111111</li>
				<li>22222222222222222</li>
				<li>33333333333333333</li>
			</ul>
			
	</body>
</html>

9、ol标签：有序列表标签，即ordered list，双标签，有type和start两个属性：type用于指定ol子标签li的编号类型，默认为数字，可以是字母、阿拉伯数字或罗马数字；start用于指定ol子标签li序号起始点，默认为1，必须为整形数字。

10、ul标签：无序列表标签，即unordered list，双标签，有type属性，该属性用于指定ul子标签li的编号类型，默认为实心圆，其值可以为disc（实心圆● ）、circle（空心圆○ ）、square（实心方块■ ）；

下例为自己编写的做作业的解答：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="https://www.so.com/s">
			<!--有序目录1-->
			<h3><b>图书分类</b></h3>
			<ol type="A">
				<li>小说</li>
				<li>文艺</li>
					<ol type="a">
						<li>文学</li>
						<li>传记</li>
						<li>艺术</li>
						<li>摄影</li>
					</ol>
				<li>励志/成功</li>
					<ol type="a">
						<li>职场</li>
						<li>成功</li>
						<li>人际</li>
						<li>心灵修养</li>
					</ol>
				<li>童书</li>
					<ol>
						<li>0-2</li>
							<ol type="i">
								<li>数字</li>
								<li>图形</li>
								<li>图画</li>
							</ol>
						<li>3-6</li>
						<li>7-10</li>
						<li>11-14</li>
					</ol>
				<li>生活</li>
				<li>人文社科</li>
				<li>经管</li>
				<li>科技</li>
				<li>教育</li>
				<li>其他</li>
			</ol>
			
			<!--分界线-->
			<hr size="10px" noshade="noshade" color="cornflowerblue" />
			
			<!--混合目录2-->
			<h3><b>图书分类</b></h3>
			<ol type="A">
				<li>小说</li>
				<li>文艺</li>
					<ul type="disc">
						<li>文学</li>
						<li>传记</li>
						<li>艺术</li>
						<li>摄影</li>
					</ul>
				<li>励志/成功</li>
					<ul type="disc">
						<li>职场</li>
						<li>成功</li>
						<li>人际</li>
						<li>心灵修养</li>
					</ul>
				<li>童书</li>
					<ul type="disc">
						<li>0-2</li>
							<ul type="square">
								<li>数字</li>
								<li>图形</li>
								<li>图画</li>
							</ul>
						<li>3-6</li>
						<li>7-10</li>
						<li>11-14</li>
					</ul>
				<li>生活</li>
				<li>人文社科</li>
				<li>经管</li>
				<li>科技</li>
				<li>教育</li>
				<li>其他</l
			</ol>
	</body>
</html>

moonVivian

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML基本标签（二）

1、b标签：粗体，双标签，例如<b>html</b>2、i标签：斜体，双标签，例如<i>html</i>3、del标签：删除线，双标签，例如<del>html</del>。注意：s和strike标签也能实现，但是已经过时了。4、p标签：段落标签，双标签，p标签只有一个align属性注意：不建议使用al...
复制链接

扫一扫