一、HTML+CSS网页布局基本属性
在当前页面中使用CSS样式
<style type="text/css">
</style>
引入外部CSS样式：
三种添加css样式的方法有优先级，
优先级最高的是在标签内部嵌套的属<span style="color:blue">
优先级第二的是在本页面中设置在head标签里面的css属性
优先级第三的是外部引入的css文件
<link href="style.css" rel="stylesheet" type="text/css" />
标签属性：
为标签设置样式：
可以在标签里面设置属性样式
<span style="color:blue">超酷的互联网</span>
标签名称{
font-size:12px;
color:red/#fff;
text-align:center;
}
根据标签的ID设置样式：
#div{
font-size:44px;
background:#ccc;//设置背景色
}
根据标签的class为标签设置属性样式：
.myp{
font-size:23px;
color:blue;
background:#cfcfcf;
font-weight:bold; 设置字体加粗
}
标签
<span>：没有语意，它的作用就是用来设置单独的样式
<em>和<strong>标签的意义是用来强调
<q>引用文本为文本自动添加双引号
<ul>无序列表
<ol>有序列表
<caption>为表哥添加标题,放在table标签后面，tr标签前面
target="_blank"在新窗口中打开网页
a标签发送邮件属性：
<img>标签：为网页中插入图片
alt：指定图片的描述性文本，当图片不可见时（例如图片下载失败），可以看到该属性
title：提供对可见图片的描述，当鼠标滑过图片的时候显示该属性
<form>标签
属性：method="传送方式(数据传输的方式get/post)" actoin="服务器文件（用户输入的数据被传送到一个地方，例如test.php）"
注意：
所有表单控件
{
文本框：<input>可以输入，设置type属性
文本域：<textarea>支持多行输入,rows行数 cols列数 标签之间可以输入默认值
按钮、
单选框、复选框：<input type="radio" value="2" name="gender-man" id="s"/>
radio表示单选框，checkbox表示复选框 ，同一组的单选框，name必须相同，才可以实现单选效果
}
都必须放在form标签之间，否则用户输入的信息则可能提交不到服务器
<select><option></option></select>下拉列表选项 selected="selected"---->表示哪个下拉的选项显示
标签子选择器：
.food>li{border:1px solid red}
意思是在class为food标签中包裹的li标签的属性
标签包含后代选择器
.first (空格) span{color:red}
空格后代选择器作用于所包含的所有子类，字标签，后代，所有的包含的标签都会应用这种属性
通用选择器
*{color:red} 作用与所有标签的属性
伪类选择器
它允许给HTML不存在的标签设置样式，比如给HTML中一个标签元素的鼠标滑过状态来设置字体颜色等
a:hover{color:red;}
分组选择符：
如果想给HTML中的多个标签设置同一个样式时，可以使用分组选择符，例如：
h1,span{color:red} 标签之间用逗号隔开
相当于
h1{
color:red
}
+
span{
color:red
}
css标签样式的继承性：
css某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定HTML标签元素，而且应用于其后代，例如：
某种颜色应用于P标签，这个设置不仅应用于p标签，还应用于p标签中的所有子元素文本例如span标签等;
css标签样式的特殊性：
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
css标签的层叠性：
如果为同一个标签设置了多个样式，后面的样式给覆盖前面设置的属性;
css标签样式的重要性：
在做网页时候，如果需要为有些样式设置最高权值我们可以用 !important 来实现,例如：
p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
此时标签的颜色会是红色。
css设置字体样式：
font-family:"Microsoft Yahei"; 设置字体为微软雅黑
font-family:设置字体；
font-size:字体大小；
font-weight:bold：设置为粗体样式；
font-style:italic：设置为斜体样式；
text-decoration:underline：文字设置下划线；
text-decoration:line-through：删除线；
text-indent:2em：缩进；（注意：2em的意思就是文字的2倍大小。）
line-height:2em：行高；
word-spacing:50px：单词间距；
letter-spacing:20px:字母间距；
text-align:center：水平居中对齐；
border的样式{
dashed（虚线）| dotted（点线）| solid（实线）
}
例如：
p{
border:2px dotted #ccc;
}
css中的样式编写
.div>i{
}
大于号表示div中的i的样式，加了大于号表示它里面的直接的子元素，如果有其他的嵌套的<i>则不会起作用
但是如果没加大于号，相当于子元素，里面有多少个<i>都会设置同样的属性
百度地图去掉左下角标志：
.anchorBL{display:none;}