前端基础-HTML5新特性

2020-3-10    seo达人

html5的新特点

1.语法更简单

a) 头部声明


<!doctype html>


b) 简化了字符集声明


<meta charset="utf-8">


2.语法更宽松

a) 可以省略结束符的标签


li、dt、dd、p、optgroup、option、tr、td、th


b) 可以完全省略的标签


html、head、body


3.标签语义化

增加了很多标签,在作页面的时候更加具有语义(定义了一些原本没有语义的div模块为有鲜明结构的语义模块)


a) <header>标记定义一个页面或一个区域的头部


b) <nav>标记定义导航链接


c) <article>标记定义一篇文章内容


d) <section>标记定义网页中一块区域


e) <aside>标记定义页面内容部分的侧边栏


f) <footer>标记定义一个页面或一个区域的底部


语义化标签图示


4.表单新增常用属性------要求掌握

required:必填


placeholder:输入内容提示


autofocus:自动获取焦点-----自动帮我们将光标点进去


<form method="post" action="http://www.baidu.com">

<!-- required 必填,必须的 -->

<!-- 自动获取焦点----自动将光标定位到表单中 -->

<input type="text" placeholder="请输入用户名" autofocus="autofocus" required="required" />

   <input type="submit" />

</form>



5.input新增type属性值

a) type=“email”,文本框中只能输入email地址




b) type=“date”,日期控件




c) type=“time”




d) type=“month”




e) type=“week”




f) type=“number”,唤醒数字键盘




g) type=“range”,滑块




h) type=“color”



日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档