##  快捷写标题

h$*6>{xxx}+Tab

ps:"$"该符号可以代表变化的数字，一二三，顺序排列。上方表示：h1、h2...排列到六，而大括号之中即是标题文字，当然也可以加入$

（也可以用于p元素）

##  快捷生成网页格式

! +tab

##  h

    表示标题

##  p

    表示段落

##  span

    无语义，仅用于设置样式

    某些元素显示的时候会独占一行（块级元素），某些就不会（行级元素）（such：span）

    ps：到了HTML5已经不在使用块级和行级这种说法了

## pre 【无语义】

    预格式化文本元素

    而，在pre中就不存在空白折叠，可以理解为，pre元素中的，页面文字就会按照源代码表示出

    空白折叠：源代码中的连续空白字符，在页面中会折叠为一个空格

    该元素通常用于在网页中表示代码

    pre元素本质：它有一个默认的css属性

## code元素

    显示代码的时候，外面通常套code元素，code表示代码区域

## 实体字符

    小于符号（</&lT;）/ 大于符号（>）/ 空格支付（&nbsp）

##  站内资源/站外资源

    站内资源，就是自己（当前）网页的资源

    站外，就是别人的

    而站外用绝对路径，站内用相对路径

    绝对路径网站（url地址）：协议名：//主机名：端口号/路径

    ps：当跳转目标与当前页面协议相同的时候，可以省略路径 https://www.baidu.com

    如果协议是http协议，端口默认为80；https默认为443

    相对路径：以./开头，可以跳转当前目录的站内资源，返回上一级目录"../"

    ps:第一级./可以省略

##  href属性

    与a元素同时使用，用于跳转

    跳转网页

    锚点href="#+锚点"

    功能性链接：

    javascript:

        tel:

        mailto:

##  target属性

    _self:当前页面打开

    _blank:空白页面打开

## id属性

    全局属性，用于作为锚点...

    id=“    ”

## div元素（无语义）

    区域元素

    ==header元素（头部）

    footer（尾部）

    article（正文）

    section（章节）

## CSS

    CSS规则=选择器+声明块

    选择器  ：

            1.元素选择器

            2.ID选择器(#+id)

            3.类选择器（.red）

    声明块  ：加上的属性/声明

## CSS书写位置

    1.内部样式表（一般先加到head）【第一次较快】

    2.内联样式表（直接在元素中style=""）【不推荐】

    3.外部样式表（写到css文件中）

    【优点】：

            1.外部样式可以解决样式重复

            2.有利于浏览器缓存，提高响应速度

            3.有利于代码分离，更容易阅读

    ps：需要在HTML的head中使用link元素,链接css文件

## 课堂拓展    

    (lorem:乱数假文、没有任何实际含义的文字，用于测试排版，

    ps：p*6>lorme1(数字代表成为文字字数)

    取消缩进：shift+tab

    (h2>{章节$})+p>lorem)

<!-->可以生成模板式