HTML5新增加的标签和表单新增属性的代码实例

来源：动视网责编：小采时间：2020-11-27 15:11:44

HTML5新增加的标签和表单新增属性的代码实例

HTML5新增加的标签和表单新增属性的代码实例:1.以前的盒子都有<p>标签，现在都用语义化的标签，例如：<header>头标签<nav>导航栏标签<aside>侧栏标签<article>文章内容标签<footer>页脚标签<section>章节、页眉、栏目代码如下：<hea

推荐度：

点击下载本文 文档为doc格式

导读HTML5新增加的标签和表单新增属性的代码实例:1.以前的盒子都有<p>标签，现在都用语义化的标签，例如：<header>头标签<nav>导航栏标签<aside>侧栏标签<article>文章内容标签<footer>页脚标签<section>章节、页眉、栏目代码如下：<hea

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>

运行效果：