1.一个元素:标签+属性+内容
2.<!DOCTYPE>声明html文档的版本,相当于dtd。<!DOCTYPE html>声明为html5
3.<meta charset="utf-8"/>
4.文本元素:标题,<h1>~<h6>由大到小
段落,<p> <p style="color:red;">
列表:有序(前面1,2,3的)<ol> 无序。(前面是个大黑点)<ul> <li>列表里的项
分区:块分区<div> 行内分区<span>
行内
5.<div style="border:1px solid #ccc;">边框1px,实线,灰色
6.元素显示方式:块级元素:元素前后自动换行<p><div><h1>
行内元素:不会换行<span><a><i><u>修饰一断文字的某几个字
7.如果一断文字只想改变几个字的样式可用<span>套上 <span style="color:red;">
8.<i><em>文字倾斜,<b><strong>加粗文字,<del>删除线<u>下划线
9. ;空格 ©;版权号 &it;小于号 >;大于号
10.<img src="" width="" height="">图片
11.<a href="" target="">href为链接地址,target为打开方式_blank:新窗口 _self:自己页面打开
12.<a name="aaa">锚点</a>锚点,能够链到当前页面的任意位置
<a href=“#aaa”>回到锚点</a>
13.表格<table>,行<tr>,列<td>按顺序画出 <table border="1px" width="30px" heigth="60%">屏幕的百分之60
14.px就是像素,屏幕里的一个点
15.<td>colspan=“2”跨2列,rowspan=“2”跨2行。很重要,合并单元格
16.thead tbody tfoot对表格分组,方便选取各各区域内容<tbody style="color:red;">
17.align=“left”right center单元格内的内容居哪边
18.<th>标题行的<td>自动居中加粗
19.<div style="border:1px solid red;width:960px;margin:0 auto">div居中
20.<form> enctype属性控制表单提交内部的编码
21.<label for="aa">账号:</label>label是通过input的id来绑定的
<input type="text" id="aa"/>label可以通过for属性绑定到input,点label相当于点了input
22.readonly只读属性,maxlength限制输入字符数
23.<input type="radio">单选框 ,name属性设为一样即可单选<input type=“checkbox”>多选框,checked属性表示默认选中
24.<input type=“reset”>重置,value属性名字
25.<input type="hidden">不希望用户看见的信息 ,<input type="file">文件选择框,提交文件给服务器的
26.<textarea>文本域(大号文本框)有cols,rows,readonly属性
27.<select>
<option value="1">aaa</option>最终提交的是value的值
</select>下拉选
28.<link rel="stylesheet" type="text/css" href="路劲">外部引用样式文件
29.font-family:“微软雅黑”;字体。层叠性:多次加样式会叠加。继承性。
30.内联样式优先级最高,内部和外部采取就近原则,谁在后面谁为主
31.backgroung-color:#ccc;
32..name,#a1{
}选择器可以一起选择,逗号隔开
33.#p1 b{
}在p1下选择所有的b,后代选择器
34.#p1>b{
}只找儿子,不找孙子,
35.伪类选择器,可以做出许多动态效果:link,:visited,:active,:hover,:focus
36.a:link{
}选择没点击过的超链接
37.a.visited{
}选择已经访问过的超链接
38.#button:active{
background-color:red;
}选择被点中的button,选择被激活的状态
39.#img:hover{
}选择鼠标上的图片,选择鼠标悬停的东西
40.#input:focus{
}获取焦点的样式
41.border-left:15px solid #ccc;border-bottom:15px solid #ccc;
42.单位:px,%,em(1.6)
43.定位:改变默认的元素的位置。浮动,相对,绝对,固定
44.di{
float:right/left;浮动
}
45.p{
clear:right;
}消除浮动对P的影响
46.<div style="border:0;clear:right;"></div>最好的消除福鼎影响
47.div{
position:relative;
left:50px;
top:50px;
}相对偏移,相对于本身
48.div{
position:absolute;
}绝对定位,相对于第一个设置了特殊定位的父元素。
49.div{
position:fixed;
bottom:10px;
right:5px;
}固定定位,参考窗口
50.display:none;不显示
51.z-index堆叠顺序
52.e.target获取事件源
53.冒泡机制,由里向外触发事件。event.cancelBubble=“true”
54.当采取外联样式时图片要填全路径background-image: url('http://localhost:8080/SaleWell/picture/1.jpg');