简介
网站开发的主要原则是:
1.用标签元素HTML描述网页的内容结构;
2.用CSS描述网页的排版布局;
3. 用JavaScript描述网页的事件处理,即鼠标或键盘在网页元素上的动作后的程序。
Html语言是被创建用于给予网页内容结构和语义信息的超文本语言。
CSS语言是被创建用于给予网页内容样式的层叠样式表。
Html决定网页内容的结构和语义信息,css决定网页内容的样式和表现。而且css不应该在html文件中。
三个重要和html有关的术语
元素
元素就是一个表示符,他定义网页中的一个对象,对象包括结构和内容。
一些比较常用的元素比如h1 到h6, p, a, div, span, strong, 和em.
标签
一个元素有像个标签组成,一个开始标签和一个结束标签。
其中有个别标签因为只有单一功能,或许没有要修饰的内容可在标签内结束。
要对被标签修饰的内容进行更丰富的操作,就用到了标签中的属性,通过对属性值的改变,增加了更多的效果选择。
属性值与属性值之间用等号连接,属性值可以用双引号或者单引号或者不用引号。
属性
属性就是给元素提供更多的信息,常用的属性有 id name class
title,或者是给多媒体元素一个src属性,为超链接属性提供href属性。
Html文档结构和语法
Html文档有统一的结构,包括下面的声明和标签:doctype Html head body。
Doctype声明被用来告诉浏览器,我们用的是哪个版本的html文档,他被放在文档开始。紧跟其后的是html标签,表示文档的开始和结束。文档的head元素用来提供文档的一些元数据,比如文档的title,外部文档的链接,css和javascript等。在head标签中的内容在网页中是看不见的。能看见的内容都是在<body>
中的。
HTML(Hyper Text Mark-up Language 超文本标记语言)的缩写,是最基础的网页语言 。
Html是通过标签来定义的语言,代码都是由标签所组成 。Html代码不用区分大小写 。
Html代码由<html>
开始</html>
结束。里面由头部分<head></head>
和体部分<body></body>
两部分组成。
标签:是由一对尖括号<>和标签名称组成。
标签分为“起始标签”和“结束标签”两种,二者的标签名称是相同的,只是结束标签多了一个斜杠“/”
在元素的起始标签中,可以包含“属性”来表示元素的其他特性
常用标签的使用
为了操作数据,都需要对数据进行不同标签封装,通过标签中的属性对封装的数据进行操作。标签就相当于一个容器。对容器中的数据进行操作,就是在不断的改变容器的属性值。
格式: <标签名 属性名='属性值'> 数据内容 </标签名>
多个属性时,用空格分开。
字体
1.字体标签<font>
2.标题标签<h1><h2>...<h6>
3.特殊字符 空格
& &
< <
> >
&qpos; '
列表
4.列表字符<dl>
<dt> :上层项目
<dd> :下层项目
<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<!-- html注释:演示列表标签。
列表标签:dl
上层项目:dt
下层项目:dd 封装的内容是会被缩进的。有自动缩进的效果。
-->
<dl>
<dt>上层项目内容 </dt>
<dd>下层项目内容</dd>
<dd>下层项目内容</dd>
<dd>下层项目内容</dd>
</dl>
<hr/>
<!-- 有序和无序的项目列表
有序:<ol>
无序:<ul>
无论有序还是无序,条目的封装用的都是<li>
而且它们都有缩进效果。
-->
<ul type="square">
<li>无序项目列表</li>
<li>无序项目列表</li>
<li>无序项目列表</li>
<li>无序项目列表</li>
</ul>
<ol type="a">
<li>有序的项目列表</li>
<li>有序的项目列表</li>
<li>有序的项目列表</li>
</ol>
</body>
</html>
5.图像标签<img>
<!DOCTYPE html>
<html>
<head>
<title>img.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<!-- 演示图片标签
img
-->
<img src="img\1.jpg" height=100 width=100 border=10 alt="崩溃!" />
</body>
</html>
6.地图标签<map>
应用:当要在图像中选取某一部分作为连接的时候,map标签要和img标签联合使用,href是超链接。
表格
7.表格标签<table>
组成:标题标签:<caption>
表头标签:<th>
行标签:<tr>
单元格标签:<td>
<!DOCTYPE html>
<html>
<head>
<title>table.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<table border=1 bordercolor="#0000FF" cellpadding=10 cellspacing=0 width=200>
<caption>表格标题</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>39</td>
</tr>
</table>
<hr/>
<table border=1 bordercolor="#0000FF" cellpadding=10 cellspacing=0 width=200>
<tr>
<th colspan="2">个人信息</th>
</tr>
<tr>
<td>张三</td>
<td>30</td>
</tr>
</table>
<hr/>
<table border=1 bordercolor="#0000FF" cellpadding=10 cellspacing=0 width=200>
<tbody><!-- 表格的下一级标签是tbody,不定义也存在 -->
<tr>
<th rowspan="2">个人信息</th>
<td>张三</td>
</tr>
<tr>
<td>30</td>
</tr>
</tbody>
</table>
</body>
</html>
超链接
8.超链接标签:<a>
两种用法:1.超链接<a href="">
2.定位标记<a name="">
<!DOCTYPE html>
<html>
<head>
<title>link.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<!--
超链接:
作用:连接资源
当有了href属性才有了点击效果
href属性的值不同,解析的方式也不一样。
如果在该值中没有指定过任何协议,解析时,是按照默认的协议来解析该值。
默认的协议是file协议。
-->
<a href="http://www.sina.com.cn" target="_blank">新浪网站</a>
<hr/>
<a href="img/2.jpg">图片</a>
<hr/>
<a href="mailto:abc@sina.com">联系我们</a>
<hr/>
<a href="http://www.xunlei.com/labixiaoxin.rmvb">蜡笔小新</a><br/>
<a href="thunder://hhahahahahahhaha---a=f">蜡笔小新</a>
<hr/>
<!-- 取消超链接点击的默认效果,添加自定义效果(弹窗) -->
<a href="javascript:void(0)" onclick="alert('弹窗')">这是一个超链接</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>link2.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<!--
定位标记。
专业术语:锚。
-->
<a name=top>顶部位置</a>
<hr/>
<img alt="pic1" src="img/2.jpg" height=900 width=400 border=10/>
<hr/>
<a name=center>中间位置</a>
<hr/>
<img alt="pic2" src="img/3.jpg" height=900 width=400 border=10/>
<a href="#top">回到顶部位置</a>
<a href="#center">回到中间位置</a>
</body>
</html>
框架
9.框架标签<frameset>
注:框架标签不可以放到<body>
,一般为了代码的可读性,会放到<head>
和<body>
之间。
当框架大小不想被鼠标拖动而改变,可以在frame标签中加入noresize属性,这个属性没有属性值,称为标记属性,加上就为固定。在XHML的规范中,所以属性都要有属性值,那么标记属性的属性值就是自身。
10.画中画标签<iframe>
<!DOCTYPE html>
<html>
<head>
<title>iframe.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=utf-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<iframe src="table.html" height=400 width=600>这是画中画标签,如果看到这些文字,说明浏览器不支持该标签</iframe>
<iframe src="img.html">这是画中画标签</iframe>
<!-- <iframe src="http:www.xxx.com/1.js" height=400 width=600>恶意程序,让画中画大小为0,但是还是会访问资源</iframe> -->
</body>
</html>
表单
11.表单标签<form>
<input>
:输入标签,接收用户输入信息。其中的type属性指定输入标签的类型。
- 文本框 text。输入的文本信息直接显示在框中。
- 密码框 password。输入的文本以圆点或者星号的形式显示。
- 单选框 radio 如:性别选择
- 隐藏字段 hidden。 在页面上不显示,但是在提交时随其他内容一起提交。
- 提交按钮 submit 用于提交表单中的内容。
<!DOCTYPE html>
<html>
<head>
<title>form.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=GB2312">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<!-- 如果要给服务端提交数据,表单中的组件必须有name和value属性。
用于给服务端获取数据方便
-->
<form>
输入名称:<input type="text" name="user" value=""/><br/>
输入密码:<input type="password" name="psw"/><br/>
选择性别:<input type="radio" name="sex" value="nan">男
<input type="radio" name="sex" value="nv" checked="checked">女<br>
选择技术:<input type="checkbox" name="tech" value="java">java
<input type="checkbox" name="tech" value="html">html
<input type="checkbox" name="tech" value="css">css<br>
选择文件:<input type="file" name="file"><br>
一个图片:<input type="image" src="11.jpg"><br>
<!-- 数据不需要客户端知道,但是可以将其提交服务器 -->
隐藏组件:<input type="hidden" name="myke" value="myvalue"><br>
一个按钮:<input type="button" value="button1" onclick="alert('有个按钮')"><br>
<select name="country">
<option value="none">--选择国家--</option>
<option value="cn" selected="selected">中国</option>
<option value="en">英国</option>
<option value="usa">美国</option>
<option value="kor">韩国-</option>
</select>
<br>
<textarea rows="5" cols="20" name="text"></textarea><br>
<input type="reset" value="清除数据"><input type="submit" value="提交数据">
</form>
</body>
</html>
提交到服务端的表格化表单:
<!DOCTYPE html>
<html>
<head>
<title>reg.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=gb2312">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<form action="http://127.0.0.1:9090" method="post">
<table border="1" bordercolor="#0000ff" cellpadding=10 cellspacing=0 width=600>
<tr>
<th colspan="2">注册表单</th>
</tr>
<tr>
<td>用户名称</td>
<td><input type="text" name="user" value=""></td>
</tr>
<tr>
<td>输入密码</td>
<td><input type="password" name="psw"></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" name="repsw"></td>
</tr>
<tr>
<td>选择性别</td>
<td><input type="radio" name="sex" value="nan">男
<input type="radio" name="sex" value="nv" checked="checked">女
</td>
</tr>
<tr>
<td>选择技术</td>
<td>
<input type="checkbox" name="tech" value="java">java
<input type="checkbox" name="tech" value="html">html
<input type="checkbox" name="tech" value="css">css
</td>
</tr>
<tr>
<td>选择国家</td>
<td>
<select name="country">
<option value="none">--选择国家--</option>
<option value="cn" selected="selected">中国</option>
<option value="en">英国</option>
<option value="usa">美国</option>
<option value="kor">韩国-</option>
</select>
</td>
</tr>
<tr>
<th colspan="2">
<input type="reset" value="清除数据">
<input type="submit" value="提交数据">
</th>
</tr>
</table>
</form>
</body>
</html>
服务端程序:
package server;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.net.ServerSocket;
import java.net.Socket;
public class RegServer {
public static void main(String[] args) throws IOException {
ServerSocket ss=new ServerSocket(9090);
Socket s=ss.accept();
System.out.println(s.getInetAddress().getHostAddress()+" connected");
InputStream in =s.getInputStream();
byte[] buf=new byte[1024];
int len=in.read(buf);
System.out.println(new String(buf,0,len));
PrintWriter out=new PrintWriter(s.getOutputStream(),true);
out.println("<font color='green' size='7'>注册成功</font>");
s.close();
ss.close();
}
}
get提交与post提交的区别
提交方式:get 提交
地址栏:http://127.0.0.1:9090/?user=%D0%A1%D0%C2&psw=12345&repsw=12345&sex=nan&tech=java&tech=html&country=cn
(请求头)
提交信息:
127.0.0.1 connected
GET /?user=%D0%A1%D0%C2&psw=12345&repsw=12345&sex=nan&tech=java&tech=html&country=cn HTTP/1.1
Accept: image/gif, image/jpeg, image/pjpeg, application/x-ms-application, application/xaml+xml, application/x-ms-xbap, */*
Accept-Language: zh-Hans-CN,zh-Hans;q=0.8,en-US;q=0.5,en;q=0.3
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.2; Win64; x64; Trident/7.0)
UA-CPU: AMD64
Accept-Encoding: gzip, deflate
Host: 127.0.0.1:9090
Connection: Keep-Alive
提交方式:post
地址栏:http://127.0.0.1:9090/
提交信息:
127.0.0.1 connected
POST / HTTP/1.1
Accept: image/gif, image/jpeg, image/pjpeg, application/x-ms-application, application/xaml+xml, application/x-ms-xbap, */*
Accept-Language: zh-Hans-CN,zh-Hans;q=0.8,en-US;q=0.5,en;q=0.3
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.2; Win64; x64; Trident/7.0)
Content-Type: application/x-www-form-urlencoded
UA-CPU: AMD64
Accept-Encoding: gzip, deflate
Host: 127.0.0.1:9090
Content-Length: 77
Connection: Keep-Alive
Cache-Control: no-cache
user=%DF%F7%DF%F7&psw=12345&repsw=12345&sex=nv&tech=java&tech=html&country=cn
get提交和post提交的区别:
1. get提交,提交的信息都显示在地址栏中;post提交,提交的信息不显示在地址栏中
2. get提交,对于敏感的数据信息不安全;post提交,对于敏感信息安全
3. get提交,对于大数据不行,因为地址栏存储体积有限;post提交,可以提交大体积数据
4. get提交,将信息封装到了请求行中;post提交,将信息封装到请求体中。
在服务端的一个区别:如果出现将中文提交到tomcat服务器,服务器默认会用iso8859-1进行解码会出现乱码,
通过iso-8859-1进行编码,再用指定的中文码表进行解码,即可。
这种方式对get和post两种提交方式都有效。
但是对于post提交方式提交的中文,还有另外一种解决办法,
就是直接使用服务端的一个对象request对象的setCharacterEncoding方法直接设置指定的中文码表,
就可以将中文数据解析出来。
这个方法只对请求体中的数据进行解码。
综合上述:表单提交,建议使用post
和服务端交互的三种方式:
1. 地址栏输入URL地址 get
2. 超链接 get
3. 表单 get和post
如果在客户端进行增强型的校验(只要有一个组件内容是错误的,是无法继续提交的。只有全对才可以提交)
那么,服务端收到数据后,还需要校验吗?
需要,为了安全性。
如果服务端做了增强型的校验,客户端还需要校验吗?
需要,因为要提高用户的上网体验效果,减轻服务器端的压力。
头标签
头标签都放在<head></head>
头部分之间,包括title base meta link
12.<title>:
指定浏览器的标题栏显示的内容。
13.<base>:
href属性指定网页中所有的超链接的目录。可以是本地目录,也可以是网络目录。注意值的结尾处一定要用/表示目录。只作用于相对路径的超链接文件。target属性指定打开超链接的方式。如_blank表示所有的超链接都用新窗口打开显示。
14.<meta>
:name属性是网页的描述信息,当去keyword时,content属性的内容就作为搜索引擎的关键字进行搜索。http-equiv属性模拟http协议的响应消息头。
15.<link>
rel属性描述目标文档与当前文档的关系;type属性描述文档类型;media属性指定目标文件在哪种设备上起作用。
其他
16.<marquee>
让内容动起来。
direction属性:left right down up
behavior属性:scorll alternate slide
17.<pre>
:可以将文本内容按照在代码区的样子显示在页面上。
<!DOCTYPE html>
<html>
<head>
<title>other.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<pre>
class Demo{
public static void main(String[] args)
{
System.out.println("hello");
}
}
<!-- pre标签可以保持代码区的格式 -->
</pre>
<hr>
<marquee direction="down" behavior="alternate">上下移动</marquee>
<marquee direction="down" behavior="Scroll">滚动</marquee>
<marquee direction="down" behavior="slide">移动后停止</marquee>
<b>这是</b><i>演示</i><u>其他</u>常见的小标签
X<sub>2</sub> X<sup>2</sup>
</body>
</html>
标签分为两大类:
1.块级标签(元素):标签结束后都有换行 div p dl table title ol ul
2.行内标签(元素):标签结束后没有换行 font span img input select a
只为封装数据,没有特殊含义的表签:
div:区域标签 封装整行区域
span:区域标签 封装行内区域
p:断落标签 不仅仅换行 而且段落前后都有空行
XHTML与XML
XHTML是可扩展的超文本标记语言(Extensible HyperText Markup Language)
1.XHTML可以理解为HTML的升级版。代码的结构更为严谨,是基于XML的一种应用。
2.XML是可扩展标记语言(Extensible Markup Language)。
3.XML是对数据信息的描述。HTML是数据显示的描述。
4.XML代码规定的更为严格。
5.XML规范可以被更多的应用程序所解释,将成为一种通用的数据交换语言。
6.各个服务器,框架都将以XML作为配置文件。