欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-14 16:29:46
...
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%;}

效果如下:HTML5新增加的标签和表单新增属性的代码实例

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新增加的标签和表单新增属性的代码实例

点击提交按钮后:

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

以上就是HTML5新增加的标签和表单新增属性的代码实例的详细内容,更多请关注其它相关文章!