|
<!--
1. H5不是新语言，而是html第五次重大修改的第五个版本。
2. 首页主流的浏览器都支持H5，（谷歌，火狐，苹果） IE9以上支持H5
3. 改变了用户与文档的交互方式，多媒体，video，audio canvas
4. 增加了其他的新特性，语义特性，本地存储特性，网页多媒体，二维三维，特效（过度，动画）
5. 相对于h4
1. 进步：抛弃的一些不常用的标记的属性。
2. 新增了一些标记和属性--表单 视频 音频等···
3. 从代码结构而言，h5的网页结构更简洁。
-->
html5 简单布局
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100%;
}
header {
width: 100%;
height: 50px;
background-color: red;
}
nav {
height: 36px;
width: 100%;
background-color: black;
color: #fff;
}
main {
width: 100%;
height: 500px;
background-color: rebeccapurple;
}
main>article {
float: left;
width: 70%;
height: 100%;
background-color: salmon;
}
main>aside {
float: left;
width: 30%;
height: 100%;
background-color: green;
}
footer {
background-color: hotpink;
width: 100%;
height: 40px;
}
</style>
<body>
<header>头部</header>
<nav>导航</nav>
<main>
<article>左边</article>
<aside>右边</aside>
</main>
<footer>底部</footer>
</body>
表单type属性
<form>
用户名: <input type="text" placeholder="用户名"><br>
密码: <input type="password" placeholder="密码"><br>
邮箱: <input type="email" placeholder="邮箱"><br>
时间: <input type="date" placeholder="时间"><br>
电话: <input type="tel" placeholder="电话"><br>
网址: <input type="url" placeholder="网址"><br>
请输入商品: <input type="search" placeholder="商品"><br>
数字: <input max="10" min="5" value="8" type="number" placeholder="数字"><br>
范围: <input type="range" max="100" min="1" value="1" placeholder="范围"><br>
颜色: <input type="color" placeholder="颜色"><br>
<!-- 提交 -->
<input type="submit" value="提交">
</form>
来源：https://www.cnblogs.com/cheng520/p/13786204.html |
发表于 2020-10-9 15:55:00