近日就开始回顾html和css相关知识啦，并且会学习html5和css3的新知识，以下是我对记忆不太深刻的地方以及新知识点的总结：
Web标准：
结构：用于对网页元素进行整理和分类，即HTML
表现：用于设置网页元素的版式，颜色，大小等外观样式，即CSS
行为：指网页模型的定义及交互的编写,即Javascript
VS常用快捷键：
快速复制下一行：shift+alt+下箭头
同时选中多个相同单词：ctrl+d
添加多个光标：ctrl+alt+下箭头（上箭头）
全局替换某个单词：ctrl+h
快速定位到某一行：ctrl+g
选择某个区块：shift+alt,之后拖动鼠标
<!DOCTYPE>:文档类型声明标签
<DOCTYPE html>：即为当前页面采用的是HTML5版本来显示网页
<html lang="en">：en表示该网页为英文网页，zh-CN表示为中文网页，fr为法文网站
字符集（Character set）是多个字符的集合，以便计算机能够识别和存储各种文字。在<head>标签内，可以通过<meta>标签的charset属性规定HTML文档应该使用哪种字符编码，一般情况下，统一使用"UTF-8"编码，即万国码，基本包含了全世界所有国家需要用到的字符。
换行标签:<br/>，单标签，不像段落标签段落与段落之间有较大空隙，换行只是移至下一行
水平线：<hr>
文本格式化标签：突出重要性
加粗：<strong></strong>,<b></b>
倾斜：<em></em>,<i></i>
删除线：<del></del>,<s></s>
下划线：<ins></ins>,<u></u>
均推荐使用前者：语义更加强烈
img标签相关属性：
title：鼠标移至图片上所显示的文字
alt：图像显示不出来时用该文字替换
border:图片边框粗细
相对路径：
下一级路径：/
超链接（a）标签相关属性：
href：指定链接目标的url地址
target：指定链接页面的打开方式，_self：默认打开方式_blank：打开新的窗口
内部链接：<a href=”index.html“>XXX</a>
空链接：<a href=”#“>XXX</a>
下载链接：<a href=”img.zip“>XXX</a>,如果href里面地址是一个文件或者压缩包，会下载这个文件
锚点链接： 快速定位到链接里的某个位置，<a href=”#name“>XXX</a>，将目标标签加上属性id=”name“，例如：<h1 id="name">XXX</h1>,此时点击链接就会跳转到h1标签指代的位置
特殊字符(必记)：
空格：
大于：>,great than
小于：< ,less than
表格标签：
<table align="center" border="1" cellpadding="20" cellspacing="0" width="200"> <thead> <tr><!--表格中的行--> <th>姓名</th><!--表头单元格，加粗居中显示--> <th>姓名</th><!--表头单元格，加粗居中显示--> <th>姓名</th><!--表头单元格，加粗居中显示--> <th>姓名</th><!--表头单元格，加粗居中显示--> </tr> </thead> <tbody> <tr> <td><!--表格中的单元格，table data--> 单元格内的文字 </td> </tr> </tbody> </table>cellpadding：规定单元边沿（左边沿）与其内容之间的空白，默认1像素
cellspacing：规定单元格之间的空白，默认2像素
border：规定表格是否有边框
align：相对周围元素的对齐方式
width：规定表格宽度
合并单元格：
跨行单元格以最上方单元格为目标单元格
跨列单元格以最左侧单元格为目标单元格
以下为样例：
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500"> <thead> <tr><!--表格中的行--> <th rowspan="2">姓名</th><!--表头单元格，加粗居中显示--> <th colspan="2">姓名</th><!--表头单元格，加粗居中显示--> </tr> </thead> <tbody> <tr> <td rowspan="2"><!--表格中的单元格，table data--> 单元格 </td> <td><!--表格中的单元格，table data--> 单元格 </td> <td><!--表格中的单元格，table data--> 单元格 </td> </tr> <tr> <td><!--表格中的单元格，table data--> 单元格 </td> <td><!--表格中的单元格，table data--> 单元格 </td> </tr> </tbody> </table>
注意：给目标单元格加上属性之后记得删除多余的单元格，上图删去了第三列第一个单元格和第三行第一个单元格
列表标签：
有序： <ol><li></li></ol>
自定义：<dl><dt><dd></dd></dt></dl>
表单标签：
表单域： <form action="" method="post" name="name1"></form>
<input type="text" value="请输入用户名" maxlength="6"><!--文本框--> <input type="password"><!--密码框--> <input type="radio" name="sex"><!--单选按钮--> <input type="checkbox" checked><!--多选框--> <input type="submit" value="免费注册"> <input type="reset" value="重新填写"><!--重置按钮，重新填写数据--> <input type="button"><!--后期结合JS使用，常用于给手机发送短信--> <input type="file" ><!--上传文件-->注意：单选框若要实现多选一的效果，必须将同一类的选项附上相同的名字，这样才能实现多选一的效果。
value值为文本框默认带的文字
单选按钮和多选按钮：共有属性：checked，默认选中
label标签：用于绑定一个表单元素，当点击label标签内的文字时，浏览器会自动将焦点（光标）转到或者选择对应的表单元素用来增加用户体验
例如：填写用户名信息时，选择用户名即文字就可聚焦该文本框
<label for="text">用户名</label> <input type="text" id="text">注意：label属性里的for和input的id属性要相对应
下拉表单：
<select name="" id=""> <option value="">XXX</option> <option value="">XXX</option> <option value="" selected>XX</option> <option value="">XXX</option> <option value="">XXX</option> </select>select与option搭配
文本域：
<textarea name="" id="" cols="30" rows="10"></textarea>tip：若要写出两列整齐的结构，例如，用户填写信息时，姓名，文本框可使用表格进行规划姓名，文本框即两个td，整体一行为tr，以此类推。
推荐查阅信息的网站:
id选择器:
#div { color: red; }<div id="div"> CSDN博客 </div>id选择器只能调用一次！用过一次之后其他相同id名字不可再次使用
通配符选择器：将所有标签都改样式。
* { color: red; }
字体样式：
.em{ font-style: italic; }字体复合样式：font:font-style font-weight font-size/line-height font-family;顺序不可颠倒
text-align：center；文本水平居中
text-decoration:line-through;删除线，underline,下划线，overline,上划线 ，none，取消
text-indent：2em；文本缩进（第一行）
内联样式：在html文件中的style中的样式
行内样式：在标签属性中写的样式
外部样式表：专门写一个css文件写样式
<link rel="stylesheet" href="xxx.css">
- 文字内的元素不能使用块级元素：p标签里不可存放块级元素，h1-h6里均不能存放块级元素
- 常见行内块元素：img，表单元素，单元格td等
- background-color：transparent；设置背景透明效果
- background-position：x，y；如果只写一个，另一个默认居中
- 混合单位：background-position：20px center；x为20px，y为center（有顺序关系）
- background-attachment：fixed/scroll;背景图像固定/背景图像随内容滚动
- 背景复合写法：background:背景颜色 背景图片地址 背景平铺（重复） 背景图像滚动 背景图片位置; 例： background:transparent url(image.jpg) repeat-x fixed top;
行高为1.5，即为行高为当前文字的1.5倍
选择器的权重：
注意： 继承的权重为0
选择器
选择器权重
继承或* 0，0，0，0 元素选择器 0，0，0，1 类选择器，伪类选择器 0，0，1，0 ID选择器 0，1，0，0 行内样式style=”“ 1，0，0，0 ！important 重要的 =无穷大 <style> #father { color: red; } p{ color: pink; } </style> <div id="father"> <p>猜猜我是什么颜色</p> </div>
由以上代码可知，尽管ID选择器的权重比元素选择器的权重大，但p元素仍然使用了元素选择器的样式，因为ID选择器为父元素的样式，而p元素对于父元素的样式为继承，权重为0，故元素选择器的样式占上方。
- 表格细线边框 ：border-collapse:collapse; 合并相邻的边框
- padding:
值的个数 表达意思 padding:5px 上下左右全为5 padding:5px 10px 上下5，左右10 padding:5px 10px 20px 上5 左右10 下20 padding:5px 10px 20px 30px 上右下左，顺时针依次对应 注：若一个盒模型未设定宽度或高度，则设置padding之后不会撑大盒子。
- 块级元素水平居中：设定宽度，margin:0 auto;
- 行内元素或者行内块元素水平居中给父元素添加text-align:center;
外边距合并问题(当父元素和子元素均设置margin-top时，子元素与父元素的外边距合并问题，最终表现为父元素和子元素离上方元素距离为二者margin-top的最大值)解决方案 ：
- 为父元素加上边框（将边框设置为透明）
- 给父元素设置内边距
- 为父元素添加overflow:hidden
清除内外边距：
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此在布局前，首先清除·网页元素的内外边距。
* { padding: 0; margin: 0; }行内元素设置内外边距时，只可设置左右内外边距，设置上下无效，除非将其改为块级元素或行内块元素。
ps相关操作快捷键：
- ctrl+r：打开标尺，或者视图->标尺，右击标尺，改变单位为像素
- ctrl+加号：放大试图，缩小同理
- 按住空格键，鼠标变成小手，拖动图片至任意位置
- 用选区拖动可以直接测量大小
- ctrl+d：取消选区，也可直接在旁边空白处点击一下
去掉无序列表前面的圆点：在li样式里加入list-style:none;
border-radius:
若想制作成如上样式，只需将border-radius设置为矩形高度的一半即可。
<div class="rect" style="width: 200px; height: 100px; background: pink; border-radius: 50px;"></div>
- border-radius也可写成四个值，从左上开始顺时针对应圆的半径
- 若为两个值，则分别对应两组对角线，第一个值为左上角对应的对角线，以此类推
盒子阴影 ：
box-shadow:h-shadow v-shadow blur spread color inset;
值 描述 h-shadow 必需，水平阴影的位置，允许负值 v-shadow 必需，垂直阴影的位置，允许负值 blur 可选，模糊距离（影子的虚实） spread 可选，阴影的尺寸（大小） color 可选，阴影的颜色 inset 可选，将外部阴影（outset）改为内部阴影
- 阴影默认为外部阴影，但不可写出来，写出来之后阴影就无效，但如果要改为内部阴影，内部阴影（inset）就必须得写出来
- 盒子阴影不占用空间，不会影响其他元素的排列
box-shadow: 10px 10px 10px rgba(0,0,0,.3);
文字阴影：
text-shadow:h-shadow v-shadow blur color;
值 描述 h-shadow 必需，水平阴影的位置，允许负值 v-shadow 必需，垂直阴影的位置，允许负值 blur 可选，模糊的距离 color 可选，阴影的颜色 格式和盒子阴影基本相同
- 浮动元素具有行内块的特性，如果行内元素有了浮动，则不需要转换为行内块或者块级元素，就能直接设置宽高
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但若是添加浮动元素，他的大小根据内容决定
- 浮动盒子会避开标准流盒子，标准流盒子不会避开浮动盒子
浮动元素不再占有原文档流的位置，导致外部元素无法感知浮动盒子而造成高度坍塌
解决高度坍塌的方法：
1.在最后一个浮动元素后面加上一个<div class="clear"></div>，新增的盒子必须是块级元素
<style> .box { width: 500px; background-color: antiquewhite; border: 1px solid black; } .c1,.c2,.c3 { float: left; width: 50px; height: 50px; background-color: aquamarine; margin-right: 5px; } .clear { clear: both; } </style> </head> <body> <div class="box"> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="clear"></div> </div> </body>2.给父元素加上overflow属性，将其属性设置为hidden或auto或scroll
3.给父元素添加伪元素使其撑开父元素
.clearfix:after{ content: ""; display: block; height:0; clear: both; visibility: hidden; }给父元素加上类名clearfix之后会产生同样效果
4.给父元素添加双伪元素，还是要给父元素添加类名clearfix
.clearfix:before, .clearfix:after{ content: ""; display: table; } .clearfix:after { clear: both; }