前端html+css笔记（上）

前端

VScode

自动换行（word wrap）

ctrl + s 保存

ctrl + a 全选

ctrl + x ，ctrl + c , ctrl +v 剪切、复制、粘贴

ctrl + z 、ctrl + v 撤销、前进

shift + end 从头选中一行

shift + home 从尾部选中一行

shift +alt + ↓ 快速复制一行

alt + ↑ 或者 ↓ 快速移动一行

多光标：alt +鼠标左键

ctrl +D :选取相同元素的下一个

网站开发

1、UI设计师（设计稿）

2、web前端（h5）

设计稿-> 代码

数据库里面的数据 ->显示到页面

HTML+CSS

html ：结构

css：样式

3、web后端

web前端的三大核心技术

html
css
JavaScrip

HTML

html基础结构与属性

超文本标记语言（HyperText Markup Language）,标准通用标记语言下的一个应用。是网页制作必备的编程语言。

html :超文本标记语言
超文本：文本内容，非文本内容（图片视频音频等）
标记，标签：<header> <footer>
写法分成两种：
1. 单标签 <header>
2. 双标签 <header><header>
创建标签的快捷键:单词+ tab
标签可以上下排列，也可以组合嵌套。
HTML常见标签
标签的属性：来修饰标签的，设置当前标签的一些功能。
<标签属性= "值" 属性2="值2">

HTML初始代码

每个.html文件都有的代码叫做初始代码，要复合html文件的规范写法。
！+ tab键：快速创建html的初始代码

    <!DOCTYPE html>         文档声明： （告诉浏览器这是一个html文件）
    <html lang="en">        html的最外层标签：包裹着所有的html标签代码  lang = "en" 表示是一个英文网站 lang = "zh-CN"表示是一个中午网站
        <head>
            <meta charset="UTF-8">      元信息：是编写网页中的一些赋值信息,charset = "UTF-8"国际编码，让网页不出现乱码的情况

            <title>Document</title>
        </head>
    <body>
        显示网页内容的区域
    </body>
    </html>

HTML注释

写法：在浏览器中看不到，只能在代码中看到注释的内容

意义：
1、把暂时不用的代码注释起来，方便以后使用
2、对开发人员进行提示
快捷添加与删除注释：
ctrl+/

HTML语义化

指的是，根据网页中内容的结构，选择适合的html的标签进行

好处：
1、没有css的情况下，页面也能呈现很好的内容结构。
2、有利于seo，让搜索引擎爬虫更好的理解网页。
3、方便其他设备解析（如屏幕阅读器，盲人阅读器）。
4、便于团队开发与维护。

标题与段落

标题 -> 双标签 : <h1></h1>...<h6></h6>
在一个网页中，h1标题最重要，并且一个html文件中只能有一个h1标签
h5、h6标签在网页中不经常使用
段落 -> 双标签：<p></p>

文本修饰标签

强调 -> 双标签：
<strong></strong>、<em></em>
区别：
1、写法和展示效果是有区别，一个加粗，一个斜体
2、strong的强调性更强，em的强调性稍弱
下标： <sub>
上标: <sup>

删除文本：<del></del>
插入文本：<ins></ins>
注：删除文本一般和插入文本配合使用

图片标签和图片属性

img -> 单标签
src ：引入图片的地址
alt ：当图片出现问题的时候，可以显示一段友好的文字
title : 提示信息
width、height ：图片的大小

引入文件的地址路径

相对路径
.在路径中表示当前路径
..在路径中表示上一级路径
绝对路径

跳转链接

a -> 双标签 <a></a>
href属性：链接的地址
target属性 : 可以改变链接打开的方式，默认情况下：在当前页面打开_self 新窗口打开_blank

base -> 单标签：作用就是改变链接的默认行为

练习：
分别建立一个首页、列表页、详情页
并让他们之间实现相互跳转
每个页面至少包含一张图片
图片在images文件夹内
列表和详情页在html文件夹内，首页在根目录下

跳转锚点

实现一
#号
id属性
实现二
#号
name属性 (注意name属性加给的是a标签)

特殊符号

1、&+字符
2、解决冲突左右尖括号、添加多个空格的实现
3、&lt,&gt,&nbsp

列表

无序列表->ul li 符合嵌套的规范
<ul><li></li></ul>
type属性：改变前面标记的样式（一般都是用CSS去控制）
www.w3school.com.cn/tags/att+ul_type.asp
有序列表
<ol>、<li>列表的最外层容器、列表项
注：有序列表用的非常少，经常用得是无序列表，无序列表可以代替有序列表
type属性：改变前面标记的样式（一般都是用CSS去控制）
www.w3school.com.cn/tags/att+ol_type.asp
定义列表

列表项需要添加标题和对标题进行描述的内容
<dl> 定义列表
<dt> 定义专业术语或名词
<dd> 对名词进行解释和描述

嵌套列表

列表之间可以相互嵌套形成多层级列表，形成多层级的列表

表格

表格标签
<table> 表格的最外层容器
<tr> 定义表格行
<th> 定义表头
<td> 定义表格单元
<caption> 定义表格标题
注：之间是有嵌套关系的，要复合嵌套规范。
语义化标签<tHead>、<tBody>、<tFood>
注：在一个table中tBody是可以出现多次的，但是tHead、tFood只能出现一次。
表格属性
border 表格边框
cellpadding 单元格内的空间
cellspacing 单元格之间的空间
rowspan 合并行
colspan 合并列
align 左右对齐形式 left 、center 、right
valign 上下对齐形式 top middle bottom

表单

<form> : 表单的最外层容器
<input> :标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。
input(单标签)标签有一个type属性，决定是什么控件。

<textarea> 多行文本框
<select>、<option> 下拉菜单
<label> 辅助表单
还有一些常见的属性：
checked、disabled、name......

表格表单

<div>与<span>

div(块)：做一个区域划分的块
div全称division，“分割、分区”的意思，<div>标签用来划分一个区域，相当于多一块区域容器，可以容纳段落、标题、表格、图像等各自网页元素。即HTML中大多数的标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
span(内联)：对文字进行修饰，内联
用来修饰文字的，div和span都是没有任何默认格式的，需要配合CSS才行。

CSS

CSS基础语法

格式：
选择器{属性1：值1；属性2：值2}
单位：
1、px ->像素(pixel)
2、% -> 百分比
外容器 -> 600px 当前容器 50% -> 300px
基本样式：
width(宽)、height(高)、background-color(背景色)

CSS 注释：
/" CSS注释的内容 "/

CSS样式的引入方式

1、内联样式
style属性
2、内部样式
style标签

注：内部样式的优点在于可以复用代码

区别：内部样式的代码可以复用、复合W3C的规范标准，尽量让结构和样式分开处理。

3、外部方式
引入一个单独的CSS文件，name.css
1、<link>标签(引入外部资源)
rel：rel属性指定资源跟页面的关系
href:href属性引入外部资源的地址
2、@import(了解)
这种方式有很多问题，不建议使用

CSS中的颜色表示法

1、单词表示法：red , blue , green , yellow
2、十六进制表示法：#000000 #ffffff
0 1 2 3 4 5 6 7 8 9
0 1 10 11
0 1 2 3 4 5 6 7 8 9 a b c d e f
3、RGB三原色表示法(red green blue):
rgb(255,255,255)
取值范围0-255

获取颜色的工具
提取颜色的下载地址："http://www.baidufe.com/fehelper"
photoshop取色

CSS背景样式

background-color 背景色
background-image 背景图
url(背景地址)
默认：会水平垂直铺满背景图
background-repeat 平铺方式
repeat-x(x轴平铺)
repeat-y(y轴平铺)
repeat(x,y都进行平铺，默认值)
no-repeat(都不平铺)
background-position:背景位置
x,y:number(px,%)|单词
x:left、center、right
y:top、center、bottom
background-attachment:背景图随滚动条移动的方式
scroll:默认值(背景位置是按照当前元素进行偏移的)背景图像会随着页面其余部分的滚动而移动
fixed:(背景位置是按照浏览器偏移的)当页面的其余部分滚动时，背景图像不会移动。
用背景图fixed方法造成视觉差的原因是两个背景图是有一部分重叠，在我们向下滑动浏览器的时候，背景图相对浏览器向上运动，我们看到浏览器的div块也在相对运动，所以会显示上一张图的下半部分慢慢隐没，下张图的从下到上依次显现。
相当于是用两个摄像机分别相对于两张图片向上运动，两个摄像机获取的图像的两部分拼凑成了视觉差效果

CSS边框样式

border-style:边框样式
solid：实现
dashed：虚线
dotted：点线
border-width:边框大小
border-color:边框颜色
red #foo...
边框也可以针对某一条边进行单独设置：border-left-style:中间是left,right,top,bottom

练习：利用边框实现三角形
颜色：透明颜色 transparent

CSS文字类型

font-family:字体类型
英文字体：Arial,'Times New Roman'
中文字体：微软雅黑(Microsoft TaHei)、宋体(SimSun)
衬线体与非衬线体
注意点：
1. 多个字体类型的设置目的(依次兼容)
2. 引号添加的目的(有些字体名称带空格的就要加引号)
font-size:字体大小(一般设置偶数像素)
默认值(16px)
写法:number(px)|单词(small large 不推荐使用)

属性取值	字体大小
xx-small	最小
x-sm	较小
small	小
medium	正常(默认值)
large	大
x-large	较大
xx-large	最大

font-weight:字体粗细
模式：正常(normal) 加粗(bold)
写法: 单词(normal、bold) | 数值(100-900,100-500都是normal，500-900都是bold)
font-style:字体样式
模式:正常(normal) | 斜体(italic)
写法:单词(bold、italic)
注:oblique也是表示斜体，用的比较少，一般了解即可
区别:
1、italic 带有倾斜属性的字体可以设置
2、oblique 没有倾斜属性的字体也可以设置倾斜操作
color:字体颜色
text-align: 字体居中

CSS段落样式

text-decoration:文本装饰
下划线:underline
删除线:line-through
上划线:overline
不添加任何装饰:none
注：添加多个文本修饰:line-through underline overline

text-transform:文本大小写(针对英文段落)
小写：lowercase
大小：uppercase
只针对首字母大写:capitalize

text-indent:文本缩进
首行缩进
em单位:相对单位，1em永远都是跟字体相同
text-indent:2em

text-align:文本对齐方式
对齐方式:left、right、center、justify(两端点对齐)

line-height:定义行高

什么是行高，一行文字的高度，上边距和下边距的等价关系
默认行高：不是固定值，而是变化的。根据当前字体的大小在不断的变化

取值：1.number(px) | scale(比例值，跟文字大小成比例的)
line-height:20px/200%

letter-spacing:字之间的间距,英文单词每个字母的间距
letter-spacing:10px

word-spacing:词之间的间距(只针对英文段落间距，中文没关系)
word-spacing:10px

强制折行:(针对英文和数字不自动折行的问题)
1、word-break:break-all(非常强烈的折行)
word-break:break-all
2、word-wrap:break-word(不是非常强烈的折行，会产生一些空白区域)
word-wrap:break-word

CSS复合样式

一个CSS属性只控制一种样式叫做单一样式
一个CSS属性控制多种样式，叫做复合样式

复合的写法，是通过空格的方式实现的。复合写法有的是不需要关心顺序的，例如background、border；有的是需要关心顺序的，例如font。

background:red url() repeat 0 0;
border:1px red solid;
font:
- 注：最少有两个值size family且这两个值的顺序不能改变
  - weight style size family √
  - style weight size family √
  - weight style size/line-height family √
- 注：尽量不要混写，如果非要混写，那么一定要先写复合样式，再写单一样式，这样样式才不会被覆盖掉。

CSS选择器

ID选择器
#elem{} id ="elem"
快捷方式：div#id_name + tab
注意：
1. ID是唯一值，在一个页面中只能出现一次，出现多次是不规范的写法。
2. 命名的规范，由字母、下划线、中划线、字母（并且第一个不能是数字）
3. 写法
  - 驼峰写法：searchButton(小驼峰) SearchButton(大驼峰)
  - 下划线写法：search_small_SearchButton
  - 短线写法：search-small-SearchButton
    CSS_id的命名：
    (1)页面结构
    容器：container
    页头：header
    内容：content/container
    页面主题：main
    页尾：footer
    导航：nav
    侧栏：sidebar
    栏目：column
    页面外围控制整体布局宽度：wrapper
    左右中：left right center
    (2)导航
    导航：nav
    主导航：mainbav
    子导航：subnav
    顶导航：topnav
    边导航：sidebar
    左导航: leftbar
    右导航: rightsidebar
    菜单:menu
    子菜单:submenu
    标题:title
    摘要:summary
    (3)功能
    标志:logo
    广告:banner
    登录:login
    登录条:loginbar
    注册:register
    搜索:search
    功能区:shop
    标题:title
    加入:joinus
    状态:status
    按钮:btn
    滚动:scoll
    标签页:tab
    文章列表:list
    提示信息:msg
    当前的:current
    小技巧:tips
    图标:icon
    注释:note
    指南:guild
    服务:service
    热点:hot
    新闻:news
    下载:download
    投票:vote
    合作伙伴:partner
    友情链接:link
CLASS选择器
.elem{} class="elem"
快捷方式：div.class_name + tab
注：
1. class选择器是可以复用的。
2. 可以添加多个class样式。
3. 多个样式的时候，样式的优先级根据CSS决定，而不是根据class属性中的顺序。
4. 标签+类的写法。 p.box{background:red;}只把p标签的box类的背景改成了红色。
标签选择器(TAG选择器)
css:div{}
html:<div></div>
使用的场景：
- 去掉某些标签的默认样式时。
- 复杂的选择器中，如：层次选择器。
群组选择器(分组选择器)
可以通过逗号的方式，给多个不同的选择器添加CSS样式，来达到代码的复用。
语法：选择器1，选择器2，选择器n{}

复合选择器(交集选择器)
作用：选择更准确更精细的目标元素并为其设置属性
语法：选择器1选择器2选择器n{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p2,.p3{background-color: yellow;}
        span.p3{font-size: 20px;}
    </style>
</head>
<body>
    <p id="p1">yellow</p>
    <p class="p2">yellow</p>
    <p class="p3">yellow</p>
    <span class="p3">我的字体大小为20px,我的背景也是黄色的</span>
    
</body>
</html>

通配选择器
作用：用来选择页面中所有的元素
语法：*{}
注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用
使用的场景：去掉所有标签的默认样式时
```
    <style type="text/csss">
        *{color: pink;}
    </style>
    
```

后代元素选择器
作用；选中指定元素的指定后代元素
语法：祖先元素后代元素{}

<style type="text/css">
div span{color: red;}
</style>
<div>
<span>我是红色的</span><p><span>我也是红色的</span></p>
</div>

子元素选择器
作用：选中指定父元素的子元素
语法：父元素>子元素

    <style>
        ul>li{color: pink;}
    </style>

        <ul>
        <li>我是粉色的</li>
        <li>我是粉色的</li>
        <li>我是粉色的</li>
        <li>我是粉色的</li>
    </ul>

伪类选择器

伪类表示元素的一种特殊状态
常用的伪类选择器：
:link 访问前的样式
:hover 鼠标移入时元素的状态
:visited 已被访问过后的元素的状态
:active 被鼠标点击时元素的状态
注:
- link、visited只能给a标签加状态，hover、active可以添加给所有标签样式。
- 如果四个伪类都生效，一定要注意顺序:L V H A。
- 一般网站只设置:a{}(link visited active) a:hover{}
```
<style>
a:hover{background-color: pink;}
</style>
<a href="#">鼠标移入我时，我的背景颜色变为粉色</a>
```
after等伪类选择器：
:after，:before通过伪类的方式给元素添加一个文本内容。
:checked :disabled :focus都是针对表单元素的

结构性伪类选择器：
nth-of-type() nth-child()
角标是从1开始的，1表示第一项，2表示第二项| n值表示0从无穷大
first-of-type() last-of-type() only-of-type()
nth-of-type()和nth-child的区别
属性选择器
作用：根据元素中的属性或者属性值来选取指定元素
语法：
[属性名]选取含有指定属性的元素
[属性名^="属性值"]选取属性值以指定内容开头的元素
[属性名$="属性值"]选取属性值以指定内容结尾的元素
[属性名*="属性值"]选取属性值包含指定内容的元素
```
<style>
/* 把所有title属性值中包含bc的p标签设置为红色 */
p[title*="bc"]{color: red;}
/* 把title属性值为abc的p标签设置一个黄色背景 */
p[title="abc"]{background-color: yellow;}
</style>


<p title="abc">我是红色的，背景为黄色</p>
<p title="bcd">我是红色的</p>
```

兄弟元素选择器
+选择器
作用：选中一个元素后紧挨着的指定的兄弟元素
语法：前一个+后一个（作用在后一个）
~选择器
作用：选中后边所有的指定兄弟元素
语法：前一个~后边所有

<style>
/* 选中span后面的第一个p标签 */
/* 若span后面的第一个元素不是p标签，则这个选择器不起作用 */
span+p{color: pink;}
span~p{background-color: grey;}
</style>

<p>单纯的p标签</p>
<p>单纯的p标签</p>
<p>单纯的p标签</p>
<span>单纯的span</span>
<p>我是粉色的，背景是灰色的</p>
<p>我的背景是灰色的</p>
<p>我的背景是灰色的</p>

CSS样式继承

文字相关的样式可以被继承。
布局相关的样式不能被继承。(默认是不能继承的，但是可以设置继承属性)

CSS优先级

相同样式优先级：
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。
内部样式和外部样式：
内部样式和外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高.

单一样式优先级：
style行间>id>class>tag>*>继承
注：
style行间权重 1000
id 权重 100
class 权重 10
tag 权重 1

 <style>
 #elem{color: red;}
 .box{color: blue;}
 div{color: greenyellow;}
 *{color: red;}
 body{color: blue;}
 <\style>


 <div id="elem" class="box">这是一个块</div>

 <div id="elem" style="color: blue;">这是一个块</div>

！important:
提升样式的优先级，非规范方式，不建议使用。(不能对继承的属性进行优先级的提升)

  <style>
  #elem{color: red ;}
  *{color: green ;}
  body{color:  grey !important;} 

 <div id="elem" style="color: blue;">这是一个块</div>

标签+类与单类
标签+类 > 单类

  <style>
  .box{color: red;}
  div.box{color: blue;}

  <div class="box">
  这是一个坑
  </div>

群组选择器：
群组优先级与单一选择器的优先级相同，靠后写的优先级高。

  <style>
  div{color: blue;}
  div,p{color: red;} 

  <div class="box">这是一个坑</div>
  <p>这是一个段落</p>

层次优先级
1. 权重比较
  ul li .box p input{} 1+1+10+1+1
  .hello span #elem{} 10+1+100
2. 约分比较
  ul li .box p input{} -> li+p+ input{}
  .hello span #elem{} ->#elem

CSS盒子模型

组成：content->padding->border->margin（物品->填充物->包装盒->盒子与盒子之间的间距）

contend: 内容区域 width和height组成的
pandding：内边距(内填充)
只写一个值 number：30px(上下左右)
写两个值 :30px 40px(上下、左右)
写四个值 :30px 40px 50px 60px(上右下左)
单一样式只能写一个值：
padding-left
padding-right
padding-top
padding-bottom
margin:外间距(外填充)
只写一个值:30px(上下左右)
写两个值:30px 40px (上下、左右)
写四个值:30px 40px 50px 60px(上右下左)
单一样式只能写一个值：
margin-left
margin-right
margin-top
margin-bottom
注：
1. 背景色填充到margin以内的区域(不包括margin区域)
2. 文字在content区域添加
3. padding不能为负数，而margin可以为负数。

box-sizing
盒子尺寸,可以改变盒子模型的展示形态
box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。
默认值:
content-box: width、height->content
border-box: width、height->content、padding、border
border
使用的场景:
1. 不用再去计算一些值
2. 解决一些100%的问题

盒子模型的一些问题：

margin叠加：
出现在上下margin同时存在的时候。会取上下中值较大的作为叠加的值。这个问题只有上下有，左右是没有问题的。
解决方法：
1. BFC规范
2. 想办法只给一个元素添加间距
margin传递:
margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递问题的。
解决方法：
1. BFC规范
2. 给父容器加边框
3. margin换成padding
margin自适应居中:
margin左右自适应是可以的，但是上下自适应是不行的。(如果想实现上下自适应的话，需要在第二大部分来进行学习)
```
#box{width: 400px;height: 100px;background:red;margin-left: auto;margin-right: auto;}
```
不设置content的一些情况:
width、height不设置的时候，对盒子模型的影响：会自动去计算容器的大小，节省代码。

CSS标签分类

按类型：
block：（块）div,p,ul,li,h1
1. 独占一行
2. 支持所有样式
3. 不写宽的时候，跟父元素的宽相同
4. 所占的区域是一个矩形
inline：span,a,em,strong,img...
1. 挨在一起的
2. 有些样式不支持，height，width，margin，padding
3. 不写宽的时候，宽度由内容决定
4. 所占的区域不一定是矩形
5. 内联标签之间会有空隙，原因：换行产生的（不换行就没有空隙）
inline-block：input,select...
1. 挨在一起，但是支持宽高
注：布局一般块标签，修饰文本用内联标签。

按内容：（按内容分类详情查询）
Flow：流内容
Metadata：元数据
Section：分区
Heading：标题
Phrasing：措辞
Embedded：嵌入的
Interactive：互动的

按显示：
替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。
img,input......
非替换元素：将内容直接告诉浏览器，将其显示出来。
div,h1,p......

显示框类型

display：block，inline，inline-block，none
注意:display:none(不占空间的隐藏)与visibility：hidden(占空间的隐藏)区别

标签嵌套规范

ul、li
dl、dt、dd
table、tr、td

块标签可以嵌套内联标签

块标签不一定能嵌套块标签（p标签不能嵌套）

内联标签不能嵌套块标签

<!-- 块能嵌套内联 -->
<div>
    <span></span>
    <a href="#"></a>
</div>
<!-- 块嵌套块 -->
<div>
    <div></div>
</div>
<!-- p标签不能嵌套，下面的写法是错误的 -->
<p>
    <div></div>
</p>

<!-- 内联标签不能嵌套块标签 -->
<!-- 错误的写法 -->
<span>
    <div></div>
</span>

<!-- 特殊(a标签嵌套块)正确的写法 -->
<!-- 给一个区域加超链接 -->
<a href="#">
    <div></div>
</a>

溢出隐藏

overflow：visible（默认），hidden，scoll，auto，x、y轴(overflow-x,overflow-y针对两个轴分别设置)

透明度和手势

opacity（占空间）：0（透明）~1（不透明），0.5（半透明）

注：占空间、所有的子内容也会透明

rgba:0~1

注：可以让指定的样式透明，而不影响其他样式

cursor:手势

default：箭头

要实现自定义手势：

准备图片（图片格式）：.cur、.ico

cursor:url(./img/cursor.ico),auto

最大、最小宽高

min-width、max-width、min-height、max-height

%单位：换算->以父容器的大小进行换算

一个容器怎么适应屏幕的高：容器加height：100%，body：100%，html：100%

html,body{height:100%}

.contrainr{height:100%;}(子容器)

注：强化对百分比单位的理解

CSS默认样式

有些标签有默认样式，有些标签没有默认样式。

没有默认样式：div、span、......

有默认样式：body、h1...h6、p、ul、...

body->margin:8px

h1 ->margin:上下 21.440px;font-weight:bold

p ->margin:上下 16px

ul ->margin:上下 16px padding:左 40px；默认点：list-style:disc

a ->text-decoration:underline;

CSS reset（场景的reset写法）

简单的CSS reset：

*{margin:0;padding:0;}

优点：不用考虑哪些标签有默认的margin和padding

缺点：稍微地影响性能

ul{list-style:none;}

a{text-decoration:none;color:#999;}

a:hover{text-decoration:underline;color:red;} #鼠标移入的时候显示的样式

问题的现象(图片跟容器底部有一些空隙。内联元素的对齐方式是按照文字基线对齐的，而不是文字底线相关的)

img{display:block;} 转成块
img{vertical:bottom;} 设置底线对齐

写具体页面或一个布局效果的时候：

写结构
CSS重置样式
写具体样式

Photoshop工具（72-77）

pass

float浮动

文档流：文档流是文档中可显示对象在排列时所占用的位置。

float特性：加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。

float取值：left、right、none(默认)

背景（第一层）

float（第二层）注意点：

只会影响后面的元素。
内容默认提升半层（文字等）。
默认宽根据内容决定。
换行排列。
主要给块元素添加，但也可以给内联元素添加。

如何清楚浮动？

上下排列：clear属性，表示清除浮动的，left、right、both

<style>
#box1{width: 100px;height: 100px;background: red;float: left;}
/* 清除浮动 */
#box2{width: 200px;height: 200px;background: blue;clear: both;}
</style>

<div id="box1"></div>
<div id="box2"></div>

嵌套排列

固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果

父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素

overflow：hidden（BFC规范），如果有子元素想溢出，那么会受到影响。

display：inline-block（BFC）规范，不推荐，父容器会影响到后面的元素。

设置空标签：不推荐，会多添加一个标签。

after伪类：推荐，是空标签的加强版，目前各大公司的做法。

注意：(clear)属性只会操作块标签，对内联标签不起作用

<style>
   #box1{width: 200px;border: 1px black solid;}
   #box2{width: 100px;height: 200px;background: red;float: left;}
   .clear:after{content: '';clear: both;display: block;}
</style>

<div id="box1" class="clear">
  <div id="box2"></div>
</div>

position定位

position特性：CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则决定了该元素的最终位置。

position取值

static
relative

相对定位：
- 如果没有定位偏移量，对元素本身没有任何影响
- 不使元素脱离文档流
- 不影响其他元素布局
- left、top、right、bottom是相对于当前元素自身进行偏移的
absolute

绝对定位：
- 使元素完全脱离文档流；
- 使内联元素支持宽高（让内联具备块特性）；
- 使块元素默认宽根据内容决定(让块具备内联的特性)
- 如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）
fixed

固定定位：
- 使元素完全脱离文档流
- 使内联元素支持宽高(让内联具备块特性)
- 使块元素默认宽根据内容决定（让块具备内联的特性）
- 相对整个浏览器窗口进行偏移，不受浏览器滚动条的影响
sticky

黏性定位：在指定的位置，进行黏性操作。

z-index定位层级

CSS添加省略号

width 必须有一个固定的宽

white-space 不让内容折行

overflow：hidden 隐藏溢出的内容

text-overflow:ellipsis 添加省略号

CSS Sprite

特性：CSS雪碧也叫作CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。

优点：可以减少图片的质量，网页的图片加载速度快；可以减少图片的请求的次数，加快网页的打开

CSS圆角

border-radius:给标签添加圆角

PC端的布局

通栏：自适应浏览器的宽度
版心：固定一个宽度，并且让容器居中

PC端网页(游戏)制作(92-109)

pass

HTML和CSS发展历史(110)

pass

HTML和XHTML区别(111)

pass

引用标签(112)

pass

iframe嵌套页面

iframe元素会创建包含另外一个文档的内联框架(即行内框架)

表头	含义
frameborder	规定是否显示框架周围的边框
width	定义iframe的高度
scrolling	规定是否在iframe中显示滚动条
src	规定在iframe中引入的url
srcdoc	规定在iframe中显示的页面内容

应用场景：数据传输（JS）、共享代码（页面局部共享，只更改需要改变的部分）、局部刷新（利用JS只刷新iframe）、第三方介入(广告)等

br标签与wbr标签

br表示换行，wbr表示软换行（挤一部分下来进行换行）

pre与code标签

pre元素可定义预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。

只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用code标签。虽然code标签通常只是把文本变成等宽字体，但是它暗示着这段文本是源程序代码。

<pre>
    <code>
        </code>
    </pre>

map与area

给特殊图形添加连接，area能添加的区域的形状：矩形、图形、多边形。

定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。

area元素的href属性定义区域的url，shape属性来定义区域的形状，coords属性定义热区的坐标。

<img src="x.jpg" alt="" usemap="#star">
<map name="star">
    
    <area shape="rect" coords="205 83 386 173" href="https://www.taobao.com" alt="">
</map>

embed和object

embed和object都表示能够嵌入一些多媒体，如flash动画、插件等。基本使用没有太多差别，主要是为了兼容不同的浏览器而已。

<embed src="x.swf" type="">

<object  >
    <param name="movie" value="x.swf">
</object>

audio和video

引入音频与视频的标签，属于h5的新功能

<audio src="./img/x.mp3" controls autoplay><audio>

<video src="x.mp4"controls></video>

<!-- source用于格式兼容，先用第一个，如果不兼容选第二个，以此类推 -->
<video>
    <source src="x.ogv">
    </source>
    <source src="x.mp4">
    </source>
</video>

文字注解与文字方向

ruby标签定义ruby注释(中文注音或字符)，rt标签定义字符（中文注音或字符）的解释或者发音。

<ruby>
    寒<rt>han</rt>冬
 </ruby>

bdo标签可覆盖默认的文本方向

<p>
    <bdo dir="ltr">爱神的箭是是是是</bdo>sadajdp 
    </p>
    <!-- 文字反向 -->
<p>
    <bdo dir="rtl">爱神的箭是是是是</bdo>sadajdp 
    </p>

<!-- 文字反向CSS实现 -->
<style>
    span{direction:rtl;unicode-bidi:bidi-override}
    </style>

思考题：古诗句排列

思路：每一列浮动靠右、宽度只能容纳一个字。就可以达到古诗从右向左一列一列排列的效果。

扩展link标签

<!-- 引入CSS样式文件 -->
<link rel="stylesheet" type="text/css" href="theme.css">
<!-- 地址栏引入一个小图标 -->
<link rel= "icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">
<!-- 引入DNS解析 -->
<!-- 域名解析是把域名指向网站空间IP，让人们通过注册的域名可以方便地访问到网站的一种服务。IP地址是网络上标识站点的数字地址，为了方便记忆，采用域名来代替IP地址标识站点地址。域名解析就是域名到IP地址的转换过程。域名的解析工作由DNS服务器完成。 -->
<link rel="dns-prefetch" href="//static.360buyimg.com">

meta标签

meta：添加一些辅助信息。

META标签是HTML标记HEAD区的一个关键标签，它位于HTML文档的<head>和<title>之间（有些也不是在<head>和<title>之间）。它提供的信息虽然用户不可见，但却是文档的最基本的元信息。<meta>除了提供文档字符集、使用语言、作者等基本信息外，还涉及对关键词和网页等级的设定。

<meta name="description" content="大连美团网精选大连美食餐厅，酒店预订，电影票，旅游景点，外卖订餐，">

<meta name="keywords" content="大连美食品，大连酒店，大连团购">

<meta name="renderer" content="webkit">

<!-- 功能性 -->

<!-- 针对ie浏览器，文件以edge的模式来渲染 -->
<meta http-equiv="X-UA-Compatible" content="ie = edge">

<!-- 3秒后刷新，跳转到url中的网页 -->
<meta http-equiv="refresh" content="3" url="">

<!-- 缓存，在规定的时间之内都会进行缓存 -->
<meta http-equiv="expires" content="Wed,20 Jun 2019 22:33:00 GMT">

html5新语义化标签

可以用来提升网站的搜索引擎曝光度

header：页眉
footer：页脚
main：主体
hgroup：标题组合
nav：导航

注：header、footer、main在一个网页中只能出现一次
article：独立的内容
aside：辅助信息的内容
section：区域
figure：描述图像或者视频
figcaption：描述图像或视频的标题部分
datalist：选项列表
details/summary：文档细节、文档标题
progress/meter：定义进度条/定义度量范围
time：定义日期或者时间
mark：带有记号的文本

<body>
    <header>
        <hgroup>
            <h1>主标题</h1>
            <h2>副标题</h2>
        </hgroup>
        <nav>
            <ul>
                <li>首页</li>
                <li>论坛</li>
                <li>关于</li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <section>
                <ul>
                    <li>
                        <figure>
                            <img src="./img.jpg" alt="">
                            <figcaption>
                                新水果篮子❤高甜
                                <br>十二生肖恋上美少女！
                            </figcaption>
                        </figure>
                    </li>
                </ul>
            </section>
            <section>
                <input type="text" list="elems">
                <!-- 选项列表 -->
                <datalist id="elems">
                    <option value="a"></option>
                    <option value="ab"></option>
                    <option value="abc"></option>
                    <option value="apple"></option>
                    <option value="abbr"></option>
                    <option value="absolute"></option>
                    <option value="appplication"></option>
                </datalist>
                <!-- 下拉选项 -->
                <datalist open>
                    <summary>HTML</summary>
                    <p>超文本标记语言</p>
                </datalist>
                <!-- 进度条 -->
                <progress min="0" max="10" value = "5">

                </progress>
                <!-- 度量，测量 -->
                <meter min="0" max="100" value="35" low="10" high="60">
                </meter>
                <!-- 时间语义化 -->
                <p>
                    今天是<time title="2-14">情人节</time>,街上人很多
                </p>
                <!-- 标记 -->
                <p>
                    今天是<mark>情人节</mark>,街上人很多
                </p>
            </section>

            <section>

            </section>
        </article>
        <aside></aside>
    </main>
    <footer></footer>
</body>

表格扩展

添加单线-> border-collapse：collapse
隐藏空单元-> empty-cells:hide
斜线分类-> border/rotate
列分组-> colgroup/col

<style>
    /* 隐藏空单元,添加单线  */
    table{empty-cells:hide;border-collaspe:collaspe}

    /* 斜线分类 */
    table .line{border-top:50px solid red;border-left:150px solid blue;position:relative;color:white}
    table .line em{position:absolute;left:-60px;top:-40px;font-style:normal}
    table .line span{position:absolute;left:-120px;top:-30px}    
</style>

<body>
    <colgroup>
    <!-- 前两列红色 -->
    <col span="2" style="background:red;">
    <!-- 后两列黄色 -->
    <col span="2" style="background:yellow;">
    </colgroup>
</body>

表单扩展之美化控件

label + :checked

<!-- 美化复选框 -->
<style>
/* 隐藏label标签  */
label input{display:none}
/* 如果被选中则给div加上样式，因为这个图片上面一半是被选中的样式，下面一半是没有选中的样式  */
label input:checked + div{background-position:0 0;}
label div{width:28px ; height:28px; background:url('./x.png') 0 -28px;}
</style>

<body>
<label>
    <!-- 把input隐藏起来 -->
    <input type="checkbox">
    <!-- 样式做到div上面 -->
    <div></div>
</label>
</body>

    <!-- 美化上传按钮 -->
<style>
    label input{display:none}
    label div{width:86px;height:34px;background:url('./upload.jpg')}
</style>
<label>
    <input type ="file">
    <div></div>
</label>

position + opacity（障眼法）

<style>
    .upload{width:86px;height:34px;position:relative}
     /* 显示的是父容器div的背景图  */
    .upload div{width:100%;height:100%;background:url('./img/upload.png');}
     /* 利用opacity（透明度）把上面的上传文件空间隐藏起来  */
    .upload input{width:100%;height:100%;position:absolute;left:0;top:0;opacity:0}
</style>

<body>
    <div class="upload">
        <input type="file">
        <div></div>
    </div>
</body>

表单扩展之新input控件

新的input控件：

email ->电子邮件地址输入框
url ->网址输入框
number ->数值输入框
range ->滑动条
date/month/week ->日期控件
search ->搜索框
color ->颜色控件
tel ->电话号码输入框
time ->时间控件

<body>
    <form action="https://www.baidu.com">
        <!-- email电子邮箱 -->
        <input type="email">
        <input type="submit">
        <!-- url网址 -->
        <input type="url">
        <input type="submit">
        <!-- number数字 -->
        <input type="number">
        <input type="submit">
        <!-- range滑动条 -->
        <input type="range" min ="0" max="10" value="2">
        <input type="submit">    </form>
        <!-- date日期 -->
        <input type="date">
        <input type="submit">
        <!-- month年和月 -->
        <input type="month">
        <input type="submit">
        <!-- week年和周 -->
        <input type="week">
        <input type="submit">
        <!-- 搜索框 -->
        <input type="search">
        <input type="submit">
        <!-- color颜色 -->
        <input type="color">
        <input type="submit">
        <!-- tel电话（移动端自动吊起数字键盘而不是全键盘） -->
        <input type="tel">
        <input type="submit">
        <!-- time时间 -->
        <input type="time">
        <input type="submit">
</body>

表单扩展之——新的表单属性

autocomplete：自动完成
autofocus:获取焦点
required：不能为空
pattern：正则验证
method：数据传输方式
enctype：数据传输类型(enctype="application/x-www-form-urlencoded"——字符串；enctype="multipart/form-data"——文件类型)
name/value：数据的键值对

<body>
    <form action="https://www.baidu.com">
    <!-- autocomplete=on/off 打开输入框自动完成/关闭输入框自动完成 -->
    <!-- autofocus光标获取焦点 -->
    <!-- 加入了required表示填写的不能为空，为空时会提示请提交此字段并且不会链接到表单中的action url地址 -->
    <!-- pattern->只能输入后面的正则表达式匹配的字符 -->
    <input type ="text" name="username" autocomplete="off" autofocus required pattern="">
    <input type="submit">
    </form>
</body>

表格扩展之标签

扩展标签：

fieldset ->表单内元素分组
legend ->为fieldset元素定义标题
optgroup ->定义选项组

<body>
    <!-- 表单内元素分组 -->
    <fieldset>
        <legend>登录</legend>
        <p>
            用户名：<input type="text">
        </p>
        <p>
            密码：<input type="password">
        </p>
    </fieldset>
    <!-- 定义选项组 -->
    <select name="" id="">
        <optgroup label="水果"></optgroup>
        <option value="">苹果</option>
        <option value="">香蕉</option>
        <option value="">猕猴桃</option>
        <optgroup label="蔬菜"></optgroup>
        <option value="">黄瓜</option>
        <option value="">白菜</option>
        <option value="">茄子</option>
    </select>
</body>

BFC规范

触发BFC规范的元素，可以形成一个独立的容器，不受到外界的影响，从而解决一些布局问题。

触发BFC的样式:

浮动元素：float除none以外的值
绝对定位元素：position(absolute、fixed)
display为inline-block、table-cells、flex
overflow除了visible意外的值（hidden、auto、scroll）

BFC特性及应用

解决margin叠加问题
解决margin传递问题
解决浮动问题
解决覆盖问题

    <!-- 解决margin叠加问题 -->
    <style>
        .div1{width: 100px;height: 100px; background-color:  red; margin-bottom: 30px;}
        .div2{width: 100px; height: 100px;background-color: blue;margin-top: 30px;}
        .box{overflow: hidden;}
    </style>

<body>
    <div class="box">
        <div class="div1"></div>
    </div>
    <div class="box">
        <div class="div2"></div>
    </div>
</body> 


    <!-- 解决margin传递问题 -->
    <style>
        .div1{width: 200px;height: 200px;background: red;overflow: hidden;}
        .div2{width: 100px;height: 100px;background: blue;margin-top: 50px;}
    </style>

    <div class="div1">
        <div class="div2">
        </div>
    </div>

    <!-- 解决浮动问题 -->
    <style>
    .div1{width: 200px;border: 1px black solid;float: left;}
    .div2{width: 100px;height: 100px;background: blue;float: left;}
    </style>

    <div class="div1">
        <div class="div2"></div>
    </div>

    <!-- 解决覆盖问题 -->
    <style>
    .div1{width: 100px;height: 100px;background: red;float: left;}
    .div2{height: 400px;background: blue;overflow: hidden;}
    </style>

    <div class="div1"></div>
    <div class="div2">aadasdas</div>

浏览器前缀

浏览器	内核	前缀
IE	Trident	-ms-
Firefox	Gecko	-moz-
Opera	Presto	-o-
Chorme	Webkit	-webkit-
Sarify	Webkit	-webkit-
Opera、Chrome	Blink

CSS3去兼容不同的浏览器，针对旧的浏览器做兼容，新浏览器基本不需要添加前缀。

transition过渡基础语法

transition-property:规定设置过渡效果的CSS属性的名称。
transition-duration：规定完成过渡效果需要多少秒或者毫秒。
transition-delay：定义过渡效果何时开始
transition-timing-function：规定速度效果的速度曲线。

    <style>
        div{width: 100px;height: 100px;background: red;transition-property: all;transition-duration: 1s;transition-duration: 2s;}
        div:hover{width: 200px;height: 200px;background: blue;}

        /* 
        div{width:100px;height:100px;background:red;transition:1s 2s linear;}
        div:hover{width:200px;height:200px;background:blue}
         */
    </style>



<body>
    <div></div>
</body>

transition实例之过渡导航

    <style>
        ul,li{margin :0;padding: 0;list-style: none;}
        ul{width: 360px;}
        ul li{width: 60px;height: 70px;background: url('./x.png');transition: 0.5s;}
        ul li:nth-child(1){background-position: 0 -70px;}
        ul li:nth-child(2){background-position: -60px -70px;}
        ul li:nth-child(3){background-position: -120px -70px;}
        ul li:nth-child(4){background-position: -180px -70px;}
        ul li:nth-child(5){background-position: -240px -70px;}
        ul li:nth-child(6){background-position: -300px -70px;}    

        ul li:hover:nth-child(1){background-position: 0 -70px;}
        ul li:hover:nth-child(2){background-position: -60px -70px;}
        ul li:hover:nth-child(3){background-position: -120px -70px;}
        ul li:hover:nth-child(4){background-position: -180px -70px;}
        ul li:hover:nth-child(5){background-position: -240px -70px;}
        ul li:hover:nth-child(6){background-position: -300px -70px;}    
    </style>


<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

transform变形

translate:位移
1. translateX
2. translateY
3. translateZ
scale:缩放(值是一个比例值，正常大小就是1，会以当前元素中心点进行缩放)
1. scaleX
2. scaleY
3. scaleZ
rotate：旋转(旋转的值，单位是角度deg，弧度rad)
1. rotatex(3d)
2. rotatex(3d)
3. rotatez(和rotate是等价关系，正值按顺时针旋转，负值按逆时针旋转)
skew：斜切
1. skewX：单位也是角度，正值向左倾斜，负值向右倾斜
2. skewY

transform的注意事项：

变形操作不会影响到其他元素。
变形操作只能添加给块元素，但是不能添加给内联元素。
复合写法，可以同时添加多个变形操作。
执行时有顺序的，先执行后面的操作，再执行前面的操作。

translate会受到rotate、scale、skew的影响

最后编辑于：2021.04.24 22:24:44

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,602评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,442评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,878评论 0赞 344
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,306评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,330评论 5赞 373
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,071评论 1赞 285
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,382评论 3赞 400
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,006评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,512评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,965评论 2赞 325
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,094评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,732评论 4赞 323
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,283评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,286评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,512评论 1赞 262
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,536评论 2赞 354
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,828评论 2赞 345

前端html+css笔记（上）

前端

VScode

网站开发

web前端的三大核心技术

HTML

html基础结构与属性

HTML初始代码

HTML注释

HTML语义化

标题与段落

文本修饰标签

图片标签和图片属性

引入文件的地址路径

跳转链接

跳转锚点

特殊符号

列表

表格

表单

表格表单

<div>与<span>

CSS

CSS基础语法

CSS样式的引入方式

CSS中的颜色表示法

CSS背景样式

CSS边框样式

CSS文字类型

CSS段落样式

CSS复合样式

CSS选择器

CSS样式继承

CSS优先级

CSS盒子模型

CSS标签分类

显示框类型

标签嵌套规范

溢出隐藏

透明度和手势

最大、最小宽高

CSS默认样式

CSS reset（场景的reset写法）

Photoshop工具（72-77）

float浮动

position定位

CSS添加省略号

CSS Sprite

CSS圆角

PC端的布局

PC端网页(游戏)制作(92-109)

HTML和CSS发展历史(110)

HTML和XHTML区别(111)

引用标签(112)

iframe嵌套页面

br标签与wbr标签

pre与code标签

map与area

embed和object

audio和video

文字注解与文字方向

扩展link标签

meta标签

html5新语义化标签

表格扩展

表单扩展之美化控件

表单扩展之新input控件

表单扩展之——新的表单属性

表格扩展之标签

BFC规范

浏览器前缀

transition过渡基础语法

transition实例之过渡导航

transform变形

推荐阅读更多精彩内容