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属性的数据会被提交
