本文摘自PHP中文网,作者黄舟,侵删。
1.以前的盒子都有<p>标签,现在都用语义化的标签,例如:<header>头标签
<nav>导航栏标签
<aside>侧栏标签
<article>文章内容标签
<footer>页脚标签
<section>章节、页眉、栏目
代码如下:
1 2 3 4 5 6 7 | < header >头部</ header >
< nav >导航</ nav >
< section >
< aside >左侧栏</ aside >
< article >文章</ article >
</ section >
< footer >页脚</ footer >
|
添加样式:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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:默认显示内容
代码如下:
1 2 3 4 5 | < form action = "post" >
用户名:< input type = "text" name = "username" required = "required" placeholder = "请输入用户名" autofocus = "autofocus" >
< br >
< input type = "submit" name = "submit" value = "提交" >
</ form >
|
运行效果:
点击提交按钮后:
以上就是HTML5新增加的标签和表单新增属性的代码实例的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
浅谈HTML5新增及移除的元素
HTML5音频与视频问题及解决方法
HTML5中创建和返回新的文本轨道的方法
HTML5加载时的等待动画效果制作
什么是notifications?HTML5 notifications桌面提醒
html中的title是什么意思?
利用html实现一个个人信息表的网页(代码实例)
HTML5中设置或返回浏览器应当显示标准的音视频控件的属性controls
HTML5与html4的区别是什么
HTML5中audio与video标签的使用
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » HTML5新增加的标签和表单新增属性的代码实例