HTML5新增特性
文档类型设定(document)
- HTML:sublime输入 html:4s
- XHTML:sublime输入 html:xt
- HTML5:sublime输入 html5:5 <!DOCTYPE html>
字符设定
- <meta http-equlv="charset" content="utf-8">:HTML与XHTML中建议这样去写
- <meta charset="UTF-8">:HTML5中的标签建议这样写
HTML5 中常用新标签
W3C手册中文官网:https://www.w3school.com.cn/
- header:定义文档的页眉 头部
- nav:定义导航链接的部分
- footer:定义文档或节的页脚 底部
- article:定义文章
- section:定义文档中的节(section、区段)
- aside:定义其所处内容之外的内容 侧边
- datalist:标签定义选项列表。与input元素配合使用
- filedset:元素可将表单内的相关元素分组,打包。与legend搭配使用
- 、、、
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <header>语义:定义文档的页眉 头部</header> <nav>语义:定义导航链接的部分</nav> <footer>语义:定义文档或节的页脚 底部</footer> <article>语义:定义文章</article> <section>语义:定义文档中的节(section、区段)</section> <aside>语义:定义其所处内容之外的内容 侧边</aside> <!-- input里面用list、datalist里面用id 来实现和input的链接 --> <!-- 有点类似与下拉菜单,但比select友好,会有提示信息 --> <input type="text" value="输入明星" list="star"/> <datalist id="star"> <option>杨紫</option> <option>唐嫣</option> <option>王俊凯</option> <option>胡歌</option> <option>王嘉尔</option> </datalist> <fieldset> <legend>用户登录</legend> 用户名:<input type="text"><br/><br/> 密 码:<input type="password"> </fieldset> </body> </html>
页面展示如下
HTML5新增的input type属性值
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <fieldset> <legend>HTML5新增的input type类型</legend> <form action=""> <!--aa@aa.com --> 邮箱:<input type="email" /> <!--移动端弹出数字键盘 --> 手机:<input type="tel" /><br><br> <!--只能接收数字 --> 数字:<input type="number" /> <!--只能输入网址格式 --> url:<input type="url" /><br><br> <!--与之前不同之处:输入框会在输入字符后,在最右边出现一个小 × 号,实现快速清除输入框 --> 搜索:<input type="search" /> <!--区域:其实就是一个滑块 --> 区域:<input type="range" /><br><br> <!-- 获取小时、分钟 --> 时间:<input type="time" /> <!-- 年月日 --> 年月日:<input type="date" /><br><br> <!-- 月份 --> 月份:<input type="month" /> <!-- week:周 --> 星期:<input type="week" /><br><br> <!-- color:颜色 会自动弹出调色板 --> 颜色:<input type="color" /><br><br> </form> </fieldset> </body> </html>
页面展示如下
常用新属性
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- placeholder:占位符;默认为灰色;当用户输入时,里面的文字自动消失;删除所有文字,提示信息自动返回 --> <!-- autofocus:自动获取焦点 --> <!-- autocomplete:自动记录完成; 1、需要提交按钮; 2、这个表单必须给定name值; 3、autocomplete="on/off":on:自动记录;off:关掉自动记录 --> <!-- required:必填项,不能为空,为空时会有提示 --> <!-- accesskey:规定激活(是元素获得焦点)元素的快捷键。 当按下键盘中的alt+字母(下面示例为s) 的组合键,便会自动将光标放在输入框。 --> 用户名:<input type="text" placeholder="请输入用户名" autofocus autocomplete name="userName" required accesskey="s" /> <input type="submit"/> <!-- multiple:多文件上传 --> 上传头像:<input type="file" multiple/> </body> </html>