HTML5——HTML5新标签与特性

起风了

兼容性问题
文档类型设定
字符设定
常用新标签
新增的input type属性值：
常用新属性
综合案例

兼容性问题

文档类型设定

document
- HTML: sublime 输入 html:4s
- XHTML: sublime 输入 html:xt
- HTML5 sublime 输入 html:5 ！

字符设定

：HTML与XHTML中建议这样去写
：HTML5的标签中建议这样去写

常用新标签

w3c 手册中文官网 : http://w3school.com.cn/

header：定义文档的页眉头部
nav：定义导航链接的部分
footer：定义文档或节的页脚底部
article：定义文章。
section：定义文档中的节（section、区段）

aside：定义其所处内容之外的内容侧边

<header> 语义 :定义页面的头部  页眉</header>
<nav>  语义 :定义导航栏 </nav>
<footer> 语义: 定义 页面底部 页脚</footer>
<article> 语义:  定义文章</article>
<section> 语义： 定义区域</section>
<aside> 语义： 定义其所处内容之外的内容 侧边</aside>

datalist 标签定义选项列表。请与 input 元素配合使用该元素

<input type="text" value="请输入明星" list="star"/><datalist id="star"><option value="刘德华">刘德华</option><option value="刘若英">刘若英</option><option value="刘晓庆">刘晓庆</option><option value="戚薇">戚薇</option><option value="戚继光">戚继光</option></datalist>

fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用

<fieldset><legend>用户登录</legend>  标题用户名: <input type="text"><br /><br />密　码: <input type="password">
</fieldset>

新增的input type属性值：

类型	使用示例	含义
email	<input type=“email”>	输入邮箱格式
tel	<input type=“tel”>	输入手机号码格式
url	<input type=“url”>	输入url格式
number	<input type=“number”>	输入数字格式
search	<input type=“search”>	搜索框（体现语义化）
range	<input type=“range”>	自由拖动滑块
time	<input type=“time”>	小时分钟
date	<input type=“date”>	年月日
datetime	<input type=“datetime”>	时间
month	<input type=“month”>	月年
week	<input type=“week”>	星期年

常用新属性

属性	用法	含义
placeholder	< input type=“text” placeholder=“请输入用户名”>	占位符当用户输入的时候里面的文字消失删除所有文字，自动返回
autofocus	< input type=“text” autofocus>	规定当页面加载时 input 元素应该自动获得焦点
multiple	< input type=“file” multiple>	多文件上传
autocomplete	< input type=“text” autocomplete=“off”>	规定表单是否应该启用自动完成功能有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮 2.这个表单您必须给他名字
required	< input type=“text” required>	必填项内容不能为空
accesskey	< input type=“text” accesskey=“s”>	规定激活（使元素获得焦点）元素的快捷键采用 alt + s的形式

综合案例

<form action=""><fieldset><legend>学生档案</legend><label for="userName">姓名:</label><input type="text" name="userName" id="userName" placeholder="请输入用户名"> <br><label for="userPhone">手机号码:</label><input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br><label for="email">邮箱地址:</label><input type="email" required name="email" id="email"><br><label for="collage">所属学院:</label><input type="text" name="collage" id="collage" list="cList" placeholder="请选择"><br><datalist id="cList"><option value="前端与移动开发学院"></option><option value="java学院"></option><option value="c++学院"></option></datalist><br><label for="score">入学成绩:</label><input type="number" max="100" min="0" value="0" id="score"><br><form action=""><fieldset><legend>学生档案思密达</legend><label>姓名: <input type="text" placeholder="请输入学生名字"/></label> <br /><br /><label>手机号: <input type="tel" /></label> <br /><br /><label>邮箱: <input type="email" /></label> <br /><br /><label>所属学院:  <input type="text" placeholder="请选择学院" list="xueyuan"/><datalist id="xueyuan"><option>java学院</option><option>前端学院</option><option>php学院</option><option>设计学院</option></datalist><br /><br /><label>出生日期:   <input type="date" /></label> <br /><br /><label>成绩:  <input type="number" /></label> <br /><br /><label>毕业时间:  <input type="date" /></label> <br /><br /><input type="submit" />  <input type="reset" /></fieldset></form><label for="inTime">入学日期:</label><input type="date" id="inTime" name="inTime"><br><label for="leaveTime">毕业日期:</label><input type="date" id="leaveTime" name="leaveTime"><br><input type="submit"></fieldset>
</form>

HTML5——HTML5新标签与特性相关推荐

浅谈HTML5+css3新标签和特性
HTML5新标签与特性什么是H5 H5并不是新的语言,而是html语言的第五次重大修改–版本支持:所有的主流浏览器都支持h5.(chrome,firefox,safari...).IE9及以上支持 ...
HTML5新标签与特性
HTML5新标签与特性 1.兼容性问题(ie9以上的版本) [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8hkif4aQ-1647847660818)(C:\User ...
HTML5新标签与特性（笔记）
HTML5新标签与特性前言新增语义化标签新增标签属性新增的input的type属性值多媒体标签 embed audio video 字体图标前言 HTML5 : HTML 标准的最新版 ...
HTML5新标签及特性
HTML5 html经过了第5次重大改版,增加了一些语义化的标签高版本浏览器支持,ie9以下不支持, html5是向后兼容的,原来html4的标签仍然可以用 1.新特性新增语义化元素新增表单相 ...
html5添加新标签,HTML5新添加的标签及用
HTML5和HTML其实是很类似的,但是有些内容有发生了改变,今天我学习了一下HTML5发现还是挺好学的,只需有html+css基础即可以,今天知识看了下新的标签. 一.定义文档类型在文件的开头总是 ...
html5shiv主要解决IE6-8 无法识别HTML5的新标签，父节点不能包裹子元素，以及应用CSS样式...
html5shive html5shiv主要IE6-8解决: 1,HTML5提出的新的元素不被IE6-8识别. 2,这些新元素不能作为父节点包裹子元素, 3,并且不能应用CSS样式.让CSS 样式应用 ...
html5 在新标签页打开,Chrome，Javascript，window。在新标签页中打开
小编典典您不能直接控制它,因为它是由Internet Explorer用户控制的选项. 使用Window.open使用不同的窗口名称打开页面将在新的浏览器窗口(如弹出窗口)中打开,或者在用户配置的浏 ...
HTML语义化：HTML5新标签——template
一.前言当我们使用String-base的模板引擎(如Handlebars.js等)时,要么就通过外部文件存放模板文本,需要时再通过XHR或script标签加载进来:要么通过<script t ...
html5中新增标签的兼容性如何设置,HTML5新标签的兼容性处理
普通浏览器普通不支持HTML5新标签的浏览器 -- 能正常解析,但会当初成 inline 元素对待在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,所以我们只 ...

HTML5——HTML5新标签与特性

起风了

兼容性问题

文档类型设定

字符设定

常用新标签

新增的input type属性值：

常用新属性

综合案例

HTML5——HTML5新标签与特性相关推荐

最新文章

热门文章