第一周 html 语义标签 伪元素 伪类

 7月12

块元素：(会独占一行)

  div

  p 段落标签

  h1-h6 标题标签

  ul 无序列表>li 列表项

  ol 有序列表

  dl 菜单列表：dt 一级列表> dd 二级列表

form 表单元素：

    input标签：

      属性：button按钮、submit 提交、checkbox复选框、radio 多选框（name值相同，vlaue选1个）、select下拉框、option选项、textarea副文本框

  table 表格：tr 行、th表头 、td表体

  img：

    scr：./当前路径、../上一级、/根目录X                

行内元素：(不会独占一行)

  span        a超链接

其他元素：br（换行）

TAB快捷生成标签：

7月13 语义化标签 emmt语法

语义标签

header 容器，表示头部        footer 容器，底部        section 容器，有明确主题的块

nav 导航菜单栏，容器        aside 侧边栏        addrk 行内元素，重点标记        article 容器，文章

haroup 容器，标题组

emmet语法

> 父子关系        + 兄弟关系        id 元素唯一标记        *n n个        （）元素组        ^ 上一级

id/类名$*n生成id/类名1…………id/类名n        class 给元素一个类名可以重名，可以多个

“  . ”  类名  “#” id   例：header#heade1>nav.meun-nav>img +（ul.meun-list>（li.item$>a[href=#]）*4)

[属性名="属性值"]可以给元素指定的属性名，英文不用 " "

7月14  css语法基础 伪类选择器

css语法基础

id选择器 #         类选择器class        标签选择器（尽量避免使用）         空格后代选择器        > 子代选择器        , 并集选择器        * 通配选择器 表示所有        +相邻兄弟选择器        ~ 兄弟 （后）    [属性名=属性值] 属性选择器（不常用）

伪类选择器

：first-child 选中的所有元素中的第一个，必须是第一个子元素。

：last-child 选中的所有元素中的最后一个，必须是最后一个子元素。

：first-of-type/:last-of-type 选中所有元素中的第一个/最后一个

:  nth-child(n) 取出满足条件的元素并且是第n个子元素

：nth-of-type(n) 取出满足条件的第n个元素

：not(其他选择器)

a:visited 表示访问过的超链接（仅限a标签）

a:link 表示未访问的链接（仅限a标签）

:active鼠标按下时

:hover 鼠标经过时

7月15 伪元素 选择器优先级 css单位

伪元素：

        :: first-leter 第一个文字        ::first-line 第一行文字        :: before 元素的最前面        ::after 元素中的最后边        content 添加内容默认是行内元素        selection 获取选中的文本。

::before ::after 用于最前边和最后边添加文本或元素，一般用来解决外边距啊重叠和浮动的高度塌陷问题，结合content 使用，可以使用display：block/table改成块元素。

选择器优先级：

        ！important（正无穷）>内联样式>id选择器>calss选择器和伪类选择器>元素选择器>通配选符择器。

内联样式表的权重值最高，值为1000。

id选择器的权重值为100。

class选择器的权值为10。

类型（元素）选择器的优先级为1。

通配符选择器的优先级为0。

权重大则优先。

css单位：

        em：em参照的对象是其父元素的font-size，1em等于其父元素的font-size一倍；

        rem：rem参照的对象是根元素html的font-size，1rem = 16px（html默认是16px）；

        px：固定像素值