1、html:不区分大小写
html:显示数据
<html><head><title></title><style></style></head><body>hello!</body></html>
< h>设置标题 h1-h6
< img>设置图片
< a> 超链接
< table>
< tr>
< td> < th>
列表
自定义:dl,dt,dd
有序 ol li
无序 ul li
表单
action 表示提交之后的后台处理程序的名称
method:get,post,
method=\”post\”才可post,其它以及默认为get
**
get和post区别
get请求,数据在url上传递
不安全
数据量小
post请求:数据通过体传递
安全,数据量大
< form action=\”\” method=“get”>< /form>
CSS:层叠样式表
作用:美化页面(网站)
内嵌:
< p style=“color:red” >短路1
优先级高
style:
< style type=“text/css”>
p{color:blue;}
< /style>
优先级较高
引入外部的文件
test1.css
p{color:green;}
html
< link rel=“stylesheet” href=“css/test1.css” >
优先级低
选择器
1、元素选择器
选择器的名称是html的标签名{
样式的集合;}
div{
color:red;
font-size:12px;
}
使用:匹配html的元素
2、类选择器(重复使用)
.类名{
}
使用:< p class=“类名”>
3、id选择器(使用一次)
#id值{
}
使用:< p id=“id值”>
4、后代选择器(子孙选择器)
.div1 p{
font-size:30px;
color:#0000ff;
}
div1 下所有p
5、子选择器
.div1>p{
font-size:30px;
color:#0000ff;
}
div1 下一级p
6、分组选择器
.div1,p{
font-size:30px;
color:#0000ff;
}
所有div和p(及子)下
7、div + p
div的下一个兄弟p
8、div ~ p
div的后边所有的兄弟p
盒子模型
内容+内边框padding+边距border+margin
块级元素和行内元素
块级元素特点:
独立一行,可设置宽高,内外边距的上下左右边距
< div>< p>< li>
行内元素特点:
可以在一行显示多个元素,
可设置宽高但没意义(input与img除外),
外边距的上下不起作用
< a>< span>< input>< img>
文本样式
背景颜色
浮动
文档流:按顺序显示组件
脱离文档流:飘起来
文字不会被覆盖