引用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引用</title>
</head>
<body>
<blockquote>
<p>好好学习，天天向上</p>
<p><abbr title="好好学习，天天向上">good good study, up up everyday</abbr></p>
</blockquote>>
</body>
</html>
一些格式的显示：
<i>斜体显示</i>
<del>删除符号显示</del>
<ins>插入符号显示</ins>
<s>表示错误的内容，同样删除线表示</s>
<u>下划线，定义拼写错误的单词或汉语专用名词</u>
<mark>荧光笔标记</mark>
<sup>上标显示</sup>
<sub>下标显示</sub>
表格的制作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引用</title>
<style>
table{
border: 1px solid black;
border-collapse: collapse;
/*平行的两条线合并*/
}
thead th{
background: grey;
color: white;
border: 1px solid red;
}
tbody td{
background: lightgrey;
color: white;
}
td{
border: 1px solid blue;
padding: 5px;
/*通过padding设置单元格的内边距*/
}
caption{
padding: 10px;
}
</style>
</head>
<body>
<table>
<caption>学生信息</caption>
<!-- 添加标题，必须紧挨着table-->
<colgroup>
<col style="background: red">
<col span="2" style="background: green"
</colgroup>
<!-- 将第一列的背景颜色设置成红色-->
<!-- 将第二三列的背景颜色设置为绿色-->
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>班级</th>
</tr>
</thead>
<!-- 表头<th></th>-->
<tbody>
<tr>
<td>zyj</td>
<td>男</td>
<td>计181-3</td>
</tr>
<tr>
<td>qwe</td>
<td>n</td>
<td>m</td>
</tr>
<!-- 表项<td></td>-->
</tbody>
<tfoot>
<tr>
<td colspan="3">仅供娱乐</td>
</tr>
</tfoot>
<!--表脚的标注，colspar=“3”表示文字跨3列显示，如果跨行用rowspan=“”-->
</table>
</body>
</html>
简单的表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一个简单的表单</title>
</head>
<body>
<form target="_blank" action="welcome.php" method="get">
<fieldset>
<!-- target="_blank"在新页面打开跳转网页-->
<label>账号: <input type="text" name="name" autocomplete="on",autofocus><br><br></label>
<!-- 下次登入会自动填充上次输入的内容-->
<!-- autofocus是自动聚焦该输入框-->
<!-- label将账号文字与输入结合在了一块，点击label会聚焦到输入框-->
<label for="word">密码: <input type="password" name="password" id="word"><br><br></label>
<label>性别
<select name="sex">
<option value="male">男</option>
<option value="female">女</option>
</select>
</label>
<!-- 下来列表选项框，选男的话上传male，选女的话上传female-->
</fieldset>
<fieldset>
<!-- lable根据id找到点击要聚焦的输入框-->
<button type="submit">提交</button>
<button type="reset">重写</button>
<button type="submit" formmethod="post" disabled>递交</button>
<!-- 加入disabled后就没法点击-->
<!-- 使用get会在网页地址显示账号密码信息，post不会显示-->
</fieldset>
<!-- fieldset来划分区域-->
</form>
</body>
</html>
input的type属性：
text
password
submet
reset
radio：多个点击选项，只能选一个，name一致才能实现互斥
checkbox：多选框，可以选多个
time
date
month
week
datetime-local
search：搜索框
color：颜色选择框
image:图像按钮，另外要给src设置上图片的路径
hidden:隐藏的按钮
file：上传文件，form的method必须为post，为get会报错。此外文件传输的编码方式的enctype必须改为“multipart/form-data”。imput可以通过修改accept属性来限制传输文件的类型，例如accept="image/*"表示所有图片，accept=".jpg"表示所有jpg格式的文件，属性中加入multiple表示可以上传多个文件
number:只能输入数字，还可以直接下来选择数字，加入min，max，step可以限制范围和步长
range：数值滚动条
email：邮箱
tel:电话，给pattern属性附上合法输入的正则表达式可限制输入，placeholder属性可以在输入框内给用户提示，required属性加上后必须要添上，size可以改变大小，maxlength限制最大输入字符的长度
url：网址
其他表单
输出表单<output name="" for="输出来自哪里（a b）">默认值</output>
接受多行输入表单textarea <textarea name="",rows=""cols="",wrap="hard"></textarea>
图片链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像映射</title>
</head>
<body>
<img src="use.jpg" alt="海贼王" usemap="#onepiece" >
<!--usemap的名字前面必须加#-->
<map name="onepiece">
<area shape="circle" coords="184,241,163" alt="圆" href="https://fishc.com.cn" target="_blank">
<!-- 圆形区域，给出圆心坐标和半径大小-->
<area shape="poly" coords="279,230 867,549 636,975 46,655" alt="多边形" href="https://item.jd.com/12573534.html" target="_blank">
<!-- 多边形，给出各个点的坐标-->
<area shape="rect" coords="710,818,886,1008" alt="矩形" href="https://man.ilovefishc.com" target="_blank">
<!-- 矩形，给出左上角和右下角坐标-->
</map>
</body>
</html>
通过source和media属性根据页面大小改变图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像适配</title>
</head>
<body>
<picture>
<source media="(min-width: 1024px)" srcset="big.jpg">
<source media="(min-width: 512px)" srcset="small.jpg">
<img src="use.jpg" alt="海贼王" style="width:auto">
</picture>
</body>
</html>
在网络中嵌入视频并加字幕
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在网页中嵌入视频</title>
</head>
<body>
<video src="小猪佩奇,mp4" width="640" height="352" controls autoplay>
<source src="小猪佩奇.mp4" type="video/mp4">
<!-- 添加备胎-->
<track src="track.vtt" srclang="zh" label="中文字幕" kind="subtitles" default>
<!-- 中文字幕srclang=ah，自动播放default-->
很抱歉，视频无法播放
</video>
</body>
</html>
tract.vtt
WEBVTT
00:00:09.250 -->00:00:11.270
大家好
00:00:13.010 --> 00:00:15.260
我是zyj
在网页中嵌入音频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在网页中嵌入音频</title>
</head>
<body>
<audio src="松田彬人%20-%20中二病であるということ%20(所谓中二病).mp3" controls autoplay>
非常抱歉，音频无法播放
</audio>
</body>
</html>
在网页中嵌入网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在网页中嵌入网页</title>
</head>
<body>
<p>在网页中嵌入网页</p>
<iframe src="http://ilovefishc.com" width="1024px" height="800px">抱歉，您的网页不支持iframe。</iframe>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在网页中嵌入网页</title>
</head>
<body>
<p>在网页中嵌入网页</p>
<iframe src="http://map.baidu.com/@12989872.35,2658432.29,12z" width="1024px" height="800px">抱歉，您的网页不支持iframe。</iframe>
<!--嵌入百度地图，坐标：@12989872.35，2658432.29，12z-->
</body>
</html>
8833
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
