这篇博客主要介绍了前端开发中HTML和CSS的常用标签，包括它们的使用场景和注意事项，是前端初学者进阶的重要参考资料。通过阅读，读者可以对前端页面构建有更深入的理解。
上一篇：前端初识(三把利器：HTML标签、CSS、JS(javascript)) 点击跳转
目录篇：前端(html,css,js)目录篇 点击跳转
下一篇：前端三把利器之HTML总结 点击跳转
<!DOCTYPE html><!--该html格式默认的类型是!DOCTYPE（公共统一认可的html规范类型）-->
<html lang="en"><!-- html标签的开始 （在html文件中只能有一个html标签）-->
<head> <!--head标签的开始 （一个hmtl标签内只允许一个head标签）-->
<!--head标签内部详解-->
<meta charset="UTF-8">
<!--meta：自闭合标签，charset：指定字符集 -->
<meta http-equiv="Refresh" content="3">
<!--http-equiv="Refresh":刷新 content="3":3秒 每3秒自动刷新一次页面-->
<!--<meta http-equiv="Refresh" content="3;Url=http://www.baidu.com">-->
<!--3秒后自动跳转到www.baidu.com,这种跳转基本不用没倒计时，后面用JS实现-->
<meta name="keywords" content="汽车,汽车之家,汽车网,汽车报价,汽车图片,新闻,评测,社区,俱乐部"/>
<meta name="description" content="汽车之家为您提供最新汽车报价，汽车图片，汽车价格大全，最精彩的汽车新闻、行情、评测、导购内容，是提供信息最快最全的中国汽车网站。"/>
<!--name=keywords：关键字， name="description"：对网址进行描述
百度输入关键字如何找到你的网页？
百度就开始进行网页爬虫，
然后对你的网页的head标签内部的name=keywords以及name="description"里面的关键字进行核对是否是你输入的关键字，如果是就显示出来
现在的百度一些商业关键字需要收钱的-->
<meta http-equiv="X-UA-Compatible" content="IE=IE11;IE=IE10;IE=IE19;IE=IE8;IE=IE7">
<!--X-UA-Compatible：html如果要支持IE版本浏览器
就需要在html标签下的head标签下加上该 X-UA-Compatible功能-->
<title>Burgess</title>
<!-- tiltle标签的内容显示在浏览器的标签页上显示 -->
<link rel="shortcut icon" href="image/burgess.jpg">
<!--指定本文件image目录下的burgess.jap图片作为浏览器标签页的小图标-->
<!--总结
<head>xxx</head>：一个hmtl标签内只允许一个head标签
head标签内部的所有标签外部都是不可见的除了title标签
标签分类
-自闭合标签 如: <meta charset="UTF-8"> 直接<xxx> 开始也是结束（很少）
-主动闭合标签 如:<???>xx</???>
-pycharm写html代码的时候 如果写的是主动闭合的标签写一个自动补全
-->
<style>
/*
专门在head标签下用style标签写装饰功能，
*/
#i1{
background-color: #2459a2;
height: 48px;
}
/*
标准名称：id选择器
body标签下的标签通过匹配id进行装饰该功能(装饰功能可被重复调用但是不规范 ）
*/
#i2{
background-color: #a33c44;
height: 48px;
}
#i3{
background-color: #5aa234;
height: 48px;
}
.c1{
background-color: #2459a2;
height: 48px;
}
/*
标准名称：class选择器
body标签下标签通过class关键字进行调取该装饰功能
*/
.c2{
background-color: #9798a2;
height: 48px;
}
a{
background-color: #fff454;
}
/*
标准名称：标签选择器
body标签下的所有<a>标签被动接收装饰功能
*/
span div{
background-color: #ffac9b;
height: 48px;
}
/*
标准名称：层级（关联）选择器
body标签下的span标签下的<div>标签装饰该功能
可以不断往后 如： span div a p span h{}
*/
.c2 div{
background-color: #5cffe9;
height: 48px;
}
/*
标准名称：层级（关联）选择器，使用空格区分
body标签下的已经装饰了.c2功能的标签下的<div>标签装饰该功能
可以不断往后 如： .c2 div .c1 a h{}
*/
#i4,#i5,#i6 {
background-color: #08ff17;
}
/*
标准名称：组合选择器，使用逗号区分
body标签下的标签通过id匹配的装饰该功能
*/
.c3,.c4,.i7 {
background-color: #6d01cc;
}
/*
标准名称：组合选择器，使用逗号区分
body标签下的标签通过class关键字匹配的装饰该功能
*/
input[type='text' ]{ width:200px;height:30px; }
input[type='password']{ width:60px;height:30px; }
input[value='burgess' ]{ width:400px;height:30px; }
.c1[type='password']{ width:60px;height:30px;}
/*
标准名称：属性选择器
body标签下的标签属性匹配到后进行装饰该功能
注意.c1已经有该装饰功能了
如果body的input标签里面有用class关键字匹配优先匹配.c1装饰功能
*/
.pg-header{
height: 38px;
background-color: #dddddd;
line-height: 38px;
.}
/*
装饰功能
height:38px 高度
background-color:#dddddd 背景颜色
line-height:38px 字符根据像素居中
*/
img{
border:0;
}
/*默认img标签是有边框的，所以我们如果想在IE点击图片就跳转就需要去掉边框*/
.pg-header01{
height: 48px;
background-color: black;
color: #dddddd;
position: fixed;
top:0;
right: 0;
left: 0;
}
/*position: fixed; 固定页面的位置，并且把该div从背景层（底层）变底层上层
固定在 top right left:距离顶部、左、右 0px距离
这样以后就不管你页面往下滚动，该div一直存在该浏览器页面的顶部
*/
.pg-body01{
background-color: #dddddd;
height: 5000px;
margin-top: 50px;
}
/*背景层（底层）试验position写的装饰功能
margin-top偏离顶部50px这样才不会被盖住
（后期就不需要了，因为可以利用display隐藏固定div*/
.pg-header02{
position: fixed;
right: 0;
left: 0;
top: 0;
height: 48px;
background-color: #2459a2;
line-height: 48px;
}
/*
覆盖固定到页面的距离右边0 左边0 上面0 高度48px
颜色蓝，文字输入高度48px的居中
*/
.pg-body02{
margin-top: 50px;
}
/*顶部往下移动50px*/
.w{
width: 980px;
margin: 0 auto;
}
/*宽度980px 居中*/
.pg-header02 .menu{
display: inline-block;
padding: 0 10px 0 10px;
color: white;
}
/*
display: inline-block; 行内标签转块级标签（a标签就可以设置左右上下宽度）
padding: 10px （上下左右+10px）
padding:0 10px （上下+0px 、左右+10px）
padding: 0 10px 0 10px （上+0px 、右+10px 、下+0px 、左+10px）
*/
.pg-header02 .menu:hover{
background-color: blue;
}
/*
menu:hover:当鼠标移动到当前menu标签上时，该hover属性才生效
*/
</style>
<link rel="stylesheet" href="css/commons.css" />
<!--引用当前路径下的css目录下的commons.css文件的装饰功能-->
</head><!--head标签的结束-->
<body style="margin: 0 auto;width: 1040px;> <!--body标签的开始-->
<!--body标签内部
pycharm文件路径：day14/html_test/s2.html-->
<a href="http://www.baidu.com">李 ><a>杰</a>
<!-- href：内部属性，跳转指定网址
 :空格、>：大于号、 <：小于号 -->
<p>123<BR>123</p>
<p>123<br />123</p>
<!-- <p>标签：1个p标签是一个段落，br：换行但是属于1个段落的。
2个P标签是2个段落，段落之间的有间距
自闭合标签里的参数大小写不区分
自闭合标签格式:<?? />==<??>
推荐用这种格式<?? /> 这样一看就最大是自闭合表 -->
<h1>Burgess</h1>
<h2>Burgess</h2>
<h3>Burgess</h3>
<h4>Burgess</h4>
<h5>Burgess</h5>
<h6>Burgess</h6>
<!-- <h>标签:数字越小显示越大 每个标签一行-->
<span>hello</span>
<span>hello</span>
<!-- <span>标签，虽然代码看起来是换行，但是显示的时候不换行-->
<!-- ========小总结========
所有的标签分为2类：
1.块级标签：
H系列标签（自带特性：加大加粗）、
P标签（自带特性：段落和段落之间有间距）
div(自带属性：白板(就是没特性)但是可以通过CSS加特性)
2.行内标签（内联标签）：
span标签(自带特性：白板(就是没特性)但是可以通过CSS加特性) -->
<div>1</div>
<div>2</div>
<div>3</div>
<!--<div>块级标签(自带特性：白板(就是没特性)但是可以通过CSS加特性)
一个标签一行 行与函之间没有间距（****几乎都是用这个标签+CSS）
为什么div是用的最多的，你要学前端最少要会div+CSS.
div是白板，所以CSS可以构造div几乎所有的特性-->
<!--标签作用以及浏览器F12对页面的HTML代码操作详解
pycharm文件路径：day14/html_test/s3.html-->
123
<!--<div ID="i1" style="position:fixed;top:0;right:0;">123-->
<div ID="i1">123
<div>
<span>123</span>
</div>
</div>
<!--body就可以写数据了，为什么还要用到标签？
这样方便后期利用CSS快速精确查找该标签的数据并且替换该数据，移动数据
ID="i1"内部属性：标记用的方便以后查询替换
style="position:fixed;top:0;right:0;"
内部属性:该便签的数据在浏览器显示在右上上边
style="position:fixed;bottom:0;right:0;"
内部属性:该便签的数据显示在浏览器显示在右下低边-->
<!-- ========结论=&
最低0.47元/天 解锁文章
扫一扫
369
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
