html标签和css参数

一、HTML标签

1、实体标签：

  空格、

> 大于号

< 小于号

© 版本号

2、Meta标签：

charset 指定网页的字符集

name 指定的数据的名称

content 指定的数据的内容

description 用于指定网站的描述

title标签的内容会作为搜索结果的超链接上的文字显示 

keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开。

3、语义标签：

1、标题标签

h1 ~ h6 一共有六级标题

从h1~h6重要性递减，h1最重要，h6最不重要

标题标签都是块元素

在页面中独占一行的元素称为块元素（block element）

hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup。

em标签用于表示语音语调的一个加重。

strong表示强调，重要内容！

blockquote 表示一个长引用，  q表示一个短引用。  

2、布局标签：

（1）header 表示网页的头部。

（2）main 表示网页的主体部分(一个页面中只会有一个main)。

（3）footer 表示网页的底部。

（4）nav 表示网页中的导航。

（5）aside 和主体相关的其他内容（侧边栏）。

（6）article 表示一个独立的文章。

（7） section 表示一个独立的区块，上边的标签都不能表示时使用section。

（8）div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素 。

（9）span 行内元素，没有任何的语义，一般用于在网页中选中文字。

4、块元素和行内元素的区别：

（1）块元素（block element）

            - 在网页中一般通过块元素来对页面进行布局

         行内元素（inline element）

            - 行内元素主要用来包裹文字

            （2）- 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素

            - 块元素中基本上什么都能放

            - p元素中不能放任何的块元素

5、列表标签（html列表的三种创建方式）：

            1、有序列表

       2、无序列表

            3、定义列表

（1）有序列表，使用ol标签来创建无序列表

             使用li表示列表项 

        （2）无序列表，使用ul标签来创建无序列表

             使用li表示列表项

（3）定义列表，使用dl标签来创建一个定义列表

             使用dt来表示定义的内容

                 使用dd来对内容进行解释说明

   使用：列表之间可以互相嵌套。

6、超链接标签

   使用 a 标签来定义超链接

      属性：

1、 href 指定跳转的目标路径

             - 值可以是一个外部网站的地址。

             - 也可以写一个内部页面的地址。

            2、target属性，用来指定超链接打开的位置

               可选值：

                 _self 默认值 在当前页面中打开超链接。

                 _blank 在一个新的要么中打开超链接。

            3、可以使用 javascript:; 来作为href的属性，此时点击这个超链接什么也不会发生。

            4、可以直接将超链接的href属性设置为#，这样点击超链接以后，页面不会发生跳转。

可以跳转到页面的指定位置，只需将href属性设置 #目标元素的id属性值。id属性（唯一不重复的）：

       - 每一个标签都可以添加一个id属性

        - id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性 。

7、图片标签：

使用img标签来引入外部图片，img标签是一个自结束标签。

属性：

（1）src 属性指定的是外部图片的路径（路径规则和超链接是一样的）

（2）alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录

（3）width 图片的宽度 (单位是像素)

（4）height 图片的高度   

  - 宽度和高度中如果只修改了一个，则另一个会等比例缩放

注意：

（1）一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大.

（2）但是在移动端，经常需要对图片进行缩放（大图缩小）。

（3）效果一样，用小的，效果不一样，用效果好的。

8、内联框架

内联框架，用于向当前页面中引入一个其他页面。

属性：

     src 指定要引入的网页的路径

     rameborder 指定内联框架的边框

9、音视频标签

（1）音频标签

audio 标签用来向页面中引入一个外部的音频文件的。音视频文件引入时，默认情况下不允许用户自己控制播放停止。

属性： controls 是否允许用户控制播放

       autoplay 音频文件是否自动播放， 如果设置了autoplay 则音乐在打开页面时会自动播放，但是目前来讲大部分浏览器都不会自动对音乐进行播放 ， loop 音乐是否循环播放 。

（2）视频标签：

使用video标签来向网页中引入一个视频， 使用方式和audio基本上是一样的。

二、CSS属性

1、常用选择器

（1）元素选择器

           作用：根据标签名来选中指定的元素

           语法：标签名{}

           例子：p{}  h1{}  div{}

（2）id选择器

           作用：根据元素的id属性值选中一个元素

           语法：#id属性值{}

           例子：#box{} #red{} 

（3）类选择器

          作用：根据元素的class属性值选中一组元素

          语法：.class属性值

（4）通配选择器

          作用：选中页面中的所有元素

          语法: *

（5）class标签和id标签的区别：

class 是一个标签的属性，它和id类似，不同的是class可以重复使用，可以通过class属性来为元素分组，可以同时为一个元素指定多个class属性。

2、复合选择器

（1）交集选择器

          作用：选中同时复合多个条件的元素

          语法：选择器1选择器2选择器3选择器n{}

          注意点：

             交集选择器中如果有元素选择器，必须使用元素选择器开头。

（2）选择器分组（并集选择器）

                作用：同时选择多个选择器对应的元素

                语法：选择器1,选择器2,选择器3,选择器n{}

3、关系选择器

（1）子元素选择器

        作用：选中指定父元素的指定子元素

        语法：父元素 > 子元素

（2）后代元素选择器：

        作用：选中指定元素内的指定后代元素

        语法：祖先 后代

（3）兄弟选择器

下一个兄弟：

             语法：前一个 + 下一个

        选择下边所有的兄弟

             语法：兄 ~ 弟

（4）关系：

父元素：直接包含子元素的元素叫做父元素。

子元素：直接被父元素包含的元素是子元素。

祖先元素：直接或间接包含后代元素的元素叫做祖先元素，一个元素的父元素也是它的祖先元素。

后代元素：直接或间接被祖先元素包含的元素叫做后代元素，子元素也是后代元素。

兄弟元素：拥有相同父元素的元素是兄弟元素。

4、属性选择器

[属性名] 选择含有指定属性的元素。

[属性名=属性值] 选择含有指定属性和属性值的元素。

[属性名^=属性值] 选择属性值以指定值开头的元素。

[属性名$=属性值] 选择属性值以指定值结尾的元素。

[属性名*=属性值] 选择属性值中含有某值的元素的元素。

5、伪类选择器

 伪类（不存在的类，特殊的类）

      - 伪类用来描述一个元素的特殊状态

       比如：第一个子元素、被点击的元素、鼠标移入的元素...

      - 伪类一般情况下都是使用:开头

属性：

        :first-child 第一个子元素

        :last-child 最后一个子元素

        :nth-child() 选中第n个子元素

            特殊值：

                  n 第n个 n的范围0到正无穷

                  2n 或 even 表示选中偶数位的元素

                  2n+1 或 odd 表示选中奇数位的元素

以上这些伪类都是根据所有的子元素进行排序

:first-of-type

:last-of-type

:nth-of-type()

这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序

:not() 否定伪类

                - 将符合条件的元素从选择器中去除。

6、超链接伪类（a元素伪类）

:link 用来表示没访问过的链接（正常的链接）。

:visited 用来表示访问过的链接，由于隐私的原因所以visited这个伪类只能修改链接的颜色。

:hover 用来表示鼠标移入的状态。

:active 用来表示鼠标点击。

7、伪元素选择器

伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）

伪元素使用 :: 开头

       ::first-letter 表示第一个字母

       ::first-line 表示第一行

       ::selection 表示选中的内容

       ::before 元素的开始

       ::after 元素的最后

             before 和 after 必须结合content属性来使用

8、样式的继承

样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上，继承是发生在祖先后后代之间的。

继承的设计是为了方便我们的开发，，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有的元素都具有该样式

注意：并不是所有的样式都会被继承：

比如 背景相关的，布局相关等的这些样式都不会被继承。

9、选择器的权重

    选择器的权重

                内联样式        1,0,0,0

                id选择器        0,1,0,0

                类和伪类选择器   0,0,1,0

                元素选择器       0,0,0,1

                通配选择器       0,0,0,0

                继承的样式       没有优先级

            比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）,

                选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器

                如果优先级计算后相同，此时则优先使用靠下的样式

            可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，

                注意：在开发中这个玩意一定要慎用！

三、盒子模型

1、文档流

  文档流（normal flow）

              我们所创建的元素默认都是在文档流中进行排列

            - 对于我们来元素主要有两个状态

                在文档流中

                不在文档流中（脱离文档流）

            - 元素在文档流中有什么特点：

                - 块元素

                    - 块元素会在页面中独占一行(自上向下垂直排列)

                    - 默认宽度是父元素的全部（会把父元素撑满）

                    - 默认高度是被内容撑开（子元素）

                - 行内元素

                    - 行内元素不会独占页面的一行，只占自身的大小

                    - 行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元素

                        则元素会换到第二行继续自左向右排列（书写习惯一致）

                    - 行内元素的默认宽度和高度都是被内容撑开

2、盒子模型

（1）内容区（content）

元素中的所有的子元素和文本内容都在内容区中排列 。

         内容区的大小由width 和 height两个属性来设置，width 设置内容区的宽度，height 设置内容区的高度。

（2）边框

边框（border），边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部，边框的大小会影响到整个盒子的大小，要设置边框，需要至少设置三个样式：

边框的宽度 border-width，边框的颜色 border-color，边框的样式 border-style

（3）盒模型、盒子模型、框模型（box model）

CSS将页面中的所有元素都设置为了一个矩形的盒子， 将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置，每一个盒子都由一下几个部分组成：

内容区（content）， 内边距（padding），边框（border），外边距（margin）

3、盒子模型-边框

（1）边框

边框的宽度 border-width，边框的颜色 border-color，边框的样式 border-style

border-width可以用来指定四个方向的边框的宽度

                        四个值：上 右 下 左

                        三个值：上 左右 下

                        两个值：上下 左右

                        一个值：上下左右

除了border-width还有一组 border-xxx-width， xxx可以是 top right bottom left， 用来单独指定某一个边的宽度。

（2） 边框的颜色

 border-color用来指定边框的颜色，同样可以分别指定四个边的边框， 规则和border-width一样，  border-color也可以省略不写，如果省略了则自动使用color的颜色值。

（3）边框样式

border-style 指定边框的样式：solid 表示实线，dotted 点状虚线，dashed 虚线，double 双线， border-style的默认值是none 表示没有边框。

border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求

除了border以外还有四个 border-xxx， border-top，border-right，border-bottom，border-left。

4、盒子模型-内边距

内边距（padding）：内容区和边框之间的距离是内边距

一共有四个方向的内边距： padding-top， padding-right，padding-bottom，padding-left

， - 内边距的设置会影响到盒子的大小， 背景颜色会延伸到内边距上

，一共盒子的可见框的大小，由内容区 内边距 和 边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算。

padding 内边距的简写属性，可以同时指定四个方向的内边距，规则和border-width 一样

5、盒子模型-外边距

外边距（margin）： 外边距不会影响盒子可见框的大小， 但是外边距会影响盒子的位置

一共有四个方向的外边距：

margin-top：上外边距，设置一个正值，元素会向下移动。

margin-right：默认情况下设置margin-right不会产生任何效果。

margin-bottom：下外边距，设置一个正值，其下边的元素会向下移动。

margin-left：左外边距，设置一个正值，元素会向右移动。

margin也可以设置负值，如果是负值则元素会向相反的方向移动。

元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们设置的左和上外边距则会移动元素自身，而设置下和右外边距会移动其他元素。

margin的简写属性，margin 可以同时设置四个方向的外边距 ，用法和padding一样。

margin会影响到盒子实际占用空间。

6、水平布局

元素的水平方向的布局： 元素在其父元素中水平方向的位置由以下几个属性共同决定“

margin-left， border-left，padding-left，width，padding-right， border-right，margin-right

，一个元素在其父元素中，水平布局必须要满足以下的等式

margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度 （必须满足）。

7、垂直布局

子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出，使用 overflow 属性来设置父元素如何处理溢出的子元素

可选值：

      visible，默认值 子元素会从父元素中溢出，在父元素外部的位置显示

      hidden 溢出内容将会被裁剪不会显示

      scroll 生成两个滚动条，通过滚动条来查看完整的内容

      auto 根据需要生成滚动条

8、外边距的折叠

垂直外边距的重叠（折叠）：相邻的垂直方向外边距会发生重叠现象

兄弟元素：兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）

特殊情况：如果相邻的外边距一正一负，则取两者的和， 如果相邻的外边距都是负值，则取两者中绝对值较大的

兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理

父子元素：父子元素间相邻外边距，子元素的会传递给父元素（上外边距），父子外边距的折叠会影响到页面的布局，必须要进行处理。

9、行内元素的盒模型

（1）行内元素不支持设置宽度和高度。

（2）行内元素可以设置padding，但是垂直方向padding不会影响页面的布局。

（3）行内元素可以设置border，垂直方向的border不会影响页面的布局。

（4）行内元素可以设置margin，垂直方向的margin不会影响布局。

（5）display 用来设置元素显示的类型

  可选值： inline 将元素设置为行内元素， block 将元素设置为块元素， inline-block 将元素设置为行内块元素

（6）行内块，既可以设置宽度和高度又不会独占一行， table 将元素设置为一个表格， none 元素不在页面中显示，

（7）visibility 用来设置元素的显示状态，可选值：

visible 默认值，元素在页面中正常显示

hidden 元素在页面中隐藏 不显示，但是依然占据页面的位置。

10、默认样式

（1） 重置样式表

专门用来对浏览器的样式进行重置的，reset.css 直接去除了浏览器的默认样式， normalize.css 对默认样式进行了统一。

（2）默认样式

通常情况，浏览器都会为元素设置一些默认样式

默认样式的存在会影响到页面的布局，  通常情况下编写网页时必须要去除浏览器的默认样式（PC端的页面）。

11、盒子尺寸

默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定

box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用），可选值： 

content-box 默认值，宽度和高度用来设置内容区的大小。

border-box 宽度和高度用来设置整个盒子可见框的大小。

width 和 height 指的是内容区 和 内边距 和 边框的总大小。

12、轮廓和圆角

（1）box-shadow

box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局 。

第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动。

第二个值 垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上移动。

第三个值 阴影的模糊半径。

第四个值 阴影的颜色。

（2）outline

outline 用来设置元素的轮廓线，用法和border一模一样

轮廓和边框不同的点，就是轮廓不会影响到可见框的大小 。

border-radius: 用来设置圆角 圆角设置的圆的半径大小

border-top-left-radius:  左上

border-top-right-radius ： 右上

border-bottom-left-radius:  左下

border-bottom-right-radius:  右下

border-radius 可以分别指定四个角的圆角

     四个值 左上 右上 右下 左下

     三个值 左上 右上/左下 右下

     两个值 左上/右下 右上/左下 

将元素设置为一个圆形    border-radius: 50%;