HTML/CSS基础篇
1.head头部介绍：
<head>标签的作用：文档的头部描述了文档的各种属性和信息，包括文档的标题等，head标签主要包括http-equiv,title,content,script,link等
概念：语义化：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，
2.常见的body标签:
<!--注释-->
<em>需要强调的文本</em> --斜体表示
<strong>需要强调的文本</strong> -加粗
<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。
<q>引用文本</q>
<blockquote>的作用也是引用别人的文本，但它是对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。
<br/>空标签
  空格
<hr>标签，添加水平横线
<address>标签，为网页加入地址信息<address>联系地址信息</address>斜体
<code>标签添加代码 <code>var i=i+300;</code>，多行代码<pre>标签
<pre> 标签的主要作用:预格式化的文本。被包围在pre 元素中的文本通常会保留空格和换行符。
列表可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。
<ul> --新闻列表信息
<li>信息</li>
<li>信息</li>
......
</ul> --有序列表
<ol>有序列表
<li>信息</li>
<li>信息</li>
......
</ol>
<div>…</div>在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器;
<div id="版块名称">…</div>给独立的逻辑部分命名
<table summary="表格简介文本">…</table>：整个表格以<table>标记开始、</table>标记结束。
<caption>标题文本</caption>
<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示
<tr>…</tr>：表格的一行，所以有几对tr表格就有几行。
<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
<th>…</th>：表格的头部的一个单元格，表格表头。
表格中列的个数，取决于一行中数据单元格的个数。
总结：
1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的
2、表头，也就是th标签中的文本默认为粗体并且居中显示
为表格添加样式
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
<a href="目标网址" title="鼠标滑过显示的文本"target="_blank">链接显示的文本</a>
mailto在网页中链接Email地址,如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
<img src="图片地址"alt="下载失败时的替换文本" title = "提示文本">
<form method="post" action="save.php">
<label for="username">用户名:</label>
<input type="text" name="username"value=""/>
<label for="pass">密码:</label>
<input type="password" name="pass" value="">
</form>
注意:
1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在<form></form>标签之间（否则用户输入的信息可提交不到服务器上哦！）。
2、method:post/get的区别这一部分内容属于后端程序员考虑的问题,当用户需要在表单中输入大段文字时，需要用到文本输入域
<textarea rows="行数" cols="列数">文本</textarea>
<form method="post" action="save.php">
<label>联系我们</label>
<textarea cols="50" rows="10" >在这里输入内容...</textarea>
<input type="submit" value="确定" name="submit" />
<input type="reset" value="重置" name="reset" />
</form>
单选框：
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
下拉列表:
<form action="save.php"method="post" multiple="multiple" > 多选
<label>爱好:</label>
<select>
<option value="看书" >看书</option>
<option value="旅游">旅游</option>
<option value="运动">运动</option>
<option value="购物"selected="selected">购物</option>
</select>
提交表单和数据
<input type="submit" value="提交">
<input type="reset" value="重置">
label标签
<label for="控件id名称">
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
3.CSS样式：
p{
font-size:12px;
color:red;
font-weight:bold;
}
span{
color:red;
}
CSS注释：用/*注释语句*/
1.内联式css样式
eg:<p style="color:red;font-size:12px"">这里文字是红色。</p>
2.嵌入式css样式，写在当前的文件中
3.外部式css样式，写在单独的一个文件中
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内
<link href="base.css"rel="stylesheet" type="text/css" />
优先级：内联式 > 嵌入式 > 外部式
4.选择器：
标签选择器：其实就是html代码中的标签。如<html>、<body>、<h1>、<p>、<img>
p{font-size:12px;line-height:1.6em;}
类选择器：
.类选器名称{css样式代码;}
ID选择器：
<span id="setGreen">公开课</span>
# setGreen{css样式代码}
在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：
1、为标签设置id="ID名称"，而不是class="类名称"。
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）
类和ID选择器的区别
相同点：可以应用于任何元素
不同点：
1、ID选择器只能在文档中使用一次，与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次，而类选择器可以使用多次
2.可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）
子选择器：
.food>li{border:1px solid red;} 使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。
包含（后代）选择器：加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码.first span{color:red;}
子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素，后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
>作用于元素的第一代后代，空格作用于元素的所有后代
通用选择器
* {color:red;}匹配Html中的所有标签元素；
伪类选择符：
它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色
a:hover{color:red;}
分组选择符：
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）
h1,span{color:red;}
特殊性：
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100，继承权值最低；
层叠：层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中
重要性：设置样式不是
eg:p{color:red!important;}
浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。
文字排版：
body{font-family:"宋体";}
body{font-family:"MicrosoftYahei";}orbody{font-family:"微软雅黑";}
body{font-size:12px;color:#666}
-粗体:pspan{font-weight:bold;}
斜体:p a{font-style:italic;}
下划线:p a{text-decoration:underline;}
删除线: .oldPrice{text-decoration:line-through;}
缩进: p{text-indent:2em;} 2em的意思就是文字的2倍大小。
行间距（行高）: p{line-height:1.5em;}
中文字间距、字母间距:
字母间距：
h1{
letter-spacing:50px;
}
中文字符间距：
h1{
word-spacing:50px;
}
对齐：
text-align：center/left/right
5.元素分类:
常用的块状元素有：a{display:block;}
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>
特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
常用的内联元素有：display:inline
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变
常用的内联块状元素有：display:inline-block
<img>、<input>
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
6.盒模型简介
盒模型--边框:粗细、样式和颜色
盒子模型的边框就是围绕着内容及补白的线
div{
border:2px solid red;
}
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用象素（px）。
css 样式中允许只为一个方向的边框设置样式：
div{border-bottom:1px solid red;}
盒模型--宽度和高度（height和width）:
padding:填充；边框：border;边界：margin
元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界
eg:div{
200px;
padding:20px;
border:1px solid red;
margin:10px;
}
盒模型--填充:上右 下 左
div{padding:20px 10px 15px 30px;}
div{padding:10px;} 上 右 下 左 都是10px
div{padding:10px 20px;}上 右是10px, 下 左是20px;
盒模型--边界
元素与其它元素之间的距离可以使用边界（margin）来设置
div{margin:20px 10px 15px 30px;}
padding在边框里，margin在边框外
7.CSS布局模型:
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）
流动（Flow）是默认的网页布局模式，也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示
浮动模型
如果现在我们想让两个块状元素并排显示
div{
200px;
height:200px;
border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}
层模型
层模型有三种形式：
1、绝对定位(position:absolute)
position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口
div{
200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
2、相对定位(position:relative)
position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
#div1{
200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
3、固定定位(position:fixed)
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变
#div1{
200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
Relative与Absolute组合使用
<div id="box1"><!--参照定位的元素-->
<div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>
1、参照定位的元素必须是相对定位元素的前辈元素
2、参照定位的元素必须加入position:relative;
#box1{
200px;
height:200px;
position:relative;
}
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了
#box2{
position:absolute;
top:20px;
left:30px;
}
盒模型代码简写
颜色值缩写：关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半
p{color: #336699;}
缩写：p{color:3369}
字体缩写:
1、使用这一简写方式你至少要指定font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height中间要加入“/”斜扛。
一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用
body{
font:12px/1.5em "宋体",sans-serif;
}
颜色值:
1、英文命令颜色
2.RGB颜色
p{color:rgb(133,45,200);}p{color:rgb(20%,33%,25%);}
3、十六进制颜色
p{color:#00ffff;}
长度值 CSS规范中假设“90像素=1英寸
1、 像素 2、em 3、百分比p{font-size:12px;line-height:130%}
8.水平居中设置
定宽块状元素：块状元素的宽度width为固定值
<style>
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>
不定宽块状元素：块状元素的宽度width不固定
1.加入 table 标签
2.设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
3.设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的
垂直居中-父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的基线间的距离 )
垂直居中-父元素高度确定的多行文本（方法一）
html代码：
<body>
<table><tbody><tr><tdclass="wrap">
<div>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
css代码：
table td{height:500px;background:#ccc}
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
垂直居中-父元素高度确定的多行文本（方法二）
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差
隐性改变display类型
当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
1.position : absolute
2.float : left 或 float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。