1.表格
代码语言：javascript复制<!--
table：声明一个表格
tr：声明表格的行
th、td：声明表格的单元格
th:表头
td:普通的单元格
caption:表格的标题
table:
border:表格的边框大小
cellspacing:单元格和边框的间距
cellpadding:单元格边框与内容的距离
width:宽度
height:高度
td,th:
width:宽度
height:高度
colspan:合并列
rowspan:合并行
tr:
align:水平排列方式：左对齐(left)，居中(center)，右对齐(right)
valign:垂直排列方式：上对齐(top)，居中(middle)，下对齐(bottom)
-->
<table width="1000px" border="1" cellspacing="0" cellpadding="10">
<caption>学生表格</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td align="center">张三</td>
<td align="left">20</td>
<td align="right">男</td>
</tr>
<tr align="center" height="100px">
<td valign="top">李四</td>
<td>20</td>
<td valign="bottom">女</td>
</tr>
</table>2.表单
代码语言：javascript复制<!--
form:表单最外层容器
action:表单提交数据的地址
method:数据提交的方式GET、POST
input:用于获取用户输入
placeholder:提示用户输入
value:输入框的值,可以设置输入框的默认值
name:提交数据的属性
type:
text:文本输入框
password:密码输入框
number:数字输入框
date:日期选择框
file:文件选择框
range:范围选择框
hidden:隐藏控件
submit:提交
reset:重置
radio:单选框
可以使用相同的name属性实现互斥,
checkbox:多选框
使用checked属性，为radio和checkbox设置默认选项
label:为input元素定义标注，label内的元素被点击了可以触发对应的input点击
使用for和对应的元素的id进行绑定
textarea:文本输入域
select:下拉框，需要搭配option使用
disabled:禁止选择
selected:默认选择
-->
<form action="http://www.baidu.com">
帐号：<input type="text" name="username" value="admin" placeholder="请输入帐号">
<br>
密码：<input type="password" name="pwd" placeholder="请输入密码">
<br>
年龄：<input type="number">
<br>
生日：<input type="date">
<br>
头像：<input type="file">
<br>
英语能力：<input type="range" value="100" min="100" max="200">
<br>
<input type="hidden">
性别：
<label for="male">
男
<input type="radio" checked id="male" name="sex">
</label>
<label for="female">
女
<input type="radio" id="female" name="sex">
</label>
<br>
爱好：
<label for="run">
跑步
<input type="checkbox" id="run" name="sex">
</label>
<label for="jump">
跳
<input type="checkbox" checked id="jump" name="sex">
</label>
<label for="swim">
游泳
<input type="checkbox" id="swim" name="sex">
</label>
<br>
个人简介：<textarea cols="10" rows="3"></textarea>
<br>
城市：<select>
<option>福州</option=>
<option disabled>厦门</option>
<option selected>泉州</option>
</select>
<br>
<input type="submit" value="立即提交">
<input type="reset">
</form>3、div和span
div:盒子容器，用来给网页分块的，块级元素：默认一个占一行，可以设置宽高
span:主要用来修饰文字，行内元素：默认按照内容占用大小，不能设置宽高
都没有css样式
4、相对路径和绝对路径
代码语言：javascript复制 <!--
相对路径：相对于当前文件所在的位置的路径
./:当前文件的路径
../:当前文件的上一级路径
-->
<img src="./练习1.jpg" alt="">
<img src="../../码上12月班/20211210-HTML/练习2.png" alt="">
<!--
绝对路径：从盘符的路径
-->5、标题标签和段落标签
代码语言：javascript复制 <!-- h1-h6标题标签 -->
<h1>家常菜</h1>
<p>asjfbakshjbfk</p>
<p>asfkgakshbv-for="(asjfbkasbf,index) in items"</p>
<p>aksbfkahs</p>
<p>asjbfk</p>6、文本修饰标签
代码语言：javascript复制<strong>加粗</strong>
<em>斜体</em>
<ins>下划线</ins>
<del>中划线</del>
<sup>上标</sup>
<sub>下标</sub>7、特殊字符 只需要知道有这个东西就可以了
代码语言：javascript复制 <span>姓名：张三 年龄：20 性别：男</span>
有的内容会被html误解析，需要使用特殊的字符来解析8、audio和video
代码语言：javascript复制<audio src="./audio.mp3" controls autoplay loop muted preload="metadata"></audio>
<video src="./test.MP4" controls poster="./练习2.png" autoplay loop preload="metadata"></video>
<!--
audio
src：音频的地址
controls：控制器
autoplay：自动播放，chrome66版本以上的不支持自动播放
loop：循环播放
muted：静音
preload：如何加载音频
auto：预加载音频
none：不预加载音频
metadata：只加载音频的元信息
video
属性和video一样
多了一个poster
poster：设置视频加载之前显示的图片
-->
