HTML 之 HTML 常用标签

最新推荐文章于 2023-05-07 23:36:37 发布

一個頭像用四年

最新推荐文章于 2023-05-07 23:36:37 发布

阅读量177

点赞数

本文链接：https://blog.csdn.net/huzongnan/article/details/79404698

版权

常用标签

标题标签

标题标签: h1 ~ h6 双标签 块级标签
h1 最好只出现一次,用于网页的 logo 部分
h2常用于二级标题,也就是子模块标题
h4~h6不常用

display: block(显示为块级) | inline(显示为行级) | none(不显示)
font-weight: bold(设置为粗体) | normal(设置为正常字体)

<h1>Test</h1>
<h2>Test</h2>
<h3>Test</h3>
<h4>Test</h4>
<h5>Test</h5>
<h6>Test</h6>

段落标签

段落 p 双标签 块级
p 标签不可以嵌套 div, 最好不要嵌套其他的块级标签

首行缩进 text-indent: 2em;

<p>测试</p>

列表标签

有序列表: 组合标签 双标签 块级 ol li
无序列表: 组合标签 双标签 块级 ul li
自定义列表: 字典列表 双标签 块级 dl dt dd
列表修饰: list-style-type: 符号... | none;

<ol>
	<li>测试</li>
</ol>

<ul>
	<li>测试</li>
</ul>
<dl>
	<dt>测试</dt>
	<dd>测试</dd>
</dl>

图片标签

图片标签 单标签 比较特殊 可以设置尺寸 有行级标签的特点
src="" 指定引入的图片的地址
alt="" 图片内容的描述 必须的 描述的准确

<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3198762613,766144830&fm=27&gp=0.jpg" alt="哆啦A梦">

超链接标签

超链接 a 双标签 行级
href="" 指定标签跳转的地址
target="_blank | _self(默认)" 指定链接跳转的方式
a 标签的四种状态
默认状态: link
访问过的状态: visited
悬浮的状态: hover
点击按住没有松开的状态: active

文本在区域内垂直居中为行高 line-height
line-height: 设置成该区域的高度
圆角border-radius: ;
border-radius: 10px 0 50px 0/20px 10px 0 0;

爱恨法则 love & hate 
l link
v visited
h hover
a active

模仿今日头条标题栏
<head>
	<meta charset="UTF-8">
	<title>超链接标签</title>
	<style type="text/css">
		a{
			text-align: center;
		}
		a:link{
			color: #444;
			/*下划线*/
			text-decoration: none;
			
		}
		a:visited{
			color: pink;
		}
		a:hover{
			display: block;
			background: #ed4040;
			line-height: 40px;
			color: white;
			width: 110px;
			height: 40px;
			border-radius: 4px;
		}
		a:hover .span1{
			color: yellow;
		}
		a:hover .span2{
			color: green;
		}
		a:active{
			color: #000000;
			font-size: 20px;
		}
		ol{
			margin: 0;
			padding: 0;
			font-size: 16px;
			list-style-type: none;
			text-align: center;
		}
		li{
			width: 110px;
			height: 40px;
			margin-bottom: 2px;
			line-height: 40px;
		}
	</style>
</head>
<body>
	<ol>
		<li>
			<a href="1">推荐</a>
		</li>
		<li>
			<a href="2">热点</a>
		</li>
		<li>
			<a href="3">阳光宽屏</a>
		</li>
		<li>
			<a href="4">图片</a>
		</li>
		<li>
			<a href="5">科技</a>
		</li>
		<li>
			<a href="6">娱乐</a>
		</li>
		<li>
			<a href="7">游戏</a>
		</li>
		<li>
			<a href="8">体育</a>
		</li>
		<li>
			<a href="9">汽车</a>
		</li>
		<li>
			<a href="1">财经</a>
		</li>
		<li>
			<a href="2">搞笑</a>
		</li>
		<li>
			<a href="3">更多</a>
		</li>
	</ol>
</body>

今日头条标题
http://blog.csdn.net/huzongnan/article/list