基本标签:
1、<p>段落
2、<blockquote>长文本引用,浏览器会自动缩进
3、<address>地址
空字符标签:
4、<br />换行符
5、<hr />水平线符
预格式标签:
6、<code>引用一行代码
7、<pre>预格式化引用,会自动保留原有格式,常用于引用大段代码
列表标签:
8、<ul>无序列表(unordered list),<ul><li>....</li></ul>
9、<ol>有序列表(ordered list>,<ol><li>....</li></ol>
表格标签:
10、<table>表格标签
11、<tr>行名 <td>单元格名
12、<th>表头单元格,默认格式为粗体并居中
锚链接:
<a>锚链接,用于设置超链接
参数:(1)title 鼠标移动到超链接处的提示文字
(2)href 超链接URL,可以使用href="mailto:"的形式链接到Email地址
eg:<a href="mailto:504461066@qq.com">发送邮件</a>
<a href="mailto:504461066@qq.com">发送邮件</a>
当mailto有多个参数时,第一个参数后面使用"?",后面的参数用“&”连接
eg:<a href="mailto:504461066@qq.com?cc=851781726@qq.com&bcc=228467369@qq.com&subject=这是第一封邮件">发送邮件</a>
(3)target 是否在新建的浏览器窗口中打开,当target="_blank"时,在新建的浏览器窗口打开超链接
图片标签:
<img>图片标签
参数:(1)src,图片URL
(2)title,当图片可见时,鼠标焦点在图片上时显示的文本
(3)alt,图片提示信息,当图片加载失败时的替换文本
<form>表单标签
参数:(1)action,提交的数据会被传送到的地方
(2)method,数据操作的方法,post或者get
表单控件包括:
(1)文本/密码输入框:input
参数:①type,类型,当type=text时,为文本输入框;当type为password时,为密码输入框;
②name,为输入框命名,供后端使用;
③value,默认值,在用户还未输入时控件中的替代内容,一般起提示作用;
eg:一个登录功能的表单实例:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>文本输入框、密码输入框</title>
</head>
<body>
<form method="post" action="save.php">
账户:
<input type="text" name="myName">
<br>
密码:
<input type="password" name="pass" />
</form>
</body>
</html>
(2)按钮:
提交按钮:<input type="submit" value="按钮上显示的文字">
重置按钮:<input type="reset" value="按钮上显示的文字">
(3)单选框/复选框:
<input type="radio/checkbox" value="值” name="名字" checked="checked">
参数:
①radio单选框,checkbox复选框
②value,提交到服务器的值
③name,控件名称,供后端使用,当单选框控件为一组时,改组控件的名称要相同,这样才能起到单选的作用
④checked,选中状态,当checked=“checked”时,该选项被默认选中
(4)标签:label
<label for="控件id名称">
如果你点击了标签中的文字,浏览器会自动将焦点转到相应的表单控件中
eg:一个标签和控件的实例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" context="text/html;charset=utf-8">
<title>标签实例</title>
<body>
<p>你喜欢的运动是</p>
<form>
<label for="basketball">篮球</label>
<input type="checkbox" name="interest" value="basketball" id="basketball">
<label for="run">跑步</label>
<input type="checkbox" name="interest" value="run" id="run">
</form>
</body>
</html>
(5)文本域:textarea,支持多行输入
参数:①rows,行数
②cols,列数
eg:一个个人简介的表单实例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset="utf-8">
<title>文本域</title>
</head>
<body>
<form action="save.php" method="post">
<label>个人简介</label>
<textarea cols="50" rows="20">在这里输入内容....</textarea>
<input type="submit" value="确定" name="submit" />
<input type="reset" value="重置" name="reset" />
</form>
</body>
</html>
显示效果:
(6)下拉列表:<select><option value="值" selected="selected" multiple="multiple">选项</option></select>
参数:①value,要提交给服务器的值
②selected,当selected=“seletcted”时,该选项为默认选项
③multiple,多选,当multiple="multiple"时,该下拉列表为多选列表
eg:一个下拉列表的实例:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉列表框</title>
</head>
<body>
<form action="save.php" method="post" >
<label>爱好:</label>
<select>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
</form>
</body>
</html>