文章目录
- output
-
- 演示
- textarea
- 网页基本架构
- 新时代
-
- 图像img
-
- 图像映射
- 图像适配
- 视频vedio
- 音频audio
- 字幕track
- 多几个视频
- 网页中嵌入网页
- meter
- progerss
html里面语义与实现分离
output
演示
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>使用output元素显示结果</title>
</head>
<body><form oninput="x.value=parseInt(a.value)+parseInt(b.value)" action="welcome.php" method="get">0<input type="range" id="a" value="50" min="0" max="100">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b">100</output></form>
</body>
</html>
textarea
指定在表单提交时，如何处理文本区域的自动换行：
- soft 表示在页面渲染中对文本进行自动换行，但换行符（CR + LF）不提交
- hard 表示在页面渲染中对文本进行自动换行，换行符（CR + LF）也会一并提交。如果元素的该属性设置为 hard，则必须同时指定 cols 属性。
- off 表示在页面渲染中不对文本进行自动换行。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>接受多行文本输入</title>
</head>
<body><form action="welcome.php" method="get"><!--rows指定高度能容纳多少个字符，cols指定宽度--><textarea name="saysth" rows="5" cols="50" wrap="soft">老师彩笔 戴佳伟问大师自己术士玩的怎么样，大师指着旁边烧开的水壶低头不语，戴佳伟问大师：“大师是说我术士的造诣已经炉火纯情？”大师说：“铁沸物。”</textarea><br><br><button>提交</button></form>
</body>
</html>
网页基本架构
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>多个section的嵌套</title><style>header {
background: #429296;color: white;text-align: center;padding: 5px;}section {
width: 600px;float: left;padding: 10px;}</style>
</head>
<body><header><h1>演示如下：</h1></header><section><h1>第一个section的h1</h1><p>hello,i am going to start my school</p><section><h1>第二个section的h1</h1><p>hello,i am going to start my school</p><section><h1>第三个section的h1</h1><p>hello,i am going to start my school</p></section></section></section><section><details open><summary>details元素里面的h1</summary><p>hello,i am going to start my school</p></details></section>
</body>
</html>
新时代
图像img
图像映射
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>图像映射</title>
</head>
<body><img src="../image/天镇一中.png" alt="天镇一中" usemap="#school"><map name="school"><!--circle需要提供圆心坐标和圆的半径--><area shape="circle" coords="524,241,163" alt="校门" href="https://www2017.tyut.edu.cn" target="_blank"><!--poly需要提供多边形每个点的坐标--><!--rect需要提供矩形左上角和右下角的坐标--><area shape="rect" coords="609,102, 671,320" alt="name" href="https://www.baidu.com" target="_blank"></map>
</body>
</html>
图像适配
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>图像适配</title>
</head>
<body><picture><source media="(min-width: 1024px)" srcset="../image/异灵术老师.png"><source media="(min-width: 512px)" srcset="../image/天镇一中.png"><img src="../image/ori.png" alt="ori" style="width: auto"></picture>
</body>
</html>
视频vedio
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>视频的嵌入</title>
</head>
<body><!--controls是控件，autoplay可以让视频动起来，muted静音，preload是预加载，metedata可以加载封面等一些省流量的内容，poster是封面图片，loop是循环播放--><video src="../image/拍六个.mp4" width="1920" height="1080" controls preload="metadata" poster="../image/fff.jpg" loop>非常抱歉，本视频丢失</video>
</body>
</html>
音频audio
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>音频的插入</title>
</head>
<body><audio src="../image/七里香 - 周杰伦.mp3" controls>非常抱歉，此音频被损坏</audio>
</body>
</html>
字幕track
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>视频的嵌入</title>
</head>
<body><video src="拍六个.mp4" width="1920" height="1080" controls><track src="track.vtt" srclang="zh" label="中文字幕" kind="subtitles" default>非常抱歉，本视频丢失</video>
</body>
</html>
.vtt文件：
WEBVTT00:00:00.500 --> 00:00:04.290
大锤拍00:00:04.400 --> 00:00:07.200
我是中文00:00:07.600 --> 00:00:12.200
我也是中文！！！！
多几个视频
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>添加几个备用的视频</title>
</head>
<body><video width="640" controls><source src="ayok.mp4" type="vedio/mp4"><source src="ayok.ogv" type="vedio/ogv"><source src="ayok.webm" type="vedio/webm"></video>
</body>
</html>
网页中嵌入网页
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>嵌入一个网页</title>
</head>
<body><!--sandbox限制--><p>在网页中嵌入哔哩哔哩(https://www.bilibili.com)</p><iframe src="https://www.bilibili.com" width="1024px" height="800px" sandbox="">抱歉，您的浏览器不支持iframe</iframe>
</body>
</html>
meter
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>使用meter元素显示一个范围内的值</title>
</head>
<body><p>又到月底了，您的零花钱剩下</p><!--使用meter元素显示一个范围内的值--><meter id="money" high="0.8" low="0.2" optimum="0.6" value="0.2" min="0" max="1"></meter><p><button type="button" value="0.1">10%</button><button type="button" value="0.6">60%</button><button type="button" value="0.9">90%</button></p><script>var button = document.getElementsByTagName("BUTTON");var meter = document.getElementById("money");for(var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function(e) {
meter.value = e.target.value;}}</script>
</body>
</html>
progerss
显示进度条
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>使用progress元素显示进度条</title>
</head>
<body><p>大学进度</p><progress value="0.5" max="1"></progress>
</body>
</html>