11，路径
<!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>
<!-- 相对路径 -->
<!-- 1jpg -->
<img src="./1.jpg" alt=""><br>
<!-- 2jpg -->
<img src="../2.png" alt=""><br>
<!-- 3jpg -->
<img src="../../3.png" alt=""><br>
<!-- 绝对路径 -->
<!-- 1.jpg在自己电脑里的图片 -->
<img src="C:\Users\user\Desktop\vc\photo\picture\code\1.jpg" alt=""><br>
<!-- 不在自己电脑里的图片复制图片地址 -->
<img src="https://static.web.sdo.com/jijiamobile/pic/ff14/wallpaper/20221220patch62/ffxiv_6.2patch_01_300x169.jpg" alt="">
</body>
</html>
12， 超链接
<a href="...">
<!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.baidu.com/">跳转到百度</a><br>
<a href="./01—标签的写法.html">跳转到01——标签的写法</a><br>
<!-- 打开为新页面 target="_blank" -->
<a href="./01—标签的写法.html" target="_blank">跳转到01——标签的写法新页面</a>
<!-- herf属性值写#，不会跳转 -->
<a href="#">不会跳转</a>
</body>
</html>
13，音频标签
<audio src="..." controls loop aotoplay></audio>
<!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>
<!-- 在hmtl5里面，属性名和属性值完全一样，则可以简写为一个单词，如controls -->
<audio src="./BUMP OF CHICKEN - Hello,world!.flac" controls loop aotoplay></audio>
</body>
</html>
14，视频标签
<video src="..." controls loop muted aotoplay></video>
<!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>
<video src="./视频.mp4" controls loop muted aotoplay></video>
</body>
</html>
15，列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 无序列表 -->
<ul>
<li>条目列表1</li>
<li>条目列表2</li>
<li>条目列表3</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>第一名</li>
<li>第二名</li>
<li>第三名</li>
</ol>
<!-- 定义列表 -->
<dl>
<dt>防护职能</dt><br>
<dd>剑盾小b</dd>
<dd>撅枪小b</dd>
<dd>绿刀小b</dd>
<dd>暗堕小b</dd>
</dl>
</body>
</html>
16，表格标签
<!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 border="1">
<thead>
<tr>
<th>姓名 </th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<td>97</td>
<td>196</td>
</tr>
<tr>
<td>李四</td>
<td>97</td>
<td>97</td>
<td>194</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均分</td>
<td>98</td>
<td>97</td>
<td>195</td>
</tr>
</tfoot>
</table>
</body>
</html>
17，合并单元格
<!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 border="1">
<thead>
<tr>
<th>姓名 </th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<td rowspan="2">97</td>
<td>196</td>
</tr>
<tr>
<td>李四</td>
<td>97</td>
<td>194</td>
</tr>
</tbody>
<tr>
<td>平均分</td>
<td>98</td>
<td>97</td>
<td>195</td>
</tr>
<tfoot>
<tr>
<td>排名</td>
<td colspan="3">全市第一</td>
<!-- <td>全市第一</td> -->
<!-- <td>全市第一</td> -->
</tr>
</tfoot>
</table>
</body>
</html>
18， 表单
文本框：<input type="text">
密码框：<input type="password">
单选框： <input type="radio">
多选框1： <input type="checkbox" >
多选框2： <input type="checkbox" >
上传文件： <input type="file">
占位文本：<input type="password" placeholder="请输入密码">
默认选中：<checked>
上传多个文件： <input type="file" multiple>
<!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>
<!-- 输入什么，客户页面就显示什么 -->
文本框：<input type="text">
<br><br>
<!-- 输入什么都显示为星号 -->
密码框：<input type="password">
<br><br>
<!-- 单选 -->
单选框: <input type="radio">
<br><br>
<!-- 多选 -->
多选框1: <input type="checkbox" >
多选框2: <input type="checkbox" >
<br><br>
<!-- 上传文件夹 -->
上传文件: <input type="file">
<br><br>
<!-- 占位文本 -->
文本框:<input type="text" placeholder="请输入用户名">
<br><br>
密码框:<input type="password" placeholder="请输入密码">
<br><br>
<!-- radio单选功能的实现用name，默认选中checked -->
性别:
<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女
<br><br>
<!-- 上传多个文件 -->
上传多个文件: <input type="file" multiple>
<br><br>
<!-- 默认多选 -->
用户协议:
<br>
<input type="checkbox" checked>条款一<br>
<input type="checkbox" checked>条款二
</body>
</html>
19，下拉菜单
<select>
<option>...</option>
</select>
<!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>
城市:
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<!-- selected 属性规定在页面加载时预先选定该选项 -->
<option selected>深圳</option>
</select>
</body>
</html>
20,，文本域
<textarea>...</textarea>
<!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>
<!-- 右下角可拖拽放大，以后会禁用 -->
<textarea>请输入评论</textarea>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
