前端——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>

View Code

<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>

text,password,button,submit

<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>

radio,checkbox,file

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>

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">

for属性的作用

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>

View Code

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>

clear:both;示例

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>

hover

 

初学者可能会遇到的问题：

1.CSS重用

css样式可以放在<head>标签中，也可以放在css文件中，link标签引入即可。在编写样式时，如果样式c1和c2中有相同的部分，或者有在其他地方被大量使用的部分，可以将这部分提取出来再写个c样式。

2.改变页面大小，原本的页面混乱

要注意：在<body>标签中最外层的标签，大小（height、width）不能用百分比，一定要是具体的数值。

一般情况下，我们习惯将整个页面分成三部分：头部，身体，底部。这三部分都是<div>标签，每个部分标签内层再嵌套一层<div>，这层宽度可以设置百分比了。内层的也可以。

3.在IE浏览器中可能会出现：用<a>标签包裹的<img>图片显示出来会有蓝色边框。

解决办法：样式设置：border:0;

4.<input>标签用户输入的内容若想提交到后台，必须用<form>标签包裹。