HTML基础知识（2）

最新推荐文章于 2024-09-04 20:48:11 发布

小奋斗♛

最新推荐文章于 2024-09-04 20:48:11 发布

阅读量102

点赞数

文章标签：大数据 html 前端 css

本文链接：https://blog.csdn.net/m0_72684019/article/details/125793372

版权

本文详细介绍了HTML中的转义字符、注释、列表标签（有序列表、无序列表、定义列表）、表格标签及其属性（caption、th、合并单元格）、表单元素（input、select、textarea）以及相关属性和用法。通过实例展示了如何创建和操作这些元素，以实现网页的基本结构和交互功能。

摘要由CSDN通过智能技术生成

1、转义字符

<——“小于号” >——“大于号”  ——“空格” ©——版权符号©

2、注释

快捷键：ctrl+/

3、列表标签

3.1 有序列表——<ol><li></li></ol>

注意：

`<ol>` 标签中只能放`<li>` 标签；
`<li>` 标签中可以放任何东西。

3.2 无序列表——<ul><li></li></ul>

注意：

`<ul>` 标签中只能放`<li>` 标签；
`<li>` 标签中可以放任何东西。

3.3 定义列表——<dl></dl>

只要语义上有`解释说明`含义的文字，且为列表形态，应该使用定义列表

4、表格标签

table标签：表格整体
tr标签：表格每行
td标签：对于主题的每一项内容

标签的嵌套关系：table > tr > td

4.1表格的属性（后面通过 CSS 来设置）

4.2 table 的 caption 属性

caption 是表格的标题，它常常作为 table 的第一个子元素出现

可以设置宽高, 和图片一样, width 设置宽, height 设置高

<!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>
	</head>
	<body>
		<table border="1" width="500" height="200">
			<caption>
				标题
			</caption>
			<tr>
				<td>A</td>
				<td>B</td>
				<td>C</td>
				<td>D</td>
			</tr>
		</table>
	</body>
</html>

4.3 th 标签

<th> 是标题小格，可以替代 <td>，表示一列的标题

4.4 单元格的合并

colspan 属性——用来设置 td 或者 th 的列跨度

rowspan 属性——用来设置 td 或者 th 的行跨度

4.5 thead、tbody、tfoot 标签

thead 标签定义表头
tbody 标签定义表核心内容
tfoot 标签定义表脚，通常是汇总行

5、表单

表单用来收集信息，比如注册、登录、发送评论反馈、购买商品等等
所有 HTML 表单都以一个<form>元素开始
在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。

5.1 <input> 表单元素

type 属性的属性值及其描述如下：

除 type 属性外，<input>标签还有其他很多属性，其常用属性如下：

name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
name 表单元素的名字, 要求单选按钮和复选框要有相同的name值.
checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.
maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.

5.2 <label> 标签

<label> 标签为 input 元素定义标注（标签）。
<label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.

语法：

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

核心： <label> 标签的 for 属性应当与相关元素的 id 属性相同。

5.3 表单控件(表单元素)

1、input输入表单元素

<input type="属性值" />

2、select下拉表单元素

<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>

<select> 中至少包含一对<option> 。
在<option> 中定义 selected =“ selected " 时，当前项即为默认选中项。

3、textarea 文本域元素

<textarea rows="3" cols="20">
文本内容
</textarea>

通过 <textarea> 标签可以轻松地创建多行文本输入框。
cols=“每行中的字符数” ，rows=“显示的行数”，我们在实际开发中不会使用，都是用 CSS 来改变大小。

6、表单元素总结

表单元素我们学习了三大组 input 输入表单元素、 select 下拉表单元素、 textarea 文本域表单元素.
这三组表单元素都应该包含在form表单域里面,并且有 name 属性.

<form>
<input type=“text " name=“username”>
<select name=“jiguan”>
<option>北京</option>
</select>
<textarea name= "message"></textarea>
</form>

表单域 form 使用场景: 提交区域内表单元素给后台服务器
文件域 file 是input type 属性值使用场景: 上传文件
文本域 textarea 使用场景: 可以输入多行文字, 比如留言板网站介绍等…