html+css基本知识及应用

基础知识

action 提交 先执行form表单的提交，然后再执行下一个
formaction 灵活提交
formmethod
Formtarget target属性从浏览器中打开新的窗口
Required 必填项
定义声音
定义音频

输入框
下拉列表 select option
Html5表单属性
placeholder 主要用在文本框，规定可描述输入字段预期值的简短的提示信息
autofocus 当为某个表单控件增加该属性后，当浏览器打开这个页面， 这个表单控件会自动获得焦点
list 为文本框指定一个可用的选项列表，当用户在文本框中输 入信息时，会根据输入的字符，自动显示下拉列表提示，供用户从中选择
pattern 用于验证表单输入的内容，通常 HTML5 的 type 属性，比如email、tel、 number、url 等，已经自带了简单的数据格式验证功能了，加上 pattern 属性后， 验证会更加高效
required 必需在提交之前填写输入字段
spellcheck 拼写检查，为、等元素新增属性
multiple 一次上传多个文件
maxlength 新增
maxlength：用于规定文本区域最大字符数。
wrap：是否包含换号符（soft/ hard） -->

兄弟选择器
.box~~p{} 只显示和box同级的东西，//box后所有的p都会被选择
.box+p{} 只显示box的后一个
属性选择器
E[attribute^=value]用于选取带有以指定值开头的属性值的元素
E[attribute$=value]用于选取属性值以指定值结尾的元素E[attribute$=value]用于选取属性值中包含指定值的元素，位置不限，也不限制整个单词
伪类选择器

:root 选择文档的根元素，HTML 里，永远是元素
:last-child 向元素添加样式，且该元素是它的父元素的最后一个子元素
:nth-child(n) 向元素添加样式，且该元素是它的父元素的第 n 个子元素
:nth-last-child(n) 向元素添加样式，且该元素是它的父元素的倒数第 n 个子 元素
:only-child 向元素添加样式，且该元素是它的父元素的唯一子元素
:first-of-type 向元素添加样式，且该元素是同级同类型元素中第一个元 素
:last-of-type 向元素添加样式，且该元素是同级同类型元素中最后一个 元素
:nth-of-type(n) 向元素添加样式，且该元素是同级同类型元素中第 n 个元 素
:nth-last-oftype(n)向元素添加样式，且该元素是同级同类型元素中倒数第 n 个元素
:only-of-type 向元素添加样式，且该元素是同级同类型元素中唯一的元素
:empty 向没有子元素（包括文本内容）的元素添加样式

伪元素选择器（不常用）伪元素两个冒号，伪类一个冒号
:enabled 向当前处于可用状态的元素添加样式，通常用于定义表单的样式或者超链接的样式
:disabled 向当前处于不可用状态的元素添加样式，通常用于定义表单的 样式或者超链接的样式
:not(selector) 向不是 selector 元素的元素添加样式 :target 向正在访问的锚点目标元素添加样式

基本应用

盒子属性
Border-radius 设置所有四个边框半径属性的速记属性
border-radius:15px 50px 30px 5px(四个值)
第一个值是左上角，第二个为右上角，第三个为右下角，第四个为左下角
border-radius:15px 50px 30px(三个值)
第一个值是左上角，第二个为右上角和左下角，第三个为右下角
border-radius:15px 50px(两个值)
第一个值为左上角和右下角，第二个值为右上角和左下角
border-radius:15px (一个值)
四个圆角相同
Border-image 设置所有边框图像速记属性
Border-shadow 附加一个或多个下拉框的阴影

浮动
浮动原理
1.浮动使元素脱离文档普通流，漂浮在普通流之上的。
2.浮动元素依然按照其在普通流的位置上出现，然后尽可能的根据设置的浮动方向向左或者向右浮动，直到浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它。
3.浮动会产生块级框（相当于设置了 display:block），而不管该元素本身是什么。

清除浮动的方法：
1.给浮动元素的后面添加一个空的块级元素用clear:both;
实例：

• 2

1

2

底部版权

定位
相对定位（相对于原位置）
1.需要设置 position:relative（相对定位），
2.它通过 left、right、top、bottom 属性确定元素在正常文档流中的偏移位置。
3.相对于原位置移动，移动的方向和幅度由 left、right、top、bottom 属性确定，偏移前的位置保留不动。
4.z-index 层级设置

绝对定位（相对于父类）
1.需要设置 position:absolute(绝对定位)，这条语句的作用将元素从文档流中拖出来
2.使用 left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
3.如果不存在这样的包含块，则相对于 body元素，即相对于浏览器窗口。
4.z-index 层级设置

固定定位（相对于网页窗口）
与 absolute 定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，
除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位
的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed 属性功能相同。

实例：

这里是标题

页面布局

布局思路：
从整体到局部
从外向里
从上至下
从左至右
编写顺序：
1.定位（float position left right bottom top z-index）
2.宽、高、边距
3.文字样式
4.背景样式
5.过渡 动画
常见问题：
1.乱码问题 编码
2.样式引入无效问题（属性丢失，路径错误）
3.清除浮动问题
4.定位乱的问题—找绝对定位的父级添加相对定位
5.a标签鼠标经过无效问题–a:link a:visited a:hover a:active
实例：

logo

search

tel

• 网站
• 网站
• 网站
• 网站
• 网站
• 网站

• 		</ul>
  	</div>
  </div>
  <div class="banner">banner</div>
  <div class="con">
  	<div class="main">neirong</div>
  </div>
  <div class="footer">
  	<div class="main">footer</div>
  </div>
  

唯有一直奋进，方可不负本心。