2014.09.13 周六-html-xhtml-正则表达式-html总结-css

一、html

1、图像

1. 下划线：<hr size="7" color="red" />
2. 图像标签：<img>
   例：
   <img src="../pic/1.jpg" alt="图片说明文字" align="middle" border="3" width="500" height="500" /><!--为什么alt没用呢，当鼠标放在图片上时，没有提示？ -->
   align:属性定义图片的排列方式（没看到有什么效果），border用来设置图像的边框，src连接一个文件。
   alt的作用：
   Intert选项——>高级——>把“显示图片”的勾去掉，网页就不会显示1.jpg这张图片了，而是出现“图片说明名字”这几个字。右击鼠标——>显示图片，才显示出1.jpg这张图片。
   
3. 图像地图：<map>
   应用：当要在图像中选取某一部分作为连接的时候。如：中国地图每个省所对应的区域。
   map标签要和img标签联合使用。Href是超连接。
   <img src="../pic/2.jpg" alt="图片说明文字" width="500" height="500" border="3" align="middle" usemap="#Map" />
   <map name="Map" id="Map">
     <area shape="rect" coords="149,147,270,289" href="#" />
     <area shape="poly" coords="318,135,327,149,331,140,324,142,320,140,323,129" href="#" />
     <area shape="circle" coords="486,319,138" href="#" />
   </map>
   加了三个热点，当鼠标放在热点位置上的时候，会出现手状图片，可是没有出现边框呀？（ie浏览器的问题，谷歌点击的时候会出现热点边框）。（dreamweaver的设计模式做的）。

2、表格

1. <table border="1" bordercolor="#0099FF" width="70%" cellspacing="0" cellpadding="10"><caption>表格标题</caption><tbody><tr><th rowspan="2">单元格1</th><th >单元格2</th></tr></tbody><tbody><tr><td align="center"><b>单元格一</b></td><!--<td>单元格二</td> --></tr></tbody></table>

   表格>行>单元格。
   要加了border，才会有边框。
   为什么表格看着是双线呢，因为里面那个是单元格的边框，最外面那个是表哥的边框。
   border：最外面那个框框的粗细；
   bordercolor：边框颜色；
   width：整个表格占网页的宽度。如果不加width，单元格的宽度是随单元格内容的长度变化的；
   cellspacing：单元格之间的距离，为0时，看到的就是单线（表格边框和单元格边框重合了）；
   cellpadding：单元格里面的内容距离单元格边框上下左的距离。
   表头：<th>性别</th> 特点：居中、加粗。
   colspan：单元格占几列；
   rowspan：单元格占几行。
   表格为了提高下载速率：网络读完一个<tboby>，就显示，就算网络堵塞，后面的显示不了，前面的也显示了。所以表格都有一个默认的标签：<tbody></tbody>(表格的下级标签)，下面才是<tr>，才是<td>。
   每个表格可以有一个表头、一个表尾和一个或多个表体（即正文），分别以THEAD、TFOOT和TBODY元素表示。

3、超链接

1. 超链接标签：<a>
   两种用法：
   1、超链接<a href=””>
   例：
   <a href="http://www.sina.com" target="_blank">新浪网站</a> 
   <!--
   先找协议：http。
   href属性值可以是url，也可以是本地文件。target属性是指定在哪个窗口或者帧中打开，_blank是指在新窗口打开。
   -->
   例：
   <a href="mailto:[e-mail]?subject=hahaha&&cc=[e-mail]">联系我们</a> <!-- subject：主题；cc：抄送 -->
   <a href="thunder://heihei">迅雷下载heihei</a>
   <a href="http://www.sina.com" target="_blank">新窗口打开链接</a>
   <a href="http://www.xxx.com"><img src="..\pic\3.jpg" /></a>
   2、定位标记<a name=””>
   一般在本页面中使用，当网页内容过长，定位标记会比拖动滚动条方便快捷。
   注：定位标记要和超链接结合使用才有效。
   例：
   <a name="top">顶部位置</a>
   <p>…….<!--很多空行以制造网页过长的效果 -->
   <a href="#top">回到顶部位置</a>
   注：使用定位标记时一定在href值的开始加入#标记名。
   

4、表单（要相当熟）

1. 例：

   <form>用户名：<input type="text" name="user" /><br  />密码：<input type="password" name="password" /><br  />性别：<input type="radio" name="sex" value="man" />男<input type="radio" name="sex" value="female" />女<br />技术：<input type="checkbox" name="tech" value="java" />java<input type="checkbox" name="tech" value="html" />html<input type="checkbox" name="tech" value="jsp" />jsp<br />上传文件：<input type="file" /><br />按钮：<input type="button"  value="一个按钮" /><input type="hidden" name="id" value="222222" /><input type="image" src="../pic/3.jpg" /><input type="submit" /><input type="reset" /><select name="country" multiple="multiple" size="2"><option value="none">--选择国家--</option><option value="cn">中国</option><option value="en">美国</option><option value="usa">英国</option></select><textarea cols="3" rows="5"></textarea> </form>

   表单标签：<form>
   表单标签是最常用的标签，用于与服务器端的交互。
   <input>：输入标签 ：接收用户输入信息。
   其中的type属性指定输入标签的类型：
   文本框 text。输入的文本信息直接显示在框中。
   密码框 password。输入的文本以原点或者星号的形式显示。
   单选框 radio 如：性别选择。
   复选框 checkbox 如：兴趣选择。
   隐藏字段 hidden 在页面上不显示，但在提交的时候随其他内容一起提交。
   提交按钮 submit 用于提交表单中的内容。(要有name，才会有向服务端提交的信息)
   重置按钮 reset 将表单中填写的内容设置为初始值。
   按钮 button 可以为其自定义事件。
   文件上传 file 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。
   图像 image（也具备提交效果） 它可以替代submit按钮。
   <select>：选择标签 提供用户选择内容。如：用户所在的省市。size 属性为显示项目个数。multiple：就省去下拉框了；size：显示的个数，ie可以滚动显示，谷歌却不行。
   <option>：子项标签 属性 selected 没有属性值，加在子项上，其中一个子项上，子项就变成默认被选项。 
   <textarea>：多行文本框。如：个人信息描述。
   域：
   <fieldset>
   <legend>注册区域</legend>
   <form>
   ...
   </form>
   </fieldset>
2. 表单练习：
   显示如图：
   formtest.html：

   <fieldset><legend>注册区域</legend><form action="http://localhost:1000" method="post"><table border="1" bordercolor="#0033FF" cellspacing="0" cellpadding="10" width="60%"><tr><th colspan="2">信息注册页面</th></tr><tr><td >用户名：</td><td><input type="text" name="user" /></td></tr><tr><td>密码：</td><td><input type="password" name="password" /></td></tr><tr><td>确定密码：</td><td><input type="password" name="confirm_password" /></td></tr><tr><td>性别：</td><td><input type="radio" name="sex" value="man" />男<input type="radio" name="sex" value="female" />女</td></tr><tr><td>技术：</td><td><input type="checkbox" name="tech" value="java" />Java<input type="checkbox" name="tech" value="jsp" />Jsp<input type="checkbox" name="tech" value="servlet" />Servlet</td></tr><tr><td>国家：</td><td><select name="country"><option value="none">--选择国家--</option><option value="cn">中国</option><option value="en">美国</option><option value="usa">英国</option></select></td></tr><tr><th colspan="2"><input type="submit" value="提交数据" /><input type="reset" value="清除数据" /></th></tr></table></form></fieldset>

   RegServer.java：（代码看不懂）

   import java.net.*;import java.io.*;class RegServer{public static void main(String[] args) throws Exception{ServerSocket ss = new ServerSocket(1000);Socket s = ss.accept();InputStream in = s.getInputStream();byte[] buf = new byte[1024];int len = in.read(buf);System.out.println(new String(buf, 0, len));OutputStream out = s.getOutputStream();PrintWriter pw = new PrintWriter(out, true);pw.println("<font size=7 color=green>注册成功</font>");s.close();ss.close();}}

   运行Java代码，浏览器提交数据，信息就提交到服务器去了。
   表单提交：
   1．先定义form表单中的action属性值，指定表单数据提交的目的地(服务端)。（只有需要和服务器交互的时候，才写form标签）
   2．明确提交方式，通过指定method属性值。如果不定义，那么method的值默认是get。
   get和post这两种最常用的提交方式的区别：
   1．get提交将数据显示在地址栏，对于敏感信息不安全。
      post提交不显示在地址栏，对于敏感信息安全
   2．地址栏中存放的数据是有限，所以get方式对提交的数据体积有限制。
      post可以提交大体积数据。
   3．对提交数据的封装方式不同：
      get：将提交数据封装到了http消息头的第一行，请求行中。
      post：将提交的数据封装到消息头后，在请求数据体中。
   注意：通常表单使用post提交，因为编码方便。
   对于Tomcat服务器端，默认的解码方式是ISO8859-1,那么中文会出现乱码。
   通过post提交，可以使用request.setCharacterEncoding("GBK");来解决乱码问题，该方法只对数据体有效。
   如果是get提交，request.setCharacterEncoding("GBK")该方法对乱码解决不了，必须先进行ISO8859-1编码，然后再进行GBK的解码。这种方式虽然对post提交的乱码也通用，但是麻烦。所以建议表单提交使用post。
   
3. <label>：用于给各元素定义快捷键。
   for 属性：指定快捷键作用的表单元素。必须与要作用的表单元素的id值相同。
   accesskey 属性：指定快捷键，此快捷键需要和alt键组合使用。
   例1：
   <label for="user" accesskey="u">用户名(u)</label>
   <input type="text" id="user" />
   例2：
   <label accesskey="u" for="userid">
   <table border="1">
   <tr>
   <td>用户名(U):</td>
   <td><input type="text" id="userid" /></td>
   </tr>
   </table>
   </label>
   <!--
   在label标签内点一下，就可以定位到text去。
   -->
   

5、other

1. 1、
   <pre>
   jjj
   kkk
   </pre>
   可以将文本内容按在代码区的样子显示在页面上。
   2、
   lkjk <br />
   lkjk <br />
   lkjk <br />
   lkjk <br />
   <p>9999</p>
   <p><b>9999</b></p>
   <p><i>9999</i></p>
   <p><u>9999</u></p>
   <p><strong>9999</strong></p>
   <p>9₉₉₉</p>
   <p>9⁹⁹⁹</p>
   3、
   <marquee direction="down" behavior="slide">
   让内容动起来。
   </marquee>
   direction 属性：left right down up 
   behavior 属性：scroll alternate slide
   

6、头标签

1. 之前看的都是体标签，现在来看头标签
   
2. 头标签都放在<head></head>头部分之间。包括：title base meta link
   
3. 1.
   <title>：指定浏览器的标题栏显示的内容。
   2.
   <base>：
   href 属性：指定网页中所有的超链接的目录。可以是本地目录，也可以是网络目录。注意值得结尾处一定要用/表示目录。只作用于相对路径的超链接文件。
   target 属性：指定打开超链接的方式。如_blank 表示所有的超链接都用新窗口打开显示。
   例：
   <head>
   <base href="e:\abc\" />
   </head>
   <body>
   <a href="1.html" target="_blank">新闻</a>
   </body>
   3.
   <meta>：
   name 属性：网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。
   例：
   <meta name="keywords" content="小盆友，大鹏" /> <!-- 作为搜索关键字 -->
   http-equiv 属性：模拟HTTP协议的响应消息头。
   例：
   <meta http-equiv="refresh" content="3" />在本网页刷新
   <meta http-equiv="refresh" content="3;url=http://www.baidu.com" />表示打开此页面3秒后自动转到新浪页面。
   4.
   <link>：
   rel 属性：描述目标文档与当前文档的关系。
   type 属性：文档类型。
   media：指定目标文档在哪种设备上起作用。
   例：
   <link rel="stylesheet" type="text/css" href="1.css" media="screen" />
   

二、xhtml

1、xhtml xml

1. XHTML是可扩展的超文本标记语言：
    XHTML是w3c组织在2000年的时候为了增强HTML推出的，本来是想替代HTML，但是发现Internet上用HTML写的网页太多，未遂！可以理解为它是HTML一个升级版（HTML4.01）。
    XHTML的代码结构更为严谨，是基于XML的一种应用。
   XML是可扩展标记语言：
    XML是对数据信息的描述。HTML是数据显示的描述。
    XML代码规定的更为严格，如：标签不结束被视为错误。
    XML规范可以被更多的应用程序所解释，将成为一种通用的数据交换语言。
    各个服务器，框架都将XML作为配置文件。
   dtd文件：
   约束模式文档
   

三、正则表达式（不晓得这是啥玩意？）

1、正则表达式：

1. 是一种专门用于操作字符串的规则。
   通过一些符号来表示，简化了对字符串的复杂操作。
   弊端：阅读性较差。
   
2. 常见的操作：
   1、匹配：String matches(regex)
   2、获取（查找）：Pattern, Matcher
   Pattern p = Pattern.compile(regex);
   Matcher m = p.matcher(String);
   
   while(m.find())
   {
   System.out.println(m.group());
   }
   3、切割：String split(regex);
   4、替换：String replaceAll(regex, str);
   
3. 示例：获取字符串中连续数字
   String regex = "\\d{5,}";
   Pattern p = Pattern.compile(regex);
   Matcher m = p.matcher(String);
   
   while(m.find())
   {
   String s = m.group();
   s.replaceAll(regex, "#");
   }
   网页爬虫：
   通过网络已经IO读取网页的源文件，并通过规则获取网页中的符合规则的数据。
   比如：mail爬虫。
   String mailreg = "[a-zA-Z0-9_]{6,12}@[a-zA-Z0-9]+(\\.[a-zA-Z]+)+";
   
4. 正则表达式中组的含义：
   将部分规则进行封装以便重用。\\num 反向引用指定组。
   示例：IP地址排序。
   

四：html总结

1、html:超文本标记语言

1. html语言中是由标签组成的。
   html中的数据都会封装在标签中。因为可以通过标签中的属性值的改变对封装内数据进行操作。
   
2. 确定html代码范围。<html></html>
   在该范围中可以定义两部分内容，一部分是头，一部分是体。
   <html>
   <head></head>
   <body></body>
   </html>
   head：网页的一些属性信息。比如：标题。
   body：网页显示的数据。
   
3. 标签的特点： 对于数据进行封装，那么就有开始标签和结束标签，但是也有一些标签只体现单一功能，所以不需要结束标签，规范中要求标签必须要结束，所以这样的标签在内部闭合。
   如：<br /> <hr /> <img /> <input />
   
4. 标签格式：
   <标签名 属性名="属性值" >数据</标签名>
   <标签名 属性名="属性值" />
   
5. 常见标签：
   1、
   字体：<font>
   <font size="7" color="#FFFF00">数据</font>
   特殊部分：如果要在页面显示一些特殊符号时，需要进行转义。
   <: &lt;  >: &gt;  &: &amp;  空格: &nbsp;
   标题：<h1><h2><h3>...<h6>
   2、
   列表标签：<dl></dl>
   上层项目：<dt>
   下层项目：<dd>
   项目符合标签：
   <ul>
   <ol>
   这两个标签中的列表项都有<li>标签封装。
   示例：
   1.游戏名称
   a.星际
   b.红警
   2.游戏内容
   a.攻略
   b.秘籍
   <ol>
   <li>游戏名称</li>
   <ul type="disc">
   <li>星际</li> 
   <li>红警</li>
   </ul>
   <li>游戏内容</li>
   <ol type="a">
   <li>攻略</li>
   <li>秘籍</li>
   </ol>
   </ol>
   3、图像标签：<img>
   <img srco="" alt="图像说明文字" />
   4、表格标签：<table>
   表格由行所组成，行由单元格组成。
   表格中默认都有一个tbody标签。
   标题标签：<caption>
   <table border="1" bordercolor="red" width="60%" cellpadding="10" cellspacing="0">
   <tr>
   <th></th>
   <th></th>
   </tr>
   <tr>
   <td></td>
   <td></td>
   </tr>
   </table>
   表格是最重用的标签，用于对数据进行格式化。
   5、超链接：<a>
   <a href="http://www.baidu.com" target="_blank">新浪网站</a>
   <a href="http://www.baidu.com" target="_blank" title="鼠标放到超链接上，会出现我哟">点这里</a>
   当被点击后，会启动引擎所对应解析程序。
   去查找指定的主机。
   1、先找本地主机的hosts文件。如果没有找到该主机对应的IP地址。
   2、去公网DNS服务器上找对应的IP地址。
   <a href="mailto:[e-mail]?subject=haha&cc=[e-mail]">联系我们</a>
   当点击超链接时，就会出现邮件相关联的解析程序，本机默认的是outlook。
   超链接的另一个作用：
   定位标记：
   <a name="top">一个位置</a> <!-- 这块是不能点的 -->
   <a href="#top">回到那个位置</a> <!-- 要加#哟 -->
   6、框架：
   1、框架标签：<frameset>
   注：框架标签不可以放到<body>，一般为了代码的可读性，会到<head>和<body>之间。
   例：
   <frameset rows="10%,*">
   <frame src="a.html" name="top" noresize="noresize" />
   <frameset cols="30%,*">
   <frame src="b.html" name="left" />
   <frame src="c.html" name="right" />
   </frameset>
   </frameset>
   这段代码会需要已经存在的3个html页面，分别是：a.html, b,html, c.html
   效果：
   注：当框架大小不想被鼠标拖动而改变，可以在frame标签中加入noresize属性，这个属性没有属性值，称为标记属性，加上就为固定。
   在XHTML的规范中，所有的属性都要有属性值，那么标记属性的属性值就是自身，如：noresize=”noresize”
   2、画中画标签：<iframe>
   <iframe src=”1.html” >
   很遗憾，画中画你没有看到，因为你的浏览器不支持iframe标签。
   </iframe>
   框架标签现在不是很常用，布局都用div+css+table。框架很少使用了。 
   7、表单标签：<form>
   该标签式可以和服务端交互的。
   表单标签中的元素：
   <input>:该标签因为属性值的不同，所对应的组件也不一样。
   type属性：
   1、text：文本框，输入的文本可见。
   2、password：密码框，输入的文本不可见。
   3、radio：单选框，注意：要被选中，必须要给单选框定义一个属性name。
   当有多个单选框时，只能有一个被选中，那么这些单选框的name必须相同。
   4、checkbox：复选框，当对多个数据进行同时选中时。
   5、file：可以进行文件选择的组件。通常用于附件或文件上传。
   6、hidden：隐藏组件，该组件不会在页面上显示，但是其定义的name和value可以提交到服务端。
   7、button：按钮组件，自定义一个按钮默认是没有任何效果的，可以通过注册事件并加入自动义效果。
   8、reset：重置按钮，将组件中被操作的效果还原到初始状态。
   9、sumbit：提交按钮，将组件中添加的数据提交到指定的目的地。
   10、image：图像组件，为了避免提交按钮的难看，可以通过imag的src属性链接一个好看的按钮图片完成提交效果。
   
   下拉菜单：<select>
   每一个下拉菜单项都由option进行封装。
   <select>
   <option></option>
   </select>
   
   文本区域：<textarea>
   
   表单组件通常都需要定义name和value属性，因为要将数据发送到服务端，服务端只有知道了该name的值才可以对提交的数据进行分别获取。
   
   form标签中的常见的属性：
   action：指定数据提交的目的地。
   method：提交方式。两种常用值get和post。get为默认。
   
   get和post的区别：
   get：会将提交的数据显示在地址栏上。
   post：不会将数据显示在地址栏。
   
   get:提交的数据的体积受地址栏的限制。
   post：可以提交大体积数据。
   
   get：对于敏感信息不安全。
   post：对于敏感信息安全。
   
   get：会将提交信息封装在请求行，也就是http消息头之前。
   post：会将提交信息封装在数据体中，也就是http消息头之后的空行后。
   
   对于服务端而言：
   表单提交尽量用post，因为涉及到编码问题。为tomcat服务端默认的解码时ISO8859-1。
   对于post提交的中文。在服务端可以直接使用setCharacterEncoding("gbk")就可以解决
   对于get提交的中文，在服务端只能通过ISO8859-1将数据编码一次，再通过指定的编码如GBK解码。
   
   使用表单的组件不一定要定义<form>标签。只有需要将数据进行服务端的提交的时候才会用到form标签。

五、css

1、CSS介绍

1. CSS是层叠样式表（Cascading StyleSheets）用来定义网页的现实效果。
2. 可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的现实效果功能。
3. 简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
   

2、CSS和Html在网页代码中的结合：4种方式

1. 利用标签中style属性来改变每个标签的显示样式。
   每一个html标签中都有一个style样式属性。该属性的值就是css代码。

   <html><body><div style="background-color:#0033FF; color:#FF0000">这是一个div区域1</div><div style="background-color:#0033FF; color:#FF0000">这是一个div区域2</div><span>span区域1</span><span>span区域2</span><p>这是一个段落1</p><p>这是一个段落2</p></body></html>

   该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。
2. style标签方式：（内嵌方式）
   在head标签中加入style标签，对多个标签进行统一修改。
   <head>
   <style type="text/css">
   div {
   color:#99FF00;
   background-color:#003333;
   }
   </style>
   </head>
   该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。
   
3. 导入方式：
   前提是已经存在一个定义好的CSS文件。网页的一部分样式需要用到，那么就用到这种方式。
   例：
   div.css：
   div {
   background-color:#FFFF00;
   color:#FF0033;
   }
   
   span.css：
   span {
   background-color:#000000;
   color:#FFFFFF;
   }
   
   p.css：
   p {
   background-color:#660099;
   color:#CCFF00;
   }
   
   css.html可以这样写：
   1、
   <head>
   <style type="text/css">
   @import url(../css/div.css);
   @import url(../css/span.css);
   </style>
   </head>
   或者2、
   1.css：
   @import url(../css/div.css);
   @import url(../css/span.css);
   @import url(../css/p.css);
   css.html：
   <style type="text/css">
   @import url(../css/1.css);
   </style>
   
   
   注：url括号后面必须要用分号结束。如果导入进来的样式与本页面定义的样式重复，以本页定义样式为准。
   
4. 链接方式：
   通过head标签中link标签来实现，前提也是先要有一个已定好的CSS文件。
   例：
   <link rel="stylesheet" href="../css/1.css" type="text/css" />
   注：可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准。
   

3、注释

1. 多行注释 /* */

4、样式优先级：

1.  由上到下，由外到内。优先级由低到高。

5、选择器：

1. 总结CSS代码格式：
   选择器名称 { 属性名:属性值;属性名:属性值;...}
   属性与属性之间用 分号 隔开
   属性与属性值直接按用 冒号 连接
   如果一个属性有多个值的话，那么多个值用 空格 隔开。
   
2. 选择器：
   就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。
   选择器共有三种：
   a) html标签名选择器。使用的就是html的标签名。
   b) class选择器。其实使用的标签中的class属性。
   c) id选择器。其实使用的是标签的中的id属性。
   每一个标签都定义了class属性和id属性。用于对标签进行标识，方便对标签进行操作。
   在定义的中，多个标签的class属性值可以相同，而id值要唯一，因为JavaScript中经常用。
   
3. class选择器：（类选择器）
   在标签中定义class属性并赋值。通过  标签名.class值  对该标签进行样式设置。
   例：
   相同标签设置不同样式的时候，用class进行区分。
   <head>
   <style type="text/css">
   div{
   background-color:#0000FF;
   color:#FFFFFF;
   }
   div.haha{
   background-color:#FFFF00;
   color:#339900;
   }
   </style>
   </head>
   <body>
   <div>这是一个div区域1</div>
   <div class="haha">这是一个div区域2</div>
   </body>
   
   
   不同标签进行相同设置的时候，用class进行统一定义。
   .haha{
   background-color:#FFFF00;
   color:#339900;
   }
   <div class="haha">这是一个div区域2</div>
   <span class="haha">span区域1</span>
   
4. id选择器：
   与class选择器类似，但格式不同，选择器的名称为：#id值。
   例：
   div#qq {
   background-color:#000000;
   color:#66FFFF;
   }
   或者
   #qq {
   background-color:#000000;
   color:#66FFFF;
   }
   <div id="qq">这是一个div区域1</div>
   注：多个标签同样可以定义相同的id值，但是对于JavaScript对标签元素的获取就会出错。所以形成习惯，确保id值的唯一性对于以后的数据库设计也很有好处。
   优先级:
   标签选择器<类选择器<id选择器<style属性。
   
5. 扩展选择器：
   a) 关联选择器。（选择器中的选择器）
   标签是可以嵌套的，要让相同标签中的不同标签显示不同样式，就可以用此选择器。
   例：
   span {
   background-color:#0033CC;
   color:#FFFFFF;
   }
   
   span b{
   background-color:#993300;
   color:#FFFFFF;
   }
   <div>这是一个div<b>区域1</b></div>
   <span>span<b>区域2</b></span>
   b) 组合选择器。
   对多个不同选择器进行相同样式设置的时候应用此选择器。
   p,div { color:#FF0000;}
   <p>P标签显示段落。</p>
   <div>DIV标签显示段落</div>
   注：多个不同选择器要用逗号分隔开。
   c) 伪元素选择器
   其实就在html中预先定义好的一些选择器。称为伪元素。是因为CSS的术语。
   格式：标签名：伪元素。类名   标签名。类名：伪元素。都可以。
   a:link {...} 超链接未点击状态。
   a:visited {...} 被访问后的状态。
   a:hover {...} 光标移到超链接上的状态（未点击）。
   a:active {...} 点击超链接时的状态。
   使用顺序 L – V – H - A。
   p:first-line {...} 段落的第一行文本。
   p:first-letter {...} 段落中的第一个字母。
   :focus 具有焦点的元素。IE6浏览器不支持，在FireFox中可以看到效果。