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选择器>类选择器>标签选择器>通配选择器