html5 基础知识

作者: html来啦 | 来源:发表于2019-07-30 22:57 被阅读1次

1、列表(list) :表示多个并列关系

有序列表:(数字表示顺序,开发时不用)------ol  li

ol标签创建一个有序列表

          使用li 标签表示列表中的项

无序列表:(小黑点表顺序,开发时不用)---------做导航条--------ul  li

ul标签创建一个有序列表

          使用li 标签表示列表中的项

列表之间可以互相嵌套,有序列表中可放无序列表,无序列表中可放有序列表

定义列表:主要对于一些内容下定义 ----------dl  dt  dd

          dl 创建定义列表

              在dl 中,用dt ,表示定义项

                      用dd,描述定义项

2、CSS (层叠样式表)  : 处理网页的表现

网页中所有外在显示效果都由CSS控制

【1】CSS书写方式

1)内联样式:直接将css代码编写到标签的style 属性中(会导致结构和表现耦合      1、不方便代码复用              2、不方便代码的维护  3、开发时不使用此内联样式)

2) 内部样式表:将样式编写到style 标签中,style 标签需写在head里。通过CSS选择器,选择指定的元素并为其设置样式。(1、将html和css代码分离开,2、使CSS样式可以复用,3、方便后期的维护 )

3)外部样式表:将CSS代码编写到外部的CSS文件中,然后通过 link 标签引入到页面中。(外部文件直接写样式) 1、 将CSS写在外部的样式表中,使结构和表现完全分离,2、可以在不同的页面中对样式表进行复用,方便后期的维护。将样式表写在外部文件中,可以充分的利用到浏览器的缓存机制,进而加快页面的加载速度,提高用户体验

【2】CSS语法

语法结构:选择器 声明块

1)选择器(本例子中的P):通过选择器可以选中页面中的指定元素  (例:P 选中所有P元素)

2)声明块:

                    - 整体是一对大括号

                    - 声明块由一个一个的声明组成

                    - 声明是一个名值对结构:

                        样式名对应一个样式值

                        名和值之间使用:连接,使用;结尾

                    - 声明块中的所有样式将会应用到其前边的选择器所对应的元素上

1>元素选择器

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

            语法:标签名

            例子:p{}  div{}    span{}

2>id选择器

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

          语法:#id

        例子: #p1{}  #box{}

3>类选择器

      作用:根据元素的class属性选中元素

        语法:.class

        例子:.p1{}  .box{}

除了id属性,也可以为元素添加一个class属性

          class的作用的是为元素进行分类

          拥有相同class属性的元素属于同一类元素

      设置方式也和id基本一致,不同的是class属性可以重复使用

          可以同时为一个元素设置多个class

4>选择器分组(并集选择器)

作用:可以同时为多个选择器设置同样的样式

          语法:选择器1, 选择器,...选择器N(选择器都可以放一起,不分类型)

          例子:#p2, div, span {}

5>通配选择器

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

        语法:*

        例子:

        *{

            color: red

        }

6>交集选择器

            作用:选中同时符合多个选择器的元素

            语法:选择器1选择器2...选择器N

            例子: div.box{}--------div  .box 是两个选择器

7>后代元素选择器

作用:选中指定元素的指定后代

            语法:祖先 后代{}

            例子: div span{}

8>子元素选择器

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

                语法:父元素 > 子元素

9>兄弟元素选择器

      作用:选中指定的元素的兄弟元素

        语法:兄 + 弟 {}

            选择紧随其后的一个兄弟元素

        语法:兄 ~ 弟 {}

            选择其后边所有兄弟元素

10>伪类选择器  (都以  :号开头)  一般用来表示元素的一些特殊的状态或者特殊的位置

1)  :first-child

-表示第一个子元素(在所有的子元素中查找)

2):first-of-type   

-同类型中的第一个子元素

3) :last-child

   :last-of-type

 4) :nth-child( 这里写数字,代表第几个子元素 )

-第n个子元素   odd表示单数 even表示双数

   :nth-of-type()

-同类型的第n个子元素 ...

5):only-child : 有且只有一个元素

<div class=”p1”>   </div>

-唯一的一个子元素

    :only-of-type

-同类型中唯一的一个子元素

     6)  :empty

-匹配空元素

      7) :not()

-否定伪类,表示除了

11> [endif]a的伪类

 :link

          - 正常的超链接,链接都可以用(带有href的a标签)

-主要用来设置没有访问的链接的样式

      :visited

-访问过的超链接(只能修改字体的颜色)

      :hover

-鼠标移入的状态(不仅仅适用于超链接)

      :active

-鼠标正在点击的状态(不仅仅适用于超链接)

【3】快捷键:CTRL+B 改名

【4】元素间的关系

父元素:直接包含子元素的元素

子元素:直接被父元素所包含的元素

祖先元素:直接或间接包含后代元素的元素

父元素也属于祖先元素

后代元素:直接或间接被祖先元素包含的元素

子元素也属于后代元素

兄弟元素:拥有相同父元素的元素

相关文章