文档类型设定（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>