前端——HTML，CSS
HTML
HTML叫做超文本标记语言，是一种制作万维网页面标准语言。相当于定义一套规则，大家都来遵守它，这样浏览器就可以去解释它。
浏览器负责将标签翻译成用户看得懂的格式，呈现给用户。
作为开发者需要学习的：
1.学习HTML规则
2.从数据库获取数据，然后替换到HTML文件的指定位置（web框架）
HTML文档
如果新建一个HTML文档，编译器会帮你自动写好基本格式：
我们一一来看，他们是怎么回事
head 标签
1.Doctype
Doctype告诉浏览器使用什么样的规范来解析文档。这个属性会被浏览器识别并使用，如果你的页面没有这个声明，那么默认是标准兼容模式未开启，浏览器会按照自己的方式去解析渲染页面。这将是恶魔的开始。
2.Meta
meta标签提供有关页面的信息，例如页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词。
1.页面编码
charest=“utf-8”
2.刷新和跳转
<meta http-equiv="Refresh"Content="30"> 每隔30秒刷新一次网页
<meta http-equiv="Refresh"Content="5;Url=http://www.baidu.com"> 过5秒跳转到某网页。（关于跳转，可以在应急的时候用，一般可以用js实现）
3.关键词
<meta name="keywords" content="星际2.老男孩，UFO，皮卡"> 关键字
4.描述
<meta name="description" content="为您提供最新的信息"> 网站描述
3.title
title标签写网站头部信息，即网页标签的名称
4.Link
link标签有两个作用：
1.设置标签页图标：
<link rel="shortcut icon" href="image/favicon.ico"> # rel指的是类型，href是文件路径，(image是存放图片的文件夹)
2.外联CSS文件
<link rel="stylesheet" type="text/css" href="css/common.css"> # rel指的是类型，href是存放css文件的文件夹
5.style
在页面中写样式
6.script
1.引进文件
<script type="text/javasvript" src="http://www.googletagservices.com/tag/js/gpt.js"></script>
2.写js代码
<script type="text/javascript">...</script>
以上都是head标签，head标签内的内容是不会显示在界面上的(除了title)。接下来讲body标签
body标签
标签一般分为两种：
1.块级标签
霸占一整行的标签。比如：<h>,<p>,<div>等
2.行内标签
可以多个标签共同占用一行的标签。比如：<span>,<a>,<input>,<img>,<label>等
1.各种符号
使用字符编码来代替某种符号，详细对照表参照 http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
2.<p>标签
段落标签：<p>文字</p>，在里面的文字自成一个段落。段落之间会有间距，但换行没有
3.<br>标签
用于换行
4.<h>标签
标题（自动加大加粗），分为1~6等级，h1最大，h6最小。书写：<h1>标题</h>
5.<span>标签
白板，本身没有特性，行内标签。
6.<div>标签（最最常用）
白板，本身没有特性，块级标签。
7.<a>标签
1.做链接。<a href="http://www.baidu.com" target="_blank" title="点一下看看啊">你好</a> # 页面中点击“你好”，跳转页面，参数target=_blank表示跳转到新的标签页，title属性作用：当鼠标移动到链接处，会显示该文字。
2.锚。用来记录页面浏览的位置。
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<a href="#i4">第四章</a>
<a href="#i5">第五章</a>
<div id="i1" style="height:600px;">第一章的内容 <p>绪论</p></div>
<div id="i2" style="height:600px;">第二章的内容 <p>公元500年</p></div>
<div id="i3" style="height:600px;">第三章的内容 <p>公园1000年</p></div>
<div id="i4" style="height:600px;">第四章的内容 <p>公元1900年</p></div>
<div id="i5" style="height:600px;">第五章的内容 <p>公元2010年</p></div>
<a>标签默认的显示样式会有下划线，如果看着不爽想要去掉，在a标签样式中设置：text-decoration:none;
8.<input>标签
用来做用户输入、按钮框，取决于type属性
| type参数值 | 代表的类型 | 其他说明 |
| text | 单行文本输入框 | 参数name便于后台识别 |
| password | 密码输入 | name同上 |
| button | 按钮 | value在按钮上显示的名称 |
| submit | 提交按钮 | value同上 |
| radio | 单选框 | name相同则互斥，value用来后台识别，check=“checked”默认选中 |
| checkbox | 多选框 | name相同表明是同一类，value用来后台识别，checked=“checked”默认选中 |
| file | 上传文件 | name后台识别，依赖form表单属性enctype=“multipart/form-data” |
| reset | 重置按钮 | value按钮名称 |
示例：
<form action="" method="get">
<input type="text" name="user"> <!-- name是标签名，便于后台识别 -->
<input type="text" name="emil">
<input type="password" name="password">
<input type="button" value="登录">
<input type="submit" value="登录吧">
</form>
<form enctype="multipart/form-data">
<p>请选择性别</p>
男：<input type="radio" name="gender" value="1"> <!--name相同则互斥，value用来后台识别-->
女：<input type="radio" name="gender" value="2">
alex：<input type="radio" name="gender" value="3">
<p>爱好</p>
篮球<input type="checkbox" name="favor" value="1"> <!--name相同表示同一类，value用于后台识别-->
足球<input type="checkbox" name="favor" value="2">
台球<input type="checkbox" name="favor" value="3">
羽毛球<input type="checkbox" name="favor" value="4">
<p>技能</p>
写代码<input type="checkbox" name="skill" value="1">
唱歌<input type="checkbox" name="skill" value="2">
<p>上传文件</p>
<input type="file" name="fname">
<p>说说你的优势</p>
<textarea name="meno">可以设置默认值的多行文本框</textarea>
<p>选择你的地址</p>
</from>
9.<form>标签
表单，可以将用户操作的内容提交到后台。参数：action指向提交地址，method指明使用哪种方式提交。
method有两种方式：get和post。提交后台时会发送两部分数据：请求头和请求体。get方式是将内容放在了请求头，所以会显示在url上，post将内容放在了请求体。两者区别仅仅是，内容存放位置不同。
entype="multipar/form-data"设置该属性可以上传文件。
10.<textarea>标签
是一个多行输入框，与上面不同的是，它可以设置默认值。
<textarea name="">默认值在这里</textarea>
11.<select>标签
选择框。如果属性设置multiple="multiple" size="3"，表示选择框只能同时显示三项。
<p>选择你的地址</p>
<select name="city">
<option value="1" selected="selected">北京</option> <!-- selected 默认选项 -->
<option value="2">深圳</option>
<option value="3">上海</option>
<option value="4">杭州</option>
<option value="5">成都</option>
</select>
<p>请选择籍贯</p>
<select name="jiguan">
<optgroup label="河北省">
<option value="1">石家庄</option>
<option value="2">保定</option>
<option value="3">邯郸</option>
</optgroup>
<optgroup label="湖南">
<option>长沙</option>
<option>株洲</option>
<option>湘潭</option>
</optgroup>
<optgroup label="广东">
<option>广州</option>
<option>深圳</option>
<option>佛山</option>
<option>珠海</option>
<option>中山</option>
</optgroup>
</select>
12.<img>标签
用来显示图片，属性style中可以设置图片大小，alt可以在图片无法显示的时候显示文字。<iamge>也有title属性，和a标签的作用一样。
13.<label>标签
通常与input输入框一起用。它本身是个普通的白板，与<span>没什么区别，但与输入框在一起时，for属性可以实现一个功能：点击输入框前面的文字，也可以启用输入框编辑。
<label for="username">用户名：</label>
<input id="username" type="text" name="user">
14.列表
ul ol dl三种。ul中没有编号，ol有编号，dl中<dt>可以作为大标号，<dd>作为小标号
<ul>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
</ul>
<ol>
<li>asdfe</li>
<li>asdfe</li>
<li>asdfe</li>
</ol>
<dl>
<dt>asfas</dt>
<dt>sdfas</dt>
<dd>safsd</dd>
<dd>safsd</dd>
<dd>safsd</dd>
</dl>
15.<table>标签
制作表格，<table>标签内可以分成两部分，<thead>表头和<tbody>表格内容区。表头会自动加粗居中，在表格内容区，<tr>表示行，<td>表示列。
合并单元格：
colspan横向合并，要注意去除多余的列
rowspan纵向合并，要注意去除多余的行
<table border="1">
<thead>
<tr>
<th>地址</th>
<th>性别</th>
<th>姓名</th>
<th>其它</th>
</tr>
</thead>
<tbody>
<tr>
<td>石家庄</td>
<td>男</td>
<td colspan="2">欧沃</td>
</tr>
<tr>
<td>保定</td>
<td>女</td>
<td>alex</td>
<td rowspan="2">1</td>
</tr>
<tr>
<td>株洲</td>
<td>男</td>
<td>alxe</td>
</tr>
<tr>
<td>长沙</td>
<td>男</td>
<td>森马</td>
<td>1</td>
</tr>
</tbody>
</table>
16.<fieldset>标签
这个用的很少，看看效果图就懂了
<fieldset>
<legend>登录</legend>
<p>用户名</p>
<p>密码</p>
</fieldset>
CSS
CSS是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。
存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。
语法：style = "key1:value1;key2:value2;"
- 在标签中使用 style="xx:xxx;"（任何一个标签都可以使用style属性来编写样式）
- 在页面中嵌入 < style type="text/css"> </style > 块
- 引入外部css文件
必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必须知道是如何实现的。
CSS选择器（编写CSS样式）
选择器指的是，在<head>标签中的<style>标签中编写样式（或在CSS文件中编写），在<body>内的标签来选择已经写好的样式，提高了重用率，减轻了body中的代码臃肿。
1.id选择器(不建议用)
样式编写以#开头，标签选择用id属性，每个标签使用的id都不能相同（唯一配对）
#名称{
........
}
<标签 id="名称">
2.class选择器(最常用)
样式编写以 . 开头，可以使用相同的设置
.名称{
.........
}
<标签 class="名称">
3.标签选择器
如下所示，将所有div标签设置成此样式。
div{
……
}
4.层级选择器（常用）
样式的选择具有层级关系，类似于目录(用空格隔开)
span div{
………
} <!--所有span标签内的div标签应用此设置-->
.c1 div{
………
} <!--应用c1的标签内的div标签应用此设置-->
.c1 .c2{
………
} <!--应用c1的标签内的标签才能应用此设置-->
5.组合选择器
.c1,.c2,div{
………
} <!-- class="c1" 或 class="c2" 或 所有div标签都能应用此设置-->
6.属性选择器
先做一遍筛选，对筛选出来的标签根据属性再做筛选，并设置该样式
格式：标签名 [ 属性 = "值" ]{ …编写的样式… }
如：input[name="alex"]{width:10px;height:20px;} <!-- 先筛选出来所有input标签，再筛选出来属性name为alex的标签，设置样式 -->
.c1[type="password"]{height:40px;width:30px;} <!-- 先筛选出来所有应用c1样式的标签，再筛选属性type为password的标签，设置样式 -->
样式设置的优先级
- 针对某个标签，头部style标签中设置了样式，标签本身也设置了样式，如果没有重复设置属性，都能应用
- 如果有重复设置的属性，则根据优先级来应用。
应用优先级：标签本身的设置 > 书写距离近 > 书写距离远
例如：
<head>
<style>
.c1{
background:red;
color:white;
}
.c2{
background:black;
font-size:58px;
color:black;
}
</style>
</head>
<body>
<div class="c1 c2" style="color:green">wooohoo</div>
</body>
<!-- color和font-size属性由于没有重复，所以都能应用，color属性根据就近原则被应用绿色，background属性被应用黑色 -->
基本样式
高度： height
宽度： width
框内水平居中（文字）： text-align:center;
垂直居中（文字）： line-height:20px; <!--标签多高，这里就要设置多高-->
字体加粗： font-weight:bold;
字体大小： font-size
border （边框）
样式：border: 宽度 样式 颜色 。样式中：dotted表示虚线，solid表示实线
如：border：2px dotted red; <!-- 2像素宽度，虚线，红色 -->
float (浮动)
在样式中设置 float : right; 此标签就会浮动到父标签的最右边。块级标签本身是不能堆叠在一行的，但是都设置了这个属性就可以（宽度相加不大于父标签的前提下）
clear (清除浮动)
语法：
clear : none | left | right | both
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
What?清除浮动直接把 float 代码直接删除掉不就可以了吗？为什么还要再设置一个属性？且看下面。
上面的定义非常容易理解，但是读者实际使用时可能会发现不是这么回事。 定义没有错，只不过它描述的太模糊，让我们不知所措。
案例：先写一个<div>大方块背景灰色，里面有三个小方块<div>从左到右背景分别是红、绿、蓝。如果不浮动，三个方块分别占三行。现在给三个小方块都加上样式 float:left; 它们会依次从左到右排列，并且共占一行。
如果我现在想要使红色方块右边的方块清除掉，按照我们的想法就是给红色设置 clear:right; 然而却并没有任何效果。正确的用法是给绿色设置 clear:left;
所以一定要牢记：对于CSS的清除浮动规则，只能影响使用清除元素的本身，不能影响其它元素。
现在想一下，如果直接删掉 float 代码，能满足这个需求吗？这就是clear的作用。
还有一个场景非常实用：在刚才的示例基础上，把灰色块的高度设置删掉，界面上灰色会消失，此时的需求是：使父标签包裹住所有子标签。怎么做呢？ 只需要在父标签内最底部再写一个<div>标签，样式设置 clear:both; 即可。
<div style="width:500px;background:#b0b0b0;">
<div style="width:80px;height:80px;float:left;background:red;"></div>
<div style="width:80px;height:80px;float:left;background:green;clear:left"></div>
<div style="width:80px;height:80px;float:left;background:#2b2ba8;"></div>
<div style="clear:both"></div>
</div>
display
将块级标签和行内标签转换属性。
设置 inline 为行内，设置 block 为块级。
如果设置 inline-block 则同时具有：
inline的属性：默认自己有多少空间占多少空间
block的属性：可以设置高度，宽度，边距 （ 行内标签不能设置高度和宽度，而块级标签可以）
margin padding（边距）
内边距 padding 当padding值增加时，默认增加上边距，除了自己的位置在变化，本身的大小也在变化（可以想象原本的标签在移动，移动过的的区域就是增加的那部分。虽然本身大小在变化，但是可编辑区域仍然是原来那部分大小。）padding-top,padding-left,padding-right,padding-bottom是相同的效果。
外边距 margin 当margin值增加时，与父标签上左右距离增加，标签本身的大小被强制变化。但如果单独设置某一边距时，标签大小不会变化（margin-top 上边距，margin-left 左边距，margin-right 右边距，margin-bottom 下边距。）
常用的方式还有：margin:0 auto; 表示与父标签的上边距为0，左右居中
background (背景)
background 分为以下几类：
background-color:red; 背景颜色设置为红色
background-image:url("image/4.jpg"); 设置背景图片
background-repeat:no-repeat; 如果设置了背景图片，这个属性则可以设置重复平铺。默认是no-repeat不平铺。还可以设置repeat表示背景图片横向纵向都平铺。 repeat-x表示只在横向平铺，repeat-y表示只在纵向平铺。
background-position:74px 100px; 设置背景图片的位置。表示水平方向左边距74像素，上边距100像素。
position 位置
可以设置标签的位置，经常与top、right、left、bottom联用。一旦设置position属性，此标签将变成上一层覆盖下一层。position的值分两类：
- fixed 固定在屏幕的某个位置（滑动滚轮，相对屏幕的位置不会动）
- relative + absolute 固定在相对于父标签的某个位置（单独设置relative没有任何效果，一般与absolute嵌套使用）
思考：当position为 relative + absolute时，它与margin系列的区别是什么？
1. margin是基于父标签调整位置，依赖于父标签；position是基于整个页面调整位置（单独absolute），当然也可以基于父标签调整。
2. 用margin，如果两个同级标签位置不够占，其中一个会将另一个挤到下一行，永远属于同一个图层。而如果设置position，它会分层，覆盖下一层。
在设置position时需要注意：
1. 一旦设置position后，必须设置位置（top,left,right,bottom）,否则根本无法显示标签。
2. 如果出现分多层，可以使用 z-index 来设置层级顺序，数值越大层级越高。设置该 z-index 的标签会覆盖没设置的。
3. 若要将position:fixed的标签居中，则应top:50%;left:50%;且上边距为 -(标签高度)÷2 ; 左边距为 -(标签宽度)÷2;
opacity 透明度
opacity的值在[0,1]区间内，0为完全透明，1为完全不透明
overflow 限制图片显示区域
当父标签内的<img>图片大于父标签，若想将其限制，不能超过父标签的范围。有两种解决思路：
① 直接给图片设置大小，小于或等于父标签。
② 设置overflow：hidden。表示超过父标签的部分隐藏，这时显示出来的是原图的右上角部分。
也可以 overflow: auto 。显示效果在hidden的基础上可以滚动图片。
hover
能够实现：将鼠标移动到标签上，显示出另外一种样式。
比如菜单栏，原本全部都是蓝色背景，如果鼠标移动到某个标签上，则显示深蓝色背景。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜单</title>
<style>
.pg-head{
position:fixed;
top:0;
height:50px;
width:1537px;
background-color: #2459a2;
line-height: 50px;
}
.w{
width:1168px;
margin:0 auto;
}
.pg-head .menu{
display: inline-block;
padding: 0 10px 0 10px;
color: white;
}
/*当鼠标移动到当前标签上时，以下css属性才生效*/
.pg-head .menu:hover{
background-color: blue;
}
</style>
</head>
<body style="margin:0 auto;">
<div class="pg-head">
<div class="w">
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
<a class="menu">1024</a>
</div>
</div>
<div class=""></div>
</body>
</html>
初学者可能会遇到的问题：
1.CSS重用
css样式可以放在<head>标签中，也可以放在css文件中，link标签引入即可。在编写样式时，如果样式c1和c2中有相同的部分，或者有在其他地方被大量使用的部分，可以将这部分提取出来再写个c样式。
2.改变页面大小，原本的页面混乱
要注意：在<body>标签中最外层的标签，大小（height、width）不能用百分比，一定要是具体的数值。
一般情况下，我们习惯将整个页面分成三部分：头部，身体，底部。这三部分都是<div>标签，每个部分标签内层再嵌套一层<div>，这层宽度可以设置百分比了。内层的也可以。
3.在IE浏览器中可能会出现：用<a>标签包裹的<img>图片显示出来会有蓝色边框。
解决办法：样式设置：border:0;
4.<input>标签用户输入的内容若想提交到后台，必须用<form>标签包裹。
上一篇： 诺基亚6将发布，首款全面屏+骁龙630
下一篇： 数据挖掘_多进程抓取