1.标签

标签又称元素、盒子。是承载文档流的容器，所有的文本信息都必须写在标签中。

2.1标签划分

1.根据有无闭合标签可以分为双标签和单标签。
2.根据页面渲染结果可分为块标签和行标签。

1.1双标签

双标签	样式	标签	解释
html	<html></html>	页面根标签	所有的页面代码都写在html标签中
head	<head></head>	头部标签	设置网页基本信息的标签
body	<body></body>	内容标签	所有页面内容都在body中编写
title	<title></title>	------	设置网站标题

1.2单标签

单标签	样式	解释
meta	<meta>	用来设置网页的具体信息

2.行元素和块元素

2.1块标签

独占一行，每个标签都会导致文本流换行
可以设置宽高，高度由内容撑开
可以嵌套块元素和行元素。拟人化的称之为”父子关系“。
父子关系样式如下：

<div>
        <div></div>
</div>

2.2行标签

可以在一行之前排列，但是如果超过父盒子的宽度则会换行。（如果是单个行标签超出高度此情况不换行）
不能设置宽高。宽高由内容撑开
可以嵌套块标签（不推荐使用）

3.css引入方式

引入方式	概念	优点	缺点
行间样式	在标签中通过style属性来写css代码	优先级高、方便	不利于维护、显得页面太过杂乱
内联样式	将css代码写在页面的style标签中	可复性高、代码整洁、利于维护	会使页面变得很长，小型项目推荐使用内联样式
外联样式	在外部创建一个.css文件，并在HTML文件中header标签内title标签下使用link标签引入	逻辑清晰、页面整洁、利于维护、可复用性高	加大了项目所占内存

4. 样式优先级

行间样式>内联样式>外联样式
行间样式：
<div style="width:400px;height:400px;background:green"></div>
内联样式：将style标签写在head闭合标签上面。
<head>
<style>
div{
样式名：值；
}
<style>
</head>
外联样式:使用link标签 href属性内写入要引入文件css的文件路径。
<link rel="stylesheet" href="文件路径">
文件路径的编写
本层文件：./文件名.后缀名；上层文件：../../文件名.后缀名
上上层文件：../../文件名.后缀名；下层文件：文件夹名/文件名.后缀名

5.css选择器

5.1命名规范

按照W3C规范命名有一下几种原则（包括文件及文件夹命名等所能遇到的所有命名）

命名中只能存在字母、数字、下划线。
命名必须以字母开头
命名必须遵守语义化（好理解容易记）
不要用拼音及拼音缩写尽量使用单词

5.2命名格式

驼峰命名
例如：商品列表商品=>goods 列表=>list =>goodsList（小驼峰）=>GoodsList（大驼峰）
地中海命名（匈牙利命名）
例如：商品列表商品=>goods 列表=>list =>goods_list

5.3选择器

5.3.1 类选择器

类选择器又称class选择器。当同种标签过多时我们可以使用标签中的class属性给标签起个名字（类名），然后在css中使用类名的方式选择具体的标签并编写样式。

一个标签可以有多个类名，类名之间以空格隔开，一个类名可以重复使用

 <div class="Box"></div>
                       <style>
                                     .Box{
                                               样式名：值；
                                              }
                     </style>

5.3.2标签选择器

直接在style标签中使用标签名方式来选择具体标签。多个标签用空格隔开

<style>
 div{
                    样式名：值；
                }
</style>

5.3.3id选择器

需要在标签内使用id这个属性来设置id名，然后再style标签中使用#id名的形式选择具体标签。

 <div class="B1" id="first"></div>
 <style>
                #first{
                    样式名：值；
                }
            </style>

id具有唯一性，整个页面中id不能重复。通常情况下一个标签只能由一个id。

5.3.4通配符选择器

通配符选择器*是代表所有标签的样式，可以设置所有标签的css

<style>
*{
 background:green;
}
</style>

5.3.5群组选择器

可以嵌套或者配合class标签id等选择器一起使用。多个选择器用，隔开。

 <div class="d1 d2 d3"></div>
div,.d1{
            background: red;
        }

5.3.6组合选择器

详细的描述一个标签的属性或标签名。有几个class就写几个class写的越详细优先级越高

组合选择器中间不能有空格

<h1>这是标题<h1>
<p class=”hahaha">这是一个带class的p标签</p>
<style>
            p.hahaha{
                             background:red;
                           }
</style>

5.3.7 后代选择器

父选择器与子孙选择器之间以空格隔开

<div class="d1 d2 d3"></div>
<div class="d1 d3"></div>
<style>
                     .d1 .d2 .d3{
                                        background: gray;
                                     }
    </style>

5.3.8子集选择器

父选择器与子选择器之间以>隔开

直属子元素不能选择后代元素

<div class="f1">
        <div class="f2">
            <div class="f3"></div>
        </div>
    <div class="f3"></div>
    </div>
<style>
.f1>.f3 {
            background: yellow;
          }
</style>

代码初识