HTML常用元素
1、链接
属性 |
描述 |
href="url地址" |
跳转的目标地址 |
href="mailto: 1815810057@qq.com" |
发邮件 |
href="tel:183****9413" |
打电话 |
href="demo3.zip" |
下载 浏览器不能解析的文档 |
href="#a + 设置锚点的id" |
锚点 |
target="__self" |
当前窗口打开 |
target="_blank" |
新窗口打开 |
实例演示代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接元素</title>
</head>
<body>
<!--1、链接到网址-->
<!--/*taget属性:-->
<!--* _self: 当前窗口打开-->
<!--* _blank: 新窗口打开-->
<!--*-->
<!--*/-->
<a href="www.dashushu.club/demo1.php" target="_blank">赵大叔的网页</a>
<!--2、下载html不能解析的文件-->
<!--/*-->
<!--* download属性:指定下载文件名-->
<!--*/-->
<a href="DASHU.rar" download="下载大叔文件">下载文件</a>
<!--3、发邮件-->
<a href="mailto:1815810057@qq.com">发邮件</a>
<!--4、打电话-->
<a href="tel:1831445****">打电话</a>
<!--5、锚点-->
<a href="#anchor">锚点</a>
<h3 id="anchor" style="margin-top: 1000px;">锚点</h3>
</body>
</html>
代码效果:
http://www.dashushu.club/homework0403/demo1.html
2、列表
序号 |
标签 |
描述 |
1 |
<ol>, <li> |
无序列表 |
2 |
<ul>, <li> |
有序列表 |
3 |
<dl>, <dt>,<dd> |
自定义列表 |
实例演示代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表元素</title>
</head>
<body>
<!--1、有序列表-->
<h3>购物清单</h3>
<!--start="3":设置开始编号-->
<ol start="3">
<li>苹果1斤</li>
<li>西瓜3斤</li>
<li>橘子1斤</li>
<li>葡萄1斤</li>
<li>香蕉1斤</li>
</ol>
<hr>
<!--2、无序列表:最重要的使用场景,与链接标签配合,生成导航-->
<h3>导航列表</h3>
<ul>
<li><a href="">标签1</a></li>
<li><a href="">标签2</a></li>
<li><a href="">标签3</a></li>
</ul>
<hr>
<!--3、自定义列表:类似名词解释-->
<dl>
<!-- dt标题-->
<dt>联系地址</dt>
<dd>中国.云南.昆明</dd>
</dl>
</body>
</html>
代码效果:
http://www.dashushu.club/homework0403/demo2.html
3、表格
3.1 表格元素
序号 |
标签 |
描述 |
1 |
<table> |
声明表格, 必选 |
2 |
<caption> |
定义表格标题,可选 |
3 |
<thead> |
定义表格头格, 只需定义一次, 可选 |
4 |
<tbody> |
定义表格主体, 允许定义多次 ,必选 |
5 |
<th> |
定义表格头部中的单元格, 必选 |
6 |
<tr> |
定义表格中的行, 必选 |
7 |
<td> |
定义表格主体中的单元格, 必选 |
8 |
<tfoot> |
定义表格底, 只需定义一次, 可选 |
3.3 常用属性
序号 |
属性 |
所属标签 |
描述 |
1 |
border |
<table> |
添加表格框 |
2 |
cellpadding |
<table> |
设置单元格内边距 |
3 |
cellspacing |
<table> |
设置单元格边框间隙 |
4 |
align |
不限 |
设置单元格内容水平居中 |
5 |
bgcolor |
不限 |
设置背景色 |
6 |
width |
不限 |
设置宽度 |
7 |
height |
不限 |
设置高度 |
实例演示代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格元素</title>
</head>
<body>
<!--table:表格声明-->
<table border="1" cellpadding="6" cellspacing="0" width="500" align="center">
<!--colgroup:按列分组-->
<colgroup bgcolor= ""> <!-- 设置默认背景-->
<col>
<col bgcolor= "">
<!-- <col span = "2">:跨越2列-->
<col span = "2">
<col bgcolor= "">
<col>
<col bgcolor="red">
</colgroup>
<!-- caption:定义表格标题-->
<caption style="font-size: 1.5rem; margin-bottom: 10px">
工资明细表
</caption>
<!-- thead:定义表格头部,可选-->
<thead bgcolor="lightblue"> <!-- thead/tr:定义表格头部,可选-->
<tr>
<th>部门</th>
<th>ID</th>
<th>MSNV</th>
<th>姓名</th>
<th>工作天</th>
<th>应发</th>
<th>实领</th>
</tr>
</thead>
<!-- tbody:定义表格主体,必选-->
<tbody>
<tr>
<th rowspan="5">车间管理</th> <!-- rowspan="5":合并行,合并后,多余的要删除-->
<td>1</td>
<td>TH000050</td>
<td>啊黎</td>
<td>26</td>
<td>6000</td>
<td>5600</td>
</tr>
<tr>
<!--<th>车间管理</th>-->
<td>2</td>
<td>TH000051</td>
<td>啊仁</td>
<td>26</td>
<td>6000</td>
<td>5600</td>
</tr>
<tr>
<!--<th>车间管理</th>-->
<td>3</td>
<td>TH000054</td>
<td>啊清</td>
<td>26</td>
<td>6000</td>
<td>5600</td>
</tr>
<tr>
<!--<th>车间管理</th>-->
<td>4</td>
<td>TH000056</td>
<td>啊梅</td>
<td>26</td>
<td>6000</td>
<td>5600</td>
</tr>
<tr>
<!--<th>车间管理</th>-->
<td>5</td>
<td>TH000098</td>
<td>啊秀</td>
<td>26</td>
<td>6000</td>
<td>5600</td>
</tr>
</tbody>
<!-- tfooter:定义表格尾部,可选-->
<tfoot>
<tr bgcolor="#ffe4c4">
<td>备注</td>
<td colspan="6">主管以上人员工资保密!!!</td> <!--合并列-->
<!--<td></td>-->
<!--<td></td>
<td></td>
<td></td>
<td></td>-->
</tr>
</tfoot>
</table>
</body>
</html>
代码效果:
http://www.dashushu.club/homework0403/demo3.html
4.1 表单元素类型
序号 |
元素 |
名称 |
描述 |
1 |
<form> |
表单容器 |
表单应该放在该标签内提交 |
2 |
<input> |
输入控件 |
由type 属性指定控件类型 |
3 |
<label> |
控件标签 |
用于控件功能描述与内容关联 |
4 |
<select> |
下拉列表 |
用于选择预置的输入内容 |
5 |
<datalist> |
预置列表 |
用于展示预置的输入内容 |
6 |
<option> |
预置选项 |
与<select> ,<datalist> 配合 |
7 |
<textarea> |
文本域 |
多行文本框,常与富文本编辑器配合 |
8 |
<button> |
按钮 |
用于提交表单 |
4.2 表单元素对应的属性
序号 |
元素 |
属性 |
1 |
<form> |
action , method |
2 |
<label> |
for |
3 |
<input> |
type , name ,value ,placeholder … |
4 |
<select> |
name |
5 |
<datalist> |
id ,与<input list=""> 关联 |
6 |
<option> |
value , label ,selected |
7 |
<textarea> |
cols , rows ,name … |
8 |
<button> |
type ,name |
4.3 表单元素的公共属性(并非所有元素都具备)
序号 |
属性 |
描述 |
1 |
name |
元素/控件名称,用做服务器端脚本的变量名称 |
2 |
value |
提交到服务器端的数据 |
3 |
placeholder |
输入框的提示信息 |
4 |
form |
所属的表单,与<form name=""> 对应 |
5 |
autofocus |
页面加载时,自动获取焦点 |
6 |
required |
必填 / 必选项 |
7 |
readonly |
该控件内容只读 |
8 |
disabled |
是否禁用 |
序号 |
属性 |
名称 |
描述 |
1 |
type="text" |
文本框 |
默认值 |
2 |
type="password" |
密码框 |
输入内容显示为* ,不显示明文 |
3 |
type="radio" |
单选按钮 |
多个选项中仅允许提交一个(应提供默认选项) |
4 |
type="checkbox" |
复选框 |
允许同时提交一个或多个选项(应提供默认选项) |
5 |
type="hidden" |
隐藏域 |
页面不显示,但数据仍会被提交 |
6 |
type="file" |
文件上传 |
本地文件上传,有accept ,multiple 属性 |
7 |
type="submit" |
提交按钮 |
点击后会提交按钮所在的表单 |
8 |
type="reset" |
重置按钮 |
点击后会重置输入控件中的内容为默认值 |
9 |
type="button" |
自定义按钮 |
使用JS脚本定义按钮点击后的行为 |
4.5 其它type
类型(部分)
序号 |
属性 |
名称 |
描述 |
1 |
type="email" |
邮箱 |
输入必须是邮箱格式 |
2 |
type="number" |
整数 |
输入必须是整数,可设置范围min ,max |
3 |
type="url" |
URL地址 |
输入内容必须是有效的URL格式文本 |
4 |
type="search" |
搜索框 |
通常与autocomplete 配合 |
5 |
type="hidden" |
隐藏域 |
页面不显示,但数据仍会被提交 |
6 |
type="date" |
日期控件 |
不同浏览器显示略有不同,但功能一致 |
7 |
type="color" |
调色板 |
可直接选择颜色, 不同平台略有不同 |
8 |
type="tel" |
电话号码 |
手机端会弹出数字小键盘 |
实例演示代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单元素</title>
<style>
form {
padding: 20px;
box-sizing: border-box;
width: 350px;
box-shadow: 0 0 8px #666666;
border-radius: 10px;
margin: auto;
background-color: dodgerblue;
display: grid;
gap: 15px;
}
form > section {
display: grid;
grid-template-columns: 65px 1fr ;
}
h3 {
text-align: center;
}
input[type="image"] {
justify-self: center;
}
</style>
</head
<body>
<h3>用户注册</h3>
<form action="">
<section> <!--<section>之间垂直排列-->
<!--type='text':文本框-->
<label for="name">用户名:</label> <!--for属性绑定id,实现点击自动焦点-->
<input type="text" id="name" name="username">
</section>
<section> <!--<section>之间垂直排列-->
<!--type='password':密码-->
<label for="psd">密码:</label> <!--for属性绑定id,实现点击自动焦点-->
<input type="password" id="psd" name="password"> <!--name="password"提交表单到服务器的变量名-->
</section>
<section> <!--<section>之间垂直排列-->
<!--type="email":密码-->
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" placeholder="example@email.com" required>
</section>
<!--type="radio":单选框-->
<section>
<label for="secret">性别:</label>
<div class="box">
<!--name值要下样才能实现单选-->
<input type="radio" name="gender" id="male"><label for="male">男</label>
<input type="radio" name="gender" id="female"><label for="female">女</label>
<input type="radio" name="gender" id="secret"><label for="secret">保密</label>
</div>
</section>
<!--type="checkbox":复选框-->
<section>
<label for="anh">爱好:</label>
<div class="boxs">
<!--name值用数组形式,方便后台处理-->
<!--checked默认选项-->
<input type="checkbox" name="hobby[]" id="programme" value="programme" checked><label for="programme">编程</label>
<input type="checkbox" name="hobby[]" id="game" value="game"><label for="game">游戏</label>
<input type="checkbox" name="hobby[]" id="math" value="math"><label for="math">数学</label>
<input type="checkbox" name="hobby[]" id="anh" value="anh"><label for="anh">英语</label>
</div>
</section>
<!-- select+option:下拉列表-->
<section>
<label for="edu">学历:</label>
<select name="edu" id="edu">
<option value="1" label="高中">
<option value="2" label="本科" selected>
<option value="3" label="研究生">
<option value="4" label="博士">
</select>
</section>
<!--选项列表-->
<section>
<label for="brand">国籍:</label>
<input type="search" list="nationality" name="brand" id="brand">
<datalist id="nationality">
<option value="CH">
<option value="USA" >
<option value="VN">
</datalist>
</section>
<!--隐藏域: 数据可以提交, 但页面中没有显示,适合发送敏感或不需要用户输入的数据-->
<section>
<input type="hidden" name="user_id" value="1040">
</section>
<!--文件上传-->
<section>
<label for="uploads">上传头像:</label>
<input type="file" name="user_pic" id="uploads" accept="image/png, image/jpeg, image/gif">
</section>
<!--按钮-->
<button>提交</button>
<input type="submit" value="注册" name="submit">
<input type="reset" value="重填" name="reset">
</form>
</body>
</html>
代码效果:
http://www.dashushu.club/homework0403/demo4.html
5. 注意事项
- 添加
disabled
禁用属性的字段数据不会被提交,但是readonly
只读属性的字段允许提交 - 隐藏域的内容不会在HTML页面中显示,但是
value
属性的数据会被提交