HTML与CSS进阶（适合有一定基础的，这期先介绍HTML的部分相关内容）

最新推荐文章于 2023-11-25 19:17:28 发布

向老练前进

最新推荐文章于 2023-11-25 19:17:28 发布

阅读量159

点赞数 1

本文链接：https://blog.csdn.net/qq_30116149/article/details/104771683

版权

你真的精通HTML和CSS吗？（开篇）

我们都知道，前端技术的三大核心分别是HTML(搭建界面结构）、CSS(定义网页外观）、Javascript(定义页面行为),Javascript是较HTML和CSS之后学习的，所以，HTML和CSS是前端技术中最基础的东西。

HTML和CSS入门容易，但是精通却很难，特别是css,“什么？精通很难？我很确定我已经精通css了啊，这些话基本都是出自学习了两三个月的人而言的，那么我们可以思考下下面的问题

<1>：什么是HTML语义化？对于标题、图片、表格、表单，如何更好地实线这些方面的语义化？

<2>：什么是外边距叠加？出现外边距叠加的根本原因是什么？

<3>:在CSS中，关于命名、书写以及注释都有哪些好的规范（便于团队开发的后期维护）？

<4>:说一下display这几个属性值的区别:block、inline、inline-block、table-tell.

<5>:你深入了解过text-indent、text-align、line-height以及vertricl-align这几个属性呢？他们分别有什么高级的技巧

<6>:为什么overflow:hidden可以清除浮动？还有没有其他清除浮动的方法？它们各有什么缺点？
…
如果你这些问题有一半答不上来，那证明你还没有深入的了解CSS，CSS并不是懂得几个标签就证明自己深入CSS了，自己要深入的去学习,自我满足只会停滞不前。

语义化简介

由于HTML简单，很多初学者容易对它容易产生偏见，觉得它没多少东西，因此在写一个网页中随便的对待，学习HTML重点不在于掌握了多少标签，而是在于掌握标签的语义化，以及如何编写一个语义结构良好的界面。
在实际开发中，很多人由于对标签的语义不熟悉，常常用莫一个标签代替另外一个标签来实线某些效果，
例如：

对于上面的标题效果，正确的做法应该是使用h1~h6标签来实现的。虽然做出来的页面效果一样，但是这种”用某一个标签去代替另外一个标签来实现相同的效果"的做法是完全不可取的，因为它违背了HTML这门语言的初衷。
HTML的精髓就在于标签的语义，我们学习HTML重点不是你学了多少标签，而是在你需要的地方能否用到正确的语义化标签。

1.1 语义化

对于标题h1~h6的语义化，我们要特别注意这四个方面

一个页面只能有一个h1标签
h1-h6之间不要断层
不要用h1~h6定义样式
不能用div代替h1~h6

1.1.1 一个页面只能有一个h1标签
h1标签表示每个页面中最高层级的标题，搜索引擎会赋予h1标签最高权重。虽然没有明确规定一个页面不能有多个h1标签，但是我还是推荐”一个页面一个h1标签“。如果一个页面有多个h1，对搜索引擎不好，就像你写一篇作文，你见过一篇作文有多个主标题的吗？

1.1.2 h1-h6之间不要断层
搜索引擎对h1~h6标签比较敏感，尤其是h1和h2。一个语义良好的页面，h1-h6应该是完整有序而没有出现断层的。也就是说，要按照"h1、h2、h3"这样的顺序依次排列下来，不能出现h1、h3、h4,而漏掉h2的情况。

1.1.3 不能用h1-h6定义样式
我们都知道h1~h6是有默认样式的，如下图所示，在实际开发中，很多时候我们都要为文本定义字体加粗、字体颜色等，但有些人喜欢用h1-h6来代替css,我们要记住，HTML关注的是网页的结构（语义），CSS关注的是样式，结构跟样式是要分开的。
在这里插入图片描述
1.1.4 不能用div来代替h1~h6
从语义上来说，一个页面的标题应该使用h1~h6标签，不能使用div来代替，上面的例子已经说明了。

2.1图片语义化
有两个属性：
1：alt属性和title属性
2：figure元素和figcaption元素

2.1.1 讲解alt属性和title属性

alt属性用于图片的描述，这个描述的文字是给搜索引擎看的，指的是图片无法显示时，页面会显示出alt文字
title也是用于图片的描述，不过这个描述的文字是给用户看的。是鼠标指针悬停在图片上时显示出title中的内容。

语法：

<img src="" alt"图片描述（给搜索引擎看）" title="图片描述（给用户看）">

注意：
alt属性是img标签必须属性，一定要添加；title属性是img标签可选属性，可加可不加，建议大家在实际写代码的过程中，要记得alt属性中添加必要的描述信息

2.1.2figure元素和figcaption元素

图片+图注的效果
在这里插入图片描述
对于“图片+图注”的效果，我们可以使用如下代码来实现

<div clss="a">
      <img src="" alt=""/>
      <span>HTML零基础入门</span>
 </div>

但是这种实现方式的语义并不好。在HTML 5中，引入了figure和figcaption这两个元素来增强图片的语义化。
语法：

<figure>
     <img src="" alt=""/>
     <figcaption></figcaption>
 </figure>

说明：
figure元素用于包含图片和图注，figcaption元素用于表示图注的文字。在实际的开发中，对于“图片+图注”效果，我们都建议使用figure元素和figcaption元素来实现，从而使得页面语义更加良好。

3.1：表格语义化

3.1.1
在表格中，我们比较常用的标签是table,tr和td这3个。不过为了加强表格的语义化，W3C还增加了5个标签：th、caption、thead、tbody、tfoot。th表示“表头单元格”; caption表示“表格标题”。thead、tbody和tfoot这3个标签把表格从语义上分为三部分：表头、表身和表脚。有了这几个标签，表格语义更加的良好，结构更加的清晰。对于这5个标签，我就引用添加链接描述这个链接介绍了。

标签	说明
table	表格
caption	标题
thead	表头（语义划分）
tbody	表身（语义划分）
tfoot	表尾（语义划分）
tr	行
th	表头单元格
td	表格单元格

语法：

<table>
    <caption>表格标题</caption>
    <!--表头-->
    <thead>
           <tr>
              <th>表头单元格1/th>
              <th>表头单元格2</th>
            </tr>
      </thead>
      <!--表身-->
      <tbody>
           <tr>
              <td>标准单元格1</td>
              <td>标准单元格2<td>
             </tr>
       </tbody>
       <!--表脚-->
       <tfoot>
           <tr>
              <td>标准单元格1</td>
              <td>标准单元格2</td>
           </tr>
        </tfoot>
 </table>

说明：
thead、tbody和 tfoot这三个标签也是表格中非常重要的标签，它从语义上区分了表头、表身和表脚。很多人容易忽略这三个标签

例子：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  table,thead,tbody,tfoot,th,td{
   border:1px dashed gray;
  }
 </style>
</head>
<body>
 <table>
  <caption>考试成绩表</caption>
  <thead>
   <tr>
    <th>姓名</th>
    <th>语文</th>
    <th>英语</th>
    <th>数学</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>小明</td>
    <td>80</td>
    <td>80</td>
    <td>80</td>
   </tr>
   <tr>
    <td>小红</td>
    <td>90</td>
    <td>90</td>
    <td>90</td>
   </tr>
   <tr>
    <td>小兰</td>
    <td>100</td>
    <td>100</td>
    <td>100</td>
   </tr>
  </tbody>
  <tfoot>
   <tr>
    <td>平均</td>
    <td>90</td>
    <td>90</td>
    <td>90</td>
   </tr>
  </tfoot>
 </table>
 </table>
</body>
</html>

在这里插入图片描述
分析：
对于thead、tbody和 tfoot这3个标签，不一定能够全部都用的上，例如tfoot就很少用。一般情况下，我们都是根据实际需要来使用这3个标签的。

  **今天就写到这里了，码不下去字了，下次要讲的是表单语义化。**

向老练前进

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML与CSS进阶（适合有一定基础的，这期先介绍HTML的部分相关内容）

你真的精通HTML和CSS吗？（开篇）我们都知道，前端技术的三大核心分别是HTML(搭建界面结构）、CSS(定义网页外观）、Javascript(定义页面行为),Javascript是较HTML和CSS之后学习的，所以，HTML和CSS是前端技术中最基础的东西。2HTML和CSS入门容易，但是精通却很难，特别是css,“什么？精通很难？我很确定我已经精通css了啊，这些话基本都是出自学...
复制链接

扫一扫