...
html标签1
1. 表格元素
- 表格是最重要的数据格式化展示重要工具, 使用频率非常高
- 表格的数据,存储在由行与列组成的一系列单元格
- 数据必须存储在单元格元素中
- 与列表类似, 表格也是由一系列标签来描述
1.1 元素
序号 |
标签 |
描述 |
备注 |
1 |
<table> |
定义表格, |
必选 |
2 |
<tbody> |
定义表格主体, 允许定义多次 |
必选 |
3 |
<tr> |
定义表格中的行, |
必选 |
|
4 |
<th> |
定义表格头部中的单元格,默认加粗居中 |
必选 |
5 |
<td> |
定义 g 表格 e 主体与底部的的单元格 |
必选 |
6 |
<caption> |
定义表格标题, |
可选 |
7 |
<thead> |
定义表格头格, 只需定义一次 |
可选 |
8 |
<tfoot> |
定义表格底, 只需定义一次 |
可选 |
9 |
<col> |
为一个/多个列设置属性,仅限 |
可选 |
10 |
<colgroup> |
将多个<col> 元素分组管理 |
可选 |
1.2 属性
序号 |
属性 |
适用元素 |
描述 |
1 |
border |
<table> |
添加表格框 |
2 |
cellpadding |
<table> |
设置单元格内边距 |
3 |
cellspacing |
<table> |
设置单元格边框间隙 |
4 |
align |
不限 |
设置单元格内容水平居中 |
5 |
bgcolor |
不限 |
设置背景色 |
6 |
width |
不限 |
设置宽度 |
7 |
height |
不限 |
设置高度 |
表格属性仅供参考,属选学内容, 推荐使用 CSS 设置表格样式
2.表单与控件元素
- 表单分为表单元素与控件元素二部分
- 表单元素仅一个:
<form>
- 表单控件元素,根据类型不同,有多个
1.1 常用属性
序号 |
属性 |
描述 |
1 |
action |
表单提交的 URL 地址(处理表单请求的脚本) |
2 |
method |
表单提交类型:GET/POST
|
3 |
enctype |
设置表单提交数据的编码方式 |
4 |
name |
表单唯一名称,与 ID 同义 |
5 |
target |
打开请求 URL 的方式,如果_blank
|
1.2 请求类型method
- web 请求方式有二种: 超链接与表单提交
- 超链接就是使用
<a>
标签发起请求,其实就是GET
请求
- 表单提交默认就是
GET
请求,但例用最多的是POST
- 请求类型属性
action
的取值
序号 |
允许值 |
描述 |
1 |
GET |
默认值,表单数据以请求参数形式通过 URL 提交, 数据量最大 2K
|
2 |
POST |
表单数据放在请求体中发送,数据量更大也更安全 |
1.3 编码方式enctype
序号 |
允许值 |
适用场景 |
描述 |
1 |
application/x-www-form-urlencoded |
接收value 值 |
默认值,使用 URL 编码,GET/POST 均适合 |
2 |
multipart/form-data |
文件上传 |
采用二进制流处理,会把文件域中的内容封装到请求参数中,适合 |
3 |
text/plain |
电子邮件 |
如action="mailto:URL
|
1.4 表单名称name
序号 |
功能 |
描述 |
1 |
标识表单元素 |
与id 一样,用来唯一标识该表单元素 |
2 |
绑定表单元素 |
用于表单控件元素的 form 属性,用来绑定所属表单 |
3 |
访问表单元素 |
快捷访问内部控件元素,如form.input.value
|
1.5 打开方式target
序号 |
允许值 |
描述 |
1 |
_self |
默认值,当前窗口打开提交的 URL |
2 |
_blank |
新窗口打开提交的 URL |
3 |
_parent |
父窗口打开提交的 URL |
4 |
_top |
顶层窗口打开提交的 URL |
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 , 图像高度 |
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"> |
拾色器 |
3. 控件标签元素<label>
-
<label>
元素没有name
和value
属性,不会创建请求参数
- 它存在的意义就是关联控件,当点击它时将焦点自动落在关联控件内部
- 语法:
<label for="关联控件的id属性值">
(也支持三大通用属性)
-
<label>
有二种方式与控件元素进行关联/绑定
序号 |
关联方式 |
示例代码 |
1 |
显式关联 |
<label for="email">Email:</label><input type="email" id="email"> |
1 |
隐式关联 |
<label>Email:</label><input type="email"></label> |
推荐使用显式关联, 案例参考<input>
示例
4. 链接元素
属性 |
描述 |
举例 |
href |
指向链接页面的 URL |
href="https://php.cn" |
target |
打开 URL 的页面来源 |
`target=_self |
_blank |
_top |
_parent”` |
download |
自定义下载文件名 |
download="banner1.jpg" |
type |
设置链接文档的 MIME 类型 |
type="image/jpeg" |
属性 |
描述 |
href="url" |
跳转的目标地址 |
href="mailto: 123456@qq.com" |
打开邮箱,发送邮件 |
href="tel:13388**2345" |
点击后,会询问用户是否要拨打电话 |
href="outline.md" |
浏览器不能解析的文档, 会直接下载 |
属性 |
描述 |
target="__self" |
当前窗口打开链接 |
target="_blank" |
新窗口打开链接 |
target="_parent" |
父窗口打开链接 |
target="_top" |
顶层窗口打开链接 |
target="name" |
指定名称的窗口, 与<iframe> 元素配合 |
target="#anchor" |
跳转到设置了锚点的元素所在位置 |
5. 列表元素
5.1 列表的基本概念
- 将一组关联的数据集中展示,使用列表最合适
- 如果列表中的每个项目顺序无关紧要, 例如:购物车, 可以使用无序列表来描述
- 如果列表中的每个项目顺序非常重要, 例如:工作计划,可以使用有序列表来描述
- 如果想给每一个列表项添加一个小标题, 例如联系方式,可以使用自定义列表来描述
- 可见, HTML 中的列表由列表与内部的列表项二部分组成,而这二部分是包含关系
- 所以, HTML 使用一组复合标签来描述列表,
列表元素 |
描述 |
<ul> + <li> |
无序列表 |
<ol> + <li> |
有序列表 |
<dl> + <dt> + <dd> |
自定义列表 |
6. 图像元素
- 当前文档的图像元素,仅仅是外部图片资源的占位符,只有解析时才会加载进来
- 所以, 在确保用户可以看清的情况下, 图片体积越小越好, 以提升加载速度
- 推荐使用可压缩的
jpg
格式, 小图片,或需要背景透明的,推荐使用png
格式
- 对于简单的动图,或者颜色要求较少的,可使用
gif
格式
- 对于图标, 建议使用 css 字体图标,而不是使用图像图标
元素 |
描述 |
<img> |
图片元素,空元素(单标签) |
<figure> |
图片/插图区域 |
<figcaption> |
图片/插图区域的标题 |
6.1 <img>
常用属性
属性 |
描述 |
src |
图片来源地址, 可以是本地, 也可以是来自网络 |
alt |
图片描述信息, 当图片无法显示时, 显示该信息, 也可以为无障碍阅读器所识别 |
width/height |
图片大小, 宽高只需设置一个,另一个会等比缩放, 推荐使用 css 设置 |
7.语义化标签
序号 |
名称 |
描述 |
是否可以重复使用 |
1 |
header |
html页眉部分 |
只能有一个 |
2 |
nav |
html导航 |
可以有多个 |
3 |
main |
html主体部分 |
只能有一个 |
4 |
aside |
html主体侧边栏 |
可以有多个 |
5 |
section |
html主体部分的分部 |
可以有多个 |
6 |
footer |
html页脚部分 |
只能有一个 |
9.演示连接
http://xuanransoftware.com/phpStudy/0403/
8.示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>html标签1</title>
</head>
<body>
<table width="920" align="center" border="1">
<tr>
<td colspan="2" align="center" bgcolor="lightgreen">
<!-- 页面导航 -->
<header width="920">
<nav id="acHead">
<a href="#acRegist">用户注册</a>
<a href="#acTable">表格</a>
<a href="#acList">列表</a>
</nav>
</header>
</td>
</tr>
<tr>
<main width="920">
<td align="center" width="220" bgcolor="lightblue">
<!-- 主体左侧边栏 -->
<aside>
<table border="0" width="220" align="center">
<capttion>☆联系我们☆</capttion>
<thead>
<tr>
<td style="color: blue;">
<div align="center">北京瑄然软件工作室</div>
</td>
</tr>
</thead>
<tbody style="font-size: smaller;">
<tr>
<td><div>地址:北京顺义区...</div></td>
</tr>
<tr>
<td>
<div>电话:<a href="tel:15010046927">1501004xxxx</a></div>
</td>
</tr>
<tr>
<td>
<div>
邮箱:<a href="mailto:573661083@qq.com"
>5736610xx@qq.com</a
>
</div>
</td>
</tr>
</tbody>
</table>
</aside>
</td>
<!-- 页面主体部分 -->
<td bgcolor="pink">
<!-- 表单展示 -->
<section id="acRegist" name="acRegist">
<div align="cener" style="font-size:1.5rem;">表单展示</div>
<h3>用户注册</h3>
<form action="" method="POST">
<!-- 输入用户名 -->
<section>
<label for="username">用户名:</label>
<input
type="text"
id="username"
name="username"
maxlength="20"
required
placeholder="用户名不少于6个字符"
autofocus
/>
</section>
<!-- 输入密码 -->
<section>
<label for="userpwd">密码:</label>
<input
type="password"
id="userpwd"
name="userpwd"
required
placeholder="密码不少于6位"
maxlength="30"
/>
</section>
<!-- 选择性别 -->
<section>
<label for="scrite">性别:</label>
<div>
<input type="radio" id="male" name="gender" value="male" />
<label for="male">女</label>
<input
type="radio"
id="female"
name="gender"
value="female"
/>
<label for="female">男</label>
<input
type="radio"
id="scrite"
name="gender"
value="scrite"
checked
/>
<label for="scrite">保密</label>
</div>
</section>
<!-- 选择爱好 -->
<section>
<label for="">兴趣爱好:</label>
<div>
<input
type="checkbox"
id="readbook"
name="hobby[]"
value="看书"
/>
<label for="readbook">看书</label>
<input
type="checkbox"
id="music"
name="hobby[]"
value="听音乐"
/>
<label for="music">听音乐</label>
<input
type="checkbox"
id="movie"
name="hobby[]"
value="看电影"
/>
<label for="movie">看电影</label>
<input
type="checkbox"
id="program"
name="hobby[]"
value="写程序"
checked
/>
<label for="program">写程序</label>
</div>
</section>
<!-- 提交和重置按钮 -->
<section>
<div>
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</div>
</section>
</form>
</section>
<br />
<br />
<hr width="700" size="1" color="blue" />
<!-- 表格展示 -->
<section id="acTable" name="acTable">
<div><a href="#acHead">回到顶部</a></div>
<div align="cener" style="font-size:1.5rem;">表格展示</div>
<table
width="500"
height="300"
border="1"
cellpadding="5"
align="center"
>
<colgroup>
<col />
<col bgcolor="lightgreen" />
<col bgcolor="yellow" span="2" />
<col />
<col />
</colgroup>
<caption style="font-size:1.5rem; margin-bottom: 10px;">
员工信息表
</caption>
<thead bgcolor="lightblue">
<tr>
<td>部门</td>
<td>ID</td>
<td>姓名</td>
<td>职务</td>
<td>手机</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3" align="center">研发部</td>
<td>101</td>
<td>小王</td>
<td>经理</td>
<td>1345534xxxx</td>
</tr>
<tr>
<td>102</td>
<td>小朱</td>
<td>主管</td>
<td>1543434xxxx</td>
</tr>
<tr>
<td>103</td>
<td>小张</td>
<td>程序员</td>
<td>1300234xxxx</td>
</tr>
<tr>
<td rowspan="3" align="center">商务部</td>
<td>201</td>
<td>小王</td>
<td>经理</td>
<td>1300456xxxx</td>
</tr>
<tr>
<td>203</td>
<td>小王</td>
<td>前台</td>
<td>1300345xxxx</td>
</tr>
<tr>
<td>203</td>
<td>小王</td>
<td>客服</td>
<td>1334544xxxx</td>
</tr>
</tbody>
<tfoot>
<tr bgcolor="wheat">
<td align="center">备注:</td>
<td colspan="4">所有员工离职必须提交30天提交书面申请</td>
</tr>
</tfoot>
</table>
</section>
<br />
<br />
<hr width="700" size="1" color="blue" />
<!-- 列表展示 -->
<section id="acList" name="acList" align="left">
<div><a href="#acHead">回到顶部</a></div>
<div align="cener" style="font-size:1.5rem;">列表展示</div>
<!-- 无序列表 -->
<ul>
<li>将一组关联的数据集中展示,使用列表最合适</li>
<li>
如果列表中的每个项目顺序无关紧要, 例如:购物车,
可以使用**无序列表**来描述
</li>
<li>
如果列表中的每个项目顺序非常重要,
例如:工作计划,可以使用**有序列表**来描述
</li>
<li>
如果想给每一个列表项添加一个小标题,
例如联系方式,可以使用**自定义列表**来描述
</li>
<li>
可见, HTML
中的列表由列表与内部的列表项二部分组成,而这二部分是包含关系
</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>将一组关联的数据集中展示,使用列表最合适</li>
<li>
如果列表中的每个项目顺序无关紧要, 例如:购物车,
可以使用**无序列表**来描述
</li>
<li>
如果列表中的每个项目顺序非常重要,
例如:工作计划,可以使用**有序列表**来描述
</li>
<li>
如果想给每一个列表项添加一个小标题,
例如联系方式,可以使用**自定义列表**来描述
</li>
<li>
可见, HTML
中的列表由列表与内部的列表项二部分组成,而这二部分是包含关系
</li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>选购及了解</dt>
<dd>Mac</dd>
<dd>IPad</dd>
<dd>iPhone</dd>
</dl>
<dl>
<dt>apple store 商店</dt>
<dd>查找零售店</dd>
<dd>订单状态</dd>
<dd>选购帮助</dd>
</dl>
<dl>
<dt>账户</dt>
<dd>管理你的AppleID</dd>
<dd>Apple Store 账户</dd>
<dd>iCloud.com</dd>
</dl>
<dl>
<dt>Apple价值观</dt>
<dd>辅助功能</dd>
<dd>环境责任</dd>
<dd>隐私</dd>
</dl>
</section>
</td>
</main>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="lightgreen">
<!-- 网页页脚展示 -->
<footer width="920">
<nav>
<a href="http://www.xuanransoftware.com/" target="_blank"
>北京瑄然软件工作室</a
>
<a href="https://www.php.cn/" target="_blank"
>友情链接:</a
>
</nav>
</footer>
</td>
</tr>
</table>
</body>
</html>