1.html
html版本
狭义的H5：HTML的第五个大版本
广义的H5：css3+html5+js
标签:
表单标签：from
这个标签是作为一个容器，来搜集和提交这个标签中的其他相关标签的数据，一般不会单独使用
action属性：提交路径（接口）
method属性：设置请求（post/get)
input标签：
可以单独使用，也可以和form配合使用
type属性：这个值不一样，input的功能就不一样
文本输入框（type:text)
密码输入框（type:password)
name:用来对输入的内容进行说明。提交数据的时候以name:value形式进行提交，name值会作为发送请求的参数名，value就是参数值
value指向文本中的内容
placeholder：占位符（提示信息）
maxlength:限制输入框能输入的最大的字符个数
单选按钮（type:radio)
name:注意，同一类信息的name需要设置成一样的值，才能做到单选的作用。
value：需要设置值来告诉别人选中按钮对应值或者意义
checked：设置默认选中状态
disabled:禁用
复选框：type:checkbox
name:同一类数据，name值相同
普通按钮：type:button
value:设置按钮上的文字
button标签：<button>按钮</button>
提交按钮：type:submit
可以自动提交当前form标签中所有设置了name属性的标签的值
重置按钮：type:reset
可以将form标签中所有的标签的设置为初始状态
<html>
<head>
<title>day3</title>
<meta charset="utf-8" />
</head>
<body>
<form action="" method="get">
<input type="text" name="username" value="" placeholder="用户名"/>
<input type="password" name="" id="" value="" placeholder="密码" maxlength="8" />
<input type="radio" name="sex" id="sex" value="boy" checked=""/>男
<input type="radio" name="sex" id="sex" value="girl" />女<br />
<input type="checkbox" name="p" id="" value="0" />小米<br />
<input type="checkbox" name="p" id="" value="1" />小米1<br />
<input type="checkbox" name="p" id="" value="2" />小米2<br />
<input type="checkbox" name="p" id="" value="3" checked="checked"/>小米3<br />
<br />
<input type="button" name="" id="" value="按钮" />
<input type="submit" id="" name="" />
<input type="color" />
</form>
</body>
</html>
下拉菜单：select - option
name:提交的时候用来区分不同的数据
value:提交的时候提交具体数据
selected：设置默认选中
对下拉菜单进行分组：optgroup
lable:设置分组名
<form action="" method="get">
<select name="city">
<option value="成都">成都</option>
<option value="北京" selected="selected">北京</option>
<option value="上海">上海</option>
<option value="xck">xj</option>
</select>
<select name="">
<optgroup label="四川"></optgroup>
<option>1</option>
<option>1</option>
<optgroup label="上海"></optgroup>
<option>2</option>
<option>2</option>
</select>
<input type="submit" value=""/>
</form>
多行文本域：textarea
输入的内容可以多行显示
rows：设置一屏最多可以显示的行数
clos:一行最大列数
表单标签
div和span标签都是无语义标签，一般用来对网页中的标签进行分组和分块用的
一个div占一行，多个span可以在一行显示
2.css
1.什么是css
css就是web标准中的表现标准，专门用来对网页标签进行布局和设置样式的一门语言。
目前一般使用css3,css又叫样式表
2.css基本语法
选择器{属性：属性值；属性：属性值…………}
选择器：用来选中需要设置样式的标签
属性：必须是css提供的属性，总共200多个。
属性值：根据属性赋不同的值。如果属性的值是用来表示大小的数字，后面必须加单位。如：px像素、em空格
css中的颜色值：a.英文单词 b.#颜色对应的6位16进制值 c.rgb(r,g,b);rgba(r,g,b,a) a表示透明度取0到1
属性与属性值用冒号隔开，不同属性用分号隔开。
3.在哪写css代码
常用css属性：
color：设置字体颜色
bankground - color:设置背景颜色
width：宽度
height:高度
font-size:字体大小
内联样式：将样式表写在标签的style属性中 仅对一个标签有效
内部样式：将样式表写在head中style标签中 当前html有效
外部样式：将样式写在外部的css文件中，然后在head中通过link标签导入 对所有html有效
link标签:导入外部文件
rel属性：说明导入的文件的功能，stylesheet(样式表)，icon(图标)
type属性：对导入的文件类型进行说明：文件类型/文件后缀
href属性：导入的文件的地址。
样式优先级：内联样式 最高，内部其次外部最低
css选择器
常用的选择器：元素选择器、id选择器、class选择器、父子选择器、群组选择器
1.元素选择器：将标签名作为选择器，选中指定的标签，选中所有指定的标签。 用法：标签名{}
2.id选择器：将标签中的id属性的值作为选择器，选中id值对应的标签
用法：#id值 值不能是1，2，之类的，要有字母
3.class选择器：将标签中的class属性作为选择器。 用法： .class值{}
4.群组选择器：多个选择器用逗号隔开作为一个选择器，同时选中所有选择器对应的标签 用法： a,p{} #p1,#p2{}
5.父子选择器：多个选择器用逗号隔开作为一个选择器，按顺序依次往后找，找到最后一个标签。 div div p{} 选中div 中div中的p标签
6.通配符：将*作为选择器，选中当前网页中所有的标签
伪类选择器：选中某个标签的不同状态。可以给不同状态设置不同的样式
标签：link{}选中初始状态 。 a:link{};#a1:link{} a标签的初始状态指a对应的网址依次都没有访问成功过
a:visited：访问后的状态。
a:hover鼠标悬停在标签上对应的状态
a:active:鼠标按住不放时的状态
注意：使用伪类选择器的时候要遵守爱恨原则（LoVeHAte),按顺序写。不遵守可能会导致某些样式无效。
选择器优先级：权重越大，优先级越高。
元素选择器权重：0001
class选择器权重：0010
id选择器权重：0100
伪类选择器权重：0001
群组选择器权重，单独看每个选择器的权重
父子选中器：所有选择器权重之和
优先级一样，谁后写谁有效
内联样式的优先级是最高的
1.css属性
标准流布局：
在标准流中，块级标签是一个占一行，默认宽度是父标签的宽度，默认高度是内容的高度；并且可以设置高度和宽度
行内标签:一行可以显示多个，默认宽度和高度都是内容的宽度；设置宽高无效
行内块标签：一行可以显示多个，默认高度和宽度是内容的宽高，设置宽高有效
块级标签：h标签；p标签，hr标签，ol,li,ui;dl ;table; tr；div
行内标签：a;img;td;select;input;option;textarea;span
display:设置标签的性质
block：将其他的标签转换成块级标签
inline-block：将标签设置为行内块标签（坑：一般不会通过将标签转换为行内块来；因为两个标签之间会有空隙，h5bug)
inline：将标签设置为行内标签解决问题
浮动会让标签脱离标准流进行布局（脱流）
float属性：
left：左浮动
right：右浮动
浮动原理：浮动会让标签脱离标准流布局
个人理解：标准流会证据位置和显示，而浮动只是显示，多个浮动会分开显示后来的显示在前一个的右边或者左边（看是flaot是left,还是right)或者下一行；一个标签浮动后，后面的标准流会与浮动标签叠加，重叠部分看到的是浮动的标签，后面的的浮动标签会在这个标准流之后显示。
清除浮动：清除因为浮动而产生的高度塌陷问题
高度塌陷：当父标签不浮动，并且不设置高度；但是子标签浮动的时候就会产生高度塌陷问题
解决方法：
1.设置一个空div；<div style="clear:both>
2.推荐方法：给父标签设置overflow：hidden;
3.专业方法：
文字环绕效果：
被环绕的标签（如图片）浮动；文字对应的标签不浮动
定位：
css可以通过left,right,top,bottom来对标签进行定位。前提是设置好参考对象。
注意：定位需要通过position属性来设置参考 对象；当标签的宽度固定时，同时设置left和right只有left有效；可以同时设置left和right，不设置标签宽度或者值为auto时会自动拉伸；值可以使负的，即超出参考对象
position属性：
initial：默认值；
static：不希望自己的子标签相对自己定位的时候才使用static
absolute：相对第一个非static和非initial的父标签进行定位（如果父标签不满足条件，就现对浏览器定位。
relative：相对于自己在标准流中的位置定位。如果一个标签希望自己的子标签能相对自己定位
fixed：相对浏览器定位
sticky：粘性定位，只针对网页底部的标签定位。如果网页的内容超过一屏（需要滚动）的时候，相对浏览器定位，否者相对标准流定位。
盒子模型：HTML中所有可见的标签都是盒子模型。有固定的结构，包括：内容、padding、margin、border
内容：可见的，可设置宽高；添加子标签或者设置文字内容都是添加或显示在内容部分的；可以background-color设置内容背景颜色；默认大小和标签中的内容有关
padding：可见的，分上下左右四个部分。一般没有默认都是0。background-color也会作用于padding。设置上下左右：padding-left，padding-top……
border:可见的，分上下左右四个部分。一般没有默认都是0。
颜色要单独设置。线的样式：solid，double，dashed；每一边都可以单独设置颜色样式，大小。
margin:不可见的，分上下左右四个部分。一般没有默认都是0。
设置圆角
border-radius：10px；
border-top-left-radius:
