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

百变鹏仔 3个月前 (10-18) #H5教程

文章标签表单

1.以前的盒子都有

标签，现在都用语义化的标签，例如：

头标签

导航栏标签

侧栏标签

文章内容标签

立即学习“前端免费学习笔记（深入）”；

页脚标签

章节、页眉、栏目

代码如下：

<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:默认显示内容

代码如下：

用户名：

运行效果：

点击提交按钮后：

文章推荐

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

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集