前端实战之HTML、CSS 常用标签注释

最新推荐文章于 2024-06-25 22:00:00 发布

Burgess_zheng

最新推荐文章于 2024-06-25 22:00:00 发布

阅读量892

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端 CSS HTML

本文链接：https://blog.youkuaiyun.com/Burgess_zheng/article/details/86481511

这篇博客主要介绍了前端开发中HTML和CSS的常用标签，包括它们的使用场景和注意事项，是前端初学者进阶的重要参考资料。通过阅读，读者可以对前端页面构建有更深入的理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇：前端初识(三把利器：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">李&nbsp;&nbsp;&gt;&lt;a&gt;杰</a>
<!--   href：内部属性，跳转指定网址
&nbsp:空格、&gt：大于号、 &lt：小于号 -->
     <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;to