2HTML 基础知识
Posted 陈泽俊
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2HTML 基础知识相关的知识，希望对你有一定的参考价值。
一、HTT（PHyper Text Markup Language）即超文本语言。
特点：
1、通过标签来定义的语言，代码都是由标签所组成
2、不区分大小写
3、由<html>开始</html>结束，里面由头部分<head></head>和体部分<body></body>两部分组成，例如
<html>
<head>
<title>Hello Page</title>
</head>
<body>
Hello Word!
</body>
</html>
4、多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能(如<br/>、<hr/>)，或者没有要修饰的内容可以在标签内结束。
5、标签中的属性：属性名与属性值之间用"="连接，属性值可以用双引号或单引号或都不用引号，一般会用双引号。
<标签名 属性名="属性值"> 数据内容 </标签名>
<标签名 属性名="属性值" />
二、HTML常用标签
1、<font>：字体标签
<font size=5 color="red">内容</font>
2、<h1><h2><h3>...<h6>：标题标签
<h1>Hello Word!<h1>
3、<img>：图像标签
<img src="图片路径" alt="图片说明文字" height="" width="" />
4、<table>：表格标签
a）、组成：
标题标签：<caption>
表头标签：<th> 本身有居中、加粗特性
行标签：<tr>
单元格标签：<td>
b）、合并行：rowspan="2"
c）、合并列：colspan="2"
5、<a>：超链接标签
<a href="http://www.baidu.com" target="_blank">百度</a>
href属性：可以是url，也可以是本地文件
target属性：指定在哪个窗口打开(本窗口或新建窗口)，默认为本窗口中打开
<a name="top">顶部位置</a> 定义一个标记
<a href="#top">回到顶部位置</a> #标记
【注】在使用定位标记时一定要在href值的开始加入"#"
6、<form>：表单。用于与服务器端进行交互
<form method="" action=""></form>
a）、method：属性指定表单提交方式(get或post)默认为get;
aa)、如请求方式为GET方式，则可以在请求的URL地址后以?的形式带上提交给服务器的数据，多个数据之间以&进行分隔，例如：GET /mail/1.html?name=abc&password=xyz
bb)、GET方式的特点：在URL地址后附带的参数是有限制的，其数据容量通常不能超过1K
cc)、如请求方式为POST方式，则可以在请求的实体内容中向服务器发送数据，Post方式的特点：传送的数据量无限制
dd)、Get对于敏感信息不安全; POST对于敏感信息安全。表单提交尽量使用POST
b）、action：属性指定表单提交地址
7、<input>：<input type="" name="" id="" value="" />
a）、type属性：值不同，对应的组件不同
text： 文本框，输入的文本可见
password： 密码框，输入的文本不可见
radio 单选框，当有多个单框时，只能有一个被选中，那么这些单框的name值必须相同
checkbox： 复选框
file： 文件上传，可以进行文件选择的组件
button： 按钮
submit： 提交按钮
reset： 重置按钮
hidden： 隐藏标签，在页面不显示，但在提交的时候随其他内容一起提交至服务端
b）、name属性：指定标签的名称，多个标签可以重名，一般只有radio、checkbox同名
c）、id属性：指定标签的唯一名称，一个页面中每个标签的id不能重名
8、<select>:下拉框标签
<select name="" multiple="multiple" size="">
<option value=""></option>
</select>
每个下拉菜单项由option进行封装。multiple属性可以指定下拉框的显示方式。当使用multiple属性时，size属性可以指定显示数量
9、<textarea>多行文本框：
<textarea name="" id="" cols="30" rows="10"></textarea>
10、<div>:层标签
11、其他：
<p>标签：段落标签
<pre>标签：可以保留数据的原有格式
<b>标签：加粗
<i>标签：斜体
<u>标签：下划线
<sub>标签：下标
<sup>标签：上标
……
更多查找《java web程序开发参考手册 》的第二章目录，里面列得很全，或上 w3school 查询。
【注】表单组件通常都需要定义name和value属性，因为要将数据发送至服务端，服务端只有知道了该name的值才可以对提交的数据进行分别获取。
三、特殊字符：
1、<(<)
2、>(>)
3、&(&)
4、"(")
5、 (空格)
四、实例：
1 <html> 2 <head> 3 <title>HTML练习</title> 4 </head> 5 6 <body> 7 <form action=""> 8 <table border="1" cellspacing="0"> 9 <caption><b>注册信息</b></caption> 10 <tr> 11 <td>用户名：</td> 12 <td> 13 <input type="text" name="userName" id="userName" value="" /> 14 </td> 15 </tr> 16 <tr> 17 <td>密码：</td> 18 <td> 19 <input type="password" name="pwd" id="pwd" value="" /> 20 </td> 21 </tr> 22 <tr> 23 <td>性别：</td> 24 <td> 25 <label><input type="radio" name="sex" value="nan" />男</label> 26 <label><input type="radio" name="sex" value="nv" />女</label> 27 </td> 28 </tr> 29 <tr> 30 <td>爱好：</td> 31 <td> 32 <label><input type="checkbox" name="hobby">旅行</label> 33 <label><input type="checkbox" name="hobby">运动</label> 34 <label><input type="checkbox" name="hobby">听歌</label> 35 <label><input type="checkbox" name="hobby">看书</label> 36 </td> 37 </tr> 38 <tr> 39 <td>身份证号：</td> 40 <td> 41 <input type="text" name="cId" id="cId" /> 42 </td> 43 </tr> 44 <tr> 45 <td>手机号：</td> 46 <td> 47 <input type="text" name="phone" id="phone" /> 48 </td> 49 </tr> 50 <tr> 51 <td colspan="2" style="text-align: center;"> 52 <input type="submit" value="注册" /> 53 <input type="reset" value="重置" /> 54 </td> 55 </tr> 56 </table> 57 </form> 58 </body> 59 </html>
以上是关于2HTML 基础知识的主要内容，如果未能解决你的问题，请参考以下文章
总结前端开发模式和规范 2HTML5中script的async属性异步加载JS