前端学习-初级-第一周第一周前端学习记录。其中包括了HTML和CSS的简介。HTML部分介绍了一些标签，CSS介绍了选择

HTML和CSS概述

HTML指的是超文本标记语言（hyper text markup language ），它是用来描述网页的一种编程语言，用于定义文档的内容结构。

什么是HTML？页面-内容-结构

W3C（万维网联盟）是国际最著名的标准化组织。

根据W3C定义，css全称（cascading style sheets )页面表现的基础，可以控制布局，控制元素的渲染，用于定义HTML文档的样式（外观）布局

中文全称：层叠样式表

HTML决定了文档的内容结构，css决定了文档的样式。

HTML

HTML注释的书写格式：

<!--注释内容-->

HTML注释主要用于描述代码功能，浏览器解析HTML代码时会忽略注释内容。属性表示元素的额外信息。标记名、属性、元素内容共同决定了一个元素的显示内容的行为

块级元素：一个元素独占一行，宽高可设，会自动换行。如 h元素
行内元素：多个元素在一行显示，宽高自动，不会自动换行。如： a, img 行内标签的特点：1、多个行内标签在一行显示，超出包含块这则换行；2、设置宽高无效；3、垂直方向内边距和外边距无效（不占尺寸），水平有效。

可替换和非可替换元素

可替换元素，可以通过属性值来改变展示的内容 img、音频、视频、input、select
非可替换元素：内容由元素内容直接展示

语义化标签

在HTML5出现之前，一直使用div来划分页面区域，HTML5之后新增了语义化标签。

<header> 用于表示页面或某个区域的头部
<nav>用于表示导航栏
<aside>用于表示跟周围主题相关的附加信息
<article>用于表示文章或其他可独立页面存在的内容
<section>用于表示一个整体的一部分主题
<footer>用于表示页面或某个区域的脚注
<nav>用来定义导航链接
<hgroup>用来定义文件中一个区块的相关信息
<figure>用来定义一组媒体内容以及它们的标题
<figcaption>用来定义<figure>元素的标题
<dialog>用来定义一个对话框（会话框），类似微信

语义化结构元素优点：

HTML结构清晰
代码可读性好
无障碍阅读
搜索引擎可根据标签的语言确定上下文和权重问题
移动设备能更完美的展示页面
便于团队维护开发

CSS

css注释的书写格式：

/*注释内容*/

css注释主要用于描述代码功能，浏览器解析css代码时会忽略注释内容。
css代码由一个一个规则组成的
css选择器决定了将规则用于哪些元素上。

CSS使用范例：

<!-- 外部样式表 用的最多--> 
<link rel="stylesheet" href="global.css">
<!-- 内部样式表 -->
<style>
    h1 {
        color: green;
    }
</style>
</head>

css引入方式:

外部样式表在head标记里通过link标签引入
内部样式表（内联）在head标记里通过style标签书写css代码——可用此标签导入外部样式表@import关键字
行内样式表(内嵌) 在开始标记里通过style属性直接书写css样式

三种样式表都存在时，最终效果是就近原则

css语法

选择器

选择器选中的是离大括号最近的元素

通配符

* {
    
    }

元素选择器，选中页面上所有该元素

元素名 {
    声明块;
}

类选择器，选择页面上所有拥有该类名的元素

.类名 {
    声明块;
}

id选择器

#id名 {
    声明块;
}

层次选择器

子级选择器组（合型选择器）.子级选择器只能一层一层选中. 举例：

article>div>p{
    /* 首行缩进 */
    text-indent: 100px;
}
.parent>.child>p{}
.parent>div>p{
    color: red;
    font: size 30px;
}

后代选择器举例：

article p{
    background-color: coral;
}
article>div>section>p {}

兄弟选择器
1. 相邻：兄弟元素A + 兄弟元素B ，选中的是紧挨A后的那一个兄弟元素
2. 不相邻：兄弟元素A ~兄弟元素B，选中的是A后面的兄弟元素B（可以有多个）
并集选择器：元素A,元素B。注意：层叠机制需要分开计算，即：元素A声明冲突，只单独计算元素A的权重（不要加元素B的权重）

伪类选择器

动态伪类选择器

:link

:visited

:focus焦点（input/a/select）

元素名:focus{
    声明块
    }

:hover

:active

结构伪类选择器

:nth-child(n)

:nth-of-type(n)

:first-child

:last-child

否定伪类选择器

:not-nth(n)

属性选择器

[属性名=“属性值”]、[属性名]

[type="text"] {
    width: 300px;
    height: 40px;
}
[type] {
    border: none;
}

伪元素选择器

::before ::after

伪元素的display值是inline

before和after的适用场景： 1、给前、后加内容;2、模拟动态的内容

取类名规则

一个元素可以有多个类名
不能是纯数字或数字开头
望文知意

id 规则

1.一个id名只能在页面上出现一次

2.一个元素只有一个id名

一些命名方法

连字符 _下划线
驼峰命名法 shopBox
匈牙利命名法（大驼峰）

`display`属性介绍

是否能继承：否

默认值：inline

display:nome 不生成盒子

display:inline行盒

display:block 块盒

display:inline-block 行内块

display : 其他取值

盒模型

每个元素都会生成一个矩形的盒子，叫做盒模型

margin: 外边距与其他盒子之间的距离可以在水平方向上居中

border 边框把盒子撑大

边框的的颜色默认跟随color,厚度默认是3px,各个方向可设置单独的样式

outline 轮廓,适用场景:不占像素的边框; 去除input默认焦点框
outline: none;
outline: 1px solid red;

padding 内边距边框与内容之间的距离把盒子撑大

content 内容区

示例

section {
    /* 文字居中 */
    text-align: center;
    background-color:aquamarine;

    /* content */
    /* 宽 横向水平 */
    width: 100px;
    /* 高 垂直水平 */
    height: 100px;
    /*---- padding---- 内边距 */
    /* 一个值 控制四周 */
    padding:40px;
    /* 两个值 上下 左右 */
    padding:10px 20px;
    /* 三个值 上 左右 下*/
    padding:10px 20px 30px;
    /* 四个值 上 右 下 左 */
    padding:10px 20px 30px 40px;
    /* 方位值 top right bottom left */
    padding-top: 40px;
    padding-left: 30px;
    padding-bottom: 20px;
    padding-right: 10px;
}

flex

容器和项目

容器：父元素

项目：子元素

主轴与交叉轴

主轴默认情况下，水平向右

交叉轴：默认情况下，水平向下

创建弹性布局

display: flex;

所有项目默认在一排显示

若项目总宽度超过容器宽度，不会自动换行，会把项目等比例压缩

换行

flex-wrap: wrap;

不换行

flex-wrap: nowrap

主轴方向布局

justify-content属性定义了项目在主轴上的对齐方式。

flex-start | flex-end | center |space-between | space-around;space-evenly

space-between项目和项目之间距离相等，项目与容器之间距离为0

space-around项目与容器之间距离是项目与项目之间距离的一半

space-evenly项目与容器之间距离和项目与项目之间距离相等

交叉轴方向布局

align-items属性定义项目在交叉轴上如何对齐。

align-items: flex-start | flex-end | center | baseline | stretch

flex-start：交叉轴的起点对齐

flex-end：交叉轴的终点对齐

center：交叉轴的中点对齐

baseline: 项目的第一行文字的基线对齐

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

display：inline-block(行内块盒子，同时具有行内元素和块级元素的特点)

text-align:center（内容水平居中）

line-height（内容垂直居中）取值与元素的高相同

雪碧图（图片拼合技术）

HTML代码

<!-- 雪碧图  图片拼合技术   span i -->
<span class="sprite"></span>

css代码

.sprite {
    /* 1、定视口 */
    width: 20px;
    height: 20px;
    /* border: 1px solid; */
    /* 行内块 */
    display: inline-block;
    /* 2、插图 */
    background-image: url("./img/ia_100000031.png");
    /* 3、调位置 */
    background-position: -22px -19px;
}

HTML的发展历史

2004年WHATWG继续发展HTML，08年发展HTML5草案发布，12年形成稳定的版本，新增了语义化标签

UTF-8表示字符集

语义化标签：header article aside section nav footer hgroup figure

password 新增date

html5中的变化

标签的变化：

<doctype>、<meta>

新增语义化标签和属性

去掉了纯展示性的标签

添加:<canvas></canvas>、<video></video>、<audio></audio>本地存储和拖拽

语法的变化：

不区分大小写，推荐小写

空标记可以不闭合

属性值可以不加引号，但推荐加上双引号

属性值中包含true和false的可以省略 ---->（元素的属性：属性可以为元素添加额外的信息）

HTML相关术语

单标记（空元素、自结束标记）

<img>、<link>、<meta>、<input>、<hr>（单线）、<br>

元素关系：

父子：A直接包含B，A是B的父元素，B是A的子元素
祖先后代：A直接或间接包含B，A是B的祖先元素，B是A的后代元素
兄弟：若A和B有同一个父级元素，A和B互为兄弟关系

文档树

元素分类：

可替换元素：元素内容由属性值决定例 <img> 和<input>
不可替换元素：内容由元素内容直接展示例 <p> 和 <h1> （大部分都是不可替换元素）

编辑器：

后缀名: .html 和 .css

文档类型定义DOCTYPE

<!DOCTYPE html>

注：必须放在第一行！

功能：告诉浏览器用哪个版本（5.0）来解析HTML元素

文档声明定义：

document 文档
type 类型

DOCTYPE 所影响的渲染效果

怪异模式：ie（DOCTYPE缺失或错误）

准标准模式

标准模式：现代浏览器

文档头部head

head元素又叫文档头，是html的第一个子元素，包含所有的元数据

其中包含的元数据：title、meta、style、script ...

快速生成元素的方法：

p*3
P*3>{段落}
P*3>{$$$段落},其中$为占位符
div*3>p

CSS 层叠样式表（级联样式表）

最新版本是CSS3，注重模块化与加强了视觉体验

CSS引用

内部(内联)样式表`<style>`

缺点：页面不纯净，文件体积大，不利于网络爬虫获取信息，不利于维护，页面之间无法共享样式

优点：减少一个文件会减少一次HTTP请求

外部(外联)样式表`<link>`

优点：实现了结构和表现分离方便复用和维护分离到各自独立的文件，大幅减小html文件，从而让页面结构更容易被程序员和网络爬虫爬取读懂对搜索引擎友好，有利于页面搜索引擎排名首次被访问会被缓存到电脑上，下次访问无需加载

缺点：多一个CSS文件就多一次HTTP请求，在访问量大的网站会加重服务器的压力

行内（内嵌）样式表：使用style属性

优点：没有了样式表文件，某些情况下提升效率

缺点：使用style属性的样式效果会最强，会覆盖掉其他引用方式相同形式的效果（就近原则）

导入外部样式表

<style>@import url("某个css文件")</style>

优点：样式分离缺点：每多引用一个CSS文件就会对服务器多一次请求

CSS重置

重置的原因：为了使样式在不同的浏览器中得到统一

组织项目结构

root：
    ├─css文件夹
    │    style1.css
    │    style2.css
    │    ...
    └─img文件夹
    │    img1.jpg
    │    img2.jpg
    │    ...
    └─index1.html
    │
    └─index2.html
    │
    └─...

隐藏盒子与行内块

/* 隐藏盒子 */
aside {
    /* 不会保留元素的位置 */
    /* display: none; */
    /* 会保留元素的位置 */
    visibility: hidden;
}
/* 行内块：不会独占一行，可设宽高 */
/* 行内元素margin和padding上下不生效 */
.span3 {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: #bfa;
    /* margin-top: 100px; */
    text-align: center;
    /* 行高与高相同时文本会垂直居中 */
    line-height: 50px;
}

文本元素

h1-h6:一级标题-六级标题

strong:重要的文本（重要性）

例如：

<!-- 重要的文本 -->
    <strong>每天必须写总结</strong>

b：应突出显示的文本（文本上突出）

例如：

<!-- 应突出显示的文本 -->
<b>每天必须写总结</b>

em:强调的文本（重点强调、搜索引擎权重偏高）

例如：

<!-- 强调的文本  会增加在搜索引擎里面的权重 -->
<em>强调的文本</em>

i:应区别对待的文本 (不同的语音语调)

例如：

<!-- 应区别对待的文本 -->
    <i>应区别对待的文本</i>

blockquote:引用（大段引用，效果：自动往中间缩进）

例如：

<!-- 大段引用  效果:自动往中间缩进 -->
<blockquote>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum dolor asperiores voluptate voluptatibus, eaque blanditiis consequuntur deleniti cum, modi maiores mollitia nihil aliquid ab minima vero explicabo quidem tempora expedita?</blockquote>

q:小段引用(效果：自动添加引号)

例如：

<q>Lorem ipsum dolor sit amet consectetur adipisicing elit. </q>

cite:文献引用（效果：斜体）

例如：

<!-- 文献引用 -->
<p>这是引用于<cite>《CSS世界》</cite></p>

abbr:缩写（效果：自动添加点横线）

例如：

<abbr title="Hypertext markup language">HTML</abbr>
<!-- title属性:鼠标悬停功能 -->

pre:预格式化(应用的场景:数学公式、化学公式，效果:保留文本中的空格和回车)

例如：

<pre>
        1  2    
       +3  1
       _____
        4  3
</pre>

p:段落

一些效果：首行缩进、字体斜体效果

p {
    /* 首行缩进 */
    text-indent: 40px;
    /* padding-left: 40px; */
}

/*字体斜体效果*/
.font {
    font-style: italic
}

扩展效果

mark:高亮突出文本

例如：

<p>
    Lorem  dolor <mark>sit amet consectetur </mark>adipisicing elit.
</p>

time:写时间

span:一些灵活效果

例如1：

<p>
    <time>10:00</time>
    今日票房:<span></span>  万
</p>

例如2：

<input type="text">
<p><span>弱</span><span>中</span><span>强</span></p>

超链接

页面地址

锚点链接

使用锚点链接可以跳转到当前页面的其他指定位置: 在要跳转到的位置所在的标签中添加了id属性，并为其赋值；使用<a>标签设置锚点，href 属性值为# + id属性值。
使用锚点链接，也可以跳转到其他页面的指定位置: 与跳转到当前页面的指定位置相比，它需要在#前加上要跳转到的页面的路径。

例如：

<a href="#fi">到顶部</a><a href="#se">到中部</a><a href="#th">到底部</a>
<a href="" id="fi" style="visibility: hidden;">顶部</a>
<section>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt unde iste quas obcaecati sapiente ducimus sed, voluptatibus voluptatum ipsa facere magnam voluptates fugiat, quo velit vel impedit at provident reiciendis!</p>

</section>
<a href="#f1">到顶部</a><a href="#se">到中部</a><a href="#th">到底部</a>
<a href="" id="se">中部</a>
<section>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt unde iste quas obcaecati sapiente ducimus sed, voluptatibus voluptatum ipsa facere magnam voluptates fugiat, quo velit vel impedit at provident reiciendis!</p>
</section>
<section>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt unde iste quas obcaecati sapiente ducimus sed, voluptatibus voluptatum ipsa facere magnam voluptates fugiat, quo velit vel impedit at provident reiciendis!</p>

</section>
 <a href="#f1">到顶部</a><a href="#se">到中部</a><a href="#th">到底部</a>
 <h3 id="th">底部</h3>

功能链接

例如：

<a href="mailto:qmksty@hahahahahaha.com">给我发邮件</a>
<a href="tel:131131131131">给我打电话</a>

路径

跳转路径

target="_self" 在当前标签页面直接打开

target="_blank" 在新的标签页打开

例如：

<a href="./test.html" target="_self">超链接1</a>
<a href="./test.html" target="_blank">超链接2</a>

相对路径与绝对路径

相对路径

./ 当前路径(可省略不写)

../ 跳出当前文件夹

/ 进入下一级文件夹

绝对路径

协议//域名/目录

使用场景:一般站外资源

例如:http://meyerweb.com/eric/tools/css/reset/reset.css

两种路径的对比

站外资源:绝对路径
站内资源:

绝对路径:网站已经部署,可省略协议和域名

相对路径:推荐

编码特殊字符

常见的实体字符:

空格

小于符号 < <

大于符号 > >

并且符号 & &

版权符号 © ©

注册符号 ®

<!-- 空格 -->
<p>&nbsp;</p>
<p>&#160;</p>

<!-- 小于符号 -->
<p>&lt;</p>
<p>&#60;</p>

<!-- 大于符号 -->
<p>&gt;</p>
<p>&#62;</p>

<!-- 并且符号 -->
<p>&amp;</p>
<p>&#38;</p>

<!-- 版权符号 -->
<p>&copy;</p>
<p>&#169;</p>

<!-- 注册符号 -->
<p>&reg;;</p>

角标

sup:上标

sub:下标

<!-- 上标 -->
<p>哈哈哈<sup>&copy;</sup></p>
<!-- 下标 -->
<p>哈哈哈<sub>&reg;</sub></p>

伪类选择器

子元素伪类选择器

第一个子元素:first-child

/* 选中父元素的第一个子元素 */
article > p:first-child {
    color: crimson;
}

/* 第一个子元素 */
p:first-child {
    color: crimson;
}

最后一个子元素:last-child

/* 选中父元素的最后一个子元素 */
p:last-child {
    color: chartreuse;
}

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

可填元素:

具体数字　ｎ的范围从０开始

an+b(a和b为具体数字)

odd(奇数 2n+1) 和even(偶数 2n)

/* 选中父元素的第3个子元素 */
p:nth-child(3) {
    font-weight: bold;
}
/*选中父元素的第3n+1个元素*/
article>p:nth-child(3n+1) {
    font-size:60px ;
}
p:nth-child(odd) {
    background-color: cadetblue;
}

同类型元素伪类选择器

:first-of-type

:last-of-type

:nth-of-type( )

这几个伪类的功能和上述子元素伪类选择器类似,不同点是它们是在同类元素中进行比较

aside >p:nth-of-type(odd) {
    font-size: x-large;
    font-style: italic
}
p:nth-of-type(2n) {
    background-color: red;
}

否定伪类选择器

-not()否定伪类:将符合条件的元素从选择器去除

/* 除了第4个其他的元素加颜色 */
aside>p:not(:nth-child(4)) {
    color: rgb(216, 214, 69);
}

一些方向选择

负方向选择

/* 负方向选择:前3个 */
article>p:nth-child(-n+3) {
    font-size: 100px;
}

正方向选择

/* 正方向选择: 第7个到最后*/
article>p:nth-child(n+7) {
    background-color: black;
    font-style: italic;
}

限制范围交集

/*选择第3到第6个(交集)  */
article>p:nth-child(-n+6):nth-child(n+3) {
    background-color: deeppink;
}

选择列表中的倒数第n个标签 :nth-last-child(n)

/*选择倒数第三个元素*/
article>p:nth-last-child(3) {
    background-color: black;
    font-style: italic;
}

a标签伪类选择器

:link

未访问的时的颜色

当href属性有值时才会有效

例如

a:link {
    color: chartreuse;
}

:visited

访问后的效果

例如

a:visited {
    color: fuchsia;
}

:hover 可以用在其他元素

鼠标移入，悬停效果

例如

a:hover {
   color: darkred; 
}

:active

鼠标点击时的效果

例如

a:active {
    color: rgb(138, 100, 119);
}

`text-decoration`:修饰文本

属性值：

none

underline :下划线

例如

a:link {
    color: chartreuse;
    /* 底划线 */
    text-decoration: underline;
}

overline :上划线

例如

a:visited {
    color: fuchsia;
    /* 上划线 */
    text-decoration: overline;
}

line-through :中划线(删除线)

例如

a:hover {
   color: darkred; 
   /* 中划线  删除线*/
   text-decoration: line-through;
}

类似的效果<del></del>

例如

<del>s88888</del>

blink:闪烁的文本

inherit:规定应该从父元素继承text-decoration

`:hover`的其他应用

样式过渡

article {
    width: 100px;
    height: 100px;
    background-color: blue;
}
article:hover {
    width: 200px;
    background-color: aqua;
    /* 两秒内匀速变化样式 */
    transition: linear 2s;
}

隐藏盒展示

aside {
    width: 100px;
    height: 100px;
    border: 2px solid black;
}
strong {
    display: none;
}
aside:hover strong {
    display: block;
}

文本标签的一些属性

`direction`:文本书写开始的位置

ltr:从左往右(默认)

h1 {
    direction:ltr;
}

rtl:从右往左

h1 {
    direction:rtl;
}

`text-transform`

lowercase:转换成小写字母

h1 {
    text-transform: lowercase;
}

uppercase:转换成大写字母

h1 {
    text-transform: uppercase;
}

capitalize首字母大写

h1 {
    text-transform: capitalize;
}

`word-spacing`

调间距,以空格区分字与字,推荐中文使用

h1 {
	 word-spacing: 20px;
}

`letter-spacing`

字间距

h1 {
	 letter-spacing: 20px;
}

长度单位

相对单位1

px像素

-屏幕（显示器）实际上是由一个个像素构成的

-不同屏幕的像素大小实际不同，像素越小的屏幕显示的效果越清晰

-所以同样的200px在不同的设备下显示的效果不一样

相对单位2

em(font size of the element)

-em是当前标签相对于字体大小的倍数来计算的（不写就是相对于其父元素的字体大小--继承）

-1em = 1font-size（默认16px）

-em会根据字体大小的改变而改变（）

rem（font size of the root element）

-rem是相对于根元素的字体大小的倍数来计算

%百分比-->

-也可以将属性值设置为相对于其父元素属性的百分比(content的width)

-设置百分比可以使子元素跟随父元素的改变而改变 vw 相对于视口的宽 vh 相对于视口的高

子盒子

content-box内容盒：content

padding-box填充盒：content+padding

border-box边框盒：content+padding+border

设置尺寸（宽、高）覆盖的区域

box-sizing的取值content-box、border-box

默认：box-sizing: content-box;

width = content的宽

IE盒子计算宽高：box-sizing: border-box;

width = content的宽 + 左右两边的padding + 左右两边的border

背景渲染的区域(`backgroup-clip`--剪切、`background-origin` -- 背景图渲染的起始位置)

渲染的效果默认是从border开始的，但可以更改

边框盒(默认值):background-clip: border-box;

内容盒:background-clip: content-box;

填充盒:background-clip: padding-box;

例如

.qita {
    /* 渲染的效果是从border开始的，但可以更改 */
    width: 400px;
    height: 400px;
    padding: 20px;
    background-color: chocolate;
    border-style: dashed;
    border-width: 10px;
    /* 边框盒（默认值） */
    background-clip: border-box;
    /* 内容盒 */
    background-clip: content-box;
    /* 内边距开始 */
    background-clip: padding-box;
}

.box3 {
    margin: 20px;
    width: 160px;
    height: 220px;
    background-repeat: no-repeat;
    padding: 30px;
    border: 1px solid red;
    background-image: url("../IMG/test.jpg");
    background-clip: content-box;
    background-origin: content-box;
}

圆角(`border-radius`)

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

div {
    border-top-left-radius:20px ;
	border-top-right-radius:50% ;
	border-bottom-left-radius:40px ;
	border-bottom-right-radius: 20%;
    /*第一个值为横向值，第二个值为纵向值 */
    border-bottom-left-radius:20px 50px; 
}

border-radius 可以分别指定四个方向的圆角(可画出不规则的圆弧)

四个值：左上右上右下左下
三个值：左上右上/左下右下
两个值：左上/右下右上/左下

div {
    border-radius: 10px 20px 30px 40px;
    /* 第一个数是水平方向的半径，第二个值是垂直方向上的半径*/
    border-radius: 20px / 40px ;
}

画半圆（2:1）

.yrjc {
    width: 400px;
    height: 200px;
    /* border: 2px; */
    /* border-style: solid; */
    background-color: #bfa;
    border-radius: 200px  200px 0 0;
}

边框的其他应用

画三角形

.triangle {
    width: 0px;
    height: 0px;
    border-color: red orange green blue;
    /* 把一些方向搞成透明色 可以做三角形 */
    border-color: transparent blue transparent transparent;
    border-style: solid;
    border-width: 100px;
}

前端学习-初级-第一周

HTML和CSS概述

HTML

标签

语义化标签

CSS

css语法

选择器

层次选择器

伪类选择器

动态伪类选择器

结构伪类选择器

否定伪类选择器

属性选择器

伪元素选择器

取类名规则

id 规则

一些命名方法

display属性介绍

盒模型

flex

容器和项目

主轴与交叉轴

创建弹性布局

换行

不换行

主轴方向布局

交叉轴方向布局

雪碧图（图片拼合技术）

HTML的发展历史

html5中的变化

标签的变化：

语法的变化：

HTML相关术语

单标记（空元素、自结束标记）

元素关系：

文档树

元素分类：

编辑器：

文档类型定义DOCTYPE

DOCTYPE 所影响的渲染效果

CSS 层叠样式表 （级联样式表）

CSS引用

内部(内联)样式表<style>

外部(外联)样式表<link>

行内（内嵌）样式表 ：使用style属性

导入外部样式表

CSS重置

组织项目结构

隐藏盒子 与 行内块

文本元素

超链接

页面地址

锚点链接

功能链接

路径

跳转路径

target="_self" 在当前标签页面直接打开

target="_blank" 在新的标签页打开

相对路径与绝对路径

相对路径

绝对路径

两种路径的对比

编码特殊字符

角标

伪类选择器

子元素伪类选择器

同类型元素伪类选择器

否定伪类选择器

一些方向选择

a标签伪类选择器

text-decoration:修饰文本

:hover的其他应用

文本标签的一些属性

direction:文本书写开始的位置

text-transform

word-spacing

letter-spacing

长度单位

相对单位1

`display`属性介绍

CSS 层叠样式表（级联样式表）

内部(内联)样式表`<style>`

外部(外联)样式表`<link>`

行内（内嵌）样式表：使用style属性

隐藏盒子与行内块

`text-decoration`:修饰文本

`:hover`的其他应用

`direction`:文本书写开始的位置

`text-transform`

`word-spacing`

`letter-spacing`

背景渲染的区域(`backgroup-clip`--剪切、`background-origin` -- 背景图渲染的起始位置)

圆角(`border-radius`)