html超文本标记语言,在后端程序员看来是一大难题。
对于我来说,一样的困难。
但是既然后端都能做好,那前端当然也应该克服,因为有时候,需要自己是一个优秀的前端开发。
先说说HTML4与HTML5的区别吧,其实我也不知道。
但是根据资料显示,HTML5是HTML4的延续,HTML5让前端开发,更加简单了一些。
如何确定是HTML5呢 ？
1. HTML超文本标记文件以<!DOCTYPE html> 开头,就是HTML5。
2. 记得HTML4就好像只有<div>并且用的地方很多。HTML5增加了canvas(绘画)、video(媒体回放)、audio、
新的特殊内容元素（article、footer、header、nav、section）、表单控件（calendar、date、time、
email、url、search），比如之前用div现在可以用HTML5结构化标签代替，这样使整个页面更加直观，容易理解。
比如表单控件中的email他能自动校正邮箱格式，让程序员开发起来更加方便快捷。
html基础：
1. html代码不区分大小写
2. html标签以两部分组成 <></> 有开头，有结尾
3. html加载顺序，从上到下依次加载，<head></head>里面的内容会最先加载
4. html的<body></body>是存放页面显示数据的地方
5. 格式2种：
<标签名 属性名='属性值' 属性名=属性值 属性名="属性值"> 数据内容 </标签名>
<标签名 属性名='属性值' 属性名=属性值 属性名="属性值"/>
说明：属性名与属性值之间用 = 号连接,属性值可以用双引号、单引号或者不用引号
html常用标签：
列表标签
<dl>
<dt></dt>
<dd></dd> <!-- dd封装的内容有自动缩进的功能 -->
</dl>
<ul> <!-- 无序 -->
<li></li>
</ul>
<ol> <!-- 有序 -->
<li></li>
</ol>
图像标签
<img src="1.jpg" align="middle" border="3" alt="图片说明">
图像地图
<map> <!-- 不常用 -->
<area shape="rect" coords="50,89,116,104" href="1.html"/>
<area shape="circle" coords="118,203,40" href="2.html"/>
</map>
表格标签
<table border="1" width="40%">
<caption>表格标题</caption>
<tr> <!-- 行标签 -->
<th>姓名</th>
<th>年龄</th>
<th>手机号</th>
<td></td> <!-- 这也是行标签,不过有些不同 -->
</tr>
<tr> <!-- 第二行标题 -->
<th>张三</th>
<th>23</th>
<th>15228119999</th>
</tr>
</table>
超链接 <a> 两种用法
<!-- href属性值可以是url 或者本地文件。target表示在哪个窗口打开 -->
<mailto:> 这个可以自动打开电脑默认邮件软件
<a href="mailto:zh_xh@live.com">联系我们</a>
<a name="标记">标记位置</a>
<a name="标记">标记位置</a>
例如：
<a name="标记">顶部</a>
<p>文本内容</p>
<a href="#标记">返回顶部</a>
框架
定义网页显示框架
<frameset></frameset>该标签放在<body>外面
例子：
网页框架.html
<html>
<head><title>首页</title></head>
<!-- 定义框架。使用标签frameset -->
<frameset rows="10%,*">
<frame src="网页顶部.html" name="top" />
<!-- 定义框架。使用标签frameset -->
<frameset cols="10%,*">
<frame src="网页菜单.html" name="menu" />
<frame src="网页内容.html" name="content"/>
</frameset>
</frameset>
<body></body>
</html>
网页顶部.html
<html><head><title>网页顶部</title></head><body><h1>网站LOGO</h1></body></html>
网页内容.html
<html><head><title>网页左边</title></head><body>网页内容显示区</body></html>
网页菜单.html
<html>
<head><title>网页左边</title></head>
<body>
<H3>左边栏连接</H3>
<a href="http://www.baidu.com" target="content">百度一下</a><br/>
<a href="http://www.sina.com.cn" target="content">新浪</a><br/>
<a href="http://www.jd.com" target="content">京东</a><br/>
</body>
</html>
画中画标签
<iframe src="http://www.baidu.com" height=100 width=50>画中画标签，您看到该文字,表示您的浏览器不支持该标签</iframe>
<iframe src="aa.txt">画中画标签，您看到该文字,表示您的浏览器不支持该标签</iframe>
表单组件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>表单标签</title>
</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="有个按钮" onclick="alert('有个阿牛')" /><br/>
<!-- 下拉选择 -->
<select name="country">
<option value="none">--选择国家--</option>
<option value="usa">美国</option>
<option value="en">英国</option>
<option value="cn" selected="selected">中国</option>
</select>
<textarea name="text"></textarea>
<br/>
<input type="reset" value="清除数据"/><input type="submit" value="提交数据" />
</form>
</body>
</html>
表单格式化
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<!--meta http-equiv="refresh" content="3;url=http://www.sina.com.cn" /-->
<title>Untitled Document</title>
</head>
<body>
<form action="http://10.1.31.69: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" /></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" />女
</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="usa">--美国--</option>
<option value="en">--英国--</option>
<option value="cn">--中国--</option>
</select>
</td>
</tr>
<tr>
<th colspan="2">
<input type="reset" value="清除数据" />
<input type="submit" value="提交数据" />
</th>
</tr>
</table>
</form>
</body>
</html>
get和post
提交方式：get提交。
地址栏：http://10.1.31.69:9090/?user=abc&psw=123&repsw=123&sex=nan&tech=java&tech=html&country=cn
GET /?user=abc&psw=123&repsw=123&sex=nan&tech=java&tech=html&country=cn HTTP/1.1
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/x-shockwave-flash, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, */*
Accept-Language: zh-cn,zu;q=0.5
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; InfoPath.2)
Host: 10.1.31.69:9090
Connection: Keep-Alive
提交方式：POST
地址栏：http://10.1.31.69:9090/
POST / HTTP/1.1
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/x-shockwave-flash, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, */*
Accept-Language: zh-cn,zu;q=0.5
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; InfoPath.2)
Host: 10.1.31.69:9090
Content-Length: 68
Connection: Keep-Alive
Cache-Control: no-cache
user=hahah&psw=8989&repsw=8989&sex=nv&tech=html&tech=css&country=usa
GET提交和POST提交的区别？
1,
get提交，提交的信息都显示在地址栏中。
post提交，提交的信息不显示地址栏中。
2，
get提交，对于敏感的数据信息不安全。
post提交，对于敏感信息安全。
3，
get提交，对于大数据不行，因为地址栏存储体积有限。
post提交，可以提交大体积数据。
4，
get提交，将信息封装到了请求消息的请求行中。
post提交，将信息封装到了请求体中。
在服务端的一个区别。
如果出现将中文提交到tomcat服务器，服务器默认会用iso8859-1进行解码会出现乱码，
通过iso8859-1进行编码，在用指定的中文码表解码。即可。
这种方式对get提交和post提交都有效。
但是对于post提交方式提交的中文，还有另一种解决办法，就是直接使用服务端一个对象
request对象的setCharacterEncoding方法直接设置指定的中文码表就可以将中文数据解析出来。
这个方法只对请求体中的数据进行解码。
综上所述：表单提交，建议使用post。
和服务端交互的三种方式：
1，地址栏输入url地址。get
2，超链接。 get
3，表单。 get 和 post
如果在客户端进行增强型的校验(只要有一个组件内容是错误，是无法继续提交的。只有全对才可以提交)
问，服务端数据后，还需要校验吗？
需要，为了安全性。
如果服务端做了增强型的校验，客户端还需要校验吗？
需要，因为要提高用户的上网体验效果，减轻服务器端的压力。
其他常用标签
头标签都放在<head></head>头部分之间。包括：title base meta link
<title>：指定浏览器的标题栏显示的内容。
<base>：
href 属性：指定网页中所有的超链接的目录。可以是本地目录，也可以是网络目录。注意值得结尾处一定要用/表示目录。只作用于相对路径的超链接文件。
target 属性：指定打开超链接的方式。如_blank 表示所有的超链接都用新窗口打开显示。
<meta>：
name 属性：网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。
http-equiv 属性：模拟HTTP协议的响应消息头。
例：
<meta http-equiv="refresh" content="3;url=http://www.sina.com.cn" />
表示打开此页面3秒后自动转到新浪页面。
<link>：
rel 属性：描述目标文档与当前文档的关系。
type 属性：文档类型。
media：指定目标文档在哪种设备上起作用。
例：
<link rel="stylesheet" type="text/css" media="screen,print" href="a.css" />
<marquee> 让内容动起来。
direction 属性：left right down up
behavior 属性：scroll alternate slide
<pre>：可以将文本内容按在代码区的样子显示在页面上。
XHTML XML
XHTML是可扩展的超文本标记语言（Extensible HyperText Markup Language）。
XHTML是w3c组织在2000年的时候为了增强HTML推出的，本来是想替代HTML，但是发现Internet上用HTML写的网页太多，未遂！可以理解为它是HTML一个升级版（HTML4.01）。
XHTML的代码结构更为严谨，是基于XML的一种应用。
XML是可扩展标记语言（Extensible Markup Language）
XML是对数据信息的描述。HTML是数据显示的描述。
XML代码规定的更为严格，如：标签不结束被视为错误。
XML规范可以被更多的应用程序所解释，将成为一种通用的数据交换语言。
各个服务器，框架都将XML作为配置文件。
扫一扫
2421
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
