html5

十一.表单

通过标签定义
属性
action 执行一个url
name 表单的名字
method 提交方式 get/post 默认的get方式，但是post方式更好，可容纳的更多，更安全。
enctype enctype=“multipart/form-data” 以二进制方式进行传输
一个完整的表单包含了哪些元素？

form标签+表单域（表单元素）+提交按钮

表单元素

单行文本框，默认的不写type类型，是text类型

密码框
单选按妞
复选框
单选和复选，名字相同即为一组
默认的checked=“checked”

提升用户体验
男


指定方式必须为post
要添加enctype=“multipart/form-data”
button 只是一个普通的按钮，需要结合js
submit 提交按钮
image 提交按钮 有可能提交两次，不推荐
reset 重置按钮

标题 北京 南京 东京

多行文本框，中间不加空格回车
placeholder 默认提示
require 必填
readonly 只读
disable 不可选择

隐藏域不会显示给客户，提交给后台

HTML5新的input类型

请输入网址 请输入数字： 拖动改变范围 请选日期 关键字 请选择颜色

二十二集.
Div

class定义类名，引用的时候使用。一个页面可以出现多词
id名，一个页面唯一

常见的Html5新增语义化标签
header 页面头部，一个页面可以有多个
footer 页脚
article 定义页面独立的内容，一般为文章
aside 侧边栏 不会对页面的元素有修改 只是更有语义
summary 是details的标题
time 定义日期或者时间
mark 标记 两个子元素 rt音标 rp标签不显示
ruby 注释
nav导航链接

progress 进度 value当前值 max
section 文档中的章节或者节
video 视频
audio 音频
source 资源
detalist 提示可能的值

embed 引入flash或者插件 两个标签之间不要加任何文字会显示出来 canvas 画布标签 初始大小是300px*150px CSS样式表 ID>CLASS>元素>通配符 通配符即对整个页面有效

基础选择器

• 通配符对整个页面有效
  #id id选择器，匹配特定ID
  .Class 类选择器，匹配class包含特定的元素
  element 标签选择器

一些常见的样式
color：red； 字体颜色
font-family：arial; 字体样式
text-align:center; 字体居中，可以选择left,right
background-color:red; 背景色
border：1px solid green;为元素添加边框，设置1像素宽度，实线，绿色

CSS样式表
结构：
选择器{声明1；声明2；声明3}
#id名
.class
标签名
通配符
ID>CLASS>元素
引入方式
行内样式表 style""
内部样式表
外部样式表
导入方式@url"test.css"

背景相关样式
1.background-color: #194127;背景颜色
2.background-image: url("");背景图片
3.background-repeat: no-repeat;背景图片是否对齐
4.background-size: autos背景图片大小
5.background-attachment:fixed;背景图片是否固定
6.background-position;背景图片相对于外部容器的相对位置

颜色相关
1.color
2.opacity 元素的透明度

字体相关
1.font-style: normal;指定文本的文本样式（正常，斜体）
2.font-weight 指定文本的粗细
600以下正常，600以上包含600是加粗显示
3.font-size 指定文本的大小
4.font-family; 指定文本的字体

p{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}；将一段文字有省略号

text-decoration: underline; 下划线
text-decoration:overline; 上划线
text-decoration: line-through; 文字的贯穿线，类似于删除标签；
text-decoration: none;去除文本的
#ul1{list-style: none}；

去掉列表里的项目符号
list-style:none;
实例：使用背景图的方式设置项目图片更加灵活，兼容性更好
ul li{text-indent: 30px;background:url(“ima/UC截图20171226113320.png”) no-repeat; }
table{border:0px solid darkred;border-collapse: collapse;

27集
CSS选择器
基础选择器，关系选择器，属性选择器，伪类选择器，伪对象选择器。

关系选择器有如下几种：
1.包含选择器（E F）如ul li{color red};
2.子选择器 (E>F） 只对子元素有影响，对下一层无影响
3.相邻选择器：(E+F） 紧贴在E元素的F元素为第一个兄弟元素。
兄弟选择器(E~F） 作用于E元素之后的所有元素：对他后面的元素起作用

属性选择器
E[att] 选择具有att属性的E元素 option[disabled]{}
E[att=“val”] 选择具有att=val属性的E元素
E[att~=“val”] 选择具有att=val属性,只要有val就会被选中 p[class~=“p”]
E[att^=“val”] 选择具有att属性,且以"val"开头的E元素 p[class^=“p”]
E[att$="val"]选择具有att属性,且以"val"结尾的E元素p[class$=“p”]
E[att*=“val”] 选择具有att属性,且包含"val"的E元素 a[herf*=“jd”]

28集

CSS伪类选择器
E:link 设置链接a在未被访问前的样式（特指a标签）
a:link{color:red} 与不用
E:visited 设置链接a在被访问后的样式（特指a标签）
a:visited{color:green;}
E:hover 设置鼠标悬停效果。不限标签
a:hover{background-color:blue;color:red}
E:active 设置元素在鼠标按下时的样式。不限于a标签
ul li:active{color: #194127;}
E：not(s) 匹配不含有s选择器的元素E
E：first-child 父类元素的第一个子元素
E：last-child 父类元素的最后一个子元素
E: only-child 父类元素只有一个子元素时才会生效

29集
伪类更多的是定义元素的状态，伪元素更多的是改变文档的结构。
常用伪元素
1.E:before/E::before
2.E:after/E::after

30集
CSS浮动（float）
浮动值：
left:向左浮动
right:向右浮动
33集（京东实例）：
*{margin:0px;padding:0px} 清楚格式
background:rgba(0,0,0,.3); 背景颜色+透明