段落换行标签：
代码案例：
<!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>
<h2>挣大钱</h2>
<h3>挣大钱</h3>
<h4>挣大钱</h4>
<h5>挣大钱</h5>
<h6>挣大钱</h6>
<p>
央广网北京4月14日消<br/>息（记者 果君）为深入总结"读懂中国"活动经验和启示，
更好发挥"五老"在立德树人中的独特作用，<br>
引导广大青年学生坚定理想信念，
矢志奉献国家和人民，4月13日，
</p>
<br><br><br><br>
<hr>
<p>
央广网北京4月14日消息（记者 果君）为深入总结"读懂中国"活动经验和启示，
更好发挥"五老"在立德树人中的独特作用，
引导广大青年学生坚定理想信念，
矢志奉献国家和人民，4月13日，
</p>
</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>
<!--有序列表-->
<ol>
<li>数据类型</li>
<li>变量</li>
<li>函数</li>
<li>对象</li>
</ol>
<!-- 无序列表 -->
<ul>
<li>java</li>
<li>c++</li>
<li>c</li>
<li>go</li>
</ul>
<!-- 嵌套 -->
<ul>
<li>java
<ol>
<li>数据类型</li>
<li>变量</li>
<li>函数</li>
<li>对象</li>
</ol>
</li>
<li>c++</li>
<li>c</li>
<li>go</li>
</ul>
</body>
</html>效果图：
超链接标签：
- a
- herf 用于定义跳转目标资源的地址
- 1、完整url
- 2、相对路径
- 以当前资源的所在路径为出发点去找目标资源
- ./表示的当前资源的所在路径，可以省略不写
- ../表示当前资源的上一层路径，需要时必须显示写出
- 3、绝对路径
- 1、无论当前资源在哪里，使用固定的位置作为出发点去找目标资源
- 以 / 开头
- target用于定义目标资源的打开方式
- _self 在当前窗口打开目标资源
- _blank重新开启新窗口打开目标资源
- herf 用于定义跳转目标资源的地址
代码案例：
<!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>
<a href="https://www.zhipin.com" target="-blank">boss直聘</a>
<!-- 相对路径 -->
<a href="02标题段落换行.html" target="_blank">02标题标签</a>
</body>
</html>效果图：（点击标签可跳转）
图片和音频标签：
- img
- src定义图片的相对路径
- 1、url
- 2、相对路径
- 3、绝对路径
- title定义鼠标悬停时提示的文字
- alt定义图片加载失败时提示文字
- src定义图片的相对路径
代码演示：
<!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>
<img src="img/photo.pngs" width="220px" title="cao" alt="sha">
<br>
<img src="/demo1-html/img/photo.png" title="ni">
</body>
</html>效果图：
- audio
- src。
- 1、url
- 2、相对路径
- 3、绝对路径
- controls 属性告诉浏览器在音频播放器中显示默认的控件，例如播放按钮、音量控制等。
- <code> 标签用于在浏览器不支持 <audio> 元素时显示备用内容。
- 除了 src 和 controls 属性外，<audio> 标签还有其他一些常用的属性，例如：
- autoplay：指定音频在加载完毕后立即开始播放。
- loop：指定音频循环播放。
- preload：指定浏览器在页面加载时是否预加载音频，可能的值为 "none"、"metadata" 或 "auto"。
- src。
代码案例：
表格标签：
- table 整张表格
- thead表头
- tbody表体
- tfoot表尾
- tr表格中的一行
- td行中的一个单元格
- th自带加粗和居中效果的td
- tr表格中的一行
代码案例：
<!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 style="text-align: center;">员工技能竞赛评分表</h3>
<table border="1px" style="margin: 0px auto; width: 300px;">
<thead>
<tr>
<th>排名</th>
<th>姓名</th>
<th>分数</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>找</td>
<td>100</td>
<td rowspan="6">当老板</td>
</tr>
<tr>
<td>2</td>
<td>不到</td>
<td>99</td>
</tr>
<tr>
<td>3</td>
<td>工作</td>
<td>98</td>
</tr>
<tr>
<td>总人数</td>
<td colspan="2">200</td>
</tr>
<tr>
<td>平均分</td>
<td colspan="2">100</td>
</tr>
<tr>
<td>及格率</td>
<td colspan="2">90% </td>
</tr>
</tbody>
</table>
</body>
</html>效果图：
表单标签：
- form表单标签
- action定义数据的提交地址
- 1、url
- 2、相对路径、
- 3、绝对路径
- method 定义数据的提交方式
- GET：
- 参数会一键值对形式放在url后提交
- 1、url?key=value&key=vaue&key=value
- 2、数据直接暴露在地址栏上，相对不安全
- 3、地址栏的长度有限制，所以提交的数据量不大
- 4、地址栏上，只是字符，不能提交文件
- 5、相比于post，效率更高
- 参数会一键值对形式放在url后提交
- POST：
- 1、参数默认不放在url后面
- 2、数据不会直接暴露在地址栏上，相对安全
- 3、数据都是单独打包，通过请求体发送，提交数据量较大
- 4、请求提中，可以是字符，也可以是字节，可以提交文件
- 5、相比于get，相率较低
- action定义数据的提交地址
- 表单项标签：用户输入信息的标签
- 表单项标签一定要定义name属性，该属性用于明确提交时的参数名
- 表单项标签还需要定义value属性，该属性用于明确提交值得实参
- 希望用户提交一些特定的信息，但是考虑到安全问题，或者是用户操作问题，不希望数据发生变化
- readonly 只读，提交时不携带
- disabled 不可用，提交时不携带
- input
- type输入信息得表单项类型（不指定type的属性值，默认按钮为提交按钮的功能）
- text单行普通文本框
- password密码框
- submit提交按钮
- reset重置按钮
- button普通按钮
- radio单选框【多个选项选一个】
- 多个单选狂使用相同的name属性值，则就会有互斥效果ed
- checked：默认选中，可直接写。checked
- checkbox复选框【多个选项，选多个】
- hidden隐藏域，不显示在页面上，提交时会携带
- file文件上传框
- type输入信息得表单项类型（不指定type的属性值，默认按钮为提交按钮的功能）
- textarea 文本域，多行文本框
- select 下拉框
- option选项
代码案例：
<!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" method="get">
<!-- 添加表单项标签 用户输入信息的标签 -->
<!-- 希望用户提交一些特定的信息，但是考虑到安全问题，或者是用户操作问题，不希望该数据发生变化
readonly 只读 提交时不携带
disabled 不可用 提交时不携带
-->
<input type="hidden" name="id" value="123">
<input type="text" name="pid" value="456" readonly><br>
<input type="text" name="did" value="789" disabled><br>
用户名：<input type="text" name="username"/><br>
密码：<input type="password" name="userPwd"/><br>
性别：
<input type="radio" name="gender" value="1" checked>男
<input type="radio" name="gender" value="0">女
<br>
爱好：
<input type="checkbox" name="hobby" value="1" checked>乒乓球
<input type="checkbox" name="hobby" value="2" checked>吃
<input type="checkbox" name="hobby" value="3">运动
<input type="checkbox" name="hobby" value="4" >挣钱
<br>
个人简介：
<textarea name= "intro" style="width: 300px; height: 100px"></textarea>
<br>
籍贯：
<select name="pro" id="">
<option value="1">江</option>
<option value="2">浙</option>
<option value="3">沪</option>
<option value="0" selected>-请选择-</option>
</select>
选择头像：
<input type="file">
<br>
<input type="submit" value="登录">
<input type="reset" value="清空">
</form>
</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>
<h1>一级标题 </h1>
<hr>
&gt;
</body>
</html>效果图：
布局标签：
- css设置样式：
- 通过元素的style属性进行设置
- style = "样式名:样式值;样式名:样式值......"
- 块元素：自己独占一行元素，块元素得CSS样式得宽，高往往都是生效的
- div
- 行内元素：自己不会独占一行的元素 块元素的CSS样式的宽 高等等，往往都是不生效
- span
代码案例：
<!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 style="background-color:cadetblue ;">
<div style="border:1px solid red; width: 500px;height: 100px;margin: 10px auto;background-color: antiquewhite;">123</div>
<div style="border:1px solid red; width: 500px;height: 100px;margin: 10px auto;background-color: bisque;">456</div>
<div style="border:1px solid red; width: 500px;height: 100px;margin: 10px auto;background-color: rgb(255, 196, 0);">
<span style="font-size: 30px;color: aliceblue;">b，</span>spanstrong：文本加粗；
</div>
<span style="border:1px solid black; width: 500px;height: 100px;">555</span>
</body>
</html> 效果图：
6204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
