HTML基础
一.列表标签
目标:能够使用 无序列表、有序列表、自定义列表
1.列表的应用场景
场景:在网页中按照行展示关联性的内容,如:新闻列表、排行榜、账单等;
特点:按照行的方式,整齐显示内容
种类:无序列表、有序列表、自定义列表
2.无序列表
-
场景:在网页中表示一组无顺序之分的列表:如新闻列表。
-
标签组成:
标签名 说明 ul 表示无序列表的整体,用于包裹li标签 li 表示无序列表的每一项,用于包含每一行的内容 -
显示特点:列表的每一项前都默认显示圆点标识
-
注意:
- ul标签中只允许包含li标签
- li标签可以包含任意内容
-
代码实现:
<ul> <li>Coke</li> <li>Milk</li> </ul>
- 浏览器显示效果:
3.有序列表
- 场景:在网页中表示一组有顺序之分的列表,如排行榜。
- 标签组成:
标签名 说明 ol 表示有序列表的整体,用于包裹li标签 li 表示有序列表的每一项,用于包含每一行的内容 - 显示特点:列表的每一项前默认显示序号标识。
- 注意点:
- ol标签只允许包含li标签
- li标签可以包含任意内容
- 代码实现:
<ol> <li>Coffee</li> <li>Milk</li> </ol>
- 浏览器显示效果:
4.自定义列表
- 场景:在网页的底部导航中通常会使用自定义列表实现
- 标签组成:
标签名 说明 dl 表示自定义列表的整体,用于包裹dt/dd标签 dt 表示自定义列表的主题 dd 表示自定义列表的针对主题的每一项内容 - 显示特点:
- dd前会默认显示缩进效果
- 注意点:
- dl标签中只允许包含dt/dd标签
- dt/dd标签可以包含任意内容
- 代码:
<dl> <dt>帮助</dt> <dd>- 账户管理</dd> <dt>服务支持</dt> <dd>- 售后政策</dd> </dl>
-
效果图:
二、表格标签
目标:能够使用表格相关标签和属性,能够实现网页中表格结构的搭建
1.表格的基本标签
- 场景:在网页中以行+列的单元格的方式整齐展示和数据,如:学生成绩表
- 基本标签:
标签名 说明 table 标签整体,可用于包裹多个tr tr 表格每行,可用于包裹td td 表格单元格,可用于包裹内容。 - 注意点:
- 标签的嵌套关系:table>tr>td
- 代码:
<table> <tr> <td>name</td> <td>score</td> <td>comment</td> </tr> <tr> <td>郑吒</td> <td>100</td> <td>坚毅</td> </tr> </table>
- 效果
2.表格相关属性
-
场景:设置表格基本效果
-
常见相关属性:
|属性名|属性值|效果| |:--:|:--:|:--:| |border|数字|边框宽度| |width|数字|表格宽度| |height|数字|表格高度| -
注意:
- 实际开发时针对于样式效果推荐使用css设置
-
代码
<table border = "1" width = "500" height = "200"> <tr> <td>name</td> <td>score</td> <td>comment</td> </tr> <tr> <td>郑吒</td> <td>100</td> <td>坚毅</td> </tr> <tr> <td>Dires</td> <td>100</td> <td>talent</td> </tr> </table>
3.表格标题和表头单元格标签
-
场景:在表格中表示整体大标题和一列小标题
-
其他标签:
标签名 名称 说明 caption 表格大标题 表示表格整体大标题,默认在表格整体顶部中位置显示 th 表头单元格 表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示 -
注意点:
- captain标签书写在table标签内部
- th标签书写在tr标签内部(用于替换td标签)
-
代码
<table border = "1" > <caption><b>学生成绩单<b></caption> <tr> <th>姓名</th> <th>成绩</th> <th>评语</th> </tr> <tr> <td>张三</td> <td>1000</td> <td>good</td> </tr> <tr> <td>李四</td> <td>999</td> <td>well</td> </tr> <tr> <td>总结</td> <td>成绩优秀</td> <td>郎才女貌</td> </tr> </table>
4.表格的结构标签
结构标签:
标签名 | 名称 |
---|---|
thead | 表格头部 |
tbody | 表格主体 |
tfoot | 表格底部 |
- 设置表首样式
功能: 表首样式标签,用于定义表格最上端表首的样式,其中可以设置背景颜色、文本对齐方式、文字对齐方式、文字的垂直对齐方式等
语法:
value1: 水平对齐方式
color_value: 颜色代码
value2: 垂直对齐方式
在 标签中还可以包含 、和标签,而一个表元素只能有一个 标签。
-
设置表主体样式
功能: 表主体标签用于定义表格主体的样式语法:
value1: 水平对齐方式 color_value: 颜色代码 value2: 垂直对齐方式
-
设置表尾样式
功能: 使用 标签用于定义表尾的样式语法:
value1: 水平对齐方式 color_value: 颜色代码 value2: 垂直对齐方式
5.合并单元格
rowspan="3" 合并垂直水平方向的单元格
colspan="3" 合并水平方向单元格
# 三、表单标签
表单包含:
- 表单控件(表单元素)
- 提示信息
- 表单域
1、input 控件
单标签
type属性决定了控件的类型
1.文本框:type="text"
2.密码框:type="password"
3.单选框:type="radio" 通过name属性使得同一组控件,只能选择一个
4.复选框:type="checkbox" 也是通过name属性关联一组控件,可进行多选
标签属性checked=“checked”来表示默认选择
按钮组:
button 普通按钮,通过属性 value=" "来设置按钮控件中的显示名称
submit 提交按钮,具有默认名称为提交,可以通过 value进行修改
reset 重置按钮,具有默认名称为重置
image 图像按钮,用一个图像作为按钮
file 文件域,按钮名称为选择文件,不能通过 value进行修改
标签属性value=" "来表示input控件中默认文本值
标签属性maxlength来表示控件允许输入的最多字符数
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--input控件-->
用户名:<input type="text" value="请输入用户名"/> <br />
密 码:<input type="password" /> <!--i用全角中文输入空格--> <br />
性 别:<input type="radio" name="sex" checked="checked" />女
<input type="radio" name="sex" />男 <br />
爱 好:<input type="checkbox" name="hobby" checked="checked"/>篮球
<input type="checkbox" name="hobby" checked="checked"/>足球
<input type="checkbox" name="hobby"/>绘画
<input type="checkbox" name="hobby"/>唱歌 <br />
上传头像:<input type="file" /> <br />
<hr />
<input type="image" src="jd_logo.png" /> <br />
<input type="submit" value="提交表单" />
<input type="reset" value="重置表单" />
</body>
</html>
2、label标签
(1)与标签搭配,可以实现点击提示信息,自动定位焦点到input控件。
1.一个表单控件,直接用<label></label>包裹<input />控件
2.多个表单控件,需要定位到特定某个控件,通过<label>标签属性for=“id名”
和<input>标签属性id=“id名”的格式进行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--input控件-->
用户名1:<input type="text" /> <br />
<!--label标签-->
<label>用户名2:<input type="text" /> <br /></label>
<label for="3">
文本框1:<input type="text" id="1"/> <br />
文本框2:<input type="text" id="2"/> <br />
文本框3:<input type="text" id="3"/> <br />
文本框4:<input type="text" id="4"/> <br />
</label>
</body>
</html>
演示结果如下:
点击‘用户名2’后,鼠标光标会自动定位焦点到后面的文本框。
3、textarea控件(文本域)
- 与前面文本框只能输入单行字段不同, 元素定义多行输入字段(文本域)。
- 不能用value属性建立文本域中显示的初始值,多行文本框的默认文字内容写在之间就可以了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--textarea控件-->
请输入留言:<br/>
<textarea rows="10" cols="30">
正文正文正文正文正文正文正文正文正文正文正文
正文正文正文正文正文正文正文正文正文正文正文
正文正文正文正文正文 正文正文正文正文正文
</textarea>
</label>
</body>
</html>
演示结果如下:
- 注意:在文本域中的文字保留了空格以及换行,并且会自动换行!!
文本域中可以自己键入文本。
演示结果如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--textarea控件-->
<label>
请输入留言:<br/>
<textarea rows="10" cols="30">请输入留言
</textarea>
</label>
</body>
</html>
4、下拉菜单 select
控件
选项1 选项2 选项3 ...’选项1‘默认会显示在下拉菜单中,如果要修改默认项,通过的标签属性selected="selected"实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--select控件-->
籍贯:
<select>
<option>北京</option>
<option>上海</option>
<option selected="selected">湖北</option>
</select>
</body>
</html>
演示结果如下:
5、表单域 form
<form action="xxx.php"(提交的后台) method="GET"/"POST"(提交的方式) name="表单名称">
<input />
...
<form>
1.action:定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。
通常,表单会被提交到 web 服务器上的网页。通过xxx.php指定了某个服务器脚本来处理被提交表单。
如果省略 action属性,则action 会被设置为当前页面。
2.method 属性规定在提交表单时所用的 HTTP 方法(GET默认方法 或 POST)
GET:表单提交是被动的(比如搜索引擎查询),并且没有敏感信息。使用GET时,表单数据在页面地址栏中是可见的。最适合少量数据的提交。浏览器会设定容量限制。
POST:表单正在更新数据,或者包含敏感信息(例如密码)。POST 的安全性更加,因为在页面地址栏中被提交的数据是不可见的。
注意:如果要正确地被提交,每个输入字段必须设置一个 name 属性
五、字符实体
### 1.HTML 中的预留字符必须被替换为字符实体。