新增标签
<!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>
<!-- 显示模式 -->
<!-- 1.块级元素 2.行内元素 3.行内块元素 -->
<!-- html5 语义化标签 -->
<!-- <div class="header"></div> -->
<header>页面头部</header>
<!-- 导航 -->
<nav>导航</nav>
<!-- 主体部分 -->
<main>主体部分</main>
<!-- 侧边栏 -->
<aside>侧边栏</aside>
<!-- 文档 -->
<article>文档</article>
<!-- 区 段 -->
<section>区段</section>
<!-- 页脚 -->
<footer>页脚</footer>
<!-- 选项列表 datalist -->
<input type="text" list="city">
<datalist id="city">
<!-- 选项 -->
<option value="郑州"></option>
<option value="新乡"></option>
<option value="漯河"></option>
<option value="江苏"></option>
<option value="苏州"></option>
</datalist>
<!-- 下拉选择 -->
<select name="" id="">
<!-- 选项 -->
<option value="">郑州</option>
<option value="">新乡</option>
<option value="">漯河</option>
<option value="">商丘</option>
<option value="">许昌</option>
</select>
<p>
<label for="username">账号：</label>
<input type="text" id="username">
</p>
<p>
密码：
<input type="text">
</p>
<p>
性别：
<label for="man">男</label><input type="radio" name="sex" id="man">
<label for="women">女</label><input type="radio" name="sex" id="women">
</p>
<!-- 图片区域 -->
<figure>
<!-- 图片区域标题 -->
<figcaption>正确</figcaption>
<img src="./img/shuruzhengque.png" alt="">
</figure>
<!-- 表单元素分组 -->
<!-- <fieldset></fieldset> -->
<form action="">
<fieldset>
<legend>账号信息</legend>
<p>
用户名：
<input type="text">
</p>
<p>
密 码：
<input type="text">
</p>
<p>
验证码：
<input type="text">
</p>
</fieldset>
<fieldset>
<legend>个人信息</legend>
<p>
姓名：
<input type="text">
</p>
<p>
年龄：
<input type="text">
</p>
<p>
班级：
<input type="text">
</p>
</fieldset>
<meter value="9" min="0" max="10" low="3" high="7"></meter>
<!-- 进度条 -->
<progress value="2" min="0" max="10"></progress>
</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>
<form action="">
<!-- placeholder 提示信息 -->
<!-- autofocus 自动获取焦点 -->
<!-- multiple 多文件上传 -->
<!-- autocomplete 自动补全 -->
<!-- required 必填项 -->
<!-- tabindex 获取焦点顺序 -->
<!-- accesskey 快捷键 Alt + k -->
<p>
用户名：
<input type="text" placeholder="请输入用户名" name="username" autocomplete="off" required tabindex="1">
</p>
<p>
密 码：
<input type="text" name="psd" tabindex="3" accesskey="k">
</p>
<p>
验证码：
<input type="text" tabindex="2">
</p>
<p>
上传文件：
<input type="file" multiple>
</p>
<input type="submit">
</form>
<!-- 自定义属性 data-* -->
<div class="box" data-index="1" data-name="zhangsan"></div>
<script>
var box = document.getElementsByClassName("box")[0];
console.dir(box);
console.log(box.dataset.index);
console.log(box.dataset.name);
box.dataset.age = "20";
</script>
</body>
</html>
新增type类型
<!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="">
<p>
邮箱：
<input type="email">
</p>
<p>
手机号：
<input type="tel">
</p>
<p>
地址：
<input type="url">
</p>
<p>
数字：
<input type="number">
</p>
<p>
搜索：
<input type="search">
</p>
<p>
<input type="range">
</p>
<p>
<input type="time">
</p>
<p>
<input type="date">
</p>
<p>
<input type="month">
</p>
<p>
<input type="week">
</p>
<input type="submit">
</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>
<!-- 音频 audio -->
<!-- controls 播放控件 -->
<!-- loop 循环播放 -->
<!-- autoplay 自动播放 -->
<!-- muted 静音播放 -->
<audio src="./img/杨宗纬 _ 宝石Gem _ 王宇宙Leto - 若月亮没来 (Live).ogg" controls loop muted></audio>
<audio controls>
<source src="./img/杨宗纬 _ 宝石Gem _ 王宇宙Leto - 若月亮没来 (Live).ogg">
</audio>
<!-- 视频 video -->
<video src="./img/shenxianjiejie.mp4" controls muted width="500"></video>
<video controls>
<source src="./img/shenxianjiejie.mp4">
<source src="./img/shenxianjiejie.ogg">
<!-- 您的浏览器不支持视频播放功能！ -->
</video>
<script>
var audio = document.getElementsByTagName("audio")[0];
var video = document.getElementsByTagName("video")[0];
// 静音自动播放
video.play();
</script>
</body>
</html>
712
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
