1.以前的盒子都有<p>标签，现在都用语义化的标签，例如：
<header>头标签
<nav>导航栏标签
<aside>侧栏标签
<article>文章内容标签
立即学习“前端免费学习笔记（深入）”；
<footer>页脚标签
<section>章节、页眉、栏目
代码如下：
<header>头部</header> <nav>导航</nav> <section> <aside>左侧栏</aside> <article>文章</article> </section> <footer>页脚</footer>
添加样式：
header,nav,section,footer{
width: 1300px;
height: 50px;
border: solid #08050a 1px;
/*margin:auto;*/
margin-bottom: 5px;}
aside,article{
border: solid red 1px;
height: 100%;
margin:0;}
aside{
float: left;
width:30%;}
article{
float:left;
width: 60%;}效果如下：
2.表单新增的三个属性：
Required:自动check内容
autofocus：自动获取焦点（页眉一打开就获取到焦点，而不是将光标移动到上面才获取到）
placeholder:默认显示内容
代码如下：
<form action="post"> 用户名：<input type="text" name="username" required="required" placeholder="请输入用户名" autofocus="autofocus"> <br> <input type="submit" name="submit" value="提交"> </form>
运行效果：
点击提交按钮后：
以上就是HTML5新增加的标签和表单新增属性的代码实例的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
471
