页面元素的使用
1、链接元素
1.1、链接元素
| 名称 |
语法 |
描述 |
<a> |
<a href="url">链接文本</a> |
定义一个超级链接 |
1.2、<a>链接元素的常用属性
| 属性 |
描述 |
举例 |
href |
指向链接页面的 URL |
href="www.baidu.com" |
target |
打开 URL 的页面来源 |
target="_self/_blank/_top/_parent" |
download |
自定义下载文件名 |
download="picture.jpg" |
type |
设置链接文档的 MIME 类型 |
type="image/jpeg" |
1.2.1 href属性值
| 属性 |
描述 |
href="url" |
跳转的目标地址 |
href="mailto: 112233@qq.com" |
打开邮箱,发送邮件 |
href="tel:15388**1234" |
点击后,会询问用户是否要拨打电话 |
href="HTML知识.md" |
浏览器不能解析的文档, 会直接下载 |
1.2.2 target属性值
| 属性 |
描述 |
target="__self" |
当前窗口打开链接 |
target="_blank" |
新窗口打开链接 |
target="_parent" |
父窗口打开链接 |
target="_top" |
顶层窗口打开链接 |
target="name" |
指定名称的窗口, 与<iframe>元素配合 |
target="#anchor" |
跳转到设置了锚点的元素所在位置 |
1.3 代码实例
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>链接元素</title> </head> <body> <!-- 默认在当前窗口打开_self, 现自定义为新窗口打开_blank --> <a href="www.baidu.com" target="_parent">百度</a> <!-- 浏览器不能直接解析markdown文档,所以会自动下载,下载的文件名可由download属性自定义 --> <a href="html基础知识.md" download="HTML教案.md">html教程</a> <!-- 拔打电话,会调用默认通信工具 --> <a href="tel:15388**1234">联系电话</a> <!-- 发送邮件,会调用本机电邮软件 --> <a href="mailto: 112233@qq.com">邮箱地址</a> <a href="#anchor">跳转到当前面中的锚点</a> <h1 id="anchor" style="margin-top:1000px;">我是锚点</h1> </body></html>
2、列表元素
2.1、列表的基本概念
1、将一组关联的数据集中展示,使用列表最合适
2、列表分类：有序列表、无序列表、自定义列表
- 3、如果列表中的每个项目顺序无关紧要, 例如:购物车, 可以使用无序列表来描述。 无序列表使用
<ul> 标签，每个列表项始于 <li> 标签无序列表代码实例
<ul> <li>HTML</li> <li>PHP</li> <li>JAVA</li></ul>
4、如果列表中的每个项目顺序非常重要, 例如:工作计划,可以使用有序列表来描述。 有序列表使用 <ol> 标签，每个列表项始于 <li> 标签
有序列表代码实例
<ol> <li>HTML</li> <li>PHP</li> <li>JAVA</li></ol>
5、如果想给每一个列表项添加一个小标题, 例如联系方式,可以使用自定义列表来描述。 自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
自定义列表代码实例
<dl> <dt>甘肃</dt> <dd>★ 兰州</dd> <dd>☆ 天水</dd> <dd>♥ 陇南</dd></dl>
可见, HTML 中的列表由列表与内部的列表项两部分组成,而这两部分是包含关系。
所以, HTML 使用一组复合标签来描述列表,
2、图像元素
- 当前文档的图像元素,仅仅是外部图片资源的占位符,只有解析时才会加载进来
- 所以, 在确保用户可以看清的情况下, 图片体积越小越好, 以提升加载速度
- 推荐使用可压缩的
jpg格式, 小图片,或需要背景透明的,推荐使用png格式 - 对于简单的动图,或者颜色要求较少的,可使用
gif格式 - 对于图标, 建议使用 css 字体图标,而不是使用图像图标
| 元素 |
描述 |
<img> |
图片元素,空元素(单标签) |
<figure> |
图片/插图区域 |
<figcaption> |
图片/插图区域的标题 |
2.1、 <img>标签常用属性
| 属性 |
描述 |
src |
图片来源地址, 可以是本地, 也可以是来自网络 |
alt |
图片描述信息, 当图片无法显示时, 显示该信息, 也可以为无障碍阅读器所识别 |
width/height |
图片大小, 宽高只需设置一个,另一个会等比缩放, 推荐使用 css 设置 |
2.2代码实例
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>图像元素</title> </head> <body> <figure> <figcaption>美丽的春天</figcaption> <img src="spring1.jpg" alt="挑花" width="300" height="300"> <img src="spring2.jpg" alt="樱桃花 " width="300" height="300"> <img src="spring3.jpg" alt="油菜花" width="300" height="300"> </figure> </body></html>
3、表格元素
- 表格是最重要的数据格式化展示重要工具, 使用频率非常高
- 表格的数据,存储在由行与列组成的一系列单元格
- 数据必须存储在单元格元素中
- 与列表类似, 表格也是由一系列标签来描述
3.1、元素
| 序号 |
标签 |
描述 |
| 1 |
<table> |
定义表格, |
| 2 |
<tbody> |
定义表格主体, 允许定义多次 |
| 3 |
<tr> |
定义表格中的行, |
| 4 |
<th> |
定义表格头部中的单元格,默认加粗居中 |
| 5 |
<td> |
定义 g 表格 e 主体与底部的的单元格 |
| 6 |
<caption> |
定义表格标题, |
| 7 |
<thead> |
定义表格头格, 只需定义一次 |
| 8 |
<tfoot> |
定义表格底, 只需定义一次 |
| 9 |
<col> |
为一个/多个列设置属性,仅限 |
| 10 |
<colgroup> |
将多个<col>元素分组管理 |
3.2、属性
| 序号 |
属性 |
适用元素 |
描述 |
| 1 |
border |
<table> |
添加表格框 |
| 2 |
cellpadding |
<table> |
设置单元格内边距 |
| 3 |
cellspacing |
<table> |
设置单元格边框间隙 |
| 4 |
align |
不限 |
设置单元格内容水平居中 |
| 5 |
bgcolor |
不限 |
设置背景色 |
| 6 |
width |
不限 |
设置宽度 |
| 7 |
height |
不限 |
设置高度 |
3.3、代码实例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格实例</title></head><body> <table width="500" border="1" cellspacing="0" cellpadding="5" align="center"> <colgroup bgcolor="lightblue"> <col /> <col bgcolor="green" /> <col bgcolor="yellow" /> <col /> <col /> </colgroup> <caption style="font-size: 1.5rem;margin-bottom: 10px;"> 员工信息表 </caption> <thead bgcolor="#ccc" align="center"> <td >序号</td> <td>姓名</td> <td >性别</td> <td >年龄</td> <td >电话</td> </thead> <tbody> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </tbody> <tfoot> <tr bgcolor="pink"> <td>备注：</td> <td colspan="4"> </td> </tr> </tfoot></table></body></html>
4、表单与控件元素
- 表单分为表单元素与控件元素二部分
- 表单元素仅一个:
<form> - 表单控件元素,根据类型不同,有多个
4.1.1、 常用属性
| 序号 |
属性 |
描述 |
| 1 |
action |
表单提交的 URL 地址(处理表单请求的脚本) |
| 2 |
method |
表单提交类型:GET/POST |
| 3 |
enctype |
设置表单提交数据的编码方式 |
| 4 |
name |
表单唯一名称,与 ID 同义 |
| 5 |
target |
打开请求 URL 的方式,如果_blank |
4.1.2、 请求类型method
- web 请求方式有二种: 超链接与表单提交
- 超链接就是使用
<a>标签发起请求,其实就是GET请求 - 表单提交默认就是
GET请求,但例用最多的是POST - 请求类型属性
action的取值
| 序号 |
允许值 |
描述 |
| 1 |
GET |
默认值,表单数据以请求参数形式通过 URL 提交, 数据量最大 2K |
| 2 |
POST |
表单数据放在请求体中发送,数据量更大也更安全 |
4.1.3 编码方式enctype
| 序号 |
允许值 |
适用场景 |
描述 |
| 1 |
application/x-www-form-urlencoded |
接收value值 |
默认值,使用 URL 编码,GET/POST 均适合 |
| 2 |
multipart/form-data |
文件上传 |
采用二进制流处理,会把文件域中的内容封装到请求参数中,适合 |
| 3 |
text/plain |
电子邮件 |
如action="mailto:URL |
4.1.4 表单名称name
| 序号 |
功能 |
描述 |
| 1 |
标识表单元素 |
与id一样,用来唯一标识该表单元素 |
| 2 |
绑定表单元素 |
用于表单控件元素的 form 属性,用来绑定所属表单 |
| 3 |
访问表单元素 |
快捷访问内部控件元素,如form.input.value |
4.1.5 打开方式target
| 序号 |
允许值 |
描述 |
| 1 |
_self |
默认值,当前窗口打开提交的 URL |
| 2 |
_blank |
新窗口打开提交的 URL |
| 3 |
_parent |
父窗口打开提交的 URL |
| 4 |
_top |
顶层窗口打开提交的 URL |
4.2.1、 常用属性
| 序号 |
属性 |
描述 |
| 1 |
type |
控件类型,如文本框, 复选框… |
| 2 |
name |
请求参数的名称,对应于脚本处理的变量名 |
| 3 |
value |
请求参数的值,对应于脚本处理的变量值,使用预定义值控件无效 |
| 4 |
form |
控件所属表单 |
| 5 |
placeholder |
仅限输入框text和password,输入框的提示信息 |
| 6 |
list |
仅限输入框text和password,下拉框智能提示 |
| 7 |
autocomplate |
仅限输入框text和password,自动完成(历史记录) |
| 8 |
maxlength |
仅限输入框text/password, 允许输入最大字符数量 |
| 9 |
checked |
仅限单选框radio, 复选框checkbox(布尔属性) |
| 10 |
readonly |
元素只读,但通过 JavaScript 可修改(布尔属性) |
| 11 |
disabled |
元素禁用,(布尔属性) |
| 12 |
autofocus |
自动获取焦点,一个表单仅限一个控件 |
| 13 |
src |
仅限图像域images, 图像 URL 地址 |
| 14 |
width |
仅限图像域images, 图像宽度 |
| 15 |
height |
仅限图像域images, 图像高度 |
4.2.2、 type类型
| 序号 |
类型 |
描述 |
| 1 |
<input type="text"> |
单行文本框 (默认值) |
| 2 |
<input type="password"> |
密码输入框 |
| 3 |
<input type="radio"> |
单选框 |
| 4 |
<input type="checkbox"> |
复选框 |
| 5 |
<input type="image"> |
图像域/提交表单 |
| 6 |
<input type="file"> |
文件上传域 |
| 7 |
<input type="hidden"> |
隐藏域 |
| 序号 |
类型 |
描述 |
| 1 |
<input type="email"> |
电子邮件 |
| 2 |
<input type="data"> |
日期 |
| 2 |
<input type="data"> |
日期 |
| 4 |
<input type="datetime-local"> |
本地日期时间 |
| 5 |
<input type="tel"> |
电话号码 |
| 6 |
<input type="url"> |
URL 地址 |
| 7 |
<input type="number"> |
数值 |
| 8 |
<input type="range"> |
范围拖动条 |
| 9 |
<input type="search"> |
搜索框/移动 |
| 10 |
<input type="color"> |
拾色器 |
4.2.3 常用事件属性
| 序号 |
事件属性 |
描述 |
| 1 |
onfocus |
获取焦点时触发 |
| 2 |
onblur |
失去焦点时触发 |
| 3 |
onchange |
失去焦点,且值发生变化时触发 |
| 4 |
oninput |
值发生变化(不等失去焦点)时触发 |
| 5 |
onkeydown |
按下键盘时触发 |
| 6 |
onkeyup |
抬起键盘时触发 |
| 7 |
onclick |
鼠标单击时触发 |
| 8 |
onselect |
选择内容文本时触发 |
4.2.4、代码实例
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>表单之input</title> </head> <body > <form action="" method="post" id="register" style="font-size:18px;background-color: lightskyblue;width:350px;height: 300px;" > <h3 style="font-size: 18px;margin-top:15px;margin-left: 10px;">用户注册</h3> <section style="margin-top: 20px;margin-left: 20px;" > <label for="username">用户名:</label> <input type="text" name="username" id="username" maxlength="20" placeholder="不少于6位" required autofocus /> </section> <section style="margin-top: 10px;margin-left: 20px;"> <label for="password">密 码:</label> <input type="password" name="password" id="password" placeholder="不少于8位" required /> </section> <section style="margin-top: 10px;margin-left: 20px;"> <label for="male">性 别:</label> <div> <input type="radio" name="gender" id="male" value="male" /> <label for="male" >男</label > <input type="radio" name="gender" id="female" value="female" /> <label for="female" >女</label > </div> </section> <section style="margin-top: 10px;margin-left: 20px;"> <label for="programme">兴 趣:</label> <div> <input type="checkbox" name="hobby[]" id="game" checked /> <label for="game" >看书</label> <input type="checkbox" name="hobby[]" id="travel" checked /> <label for="travel">体育运动</label> <input type="checkbox" name="hobby[]" value="shoot" id="shoot"/> <label for="shoot">摄影</label> <input type="checkbox" name="hobby[]" value="programme" id="programme" checked> <label for="programme">编程</label> </div> </section> </form> </body></html>
