前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端基础-HTML5新特性

前端基础-HTML5新特性

作者头像
cwl_java
发布2020-04-07 15:31:49
6240
发布2020-04-07 15:31:49
举报
文章被收录于专栏:cwl_Java

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:自动获取焦点-----自动帮我们将光标点进去

代码语言:javascript
复制
<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”

示意图

在这里插入图片描述
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • html5的新特点
    • 1.语法更简单
      • 2.语法更宽松
        • 3.标签语义化
          • 4.表单新增常用属性------要求掌握
            • 5.input新增type属性值
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档