常用标签
列表标签
无序列表
<ul>标签用于定义无序列表。
type的取值：
- circle：空心圆点
- disc：实心圆点 (默认)
- square：实心方块
<ul>
<li>水浒传</li>
<li>西游记</li>
<li>红楼梦</li>
<li>三国演义</li>
</ul>
有序列表
<ol>标签用于定义有序列表。
| 属性 | 值 | 描述 |
|---|---|---|
| reversed | reversed | 规定列表顺序为降序。(9, 8, 7, …) |
| start | number | 规定有序列表的起始值。 |
| type | 1、A、a、I、i | 规定在列表中使用的标记类型。 |
<p>四大古都：</p>
<ol type="1" reversed="reversed" > 表示以数字作为项目符号,列表顺序为倒序（4, 3, 2, 1）
<li>北京</li>
<li>南京</li>
<li>西安</li>
<li>洛阳</li>
</ol>
<p>常用的Web技术：</p>
<ol type="A" start="3">表示以大写字母作为项目符号,起始的字母是第三个大写字母('C')
<li>JavaScript</li>
<li>JSP</li>
<li>ASP</li>
</ol>
<p>四大名酒：</p>
<ol type="I" start="3"> 表示以大写罗马数字作为项目符号,起始的罗马数字是第三个大写
<li>茅台</li>
<li>泸州老窖</li>
<li>汾酒</li>
<li>西凤酒</li>
</ol>
定义表格
<dl> 标签用来实现定义列表，该标签定义了一个包含术语定义以及描述的列表。
- <dt> 元素用于定义列表中的项目部分内容（术语部分）
- <dd> 元素则用于定义描述部分内容。
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
表格
表格基础标签
表格在之前HTML开发中，干啥都用它，甚至一致流行用表格进行布局，不过在HTML5中很多功能都被阉割，又会到原始的样子，作为信息管理页面的控件使用。
<table></table> 表格
<caption></caption>： 表示表格的标题
<tr></tr> 表格的行,一个tr代表一行
<td></td> 表示单元格
<thead></thead> 语义标签,表示表格的头部
<th></th> 表示列头,文字会自动加粗、自动居中,特殊的单元格
<tbody></tbody> 语义标签,表示表格的主体部分
<tfoot></tfoot> 标签定义表格的页脚（脚注或表注）
单元格的合并
- 跨列(合并列)：在<td>中设置属性colspan=“横跨的列数”。
- 跨行(合并行)：在<td>中设置属性rowspan=“横跨的行数”。
表单
表单用途
通过表单可以使网页和用户交互的，表单是HTML中获取用户输入的手段。
- 用户注册
- 收集信息
- 信息反馈–调查问卷
- 搜索引擎
表单标签：
<form></form> 标签用于为用户输入创建 HTML 表单。用于向服务器传输数据。
其中
-
action属性：表单数据提交的远程服务器的地址(服务器的URL)
-
method属性：表单数据的提交方式（get/post）
input元素的type属性
文本类型
<input type="text"/> 单行输入文本框
密码类型
<input type="password" /> 文本框的内容以星号（*）表示。
搜索类型
<input type="search" /> 搜索类型用于实现一个可编辑的文本框。
数字类型
<input type="number" /> 用于实现一个只接受数字的输入框。
复选框类型
<input type="checkbox" /> 用于实现一组复选框。
单选框类型
<input type="radio" /> 用于实现一个单选框。
重置按钮
<input type="reset" /> 用于实现一个重置按钮。
提交按钮
<input type="submit" /> 将表单数据提交给action指定的URL
日期类型(年-月-日)
<input type="date" /> 用于让用户提供一个(年-月-日)日期。
日期（月份）类型
<input type="month" /> 用于让用户提供一个月份（一年中的第几个月）。
日期（星期）类型
<input type="week" /> 用于让用户提供一个星期数。
日期（时间）类型
<input type="time" /> 用于让用户提供一个时间。
隐藏类型
<input type="hidden" /> 用于实现一个隐藏按钮。
文件类型
<input type="file" /> 用于实现一个文件上传按钮。
select标签
下拉列表控件
<select>
<option value=''>列表项</option>
<option value=''>列表项</option>
<option value=''>列表项</option>
</select>
textarea标签
<textarea cols="30" rows="10"></textarea> 文本区,可以输入多行、多列数据
button标签
<button type='按钮的类型'></button> 按钮控件
type属性的取值：
- type=‘button’：普通按钮,不含默认的动作(功能)
- type=‘reset’：重置按钮,重置表单控件
- type=‘submit’：提交按钮,将表单控件的值提交给远程服务器
label标签
<label> 标签为 input 元素定义标注（标记）。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
强调
-
所有的表单控件(标签)都可以有id属性,id的属性值不能重复
-
所有的表单控件都有value属性,value属性的值会提交给远程服务器
-
所有的表单控件都有name属性,在后台可以通过name属性值找到对应的标签
-
disabled属性表示input是否可用(置灰)
-
readonly属性表示input的值是只读的
-
单行文本输入框()的属性placeholder起提示的作用
-
required属性表示input是必须要输入的
-
maxlength属性表示input输入的最大长度
-
tabIndex属性用于设置表单控件的tab顺序
-
title属性用来设置鼠标经过时的提示文字
本章内容已经完结
附一张使用table元素表布局作业效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
th{
color: rebeccapurple;
text-align: left;
}
td:nth-last-of-type(even) {
text-align: right;
}
</style>
</head>
<body>
<div>
<table >
<tr>
<th colspan="2">绑定MSN/QQ账号（找到MSN/QQ上的朋友一起玩，或者当家入关系时第一时间通知您)</th>
</tr>
<tr>
<td>
<label> 账号类型：</label>
</td>
<td>
<select>
<option value="MSN">MSN</option>
<option value="QQ">QQ</option>
</select>
</td>
</tr>
<tr>
<td>
<label>MSN账号：</label>
</td>
<td>
<input type="text" palceholder="请输入你的MSN账号！" required />
</td>
</tr>
<tr>
<td>
<label>MSN密码：</label>
</td>
<td>
<input type="password" palceholder="请输入你的MSN秘密！" required />
</td>
</tr>
<tr>
<th colspan="2">创建您的雅虎邮箱</th>
</tr>
<tr>
<td>
<label>选择您的雅虎邮箱：</label>
</td>
<td>
<input type="text" required/>@
<select>
<option value="yahoo.cn">yahoo.cn</option>
</select>
</td>
<tr>
<td>
<label>密码：</label>
</td>
<td>
<input type="password" required />
</td>
</tr>
<td>
<label>再次输入密码：</label>
</td>
<td>
<input type="password" required />
</td>
<tr>
<td>
<label>性别：</label>
</td>
<td>
<label><input type="radio" name="sex" value="男">男</label>
<label><input type="radio" name="sex" value="女">女</label>
</td>
</tr>
<td>
<label>居住城市：</label>
</td>
<td>
<select>
<option>--请选择--</option>
<option>陕西</option>
</select>
<select>
<option>--请选择城市--</option>
<option>西安</option>
</select>
</td>
<tr>
<th colspan="2">密码保护信息（以下信息用于取回密码以及处理其他账户问题，请您慎重填写并牢记）</th>
</tr>
<tr>
<td>
<label>密码保护问题：</label>
</td>
<td>
<select>
<option>--请选择一个问题--</option>
<option>你的爸爸叫什么?</option>
</select>
</td>
</tr>
<tr>
<td>
<label>答案：</label>
</td>
<td>
<input type="text" required/>
</label>
</td>
</tr>
<tr>
<td>
<label>生日： </label>
</td>
<td>
<input type="date">
<input type="checkbox" checked>保密年龄
</td>
</tr>
<tr>
<td>
<label>备用邮箱：</label>
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<th colspan="2" >注册校验码</th>
</tr>
<tr>
<td>
<label>输入校验码： </label>
</td>
<td>
<input type="text">
</td>
</tr>
</table>
</div>
</body>
</html>
1403
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
