语义化标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/html5.js"></script>
<style>
section{
width: 1000px;
height: 600px;
margin: 50px auto;
border: 1px solid #000;
}
header,nav,footer{
width: 100%;
height: 50px;
background: pink
}
nav a{
text-decoration: none;
width: 100px;
height: 50px;
float: left;
text-align: center;
line-height: 50px
}
aside{
width: 200px;
height: 500px;
background: greenyellow;
float: left;
}
main{
width: 100%;
height: 500px;
}
article{
width:800px;
height: 500px;
background: skyblue;
float: right;
}
</style>
</head>
<body>
<section>
<header>
<nav>
<a href="">首页01</a>
<a href="">首页02</a>
<a href="">首页03</a>
<a href="">首页04</a>
<a href="">首页05</a>
<a href="">首页06</a>
<a href="">首页07</a>
<a href="">首页08</a>
<a href="">首页09</a>
<a href="">首页10</a>
</nav>
</header>
<main>
<aside>文章的辅助信息</aside>
<article>这是网页中的文章(列表)区域</article>
</main>
<footer>版权信息</footer>
</section>
<hr>
<!-- 自定义列表 -->
<dl>
<dt>名词</dt>
<dd>名词的解释</dd>
</dl>
<figure>
<p>名词</p>
<figcaption>名词的解释</figcaption>
</figure>
<mark>高亮文本</mark>
<hgroup>
<h1>这是标题</h1>
<h2>这是标题</h2>
<h3>这是标题</h3>
<h4>这是标题</h4>
<h5>这是标题</h5>
<h6>这是标题</h6>
</hgroup>
<dialog open>
<input type="submit">
</dialog>
</body>
</html>音视频标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 音频标签 -->
<audio src="images/晴天.mp3" controls autoplay loop muted></audio>
<!-- 视频标签 -->
<video src="images/kk.mp4" controls loop muted poster="https://img0.baidu.com/it/u=1444739406,487264331&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=418"></video>
<!-- 实现多种浏览器音视频解析的方法 -->
<!-- 告知浏览器现在用的是音频 -->
<audio>
<!-- 资源:可选项,备胎 -->
<source src="images/晴天.mp3">
<source src="images/晴天.ogg">
<source src="images/晴天.webm">
<source src="images/晴天.xxx">
</audio>
</body>
</html>
<!--
音频标签 audio
视频标签 video
标签属性
1.共有的属性
- src 表示资源的路径地址
- controls 表示音视频的控件(显示出来必须要设置)
- autoplay 自动播放
- loop 循环
- muted 静音
2.独有的属性:poster(视频的首屏图片)
3.注意点
- 现在的浏览器为了追求极致的性能,把很多自动播放的功能禁止掉了
- 考虑:不同的浏览器支持的文件格式后缀名也不一样,实现一段音视频在不同的浏览器上都可以正常解析
-->智能表单：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 智能表单:要放在form标签内,而且还需要有提交按钮 -->
<!-- 注意:智能表单如果不填写内容的时候可以直接提交,写内容的时候就需要符合规定 -->
<!-- 智能验证当前填入的格式是否符合,不能确定是否真实存在( JS正则表达式 ) -->
<form>
<p> 邮箱: <input type="email" multiple> </p>
<p> 网址: <input type="url"> </p>
<p> 数字: <input type="number" min="0" max="10000" step="3"> </p>
<p> 滑块: <input type="range" step="50"> </p>
<p> 搜索: <input type="search"> </p>
<input type="submit">
</form>
</body>
</html>时间表单：
<form>
<p> 年月日: <input type="date"> </p>
<p> 年月: <input type="month"> </p>
<p> 周数: <input type="week"> </p>
<p> 时间: <input type="time"> </p>
<p> 本地时间: <input type="datetime-local"> </p>
</form>表单新增加：
<form novalidate>
<!-- 1.required 必须得填写内容 -->
<p> 姓名: <input type="text" required placeholder="请填写" autofocus> </p>
<!-- 2.autofocus在一个文件中只能设置一个,如果有多个会显示第一个 -->
<p> 密码: <input type="password" required placeholder="请填写" autofocus> </p>
<p> 号码: <input type="text" maxlength="11"> </p>
<input type="submit">
</form> <form>
<p> 搜索: <input type="text" list="search" autocomplete="on" name="username"> </p>
<datalist id="search">
<option value="http://www.baidu.com">百度</option>
<option value="http://www.1000phone.com">千锋</option>
<option value="http://www.4399.com">小游戏</option>
</datalist>
<input type="submit">
</form>简易计算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 计算结果值 -->
<form oninput="res.value =parseInt(num1.value) + parseInt(num2.value) ">
<input type="range" id="num1" min="100" max="10000">
+
<input type="range" id="num2">
=
<output name="res"></output>
</form>
</body>
</html>
<script>
// 和内部的css写法相同 style
// 点击事件
num1.onclick = function(){
console.log(num1.value)
console.log(parseInt(num1.value))
}
num2.onclick = function(){
console.log(num2.value)
console.log(parseInt(num2.value))
}
</script>
<!--
分析思路【了解】
1.浏览器得知道用户输入的数是多少 => DOM.value的方式 结构.value
2.如何获取到结构 => 最简单的获取结构方式 给标签绑定id => id的属性值.value 即可
3.在控制台上输出数值 需要使用函数方法 console.log(输出的值)
4.考虑使用js中的点击事件,点击input框一次就会输出一次结果
5.input默认的数据类型是字符串,字符串的拼接
6.只有数字才可以进行运算,考虑把字符串转换为数字类型 parseInt(转换的数据)
-->
226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
