html标签

最新推荐文章于 2024-08-08 13:22:04 发布

amber053

最新推荐文章于 2024-08-08 13:22:04 发布

阅读量275

点赞数 2

本文链接：https://blog.csdn.net/amber053/article/details/78504682

版权

基本标签：

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）单选框/复选框：

参数：

①radio单选框，checkbox复选框

②value，提交到服务器的值

③name，控件名称，供后端使用，当单选框控件为一组时，改组控件的名称要相同，这样才能起到单选的作用

④checked，选中状态，当checked=“checked”时，该选项被默认选中

（4）标签：label

如果你点击了标签中的文字，浏览器会自动将焦点转到相应的表单控件中

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>

（5）文本域：textarea，支持多行输入