HTML+CSS基础知识总结
目录
1.web标准
| 结构上来说html页面分为head和body两部分 |
| head里面包含meta标签（UTF8字符集）、title(网页标题)、link(外部样式表引入) body里面是各种常用的标签。 |
| web页面标准分为结构（html）+样式（css）+行为（js） |
2.HTML基本标签
2.1基本标签
<html> <head> <title> <body> <table> <tr> <td>
<span> <p> <form> <h1> <h2> <h3> <h4> <h5>
<h6> <object> <style> <b> <u> <strong> <i> <div>
<a> <script> <center>
单标签：<br> <hr> <img> <input> <param> <meta> <link>
2.2表格
<table>
<th></th>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
表格横向合并： <td colspan="横向合并行数"></td>
表格竖向合并：<td rowspan="竖向合并行数"></td>
表格有部分属性我们不常用，这里重点记住cellspacing.cellpadding。
表格标题caption
语法：
<table>
<caption>我是表格标题</caption>
</table>
注意:
1.caption元素定义表格标题，通常这个标题会被居中且显示于表格之上。
2.caption标签必须紧随table标签之后。
3.这个标签只存在表格里面才有意义。
2.3表单
表单提交
<form action="提交地址"></form>
input type类型
<form action="提交地址">
<input type="text" placeholder="我是文本框">
<!-- checked="checked" 这是默认选中 -->
<input type="radio" checked="checked" placeholder="我是单选框">男
<input type="checkbox" placeholder="我是复选框">
<input type="password" name="" id="" placeholder="我是密码框">
<!-- 固定文本域大小 禁止拖动 resize:none; -->
<textarea style="resize:none;">我是文本域</textarea>
<input type="submit" placeholder="我是提交按钮">
<!-- 下拉菜单 下拉菜单默认选中disabled selected hidden -->
<select name="" id="" value="">
<option value="" disabled selected hidden>1</option>
<option value="">2</option>
</select>
</form>
2.4标签分类和特性
| 块元素： | div、p、h1-h6、ul、ol、li | 独占一行 能直接设置宽 |
|---|---|---|
| 行内元素： | a、span、i、em | 可以和别的行内元素占一行、不能直接设置宽高、能设置水平margin,不能设置垂直 margin |
| 行内块元素： | img、input | 可以和别的行内元素或者行内块元素占一行、能直接设置宽高 |
3.选择器
3.1 常用选择器种类
id选择器、类选择器、后代选择器、子集选择器、标签选择器、并集选择器
3.2选择器权重和优先级(重点)
!important ∞无穷大
内联样式 1000
id选择器优先级 100
类选择器优先级 10
标签选择器优先级 1
通配符优先级 0
即：!important > 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符
4.CSS属性
4.1文字属性
| font-family | 设置字体 |
| font-size | 设置字体大小 |
| color | 设置字体颜色 |
| font-weight | 设置字体加粗 |
| text-align:center | 设置文本水平居中 |
| line-height | 设置单行文本垂直居中 |
| margin:0 auto | 设置标签水平居中 |
4.2背景
| background-color | 设置背景颜色 |
| background-color:rgba() | 设置背景透明度 |
| background-image:url() | 设置背景图片 |
| background-repeat | 设置背景图片是否重复 |
| background-position | 设置背景图片位置 |
4.3边框
| border:2px solid #000; | 设置边框粗细 类型 颜色 |
| border-radius | 设置边框圆角 |
| box-shadow | 设置边框阴影 |
5.盒模型
一个盒子由content+padding+border+margin组成
| padding:10px | 代表上下左右都是10px |
| padding:10px 20px | 上下是10px 左右是20px |
| padding:10px 20px 30px; | 代表上 左右 下 |
| padding:10px 20px 30px 40px; | ;代表上右下左 |
margin同理
6.浮动
浮动的方式：
float: left; 左浮动
float: right;右浮动
float: none; 元素不浮动（默认值）
为什么要浮动？怎么清除浮动？（重点）
页面布局的时候子元素不浮动的时候会撑起父盒子的高度；
浮动后父盒子的高度为0，会对后面的页面布局造成影响，所以需要清除浮动。
清除浮动的几种方式（重点）
(1)额外标签法
是w3C推荐的做法是通过在浮动元素末尾添加一个空的标签
例如<div style="clear:both"></div>
优点:通俗易懂，书写方便
缺点:添加许多无意义的标签，结构化较差。
(2)overflow:hidden
可以给父级添加:overflow为hidden/ auto/ scro11
优点:代码简洁
缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
(3))使用after伪元素清除浮动
使用方法:
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}/*IE6、7专有*/
7.定位
定位模式有三种：绝对定位 相对定位 固定定位
| 绝对定位 | position:absolute; |
| 相对定位 | position:relative; |
| 固定定位 | position:fixed; |
重中之重：
相对定位：相对于自身位置
绝对定位：相对于有定位的最近的父元素定位
固定定位：相对于浏览器进行定位
z-index:999;表示层叠顺序或者层级
8.display属性值
| display:none | 隐藏但是不占位置 | 作用：元素展和转换为块元素 |
| visibility:hidden | 隐藏但是占据位置 | |
| display:inline | 转换成行内元素 | |
| display:inline-block | 转换成行内块元素 |
9.伪类
简记：lvha
| a:link | 初始状态 |
| a:visited | 访问过后的 |
| a:hover | 鼠标经过 |
| a:active | 鼠标点击瞬间 |
10.注释
html注释 <!-- -->
css中注释 /* */
js中的注释 //
11.文本下划线
| ul去除小圆点 | list-style:none |
| a标签去除下划线 | text-decoration:none |
| a标签横穿线 | text-decoration:line-through |
| a标签添加下划线 | text-decoration:underline |
12.CSS3属性
旋转 div 元素：
transform:rotate(30deg);
缩放div元素：
transform: scale(0.98);
div元素阴影：
box-shadow:6px 6px 6px 6px #969494;
边框圆角：
box-radius:50%；
13.浏览器内核
因为浏览器太多啦，但是现在主要流行的就是下面几个:
8825
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
