HTML+CSS总结
一、HTML标签
1、基本结构
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<!--页面主体:在这做各种基本操作-->
</body>
</html>
2、基本标签
1）hx：标题标签
<h1></h1>
...
<h6></h6>
2）p：段落标签
3）img：图片标签
4）audio：音频标签
html5中：不同浏览器的兼容性不同，建通音频格式也不同。
<audio>
<source src="" type=""/>
</audio>
5）video：视频标签
6）a：超链接标签
<a href="" targer=""></a>
其中href：链接地址
targer：打开方式
_blank：新窗口打开
_self：原窗口打开
7）ul/ol：列表标签
无序列表：
<ul type="无序列表的形状">
<li>
</li>
</ul>
有序列表：
<ol type="有序列表类型">
<li>
</li>
</ol>
3、表单标签
1）form：表单标签
<from action="" method="">
</from>
action:表单数据提交的服务器地址
method:表单提交方式
_GET（不安全）：键值对方式提交，数据长度不超过3KB，随着url地址提交，请求响应速度快
_POST（安全）：安全性高，数据长度无限，将数据封装到请求中随着request请求一起提交，请求速度稍慢
2）input：表单输入控件标签
<input name="" value="" type="" size=""/>
常用属性
name：相当与key值
type：输入控件类型，默认为text（文本框）
-text：文本框
-password：密码框
-radio：单选按钮，设置的时候在同一组里面选其一，同一组中的name要一样
-sumit：提交按钮
value：key对应的value
size:输入控件长度,默认201
maxlength:输入最大长度
minlength:输入最小长度
checked:是否选中
placeholder:文本提示
pattern:正则表达式,此输入文本的格式
max:最大值
min:最小值
step:步长
二、CSS级联样式表
1、样式引入
1）行内样式（不推荐）
<h1 style="font-size: 24px">
HelloWorld
</h1>
2）内部样式
必须写在head标签里面
<style type="text/css">
p{
color: green;
}
</style>
3）外部样式
将样式全部放在css文件中，通过导入式或者链接式使用
/* 样式和内容分离 */
h{
color: black;
size: 24px;
}
p{
color: chocolate;
size: 12px;
}
导入式：不推荐
<style type="text/css">
@import url("CSS/style.css");
</style>
链接式：推荐
<link type="text/css" rel="stylesheet" href="CSS/style.css"/>
注意:
1.导入式部分浏览器不兼容
2.档多个样式表对某个元素设置,样式如果冲突则就近原则,如果样式不冲突,则样式合并
3.HTML边解释边执行
三、CSS选择器
1）目的：选择需要设置的元素,让元素具有设置的样式
2）语法：
选择器名称{
属性:属性值;
属性:属性值;
}
3）类型
a.通配选择器
*{
属性:属性值;
属性:属性值;
...
}
b.标签选择器
标签名{
属性:属性值;
属性:属性值;
...
}
c.类选择器
.选择器名称{
属性:属性值;
属性:属性值;
...
}
d.id选择器
#选择器名称{
属性:属性值;
属性:属性值;
...
}
注意:
1.ID选择器只能被一个元素应用一个元素只能使用一个ID选择器
2.当选择器对元素设置有冲突时,根据选择器优先级设置
ID选择器>类选择器>标签选择器>通配选择器