一、html
1、图像
- 下划线:<hr size="7" color="red" />
- 图像标签:<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这张图片。
- 图像地图:<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、表格
表格>行>单元格。<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、超链接
- 超链接标签:<a>
两种用法:
1、超链接<a href=””>
例:
<a href="http://www.sina.com" target="_blank">新浪网站</a>
<!--
先找协议:http。
href属性值可以是url,也可以是本地文件。target属性是指定在哪个窗口或者帧中打开,_blank是指在新窗口打开。
-->
例:
<a href="mailto:abc@outlook.com?subject=hahaha&&cc=kkkk@outlook.com">联系我们</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、表单(要相当熟)
- 例:
表单标签:<form><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>
表单标签是最常用的标签,用于与服务器端的交互。
<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> - 表单练习:
显示如图:
formtest.html:
RegServer.java:(代码看不懂)<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>
运行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(); } }
表单提交:
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。
- <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、
<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<sub>999</sub></p>
<p>9<sup>999</sup></p>
3、
<marquee direction="down" behavior="slide">
让内容动起来。
</marquee>
direction 属性:left right down up
behavior 属性:scroll alternate slide
6、头标签
- 之前看的都是体标签,现在来看头标签
- 头标签都放在<head></head>头部分之间。包括:title base meta link
- 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
- XHTML是可扩展的超文本标记语言:
XHTML是w3c组织在2000年的时候为了增强HTML推出的,本来是想替代HTML,但是发现Internet上用HTML写的网页太多,未遂!可以理解为它是HTML一个升级版(HTML4.01)。
XHTML的代码结构更为严谨,是基于XML的一种应用。
XML是可扩展标记语言:
XML是对数据信息的描述。HTML是数据显示的描述。
XML代码规定的更为严格,如:标签不结束被视为错误。
XML规范可以被更多的应用程序所解释,将成为一种通用的数据交换语言。
各个服务器,框架都将XML作为配置文件。
dtd文件:
约束模式文档
三、正则表达式(不晓得这是啥玩意?)
1、正则表达式:
- 是一种专门用于操作字符串的规则。
通过一些符号来表示,简化了对字符串的复杂操作。
弊端:阅读性较差。
- 常见的操作:
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);
- 示例:获取字符串中连续数字
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]+)+";
- 正则表达式中组的含义:
将部分规则进行封装以便重用。\\num 反向引用指定组。
示例:IP地址排序。
四:html总结
1、html:超文本标记语言
- html语言中是由标签组成的。
html中的数据都会封装在标签中。因为可以通过标签中的属性值的改变对封装内数据进行操作。
- 确定html代码范围。<html></html>
在该范围中可以定义两部分内容,一部分是头,一部分是体。
<html>
<head></head>
<body></body>
</html>
head:网页的一些属性信息。比如:标题。
body:网页显示的数据。
- 标签的特点: 对于数据进行封装,那么就有开始标签和结束标签,但是也有一些标签只体现单一功能,所以不需要结束标签,规范中要求标签必须要结束,所以这样的标签在内部闭合。
如:<br /> <hr /> <img /> <input />
- 标签格式:
<标签名 属性名="属性值" >数据</标签名>
<标签名 属性名="属性值" />
- 常见标签:
1、
字体:<font>
<font size="7" color="#FFFF00">数据</font>
特殊部分:如果要在页面显示一些特殊符号时,需要进行转义。
<: < >: > &: & 空格:
标题:<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:abc@qq.com?subject=haha&cc=kkk@outlook.com">联系我们</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介绍
- CSS是层叠样式表(Cascading StyleSheets)用来定义网页的现实效果。
- 可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的现实效果功能。
- 简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能。
2、CSS和Html在网页代码中的结合:4种方式
- 利用标签中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>
- style标签方式:(内嵌方式)
在head标签中加入style标签,对多个标签进行统一修改。
<head>
<style type="text/css">
div {
color:#99FF00;
background-color:#003333;
}
</style>
</head>
该方式可以对单个页面的样式进行统一设置,但对于局部不够灵活。
- 导入方式:
前提是已经存在一个定义好的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括号后面必须要用分号结束。如果导入进来的样式与本页面定义的样式重复,以本页定义样式为准。
- 链接方式:
通过head标签中link标签来实现,前提也是先要有一个已定好的CSS文件。
例:
<link rel="stylesheet" href="../css/1.css" type="text/css" />
注:可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准。
3、注释
- 多行注释 /* */
4、样式优先级:
- 由上到下,由外到内。优先级由低到高。
5、选择器:
- 总结CSS代码格式:
选择器名称 { 属性名:属性值;属性名:属性值;...}
属性与属性之间用 分号 隔开
属性与属性值直接按用 冒号 连接
如果一个属性有多个值的话,那么多个值用 空格 隔开。
- 选择器:
就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器。
选择器共有三种:
a) html标签名选择器。使用的就是html的标签名。
b) class选择器。其实使用的标签中的class属性。
c) id选择器。其实使用的是标签的中的id属性。
每一个标签都定义了class属性和id属性。用于对标签进行标识,方便对标签进行操作。
在定义的中,多个标签的class属性值可以相同,而id值要唯一,因为JavaScript中经常用。
- 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>
- 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属性。
- 扩展选择器:
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中可以看到效果。