HTML文档的主要构架
<!DOCTYPE HTML>
<html>
<head>//HTML文档的头部
<meta http-equiv="Content-Type" content="text/html;
内容类型为HTML文档,里面的内容是使用文本和HTML,字符集是UTF-8 */
...
</head>
<body>//网页的主要内容
...
</body>
</html>
基本标签
- 根标签
<html></html>//所有的HTML标签都写在根标签中
- 头部标签
<head></head>//HTML文档的头部,包含HTML的多个头部标签。
e.g.<title></title>、<script></script>、<style></style>、
<link></link>、<meta></meta>等
- 网页标题标签
<title></title> //网页的标题信息,它会出现在网页的标题栏中,
网页的title标签用于告诉用户和搜素引擎这个网页的主要内容是什么,
搜索引擎可以通过网页标签判断网页的主题
- 注释标签
<!-- -->//注释内容写在两个横杆中间,注释内容不会在网页显示,只有打开
HTML文档才能
- 标题标签
<h1></h1>、<h2></h2>....<h6></h6>//共六种,字号大小递减
- 段落标签
<p></p>//每对标签中的内容为一段alt图像的描述性文本,当图片显示失败时
会显示该文本;title图片能显示时鼠标滑过显示的文本信息;图像可以说
jpeg,gif,png格式
- 斜体标签
<em></em>
- 加粗标签
<strong></strong>
- 样式独立设置标签
<span></span>//包含的文本段落进行独立样式设置,在文档头部设置
<style> span{color:...;...} </style>
- 引用标签
<q></q>//简短文本引用,浏览器会在文本两端加上双引号
- 长文本引用标签
<blockquote></blockquote>
- 换行标签
<br/>//注意,HTML文档中的空格换行都会被忽略,要达到文档的换行效果,在
要换行的地方加上<br/>标签(xhtml1.0 写法,没有成对;html4.01写法
<br>)
- 空格标签
//注意不要忘记末尾的分号
- 水平分割线标签
<hr/>//此为xhtml1.0 写法,html4.01写法为<hr>(直接写在需要使用的地方,没有成对)
- 地址标签
<address></address>//地址,邮箱,签名,作者等
- 单行代码标签
<code></code>
- 多行代码标签
<pre></pre>
- 无序列表标签
<ul><li></li></ul>//列表中每句前面有一个圆点,一个<ul></ul>标签中
可包含多个<li></li>标签
- 前后顺序标签
<ol><li></li></ol>//不同于<ul>之处为每句带数字序号
- 逻辑分块标签
<div></div>//按照风格主题等的不同对内容进行分块
- 分块命名标签
<div id="">//对div版块命名,不会在网页中显示
表格标签table
- 表格标签
<table></table>、<tr></tr>、<th></th>、<td></td>//所有标签包含
在<table></table>标签中;<tr></tr>标签每行一个进行分隔;<th></th>
标签标示表格头内容,自动居中加粗;每个<td></td>标签中填入一个单元格内
容。另有<thead></thead>、<tbody></tbody>、<tfooter></tfooter>
标签可使网页在列表完全加载完成之前优先显示该标签中的内容
- 表格标题标签
<caption></caption>//将表格标题显示在表格上方
- 表格摘要标签
<table summary="">//对表格内容进行摘要注释,内容不会显示在网页上
链接标签
- 链接标签
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本
</a>//title可不写,是鼠标移上去时显示的提示内容
- 新建浏览器窗口打开链接
<a></a>是在当前浏览器窗口打开链接的,添加target="_blank" 到<a>中即
可实现
<a></a>的mailto用法//<a href="mailto:..."></a>,如果mailto后面
有多个参数的话,第一个网址后要加"?",后面其余网址用"&"隔开,中间不要有
空格间隔
表单标签form 与浏览者交互
- 表单标签
<form></form>//与用户交互;<form>中填入method="get/post"(数据传
送方式)、action="服务器文件"(例如save.php); 所有表单控件(文本框、
文本域、按钮、单选框、复选框等)都必须放在 <form></form> 标签之间
(否则用户输入的信息可提交不到服务器上
input类型单行输入框和按钮
text&password
- 输入框标签(form表单标签中使用)
<input type="" name="" value="" />//PS:注意末尾的斜杠;当type为
text时为文本输入框,当type为password时为密码输入框;name为文本框命
名,以备后台PHP、ASP使用;value为输入框设置默认值,一般起到提示作用
submit
- 提交按钮标签(form表单标签中使用)
<input type="submit" value="名称">
reset
- 重置按钮标签(form表单标签中使用)
<input type="reset" value="名称">
radio&checkbox
- 单选框、复选框标签(form表单标签中使用)
<input type="radio/checkbox" value="值" name="名称"
checked="checked"/>文本//当type为radio时为单选框,当type为
checkbox时为复选框;value提交数据到服务器的值(后台程序PHP使用);
checked="checked"时,该选项被默认选中(后面的文本)
textarea文本框
- 文本域标签(支持多行输入)
<textarea rows="行数" cols="列数">默认文本</textarea>
select下拉列表框
- 下拉列表框标签(form表单标签中使用)
<select><option value="提交值">选项(显示值)</option>
</select>;option中填入selected="selected"则设置为默认选项
- 下拉列表框多选
<select multiple="multiple">//windows下按住ctrl点击可实现多选,
Mac下按住Command点击可实现多选
label标记
- form表单中的label标签:当用户选中时浏览器会自动将焦点转到和标签相关的表单控件上
<label for="控件id名称">//for属性中的值一定要和关联控件的id相同