因为某些原因写的不是很规范，请见谅，仅供参考
<body>
/*
什么是H5和C3呢？
H5指的就是HTML5 HTML5是第五个正式发布的版本 5是版本号
HTML5相比于之前有较大的变动classlist.remove input email time phone类型
C3 CSS3就是css的第三个版本主要是新增一些选择器 样式 动画
*/
页面结构
<style>
.header {height: 200px ;background-color:#00ff00 ;}
.nav{height: 100px;background-color: pink;}
.main{height: 800px;
background-color: #f00 ;margin-top: 20px;}
.section{height: 200px;
background-color:purple;margin-bottom: 20px;}
.aside {float: left;width: 30%;height: 100%;
background-color: yellow;}
.article {float: left;width: 70%;height: 100%;
background-color: yellowgreen;}
.footer {height: 200px;background-color:gray;}
</style>
<body>
/*网页结构
头部 logo 搜索框 导航栏
主体部分 商品展示 左右结构 左中右结构
尾部 赞助商信息 友情链接 版权信息 合作商
我们之前的布局全部使用div来布局然后设置类名使 用样式来控制布局
全部使用div布局的缺点
1.不利于SEO (搜索引擎优化)
2.布局没有一个统一的标准都是直接使用类名来控制的(语义不明确)
*/页面布局
<div class="header">
<div class="nav"></div>
</div>
<div class="main">
<div class="section">
<div class="aside"></div>
<div class="article"></div>
</div>
<div class="section">
<div class="aside"></div>
<div class="article"></div>
</div>
<div class="section">
<div class="aside" ></div>
<div class="article"></div>
</div>
</div>
<div class="footer"></div>
</body>
<style>
header {height: 200px ;background-color:#00ff00 ;}
nav{height: 100px;background-color: pink;}
main{height: 800px;
background-color: #f00 ;margin-top: 20px;}
section{height: 200px;
background-color:purple;margin-bottom: 20px;}
aside {float: left;width: 30%;height: 100%;
background-color: yellow;}
article {float: left;width: 70%;height: 100%;
background-color: yellowgreen;}
footer {height: 200px;background-color:gray;}
</style>
<body>
/*H5专门规定的布局标签
头部header
导航区域nav
主体部分main
小模块section
边栏框aside
正文框article
尾部区域footer
优势比div语义更明确
元素性质和div差不多都是属于块级元素
<!-- 头部标签-->
<header>
<nav>< /nav>
</header>
<!-- 主体部分-->
<main>
<section>
<aside></aside >
<article></article>
</section>
</main>
<!-- 尾部-->
< footer>< /footer>
新标签的兼容性
<style>
header{height: 200px;width: 200px;
background-color: #effe;}
</style>
<!-- Css HACK做条件判断 选择性引入-->
<!--[if lte IE 8]>
<script src="./html5shiv.js"></script>
<![endif]-->
<body>
头部header
导航区域nav
主体部分main
小模块section
边栏框aside
正文框article
尾部区域footer
优势比div语义更明确
元素性质和div差不多都是属于块级元素
<!-- 头部标签-->
<header>
<nav>< /nav>
</header>
<aaa>1111</aaa>
<!-- <img src="" alt=""><h2></h2> -->
<!-- <script src="./html5shiv.js"></script> -->
兼容性原理
< body>
<aaa>1111</aaa>
<!--浏览器对于不认识的标签也可以解析而且是被解析成行内元素span标签类似-->
<!-- 原理就是 使用js创建出来这些标签 然后把这些标签的display属性修改成block, 那么所有的浏览器都是一 样的了-->
<script>
// var bbb = document.createElement( "bbb" );
// bbb.innerHTML= "123" ;
// document.body.appendChild( "bbb" )
//创建出来的header标签是行内元素
var header = document.createElement( "header" );
//不管是不是浏览器原本就认识的标签 把它变成块级元素 其实就是跟div是一 样的header.style.display = "block" ;
document.body.append(header);
</script>
</body>
</html>
自定义属性
< body>
<!-- 自定义属性:使我们自己添加的 不是元素自带的属性-->
<!--当前的自定义属性写法的缺点:不好辨认
<!-- h5新增的对于自定义属性的界定
自定义属性前面加特有的标识: data-
当我们添加自定义属性时在自定义属性前添加data-
取值的时候去掉data-, 如果有多 个单词，那么去掉data-和其 他单词之间的一，转成驼峰命名法
-->
<div id= "box" class= "one" data-user- name= "张三”data -height=" 160cm” data-weight=" 60kg" data-gender="男”></div>
<script >
var box = document.getElementById("box" );
// console.log( box.getAttribute("height"));
//console.log( box.getAttribute( "weight" ));
console.log(box.dataset);
// console.log(box.dataset.name );
console.log(box.dataset.height);
console.log( box.dataset.userName);
表单新增
<body>
<!-- <input type="text">
<input type="password">
<input type="button" value= "按钮"> -->
<!-- h5里面新增了很多input的标签(type值) -->
<form action=" ">
<!-- 颜色的输入框-->
<input type=" color">
<!--专用来输入email必须是 email格式的数据如果把正输入设置为必填 那么可以设置required
这个email格式的输入框表面看起来和text是样的大师在提交的时候 会自动验证 是不是email
设置了required属性就是必填项 提交的时候 如果为空就会自动验证进行提示
<!-- <input type=" email" required> -->
<!--输入网址的-->
<!-- <input type= "url"> -->
<!--专数电话号码 在PC端看起来和text-样但是在移动端 type设置为tel时 会动弹出九宫格数字键盘-->
<!-- <input type="tel"> -->
<I-- 在PC端 只是比text框多了一个X，但是移动端输入内容后 键盘右下角的换行键会变成一 个放大镜或者搜索-->
<!-- <input type="search"> -->
<!-- 专输入日期的-->
<!-- <input type="date"> --><input type=" datetime - local">
<!--滑块-->
<!-- <input type=" range"> -->
<input type=" submit" value="提交" >
</form>
随机方块
<title>Document</title>
<style>
.ground {width: 898px;height: 600px;
background-color: skyblue; position: relative;}
</style>
</head>
< body >
<div class="ground" id= ground" ></div>
<script>
1.动态生成随机的div
2.添加属性
3. 添加到ground上面
// 1.获取元素
var ground = document.getElementById("ground" );
//使用两个变量来保存生成的div的宽高
var width = 20;
var height = 20;
// 5.生成随机坐标
var x = Math.floor(Math.random() * ground.offsetwidth / width) * width;
var y = Math.floor(Math.random() * ground.offsetHeight / height) * height;
// 2.生成div盒子
var div = document.createElement(" div" );
// 3.给生成盒子添加属性
div.style.position = "absolute" ;
div.style.left = x + "px";
div.style.top = y + "px";
div.style.width = width + "px" ;
div.style.height = height + "px" ;
div.style.backgroundColor ="green" ;
// 4.添加到ground上面
ground.appendChild(div);