学习Java HTML5-CSDN博客

本文链接：https://blog.csdn.net/weixin_45621552/article/details/139436073

HTML5新特性

定义文档类型

在文件的开头总是会有一个标签

语言	文档类型声明方式
html4
html5

新增语义化标签

标签	描述
	头部标签
	导航标签
	内容标签
	块级标签
	侧边栏标签
	尾部标签

<body>		
	<style type="text/css">
            header,nav,article,aside,footer,section{
                background-color: #87A442;
                text-align: center;
                border: black 1px solid;
                border-radius:20px;
                margin: 10px;
                padding: 10px;
            }

            header{
                height: 120px;
            }

            nav{
                height: 50px;
            }

            article{
                width: 46%;
                height: 120px;
                float: left;
            }

            aside{
                width: 46%;
                height: 120px;
                float: right;yu
            }

            footer{
                clear: both;
                height: 120px;
            }

            section{
                height: 70px;
            }
		
	</style>
	<header>头部标签 - header</header>
	<nav>导航标签 - nav</nav>
	<div>
		<article>内容标签 - article
			<section>块级标签 - section</section>
		</article>
		<aside>侧边栏标签 - aside</aside>
	</div>
	<footer>尾部标签 - footer</footer>
</body>

新增表单内容

<form action="#" method="post">
        日期选择器：<input type="date"/><br/>
        时间选择器：<input type="time"/><br/>
        邮箱输入框：<input type="email"/><br/>
	数字输入框：<input type="number" value="50" min="10" max="100" step="5"/><br/>
	URL输入框： <input type="url" list="url_list"/>
	<datalist id="url_list">
		<option label="W3School" value="http://www.w3school.com.cn" />
		<option label="谷歌" value="http://www.google.com" />
		<option label="百度一下" value="http://www.baidu.com" />
	</datalist><br/>
	
	<input type="submit" value="提交"/>
</form>