前言
Web项目的开发离不开HTML，即使做页面是用的EasyUI，或者是用BootStrap直接拖拽，其实都是HTML的封装，基本内容还是HTML。HTML的内容很多，但是常用的都差不多，本篇博客就对常用的HTML的标签进行总结。
HTML的标签
1、html、body、head
HTML的基本标签为html标签、head标签、body标签，html标签为页面的总体部分，head标签是网站的头部，body标签是网站的主体部分。head标签中有title标签，内容是浏览器选项卡的内容；还有style标签，用来引入CSS样式；有script标签，用来写JavaScript代码；还有meta标签，用来显示网页文档的属性。
<html>
<head>
<title>
我是网页的头部
</title>
</head>
<body>
我是网页的主体
</body>
</html>
2、hr标签和a标签
hr标签是在文档中插入换行符，br标签是空标签，也就意味着它没有结束标签。br标签只是简单的开始新的一行，当浏览器遇到p标签时，通常会在相邻的段落之间插入一些垂直的间距。
<html>
<head>
<title>
我是网页的头部
</title>
</head>
<body>
我是<br>网页主体
</body>
</html>
a标签定义了超链接，用于从一张页面链接到另一张页面。a元素最重要的属性是href，用于指示链接的目标。
<html>
<head>
<title>
我是网页的头部
</title>
</head>
<body>
<a href="">百度</a>
</body>
</html>
这时的百度下面有一个下划线，代表它是超链接，在href值为空时，点击百度不会有什么用。当给href附上值，它就可以连接到相应的地址。如下面代码，给href附上百度的网址，点击百度时，就可以链接到百度的首页。
<html>
<head>
<title>
我是网页的头部
</title>
</head>
<body>
<a href="https://www.baidu.com/index.php?tn=56060048_pg&ch=2">百度</a>
</body>
</html>
h1~h6是六种不同的标题，大小不同，序号越大的，字体反而越小。h1~h6可以用来做网站的标题。
<html>
<head>
<title>
我是网页的头部
</title>
</head>
<body>
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
</body>
</html>
4、字体设置
字体设置使用的font标签，用来设置文字的字体、颜色、大小等等，另外对文字进行加黑、斜体、加下划线、加中划线，或者加上标和下标则是由另外的几种标签实现的。
<html>
<head>
<title>
我是网页的头部
</title>
</head>
<body>
<font color="green" size="4">绿色，4号字</font><br/>
<font color="blue" size="6">蓝色，6号字</font>
<b>这是对字体加黑</b><br/>
<i>这是斜体字</i><br/>
<u>这是加下划线的字</u><br/>
<s>这是加中划线的字</s>
<sup>上标</sup>
<sub>下标</sub>
</body>
</html>
font标签中的字体颜色控制，可以写颜色的英文，也可以写十六进制的数。另外字体大小的设置可以用阿拉伯数字，也可以用像素来表示。
5、特殊字符
由于HTML代码中用到了一些字符，所以在页面显示时，如果直接用这些字符，则显示不出效果，例如“<”和“>”，还有空格、双引号等等，这时就需要转义字符来进行显示了。
<html>
<head>
<title>
我是网页的头部
</title>
</head>
<body>
这里演示的是空 格<br/>
这里演示的是大于号><br/>
这里演示的是小于号<<br/>
这里演示的是双引号"<br/>
这里演示的and符号&
</body>
</html>
6、文字的布局
文字的布局包括div标签、span标签、ul标签、ol标签、p标签和br标签。div标签是块级标签，也就是说一个div会占据整个页面的一行，从左到右，用firebug进行调试的话可以看到效果。span标签是行内元素，它的显示只占据跟数据一样大小的地方。ul标签是无序号列表，显示时列表前边是实心黑色圆点。ol标签是有序号列表，显示时列表前面是123的序号。p标签代表的是回车和换行，它把标签后面的文字换行之后，两行之间还会出现一个空行。而br标签只是换行不回车。
<html>
<head>
<title>
我是网页的头部
</title>
</head>
<body>
<div>这是文字的分区显示</div>
<span>这是文字的分区显示</span>
<span>这是文字的分区显示</span>
<ul>
<li>无序号列表</li>
<li>无序号列表</li>
<li>无序号列表</li>
</ul>
<ol>
<li>有序号列表</li>
<li>有序号列表</li>
<li>有序号列表</li>
</ol>
我是回车<p/>和换行<br/>
我是换行<br/>不回车
</body>
</html>
HTML的输入域
1、text输入域
text输入域是输入文本，在页面的显示是一个文本框，可以对文本框进行设置，比如限制输入的字符数、限制只读、设置大小边框等。
<html>
<head>
<title>
我是网页的头部
</title>
</head>
<body>
姓名：<input type="text"/><br/>
年龄：<input type="text"/>
</body>
</html>
对text输入域进行设置时，可以设置它的id（唯一标识）、name（名称）、value（文本框中的值）、size（文本框的大小）、maxlength（文本框的最大输入长度）。
2、password
password输入域可以限制文本框在输入密码时，自动转换为黑色圆点。
<html>
<head>
<title>
我是网页的头部
</title>
</head>
<body>
姓名：<input type="text"/><br/>
密码：<input type="password"/>
</body>
</html>
3、单选框和多选框
单选框和多选框分别为radio和check，显示在页面是单选条件和多选条件。使用单选框时要注意，单选框的name不同的话，两个单选框就可以同时选中了，所以设置时要确保name相同。
<html>
<head>
<title>
我是网页的头部
</title>
</head>
<body>
姓名：<input type="text"/><br/>
年龄：<input type="text"/><br/>
性别：<input type="radio" name="sex">男<input type="radio" name="sex">女
</body>
</html>
<html>
<head>
<title>
我是网页的头部
</title>
</head>
<body>
姓名：<input type="text"/><br/>
年龄：<input type="text"/><br/>
性别：<input type="radio" name="sex">男<input type="radio" name="sex">女<br/>
爱好：
<input type="checkbox" name="favourate">看电影
<input type="checkbox" name="favourate">滑旱冰
<input type="checkbox" name="favourate">画漫画
</body>
</html>
4、select和textarea
select是下拉框，在下拉框中显示给定的选择内容，还可以通过设置option的selected属性为true来设置默认显示的内容，如果不设置，则默认显示第一个。textarea是输入框，但是跟文本框不太一样，它可以设置多行进行显示。
<html>
<head>
<title>
我是网页的头部
</title>
</head>
<body>
姓名：<input type="text"/><br/>
年龄：<input type="text"/><br/>
性别：<input type="radio" name="sex">男<input type="radio" name="sex">女<br/>
爱好：
<input type="checkbox" name="favourate">看电影
<input type="checkbox" name="favourate">滑旱冰
<input type="checkbox" name="favourate">画漫画<br/>
所在省份：
<select>
<option>北京市</option>
<option selected="true">河北省</option>
<option>广东省</option>
<option>上海市</option>
<option>海南省</option>
</select><br/>
备注信息：<br/>
<textarea rows="5" cols="10"></textarea>
</body>
</html>
5、按钮
按钮有四种，一是普通按钮button，二是表单提交的按钮submit，三是表单的重置按钮reset，四是图片按钮，即点击图片提交表单。
<html>
<head>
</head>
<body>
<form action="2.html">
姓名：<input type="text" name="name"/><br/>
密码：<input type="password" name="password"/><br/>
<input type="button" value="按钮button">
<input type="submit" value="按钮submit">
<input type="reset" value="按钮reset">
<input type="image" src="http://offlintab.firefoxchina.cn/static/img/search/baidu_web.png">
</form>
</body>
</html>
HTML的框架
HTML框架是通过HTML代码中的frameset和frame标签，使得页面分为几块，每一块放置不同的内容。
<html>
<head>
</head>
<frameset rows="10%,*">
<frame name="top">
<frameset cols="15%,*">
<frame name="left">
<frame name="right">
</frameset>
</frameset>
</html>
HTML表单
HTML表单是包含表单元素的区域，允许用户在表单中输入信息，提交表单时，可以将表单中的所有数据都提交给服务器。
<html>
<head>
</head>
<body>
<form action="2.html">
姓名：<input type="text" name="name"/><br/>
密码：<input type="password" name="password"/><br/>
<input type="submit" value="提交表单">
</form>
</body>
</html>
HTML的表格同样是很重要，对于表格的使用应该是很熟悉了，这里就不再赘述了。EasyUI中封装的DataGrid实际上就是封装的HTML代码中的Table，经过样式的改变，用CSS和JavaScript对表格进行了灵活控制。
总结
HTML这些简单的元素标签虽然看着很简单，但是真的让自己手写的话，还是有一点难度的。有些时候，越简单的东西越不上心，觉得自己会，实际上真的动手写，可能还得依靠百度。如果这些简单的代码，平常练习的时候多动手写写，这样如果开发中需要的话，开发效率自然就提上去了。
扫一扫
2303
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
