Web (2)-网页前端技术（02）
HTML
重点提示：
注：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
这个页面的头部表示了w3c的规范信息。
何为dtd文件呢？就是一个约束文件。（后来被 schema替换）
里面定义了 html应该有哪些标签，以及标签的嵌套关系。
自定义服务器接收数据(了解post与get)（对form表单补充）
post与get的区别
这个页面的头部表示了w3c的规范信息。
何为dtd文件呢? 就是一个约束文件。
里面定义了html应该有哪些标签，以及标签的嵌套关系。
1：如何点击能访问服务器。
http://192.168.3.100:10000
2：post和get的区别
get：数据有限制，不安全。速度快。
post：数据无限制，安全。速度慢。
form的method：post与get属性值区别：
get:
GET /?username=admin&password=admin HTTP/1.1
Accept: application/x-shockwave-flash, image/gif, image/jpeg, image/pjpeg, image/pjpeg, application/x-ms-application, application/x-ms-xbap, application/vnd.ms-xpsdocument, application/xaml+xml, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, /
Accept-Language: zh-cn
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.2)
Accept-Encoding: gzip, deflate
Host: 192.168.3.100:10000
Connection: Keep-Alive
数据的提交，是把数据包装在请求头提交。数据有限制，速度快。
地址栏：http://192.168.3.100:10000/?username=admin&password=admin
post:
POST / HTTP/1.1
Accept: application/x-shockwave-flash, image/gif, image/jpeg, image/pjpeg, image/pjpeg, application/x-ms-application, application/x-ms-xbap, application/vnd.ms-xpsdocument, application/xaml+xml, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, /
Accept-Language: zh-cn
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.2)
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip, deflate
Host: 192.168.3.100:10000
Content-Length: 29
Connection: Keep-Alive
Cache-Control: no-cache
username=admin&password=admin
数据的提交，是把请求头和请求体分开的。数据无限制，速度慢。
地址栏：http://192.168.3.100:10000/
超链接标签
超链接标签：a
锚点链接
href：链接的目标
target：目标打开方式
_balank：新窗口中打开
<html>
<head>
<title>超链接标签</title>
</head>
<!--
超链接标签：a
href:链接的目标
target:目标打开方式
_blank 新的窗口中打开。
直接写www.baidu.com 地址栏 D:\JavaSE_20131130\day30_html\www.baidu.com
不是我们想要的http://www.baidu.com/。
怎么回事呢?
写链接的时候，一定要注意了，写网址得自己加http协议。否则，默认启用的是文件协议。
就是以文件的方式打开。
锚点链接：
A:定义锚点
<a name="top"></a>
B:使用锚点
<a href="#top">返回顶部</a>
-->
<body>
<a name="top"></a>
<a href="www.baidu.com">百度</a>
<a href="mn.jpg" target="_blank">美女</a>
<hr />
<img src="mn.jpg" />
<hr />
<img src="mn1.jpg" />
<a name="middle"></a>
<hr />
<img src="mn2.jpg" />
<hr />
<img src="mn3.jpg" />
<a href="#top">返回顶部</a>
<a href="#middle">返回中部</a>
</body>
</html>
框架集标签
通常一个框架页面，加上几个展示页面使用。
indux：控制 left，right，top
配合超链接标签使用
frameset
frame：装每一个页面的标签
frameset
frame
<html>
<head>
<title>框架集标签</title>
</head>
<!--
框架集标签不和body一起使用。
框架集：
frameset 框架集
|--frameset
|--frame
|--frame 装每一个页面的标签
-->
<frameset rows="10%,*">
<frame src="head.html" name="top"/>
<frameset cols="15%,*">
<frame src="left.html" name="left"/>
<frame src="right.html" name="right"/>
</frameset>
</frameset>
</html>
XHTML、XML、HTML5
XHTML：可拓展的超文本标记语言
XML：可拓展标记语言（自定义标签）不是用来显示属性的，用来描述数据结构关系，多用来做配置文件
HTML5：HTML5是用于取代1999年所定制的HTML4.01和XHTML1.0标准的HTML标准版本
|— 所有的属性，标签小写
|— 所有的属性必须给出对应的值，标记属性也必须给
CSS
概述：（Cascading Style Sheets）是层叠样式表，用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的课维护性，并增强了网页的显示效果功能，简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
HTML和CSS的结合
结合方式：
style属性方式
style标签方式（内嵌 方式）
导入方式
链接方式
1&2.style属性和标签（内嵌方式）
<html>
<head>
<title>css和html结合</title>
<style type="text/css">
p{
text-align:center;
color:#9900aa;
font-size:30px;
}
</style>
</head>
<!--
虽然，基本的html标签组合及其属性可以完成一些功能，但是会比较复杂，这样就导致了后期的维护非常困难。
所以，css就出现了，它就解决了这样的问题。
CSS的使用：
A:使用html标签的style属性。
style属性，表示这里使用的是css代码。
css代码的格式：
基本格式： 属性:属性值
如果有多个属性，那么用；隔开。
<p style="text-align:center; color:#00ff00; font-size:20px;">
适合单独控制某一个html标签的样式。
B:使用头部的style标签。
注意：html标签的直接属性，没有css代码的权限高。
如果同一个html标签，既有头部样式，也有自己行内样式。以行内为主。就近原则。
<style type="text/css">
p{
text-align:center;
color:#9900aa;
font-size:30px;
}
</style>
使用同一个html页面中。多个html标签，使用相同的样式。
-->
<body>
<!--
我要让一段文字显示居中，红色
-->
<p align="center">
<font color="red">今天天气很好，适合睡觉。</font>
</p>
<p align="center">
<font color="red">快要放假了，心情很激动。上课都没心情。</font>
</p>
<hr />
<!--
改动需求，靠右。蓝色
-->
<p align="right" style="text-align:right">
<font color="blue">今天天气很好，适合睡觉。</font>
</p>
<p align="right">
<font color="blue">快要放假了，心情很激动。上课都没心情。</font>
</p>
<hr />
<p style="text-align:center; color:#00ff00; font-size:20px;">
今天天气很好，适合睡觉。
</p>
<p style="text-align:center; color:#00ff00; font-size:20px;">
快要放假了，心情很激动。上课都没心情。
</p>
<hr />
<p>
今天天气很好，适合睡觉。
</p>
<p>
快要放假了，心情很激动。上课都没心情。
</p>
<p>
今天天气很好，适合睡觉。
</p>
<p>
快要放假了，心情很激动。上课都没心情。
</p>
</body>
</html>
3.导入方式
<style type="text/css">
@import url(02.css);
</style>
4.链接方式
<link href="02.css" rel="stylesheet" type="text/css">
注 02.css
p {
text-align:right;
font-size:40px;
color:#0000ff;
}
CSS选择器
基本选择器
A：HTML选择器，这个时候的css代码以html标签来决定作用于谁
B：class选择器（类选择器），是以html标签的class属性值作为选择器
注意：为了和html标签选择器进行区分，用 . 作为前缀
C：id选择器，是以html标签的id属性值作为选择器。
注意：为了和html标签选择器进行区分，用 # 作为前缀
=注：css只有多行注释：=
/*
这里是css的注释
*/
代码：
<html>
<head>
<title>选择器</title>
<style type="text/css">
/*
css只有多行注释。
*/
/*
* html选择器
*/
p {
color:#ff0000;
font-size:30px;
}
b {
color:#0000ff;
}
/*
class选择器，类选择器
*/
.p_1 {
color:green;
font-size:20px;
}
.p_2 {
color:yellow;
font-size:40px;
}
#p_1 {
color:#0f0f0f;
font-size:50px;
}
#p_2 {
color:#9900aa;
font-size:60px;
}
</style>
</head>
<body>
<!--
选择器：选择被CSS代码操作的标签。
A:html选择器，这个时候的css代码以html标签来决定作用于谁。<br/>
B:class选择器，是以html标签的class属性值作为选择器。
注意：为了和html标签选择器进行区分，用.作为前缀。
C:id选择器，是以html标签的id属性值作为选择器。
注意：为了和html标签选择器进行区分，用#作为前缀。
-->
<p>
今天开始学习CSS了， 感觉很强大。
</p>
<b>HelloWorld</b>
<hr />
<!--
第一个p标签的内容：绿色，20px
第一个p标签的内容：黄色，40px
-->
<p class="p_1">
今天开始学习CSS了， 感觉很强大。
</p>
<p class="p_2">
今天开始学习CSS了， 感觉很强大。
</p>
<hr />
<!--
第一个p标签的内容：绿色，20px
第一个p标签的内容：黄色，40px
-->
<p id="p_1">
今天开始学习CSS了， 感觉很强大。
</p>
<p id="p_2">
今天开始学习CSS了， 感觉很强大。
</p>
</body>
</html>
扩展选择器
A：关联选择器
使用 空格 隔开
B：组合选择器
使用 ， 逗号隔开
C：伪元素选择器
关联选择器和组合选择器
<html>
<head>
<title>选择器</title>
<style type="text/css">
p b {
color:#ff0000;
}
.first_table tr td {
color:#00ff00;
}
/*
p {
color:#0000ff;
}
b {
color:#0000ff;
}
i {
color:#0000ff;
}
*/
p, i, u, b {
color:#0000ff;
}
</style>
</head>
<body>
<!--
扩展选择器：
A：关联选择器。
需求：段落标签显示"我爱林青霞",但是"林青霞"需要加粗，并且颜色是红色。
B：组合选择器。
解决的问题，不同的标签，要显示相同的样式。
-->
<p>我爱<b>林青霞</b></p>
<p>我爱<b>林青霞</b></p>
<p>我爱<b>林青霞</b></p>
<p>我爱<b>林青霞</b></p>
<p>我爱<b>林青霞</b></p>
<p>我爱<b>林青霞</b></p>
<p>我爱<b>林青霞</b></p>
<p>我爱<b>林青霞</b></p>
<p>你爱高玲玲</p>
<b>小杨幂</b>
<hr/>
<table class="first_table">
<tr>
<td>hello</td>
</tr>
</table>
<table>
<tr>
<td>world</td>
</tr>
</table>
<hr/>
<p>aa</p>
<b>bb</b><br/>
<i>cc</i><br/>
<u>dd</u><br/>
</body>
</html>
伪选择器
a:link 超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移到超链接上的状态（未点击）。
a:active 点击超链接时的状态。
…
代码
<html>
<head>
<title>选择器</title>
<style type="text/css">
a:link {
color:#000000;
}
a:visited {
color:#00ff00;
}
a:hover{
color:#0000ff;
text-decoration:line-through;
}
a:active{
color:yellow;
}
a {
text-decoration:none;
}
</style>
</head>
<body>
<!--
其实就在html中预先定义好的一些选择器。称为伪元素。是因为CSS的术语。
格式：标签名：伪元素。类名 标签名。类名：伪元素。都可以。
a:link 超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移到超链接上的状态（未点击）。
a:active 点击超链接时的状态。
-->
<a href="http://www.baidu.com">百度</a>
<a href="http://www.sina.com">新浪</a>
<a href="http://www.youku.com">优酷</a>
</body>
</html>
500
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
