<table>标签包含<tr>标签,<tr>标签包含<td>标签或者<th>标签。
表格标签有一些属性,可以用于设置大小边框等。但是一般使用CSS方式来设置。
这些属性都要放到<table>标签中。
注意,这几个属性,在vscode都提示不出来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table align="center" border="1" cellpadding="20" cellspacing="0" width="500"
height="500">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>枫叶丹1</td>
<td>男</td>
<td>21</td>
</tr>
<tr>
<td>枫叶丹2</td>
<td>男</td>
<td>21</td>
</tr>
</table>
</body>
</html>
结果展示:
步骤:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table align="center" border="10" cellpadding="20" cellspacing="0" width="500"
height="500">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>枫叶丹1</td>
<td colspan="2">男</td>
</tr>
<tr>
<td>枫叶丹2</td>
<td>男</td>
<td>21</td>
</tr>
</table>
</body>
</html>
结果展示:
主要使用来布局的。整齐好看。
注意:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>无序列表</h3>
<ul>
<li>王路飞</li>
<li>刘索隆</li>
<li>山治君</li>
</ul>
<h3>有序列表</h3>
<ol>
<li>王路飞</li>
<li>刘索隆</li>
<li>山治君</li>
</ol>
<h3>自定义列表</h3>
<dl>
<dt>One Piece</dt>
<dd>王路飞</dd>
<dd>刘索隆</dd>
<dd>山治君</dd>
</dl>
</body>
</html>
结果展示:
表单是让用户输入信息的重要途径。
分成两个部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="test.html">
... [form 的内容]
</form>
</body>
</html>
描述了要把数据按照什么方式,提交到哪个页面中。(关于<form>标签需要结合服务器&网络编程来进一步理解。)
各种输入控件,单行文本框,按钮,单选框,复选框。
1. 文本框
<input type="text">
2. 密码框
<input type="password">
3. 单选框
性别:
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女
注意:
单选框之间必须具备相同的name属性,才能实现多选一的效果。
4. 复选框
爱好:
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">
打游戏
5. 普通按钮
<input type="button" value="我是个按钮">
当前点击了没有反应。需要搭配JS使用。
<input type="button" value="我是个按钮" onclick="alert('hello')">
6. 提交按钮
<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
</form>
提交按钮必须放到<form>标签内。点击后就会尝试给服务器发送。
7. 清空按钮
<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
<input type="reset" value="清空">
</form>
清空按钮必须放在<form>标签中。点击后会将<form>标签内所有的用户输入内容重置。
8. 选择文件
<input type="file">
点击选择文件,会弹出对话框,选择文件。
搭配<input>标签使用。点击<label>标签也能选中对应的单选/复选框,能够提升用户体验。
<label for="male">男</label> <input id="male" type="radio" name="sex">
下拉菜单
<select>
<option>北京</option>
<option selected="selected">上海</option>
</select>
注意:可以给第一个选项作为默认选项。
<select>
<option>--请选择年份--</option>
<option>2024</option>
<option>2025</option>
<option>2026</option>
<option>2027</option>
<option>2028</option>
</select>
<textarea rows="3" cols="50">
</textarea>
文本域中的内容,就是默认内容。
注意:空格也会有影响。
rows和cols也都不会直接使用,都是用CSS来改的。
<div>标签,division的缩写,含义是分割。
<span>标签,含义是跨度。
就是两个盒子,用于网页布局。
<div>
<span>王路飞</span>
<span>王路飞</span>
<span>王路飞</span>
</div>
<div>
<span>刘索隆</span>
<span>刘索隆</span>
<span>刘索隆</span>
</div>
<div>
<span>山治君</span>
<span>山治君</span>
<span>山治君</span>
</div>
1. 快速输入标签
input [tab]
2. 快速输入多个标签
div*3 [tab]
3. 标签带id
div#sex [tab]
4. 标签带类名
div.sex [tab]
5. 标签带子元素
ul>li*3 [tab]
6. 标签带兄弟元素
span+span
7. 标签带内容
div{hello}
8. 标签带内容(带编号)
div{$.hello}
除此之外还有很多。
有些特殊的字符在html文件中是不能直接表示的,例如:
<html>标签就是用<>表示的。因此内容里如果存在<>就会发生混淆。
参考内容:
HTML只是描述了页面的骨架结构。
使用CSS可以针对页面进行进一步美化。
感谢各位大佬支持!!!
互三啦!!!