html 总结
html总结
html相当于人的骨架，是根本，是一种和python一样的编译语言
几个重要的标签：
1.特殊字符
空格、< 小于;、>大于;、© 版权
超链接标签
<a href="new.html" target="_blank">点击进入到新网页</a>
作用：
name属性
target属性
实现页面指定跳转（需要创建锚点）——>>即给要去跳转的地方添加name属性/id属性
图片标签
width属性
height属性
title属性
align属性
alt属性
查找：
相对路径查找
即 . 和 .. 分别地表当前目录 和 父路径
绝对路径查找
不推荐，（换电脑的话路径会更换）
表单标签<form>
列表标签：
1.无序列表ul li
属性有type属性
2.有序列表ol li
属性 type
3.定义列表dl dt dd
表格标签：
用table tr行 td列
border：边框。像素为单位。 style="border-collapse:collapse;"：单元格的线和表格的边框线合并 width：宽度。像素为单位。 height：高度。像素为单位。 bordercolor：表格的边框颜色。 align：表格的水平对齐方式。属性值可以填：left right center。 注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置） cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。 注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。 cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0 bgcolor="#99cc66"：表格的背景颜色。 background="路径src/..."：背景图片。 背景图片的优先级大于背景颜色。
以上有个重要属性是：style=‘border-collapse:collapse'：单元格的线和表格的边框线合并
需要注意:
在行内不能设置背景颜色，背景颜色需要在列中设置
单元格的合并：
colspan：横向合并
rowspan：纵向合并
表格的标题有一个标签：<caption>
写表格的时候经常会用到 <thead> <tbody> <tfoot>,这样的会页面会显得有条理，检查时方便
表单标签：
与服务器进行交互，表单就是用户输入的数据，发送到后台，然后接到后台反应
<form>
其中name id属性 是用于JS来操作表单时使用的
action method 属性
嵌套input标签才是form的强大之处
<input type="text" />
type属性：
type="属性值"：文本类型。属性值可以是： text（默认） password：密码类型 radio：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。 ）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。 checkbox：多选按钮，名字相同的按钮作为一组进行选择。 checked：将单选按钮或多选按钮默认处于选中状态。当<input>标签的type="radio"时，可以用这个属性。属性值也是checked，可以省略。 hidden：隐藏框，在表单中包含不希望用户看见的信息 button：普通按钮，结合js代码进行使用。 submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。 reset：重置按钮，清空当前表单的内容，并设置为最初的默认值 image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。 file：文件选择框。 提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。 value="内容"：文本框里的默认内容（已经被填好了的） size="50"：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。 注意size属性值的单位不是像素哦。 readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。 用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。 disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。
下拉列表标签
<select>中的选项是<option>
有multiple属性和size属性
多行文本输入框
<textarea>
有value rows cols readonly 属性
<label>标签
实现文件和选项按钮相关联
for标签： 找到与之要关类联的事件的id 或者name属性
css总结
简单就是给框架中添加一些样式，但是都是静态的。使页面有了一些基本的审美观
选择器
- 标签选择器
- id选择器 #
- 类选择器 .
- 总结：写类名尽量就小
高级选择器
- 后代选择器
- 子代选择器
- 并集选择器
- 交集选择器
- 属性选择器
继承性：
有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。
总结：
-
- 先看标签元素有没有被选中，如果选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上
- 如果没有被选中标签元素，权重为0
- 权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性
盒模型：
width：内容的宽度
height: 内容的高度
padding：内边距，边框到内容的距离
border: 边框，就是指的盒子的宽度
margin：外边距，盒子边框到附近最近盒子的距离
小属性：top right bottom left
有个透明颜色需要注意一下：transparent
标准文档流：
空表折叠现象
1 多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，如果在一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。
高矮不齐，底边对齐
自动换行
块级元素和行内元素
行内：
与其他行内元素并排
不能设置宽高，默认就是文字的宽度
块级：
独占一行
能接受指定宽高
两者之间转换方法：
用display：inline行内 参考span标签
：block块级 参考div
浮动
float：none: 表示不浮动，默认
-
- left: 表示左浮动
- right：表示右浮动
浮动的四大特性：
- 脱标
- 浮动的元素相互贴靠
- 由“字围”效果
- 收缩效果
清除浮动的方法：
- 给父盒子设置高度
- clear:both
- 伪元素清除法
- overflow：hidden（常用）
margin塌陷问题
水平方向上没有影响，垂直方向上有塌陷问题
常用技巧
- 标准文档流盒子水平居中 margin：0 auto
- 水平文本居中：text-align：center
- 文本垂直居中：行高=盒子的高度
- 盒子浮动就不会出现垂直方向上塌陷问题
文本属性和文字属性
background
background: red url('./images/banner.jpg') no-repeat center top;
-
background-color属性表示背景颜色
-
background-img:表示设置该元素的背景图片
-
background-repeat:repeat 表示设置该元素平铺的方式
-
background-position: 0 0 属性设置背景图像的起始位置。
作用：
- 将好多小图标合成在一张大图中，利用position找到需要展示的位置
- 可以减少http的请求
- 减少图片的字节
- 减少网页设计师在命名上的困扰
定位
相对定位：
不脱标、形影分离、老家留坑
用途：微调元素， 做父相子绝
绝对定位：
脱标、做遮盖效果提升层级、设置绝对定位后，不再区分行内和块级元素。都能设置宽高
*{
padding: 0;
margin: 0;
}
.box{
width: 100%;
height: 69px;
background: #000;
}
.box .c{
width: 960px;
height: 69px;
background-color: pink;
/*margin: 0 auto;*/
position: relative;
left: 50%;
margin-left: -480px;
/*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/
}
绝对定位：
脱标、固定不变
top是以左上角为参考点，bottom是一左下角为参考点
实例：
返回顶部栏、固定导航栏、小广告
z-index
谁大谁压着谁
只有定位的元素才能有z-index
没有单位，是整数
从父现象：父亲怂了，儿子再牛逼也没有用。
透明度：
opcity:0.6
background:rgba(0,0,0,.6)
以上都表示透明度为0.6
