前端学习——HTML5
新增语义化标签
新增布局标签
DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>
head>
<body><header><h1>尚品汇h1>header><hr><nav><a href="#">首页a><a href="#">订单a><a href="#">购物车a><a href="#">我的a>nav><div class="page-content"><aside style="float:right;"><nav><ul><li><a href="#">秒杀专区a>li><li><a href="#">会员专区a>li><li><a href="#">品牌专区a>li><li><a href="#">优惠专区a>li>ul>nav>aside><article><h2>《如何一夜暴富》h2><section><h3>第一种方式：白日梦h3><p>你应该......p>section><section><h3>第二种方式：白日梦h3><p>你应该......p>section><section><h3>第三种方式：白日梦h3><p>你应该......p>section>article>div><hr><footer><nav><a href="#">友情链接a><a href="#">友情链接a><a href="#">友情链接a><a href="#">友情链接a>nav>footer>
body>
html>
新增状态标签
DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>progress {width: 50px;}style>
head>
<body><span>手机电量：span><meter max="100" min="0" value="5" low="10" high="20" optimum="90">meter><br><span>当前进度：span><progress max="100" value="80">progress>
body>
html>
新增列表标签
DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>
head>
<body><form action="#"><input type="text" list="mydata"><button>搜索button>form><datalist id="mydata"><option value="周杰伦">周杰伦option><option value="周冬雨">周冬雨option><option value="马冬梅">马冬梅option><option value="温兆伦">温兆伦option>datalist><details><summary>如何一夜暴富？summary><p>好好学习，天天上线p>details>
body>
html>
新增文本标签
DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>
head>
<body><ruby><span>魑魅魍魉span><rt>chī mèi wǎng liǎngrt>ruby><hr><ruby><span>魑span><rt>chīrt>ruby><hr><p>Lorem ipsum <mark>dolormark> sit amet consectetur adipisicing elit. Tenetur impedit quasi, minima ullam sequi quaerat veniam fugiat distinctio. Iure temporibus laborum earum tenetur suscipit odit ad excepturi ut eaque ab!p>
body>
html>
表单相关新增
新增表单控件属性
DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>
head><body><form action="">账号：<input type="text" name="account" placeholder="请输入账号" required autofocus autocomplete="on" pattern="\w{6}"><br>密码：<input type="password" name="pwd" placeholder="请输入密码" required pattern="\w{6}"><br>性别：<input type="radio" value="mail" name="gender" required>男<input type="radio" value="femail" name="gender" required>女<br>爱好：<input type="checkbox" value="book" name="hobby">读书<input type="checkbox" value="music" name="hobby" required>音乐<input type="checkbox" value="movie" name="hobby">电影<br>其他：<textarea name="other" required>textarea><br><button>提交button>form>
body>html>
input新增type属性值
DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>
head>
<body><form action="" novalidate><br><br><br><br><br><br><br><br><br><br><br><button>提交button>form>
body>
html>
新增多媒体标签
新增视频标签
DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>video {width: 600px;}style>
head>
<body><video src="./资料/resource/小电影.mp4" controls muted loop poster="./资料/封面.png" preload="auto">video>
body>
html>
新增音频标签
DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>audio {width: 600px;border: 1px solid skyblue;}style>
head>
<body><audio src="./资料/小曲.mp3" controls muted loop preload="auto">audio>
body>
html>
DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>audio {width: 600px;}.mask {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background-color: rgba(0,0,0,0.727);}.dialog {position: absolute;width: 400px;height: 400px;background-color: green;top: 0;bottom: 0;left: 0;right: 0;margin: auto;font-size: 40px;text-align: center;line-height: 400px;}span {border: 1px solid white;color: white;cursor: pointer;}style>
head>
<body><audio id="music" src="./资料/小曲.mp3" controls>audio><div class="mask" id="mask"><div class="dialog"><span>点我登陆span><span onclick="go()">随便听听span>div>div><script>function go(){music.play()mask.style.display = 'none'}script>
body>
html>
新增全局属性
兼容性处理
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！