安装软件：vscode
初识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>
</body>
</html>分析：
1.<html></html> 为网页的根标签 嵌套包含所有的标签。 一般情况标签分为开始标签和结束标签 开始标签中可以带有标签属性 格式：key="value" key="value" 结束标签带有 / 。 html标签里只存在两种标签 head 与 body
2.lang属性是HTML中用于指定文档语言的一个重要属性
3.<head></head> 头标签 用于编写网页的装饰内容，附加信息
4.<meta> 元标签 没有结束标签
5.<title></title> 网页标题
6.<body></body> 身体标签用于编写展示内容 用户可以看见 或者可以交互内容
第一批标签
<h1></h1> 一级标题
<h2></h2> 二级标题
<h3></h3> 三级标题
<h4></h4> 四级标题
<h5></h5> 五级标题
<h6></h6> 六级标题
hr 分割线
<br> 换行标签
<p></p>段落标签
<div></div>块标签
代码示例：
<!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>
<div style="background-color: aqua;">
我是一块
<h1>一级标题</h1>
<hr>
<h2>二级标题</h2>
<hr>
<h3>三级标题</h3>
<hr>
<h4>四级标题</h4>
<hr>
<h5>五级标题</h5>
<hr>
<h6>六级标题</h6>
<span style="color: blue;">普通文本</span>
<hr>
<p>段落 单独一行 上下行距段落 单独一行 上下行距段落 单独一行 上下行距段落 <br>单独一行 上下行距段落 单独一行 上下行距段落 单独一行 上下行距段落 单独一行 上下行距段落 单独一行 上下行距段落 单独一行 上下行距段落 单独一行 上下行距段落 单独一行 上下行距段落 单独一行 上下行距</p>
</body>
</html>第二批标签
字体相关标签
<b></b> <strong></strong> 粗体
<i></i> <em></em> 斜体
<u></u> 下划线
<del></del> 中划线
<sup></sup> 上标
<sub></sub> 下标
代码示例：
<!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>
<h2>字体相关标签</h2>
<p>粗体：<b>哈哈1</b>,<strong>哈哈2</strong><br>
斜体:<i>html1</i>,<em>html2</em><br>
下划线：<u>啊哈</u><br>
中划线：<del>嘿嘿</del><br>
上标： H<sup>+</sup><br>
下标： H<sub>2</sub>O<br>
2H<sub>2</sub>O = 4H<sup>+</sup>+ 2O<sup>2-</sup>
</p>
</body>
</html>第三批标签
列表标签
<ul>
<li></li>
</ul> 无序列表
<ol>
<li></li>
</ol> 有序列表
<dl>
<dt></dt>
<dd></dd>
</dl> 自定义列表
代码示例：
<!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>
<div>
<h2>无序列表</h2>
<!-- ul>li*3{无序列表$} -->
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
<h2>有序列表</h2>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<h2>自定义列表</h2>
<dl>
<dt>项目1</dt>
<dd>自定义列表1</dd>
<dt>项目1</dt>
<dd>自定义列表2</dd>
<dt>项目1</dt>
<dd>自定义列表3</dd>
<dd>自定义列表4</dd>
<dd>自定义列表5</dd>
<dd>自定义列表6</dd>
</dl>
</div>
</body>
</html>第四批标签
表格
<tr>
<th>表头单元格</th>
<tr>
<tr>
<td>普通单元格</td>
</tr>
属性
cellpadding 用于设置单元格内容与单元格边框之间的距离
cellspacing 用于设置单元格之间的距离
colspan 用于合并表格中的单元格,合并同一行的不同列
rowspan 用于合并表格中的单元格,合并同一列的不同行
align 用于设置元素的水平对齐方式（左对齐、右对齐、居中）
width 用于设置元素的宽度
border 用于设置元素的边框
代码示例：
<!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>
<div>
<h2>表格</h2>
<table border="" cellpadding="5" cellspacing="3" align="center" width="900">
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
<th>表头单元格3</th>
</tr>
<tr style="text-align: center;">
<td colspan="2">普通单元格1</td>
<td>普通单元格3</td>
</tr>
<tr>
<td style="text-align: center;">普通单元格1</td>
<td colspan="2" rowspan="2">
<table border="" width="100%" cellpadding="10" cellspacing="0">
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="text-align: center;">普通单元格1</td>
</tr>
</table>
</div>
</body>
</html>第五批标签
视频 <video src=" "></video>
声音 <audio src=" "></audio>
图片 <img src=" ">
超链接 <a href="网址"></a>
代码示例：
<!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>
<div>
<p id="mmm">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h2>视频</h2>
<video src="./video/剑来03.mp4" controls="controls" width="500"></video>
</div>
<div>
<h2>音频</h2>
<audio src="./audio/background.mp3" controls="controls"></audio>
</div>
<div>
<h2>图片</h2>
<img src="./img/beautiful..jpg" alt="" width="500">
</div>
<div>
<h2>超链接</h2>
<a href="www.baidu.com">百度</a>
<a href="https://blog.csdn.net/rank/list/force?type=city">CSDN排行榜</a>
<a href="#mmm">mmm的锚点</a>
</div>
</body>
</html>第六批标签
框架标签
<iframe></iframe>
代码示例：
<!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>
<h1>框架标签</h1>
<iframe src="https://www.baidu.com/" frameborder="1" width="100%" height="900">个人主页</iframe>
</body>
</html>第七批标签
表单
<form></form>
表单标签属性
action 指定表单数据提交到的URL
method 指定表单数据提交的方法（GET或POST）
表单域（输入单行文本）
（1）文本输入框（input）
type 指定输入框的类型（如
text、password、number等）name 指定输入框的名称，用于在提交表单时标识该输入框
value 指定输入框的默认值
（2）文本区域（textarea）
name 指定指定文本区域的名称，用于在提交rows时标识该输入框
rows 指定文本区域的行数
cols 指定文本区域的列数
（3）单选按钮（type="radio"）
name 指定单选按钮组的名称，同一组的单选按钮应具有相同的
namevalue 指定单选按钮的值
checked 指定默认选中的单选按钮
（4）复选框（type="checkbox"）
同上单选按钮属性
（5）下拉列表（select）
name 指定下拉列表的名称
（6）表单按钮
1.提交按钮（type="submit" value="提交"）
2.重置按钮（type="reset" value="重置"）
3.普通按钮（type="button" value="自定义按钮名字"）
代码示例：
<form action="https://httpbin.org/post" method="post">
<!-- 表单标签，指定数据提交的URL和方法 -->
<div>
<!-- 账号输入框 -->
<label for="values">账号：</label>
<input name="zhanghao" id="values" required placeholder="请输入账号" type="text"><br>
<!--
name="zhanghao"：输入框的名称，用于服务器识别数据
id="values"：输入框的唯一标识符，用于与label标签关联
required：输入框为必填项
placeholder="请输入账号"：输入框的提示文本
type="text"：输入框类型为文本
-->
<!-- 密码输入框 -->
<label for="password">密码：</label>
<input name="password" id="password" type="password">
<!--
name="password"：输入框的名称，用于服务器识别数据
id="password"：输入框的唯一标识符，用于与label标签关联
type="password"：输入框类型为密码，输入内容会被隐藏
-->
</div>
<div>
<!-- 性别选择 -->
<span>性别:</span>
<label for="man">男</label>
<input id="man" name="sex" value="man" checked type="radio">
<!--
id="man"：单选按钮的唯一标识符，用于与label标签关联
name="sex"：单选按钮组的名称，同一组的单选按钮应具有相同的name
value="man"：单选按钮的值，提交表单时发送的值
checked：默认选中状态
type="radio"：单选按钮类型
-->
<label for="woman">女</label>
<input id="woman" name="sex" value="women" type="radio">
<!--
id="woman"：单选按钮的唯一标识符，用于与label标签关联
name="sex"：单选按钮组的名称，同一组的单选按钮应具有相同的name
value="women"：单选按钮的值，提交表单时发送的值
type="radio"：单选按钮类型
-->
</div>
<div>
<!-- 爱好选择 -->
<span>爱好：</span>
<label for="football">足球</label>
<input name="hobby" value="football" id="football" type="checkbox">
<!--
name="hobby"：复选框的名称，用于服务器识别数据
value="football"：复选框的值，提交表单时发送的值
id="football"：复选框的唯一标识符，用于与label标签关联
type="checkbox"：复选框类型
-->
<label for="basketball">篮球</label>
<input name="hobby" value="basketball" id="basketball" type="checkbox">
<!--
name="hobby"：复选框的名称，用于服务器识别数据
value="basketball"：复选框的值，提交表单时发送的值
id="basketball"：复选框的唯一标识符，用于与label标签关联
type="checkbox"：复选框类型
-->
<label for="badminton">羽毛球</label>
<input name="hobby" value="badminton" id="badminton" checked type="checkbox">
<!--
name="hobby"：复选框的名称，用于服务器识别数据
value="badminton"：复选框的值，提交表单时发送的值
id="badminton"：复选框的唯一标识符，用于与label标签关联
checked：默认选中状态
type="checkbox"：复选框类型
-->
</div>
<div>
<!-- 年龄选择 -->
<label>年龄：</label>
<input type="range" name="age" min="1" max="110" step="1"><br>
<!--
type="range"：范围选择器类型
name="age"：范围选择器的名称，用于服务器识别数据
min="1"：范围选择器的最小值
max="110"：范围选择器的最大值
step="1"：范围选择器的步长
-->
<!-- 日期选择 -->
<label>日期：</label>
<input type="datetime-local" name="datetime">
<!--
type="datetime-local"：日期时间选择器类型
name="datetime"：日期时间选择器的名称，用于服务器识别数据
-->
</div>
<div>
<!-- 颜色选择 -->
<label>颜色：</label>
<input type="color" name="color">
<!--
type="color"：颜色选择器类型
name="color"：颜色选择器的名称，用于服务器识别数据
-->
</div>
<div>
<!-- 附件上传 -->
<label>附件：</label>
<input type="file" name="fujian">
<!--
type="file"：文件上传控件类型
name="fujian"：文件上传控件的名称，用于服务器识别数据
-->
</div>
<div>
<!-- 居住地址选择 -->
<label>居住地址</label>
<select name="address">
<option name="南阳">南阳</option>
<option name="郑州" selected>郑州</option>
<option name="河南">河南</option>
</select>
<!--
name="address"：下拉列表的名称，用于服务器识别数据
<option>：下拉列表的选项
name="南阳"：选项的名称
selected：默认选中状态
-->
</div>
<div>
<!-- 留言框 -->
<label>留言：</label>
<textarea name="liuyan" cols="30" rows="10"></textarea>
<!--
name="liuyan"：文本区域的名称，用于服务器识别数据
cols="30"：文本区域的列数
rows="10"：文本区域的行数
-->
</div>
<div>
<!-- 提交按钮 -->
<input type="submit" value="注册">
<!--
type="submit"：提交按钮类型
value="注册"：按钮上显示的文本
-->
<!-- 重置按钮 -->
<input type="reset" value="清空">
<!--
type="reset"：重置按钮类型
value="清空"：按钮上显示的文本
-->
</div>
</form>有疑问的小伙伴欢迎评论区留言！
扫一扫
8204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
