HTML基础—7标签样式初始化

最新推荐文章于 2024-01-27 20:40:00 发布

jiaojsun

最新推荐文章于 2024-01-27 20:40:00 发布

阅读量1.9k

点赞数 1

分类专栏： HTML基础

本文链接：https://blog.csdn.net/jiaojsun/article/details/93338901

版权

HTML基础专栏收录该内容

7 篇文章 5 订阅

订阅专栏

1.标签样式初始化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			css reset 原则：
			但凡是浏览默认的样式，都不要使用。
			因为每个浏览器下标签的默认样式可能会出现不一致的情况。
			
			人为的将所有样式全部统一（清除），再根据实际情况（设计稿）进行设置。
			
			哪些样式是需要重置的？？？
				与盒模型相关的样式
					border
					margin
					padding
				标签特有的样式
					ul>li
					ol>li
					
			书写原则：
				用到什么标签就清除所用标签的默认样式
				建议不要直接将所有标签全部加上。
				不要将所有标签全部统一设置一致的reset，需根据标签默认样式特征来分类设置。
		-->
		<style>
			body, h1, h2, h3, h4, h5, h6, p, dl, dd{
				margin: 0;
			}
			ul, ol{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			img{
				border: none;
				vertical-align: top;
			}
			a{
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<a href="">超链接</a>
		<a href="">
			<img src="img/1.png" alt="" />
		</a>
		<h1>标题 - logo</h1>
		<h2>标题</h2>
		<h3>标题</h3>
		<h4>标题</h4>
		<h5>标题</h5>
		<h6>标题</h6>
		
		<p>段落</p>
		
		<strong>强调</strong>
		<em>强调</em>
		
		<ul>
			<li>ul - 无序列表</li>
			<li>列表项</li>
			<li>ul的子集（下一级元素）只能是li</li>
		</ul>
		
		<ol>
			<li>ol - 有序列表</li>
			<li>列表项</li>
			<li>ol的子集（下一级元素）只能是li</li>
		</ol>
		
		<dl>
			<dt>dl-自定义列表；dt-自定义列表title</dt>
			<dd>dd-自定义列表的列表项（信息）</dd>
		</dl>
		
		<mark>标记</mark>
	</body>
</html>

jiaojsun

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML基础—7标签样式初始化

1.标签样式初始化<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <!-- css reset 原则：但凡是浏览默认的样式，都不要使用。因为每个浏览器下标签的默认样式可能会出现不一...
复制链接

扫一扫

专栏目录