Html&Css
一．Html
hyper text markup language 超文本标记语言
1. font标签 （字体标签）
用法：<font color=”gray” size=”2” face=”宋体” >内容</font>
color：让文字颜色改变
size：范围是1-7 正常3
face : 指定文本的字体
2. img标签(image)
用法：<img src=”图片路径” />
src=”图片的路径” 指定图片标签需要显示的图片
alt=”图片加载异常时显示的文字”
title=”鼠标停留在图片上的时候显示的提示”
3. a标签（anchor 超链接）
用法：
1： 在页面之间跳转：
<a href=”跳转到其他页面的相对路径”>这里必须要有内容</a>
herf=”跳转的目标地址”
title=”鼠标停留时的提示”
target=”跳转的方式”
_blank 在新的窗口打开页面
_self 在当前页面跳转
注意：双标签里必须要有内容，否则会看不见
2.使用a标签在页面上定位标签
2.1 要准备一个被a标签定位的标签，要有id属性
2.2 a标签的href属性的值是#+目标标签的id
3.实现下载功能
<a href=”文件的相对路径” ></a>
注意：
1.这种方式当下已经很少使用
2.如果浏览器认识这种文件，会直接在浏览器中打开
4. base标签
用法：
写在head标签里
<base target=”跳转方式” />
作用：统一设置当前页面上的a标签的跳转方式
前提是：页面上的a标签没有设置target属性
5. dl（definition list）自定义列表
自定义列表
使用格式：
<dl>
<dt>小标题</dt>
<dd>内容<dd>
<dd>内容<dd>
<dd>内容<dd>
<dt>小标题</dt>
<dd>内容<dd>
<dd>内容<dd>
<dd>内容<dd>
</dl>
6. table（表格）
<table>
<caption></caption>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
。。。
</tr>
<tr>
<td></td>
。。。
</tr>
...
</tbody>
<tfoot>
<tr>
<td></td>
。。。
</tr>
</tfoot>
</table>
tr table row
th table heading
属性：border 控制边框的粗细
cellspacing 控制单元格的间距
width： 控制表格的宽度
align： 控制的是对齐方式，如果给table设置，控制表格对于浏览器而言的对齐，如果是给td,tr,tbody。。控制内容的对齐方式
colspan 控制td合并多少个单元格显示
7. input系列标签
1 输入框
<input type=”text” />
属性：placeholder 提示的文字，当我们输入内容的时候，会消失
value 设置输入框的默认值
maxlength 设置允许输入的最大长度
2 密码框
<input type=”password” />
3 单选框
<input type=”radio” />
name属性：可以让一堆的单选框成为互斥的一组
checked属性：设置某个单选框默认选中
4 按钮
<input type=”button” value=”按钮显示的文本” />
5 多选框
<input type=”checkbox” />
属性：checked 设置多选框默认选中
6 提交按钮
<input type=”submit” />
作用：把表单里的数据提交到服务器
7 重置按钮
<input type=”reset” />
作用：把表单里的数据恢复默认
注意点：重置按钮必须放在表单里才能起效果
8 图片提交
<input type=”image” />
作用：提交数据
9 文件上传按钮
<input type=”file”/>
作用：上传文件
8. textarea 文本域
<textarea cols="20" rows="10"></textarea>
属性：cols 控制宽度，并且是可缩放的最小宽度
rows 控制高度，并且是课缩放的最小高度
9. select（下拉框）
<select>
<option>选项</option>
<option>选项</option>
<option>选项</option>
...
</select>
设置某一个选项默认被选中：
selected=”selected”
10. form表单
<form>
在这里放表单控件
</form>
表单：用来收集用户信息，用来装表单控件
表单控件：给用户输入或者交互用的标签
action 属性：指定数据上交的地址
method 属性：提交数据的方式
get 提交的数据量要小，不够安全
post 提交的数据量大，比较安全
11. meta标签
1 设置页面的编码格式
<meta charset=”编码格式” />
2 设置页面的关键词
<meta name=”keywords” content=”” >
做搜索引擎优化
3 设置页面的描述
<meta name=”description” content=”” >
做搜索引擎优化
12. link标签
1 引入网站的图标
<link rel=”shortcut icon” type=”image/x-icon” href=”图标的路径” >
2 引入css文件
<link rel=”stylesheet” href=”css文件的路径” >
3 dns预解析
<link rel="dns-prefetch" href="需要预解析的服务器的地址">
只有特别大的网站才需要做dns预解析：
作用：网络加速技术
在页面放问过我这个网站之后，再去访问这个网站下面的其他页面会更加快
13.URL
统一资源定位器（Uniform Resoure Locator）
协议名+服务器ip+端口+目标资源的路径
标准的url：协议名+服务器的ip+端口+目标资源的地址
http：// 192.168.31.122 ：80/index.html
CSS 层叠样式表（cascading style sheets）
1.选择器的命名规范
1 可选取值范围：数字、字母、下划线 “_”、短横杠 “-”
2 不能以数字开头
3 不能以短横杠+数字
4 不能单独用短横杠
5 可以用中文，但是不建议用
6 推荐用有意义的单词来命名
2.颜色表示法
1 使用颜色的英文单词来赋值（color name）
color: red;
2 十六进制表示法
# 红色，红色，绿色，绿色，蓝色，蓝色
以#开头，前两位表示红色所占的比例，中间两位表示绿色所占的比例，后两位表示蓝色所占的比例
例如：#0c54a4
十六进制 满十六进一 0-9a-f
二进制 满二进一 0-1
十进制 满十进一 0-9
3 rgb()
第一种：rbg(0-255,0-255,0-255)
第二种：rgb(100%,100%,100%)
分别代表红，绿，蓝表示的比率
3.font-weight
作用：控制字体粗细
用法：font-weight：
normal 正常，不粗不细
bold 加粗
bolder 更粗，受限于字体
lighter 细体，受限于字体
number: 100-900
4. font-style
作用：控制字体的样式
font-style:
normal 普通，正常
italic 斜体
oblique 也是斜体，是italic的备胎
5. text-decoration
作用：文本的线条装饰
text-decoration:
none 没有修饰
underline 下划线
overline 上划线
line-throuth 贯穿线
blink 闪烁（已经没用了）
6. font连写
font: font-style font-weight font-size font-family;
特点：
font-style，font-weight 可以省略
font-style，font-weight 可以交换顺序
7.css的三种使用方式
内嵌式
<style>
css代码
</style>
特点：
结构和样式有一定的分离
可维护性较高
可以影响当前页面
外联式
<link rel=”stylesheet” href=”css文件的路径” >
特点：
结构和样式完全分离
可维护性最高
可以影响所有引用它的页面
行内式（内联式）
特点：
结构和样式混合在一起
可维护性最差
只能影响当前标签
8.background-attachment 控制背景图片是否随着滚动条滚动
fixed 固定，不滚动
scroll 滚动
伪类
：link 被浏览器访问前的样式
：visited 控制标签被访问过后的样式
：hover 控制标签当鼠标移动到它的范围内时的样式
：active 控制标签被激活（鼠标按下，没有松开）时的样式
Love hate
:focus 控制input获得焦点时的样式
9. CSS三大特性
1 层叠性
2 继承性
发生嵌套关系的时候，子元素会从父元素那里得到一部分属性 ---- 继承性
color，text-系列，font-系列，line-系列
a不继承color，text-decoration：none
h系列，不继承font-weight
3 优先级
当选择器作用在标签上的时候，是存在优先级的
继承 < 标签 < class选择器 < id选择器 < 行内样式 < !important
0 1 10 100 1000 10000
1 存在优先级
2 权重可以叠加
3 继承的权重总是为0
4 权重计算
就是把选择器的权重相加到一起，最终权重最大的选择器可以层叠权重低的选择器
10. 边框相关属性
border-width 控制边框宽度
length 用长度赋值
medium 默认宽度
thin 小于默认宽度
thick 大于默认宽度
border-style 控制边框样式
none 没有边框
solid 实现
dotted 点线
dashed 虚线
border-color 设置边框的颜色
颜色表示方式
边框连写
没有顺序、都可以省略
注意： border-style默认为none，如果连写的时候没有border-style，会看不到效果
盒子模型之margin
垂直合并现象
两个垂直分布的盒子，同时设置了相对的margin，最终两个相距的距离取决于两个margin的最大值
(只能避免，不能解决)
包含合并现象
给子盒子设置margin-top的时候，有可能会把父盒子一起带跑 -- 包含合并现象
11.解决“塌陷”方法：
1 给父盒子加边框
2 给父盒子设置一个属性：overflow：hidden；
3浮动也可以
12 .浮动
1 浮动的作用与用法
float 设置元素是否浮动或者如何浮动
none 不浮动
left 左浮动
right 有浮动
2 浮动的特点
1 浮动的元素不占据原来在标准流中的位置 -- （脱离标准流）
2 浮动可以让块级元素在一行上显示，让行内元素可以设置宽高
-- 本质上是实现了模式的转换
3 浮动的元素顶端对齐
3 清除浮动
浮动带来的影响：
所有的子盒子都浮动之后，导致父盒子的高度为零，父盒子后面的盒子占据了符合自原来的位置，子盒子漂浮到了父盒子后面的盒子上了
这个时候需要清除浮动带来的影响
方法：
1 给父盒子设置高度
2 给父盒子设置overflow：hidden;
3 给父盒子的最后面加一个div，这个div有个属性：clear：both；
4 使用伪元素清除浮动
清除浮动的原理
1 给父盒子设置高度
直接把塌陷的高度补充回来
2 overflow：hidden；
触发了css里的bfc原理
bfc = block formatting context
块级格式化上下文
css高级内容
简单理解：
设置overflow：hidden元素，里面的子元素就自成一个体系，不会受到外部的影响
3 clear：both
隔断两边的浮动流
13. overflow
overflow 设置的是内容超出边界，如何显示
visible 不剪切也不出现滚动条
auto 当内容超出的时候，自动添加滚动条，没有超出就没有
hidden 当内容超出显示区域的时候，隐藏超出的部分
scroll 总是出现滚动条
clear属性
none 不隔断
left 隔断向左的浮动流
right 隔断向右的浮动流
both 隔断左右的浮动流
zoom 控制元素的缩放值
normal 原来多大就是多大
number 缩放倍数
伪元素
：before
为某个盒子添加一个子元素，这个子元素永远成为第一个子元素
：after
为某个盒子添加一个子元素，这个子元素永远成为最后一个子元素
14. 定位
固定一个位置
水平
left
right
垂直
top
bottom
1 固定定位
position :fixed
特点：
1 不占据原来在标准流里的位置
2 模式转换
3 定位的基准是以浏览器为基准的
2 绝对定位
position：absolute
特点：
1 不占据原来在标准流中的位置
2 可是实现模式的转换
3 如果父元素设置了定位，绝对定位是相对于父元素而言的，否则就是相对于浏览器而言
3 相对定位
position： relative
特点：
父盒子1 占据原来在标准流里的位置
2 不能实现模式转换
3 定位是相对于原来在标准流里的位置而言的
4 静态定位
position: static
静态定位其实就是标准流
特点：
1 占据原来的位置
2 不能实现模式转换
3 定位无论怎么设置，都没有效果
层级：
z-index:number
控制的是定位里层级
static定位是无法使用z-index的
15. 标签包含规范
1 行内元素尽量包含行内元素
2 某些块级元素不能包含其他块级元素
16. 规避脱标流
1 布局顺序
标准流，浮动，定位
2 margin：0 auto;
作用：
让设置了宽度的块级元素相对于父元素水平居中
margin-left：auto；
做到了类似右浮动的效果
3 vertical-align
依赖于文本中相关的线条来控制位置
图片默认和文字基线对齐
17. css可见性
1 display
display：none； 控制元素不显示，不占据位置
2 overflow
overflow：hidden 溢出隐藏
3 visibility
visibility: hidden; 控制元素不显示，占据位置
