目录
一. 概念
HTML 是用来描述网页的一种语言,指的是超文本标记语言 (Hyper Text Markup Language)。
“超文本”:就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
“标记”:是一套标记标签 (markup tag),HTML使用标记标签来描述网页,大多数都是成对出现。HTML不是编程语言。
打开某个网页只需要单击右键,然后选择“查看源文件”就会打开一个包含页面 HTML 代码的窗口。
HTML的语法和规范:HTML文件的后缀是 .html或.htm,建议使用 .html 。HTML忽略字母大小写,建议编写时候使用小写。HTML超文本标记语言的结构包括“头”部分(Head)、和“主体”部分(Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。
HTML 元素:指的是从开始标签(start tag)到结束标签(end tag)的所有代码。大多数 HTML 元素可以嵌套(可以包含其他 HTML 元素),HTML 文档由嵌套的 HTML 元素构成。HTML元素又分为块元素和内联元素,块元素(如:<h1>,<p>,<div>,<span>,<ul>,<ol>,<table>)在浏览器中显示时通常会以新行来开始和结束;内联元素(如:<b>,<td>,<a>,<h1>,<img>,<h1>,<h1>,)在浏览器中显示的时候通常不会以新行开始。
HTML 属性:HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现,比如:name="value"。属性总是在 HTML 元素的开始标签中规定。
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
<!DOCTYPE> 声明帮助浏览器正确地显示网页,它不属于超文本标记语言结构的范围。Web 世界中存在许多不同的文档。只有了解文档的类型,浏览器才能正确地显示文档。HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面,这就是 <!DOCTYPE> 的用处。常用的 DOCTYPE 声明参考 http://www.w3school.com.cn/tags/tag_doctype.asp链接 。
二.常用标签
<! -- -->,注释
<html> </html>,在一个HTML文档中只能出现一次,定义整个HTML文档,将整个HTML文档的所有内容包括其中。
<head></head>,HTML文档的头部
<body></body>,HTML文档的主体部分
2.1 头部常用标签
<title></title>,定义文档的标题 。仅可在 HEAD 元素内使用。位于 title 开闭标签之内的文本,都会在浏览器的标题栏和 Microsoft Windows 的任务栏上显示。对于 Web 页,“Internet Explorer”会被自动追加到标题后。而在 HTML 应用程序(HTA)中,仅会显示指定的标题。
<base> </base>,标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接。
<link> </link>, 标签定义了文档与外部资源之间的关系。
<meta> </meta>,标签描述了一些基本的元数据,提供了元数据.元数据也不显示在页面上,但会被浏览器解析。
<style> </style>,标签定义了HTML文档的样式文件引用地址,在<style> 元素中你需要指定样式文件来渲染HTML文档。
<script> </script>,标签用于加载脚本文件,如: JavaScript。
2.2 主体部分常用标签
<hr /> 画分隔线
<br /> 换行。 <br /> 与<br> 很相似。在 XHTML、XML 以及未来的 HTML 版本中,不允许使用没有结束标签(闭合标签)的 HTML 元素。即使 <br> 在所有浏览器中的显示都没有问题,使用 <br /> 也是更长远的保障。
<h1> <h1/>~<h6> <h6/>,标题。数字越小在浏览器中显示的大小越大,当数字大于6时,把它看成6来处理。
<a href = ““> 链接是通过 <a href > 标签进行定义的,其中target属性,设置点击链接操作之后新窗口在哪打开。其中,a标签,也叫anchor(锚点)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接标签</title>
</head>
<body>
<a href="../列表标签/02_有序列表.html" target="_blank">点我有惊喜!</a>
</body>
</html>
<p> 段落
<font></font> 字体。<size></size> 字体大小,1到7,大于7时按7处理。不建议使用,用style代替。
style属性,使用style属性改变背景颜色(bgcolor作用),style属性淘汰了旧的"bgcolor"属性;使用style属性设置颜色、字体和尺寸,style属性淘汰了旧的<font>标签;style属性设置文本对齐方式,style属性淘汰了align属性。
<html>
<body style = "background-color:yellow">
<h1 stye = "background-color:red>This is a Heading</h1>
<p style = "background-color:green>This is a Paragraph</p>
<h2 style = "font-family:verdana">A Heading</h2>
<p style = "font-family:arial;color:red;font-size:20px;">A Paragraph</p>
<h3 style = "text-align:center;">A Heading</h3>
<p>The heading above is aligned to the center of the page</p>
</body>
</html>
<b></b>字体加粗
<i></i>斜体字
<image></image> 图片标签,src=""是图片的路径,../ 是向上一级目录。alt,图片无法正常显示时候的提示信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片标签</title>
</head>
<body>
<img src="../../img/logo2.png" width="150px" height="30px" alt="logo图片"/>
</body>
</html>
<ul>无序列表标签
<li>每一行的具体值</li>
</ul>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无序列表</title>
</head>
<body>
<ul type="square">
<li>CSDN</li>
<li>百度</li>
<li>京东</li>
</ul>
</body>
</html>
运行结果:
<ol>有序列表标签
<li>每一行的具体值</li>
</ol>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>
<ol start="4" reversed="reversed" type="a">
<li>CSDN</li>
<li>百度</li>
<li>京东</li>
</ol>
</body>
</html>
运行结果:
<table>表格标签
<tr>
<td>11</td>
</tr>
</table>
案例,表格标签的跨行,代码如下:cellspacing边框与边框之间的距离 cellpadding边框与内容之间的距离
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格的跨行跨列操作</title>
</head>
<body>
<table border="1px" width="500px" height="200px" align="center" cellspacing="0px" cellpadding="0px">
<tr>
<td colspan="2" align="center" width="250px" height="50px">
<img src="../../img/1.jpg" height="100%" width="100%"/>
</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td colspan="2" rowspan="2" align="center">
<table border="1px" align="center" width="100%" height="100%">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td rowspan="2" align="center">34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
</tr>
</table>
</body>
</html>
运行结果:
<form> </form> 表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。在浏览器中显示的部分直接文字,而要提交到服务端的部分必须使用value来定义;而多个radion单选框如果要组合使用必须name 一样;如果自己对输入框给一个默认值radio 和 checkbox用checked属性,而select 用selected 属性。给出具体案例,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签属性介绍</title>
</head>
<body>
<form action="#" method="get">
隐藏字段:<input type="hidden" name="id" value="" /><br />
用户名:<input type="text" name="username" readonly="readonly" value="zhangsan" size="40px" maxlength="5" placeholder="请输入用户名"/><br />
密码:<input type="password" name="password" required="required"/><br />
确认密码:<input type="password" name="repassword"/><br />
性别:<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女" checked="checked"/>女<br />
爱好:<input type="checkbox" name="hobby" value="钓鱼"/>钓鱼
<input type="checkbox" name="hobby" value="打电动"/>打电动
<input type="checkbox" name="hobby" value="写代码" checked="checked"/>写代码<br />
头像:<input type="file" name="file"/><br />
籍贯:<select name="province">
<option>--请选择--</option>
<option value="北京">北京</option>
<option value="上海" selected="selected">上海</option>
<option value="广州">广州</option>
</select><br />
自我介绍:
<textarea name="zwjs">
</textarea><br />
提交按钮:<input type="submit" value="注册"/><br />
普通按钮:<input type="button" value="zhuce"/><br />
重置按钮:<input type="reset" />
</form>
</body>
</html>
运行结果:
get 和 post 的区别:
Form中的get和post方法,在数据传输过程中分别对应了HTTP协议中的GET和POST方法。二者主要区别如下:
1、Get是用来从服务器上获得数据,而Post是用来向服务器上传递数据。其中,Get是Form的默认方法。Get 方式需要使用 Request.QueryString 来获取变量的值;而 Post 方式通过 Request.Form 来访问提交的内容。
2、Get 方法通过 URL 请求来传递用户的数据,将表单内各字段名称与其内容,以成对的字符串连接,置于 action 属性所指程序的 url 后,如http://www.mdm.com/test.asp?name=asd&password=sad,数据都会直接显示在 url 上,就像用户点击一个链接一样;Post 方法通过 HTTP post 机制,将表单内各字段名称与其内容放置在 HTML 表头(header)内一起传送给服务器端交由 action 属性能所指的程序处理,该程序会通过标准输入(stdin)方式,将表单的数据读出并加以处理。
3、Get方式提交数据,不安全。比如一个登陆页面,通过 Get 方式提交数据时,用户名和密码将出现在 URL 上,如果页面可以被缓存或者其他人可以访问客户这台机器,就可以从历史记录获得该用户的帐号和密码,所以表单提交建议使用 Post 方法;Post 方法提交的表单页面常见的问题是,该页面如果刷新的时候,会弹出一个对话框。
4、Get传输的数据量小,一般限制在 2 KB 左右,但是执行效率却比 Post 方法好,这主要是因为受URL长度限制;而Post可以传输大量的数据,所以在上传文件只能使用Post(当然还有一个原因,将在后面的提到)。
5、Get限制Form表单的数据集的值必须为ASCII字符;而Post支持整个ISO10646字符集。使用Post传输的数据,可以通过设置编码的方式正确转化中文;而Get传输的数据却没有变化。在以后的程序中,我们一定要注意这一点。
建议:出于安全性考虑,建议最好使用 Post 提交数据;除非你肯定你提交的数据可以一次性提交,否则请尽量用 Post 方法。
<frameset> </frameset>,HTML框架结构标签。注意:<frameset>和<body>两者不能共存。
<frame> </frame>,框架标签。
<frameset cols="25%,*">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
案例,实现一个网站系统的后台显示页面。其中,第二个<frameset>中又分开了两个<frame>,相当于将这个<frameset>整体作为第一个<frameset>中的一个<frame>项。其中<frame name="right">与下文中的target="right",两个right一致。实现代码,如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站后台系统显示页面</title>
</head>
<frameset rows="20%,*">
<frame src="top.html" />
<frameset cols="20%,*">
<frame src="left.html" />
<frame name="right" />
</frameset>
</frameset>
</html>
top.html代码为:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<font size="7">欢迎XXXX进入后台管理系统</font>
</body>
</html>
left.html代码为:其中target="right"与上文中的<frame name="right">,两个right一致。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="right.html" target="right">会员管理</a><br /><br />
<a href="#">品牌管理</a><br /><br />
<a href="#">商品管理</a><br /><br />
<a href="#">分类管理</a>
</body>
</html>
right.html代码为:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
所有用户信息、
</body>
</html>
运行结果:
分析:
完整的HTML标签列表(按字母排序):http://www.w3school.com.cn/tags/index.asp 链接
完整的HTML标签列表(按功能排序):http://www.w3school.com.cn/tags/html_ref_byfunc.asp 链接
------------------------------------------------ 我是低调的分隔线 ----------------------------------------------------
吾欲之南海,一瓶一钵足矣...