Web前端学习——HTML5属性

最新推荐文章于 2024-06-21 10:30:00 发布

XUPT-前端在逃工程师

最新推荐文章于 2024-06-21 10:30:00 发布

阅读量647

点赞数 1

分类专栏： html 文章标签： html5

本文链接：https://blog.csdn.net/Dimuzero/article/details/109551243

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML5

一.介绍 HTML5

HTML , HTML 4.01的上一个版本诞生于 1999 年。

HTML5是HTML最新的修订版本，是W3C 与 WHATWG 合作的结果，2014年10月由万维网联盟（W3C）完成标准制定，是HTML4的升级版。

HTML5的设计目的是为了在移动设备上支持多媒体，HTML5适用于PC端和移动端，相比较于HTML4，HTML5语义化更明确。

移动端使用相对单位： rem em
移动端布局： flex(弹性布局) 多列布局移动端也可以使用固定布局

二.HTML5的使用

如果浏览器不识别html5 可以用csshack来做兼容性处理：

1.Sjoerd Visscher 创建的 “HTML5 Enabling JavaScript”, " shiv" 来解决该问题:

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
  </script>
<![endif]-->

注意：国内用户请使用本站静态资源库（Google 资源库在国内不稳定下面这个处理方案更好）

<!--[if lt IE 9]>
  <scriptsrc="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js">
  </script>
<![endif]-->

三.HTML5新元素

1.canvas绘图元素

JS会使用canvas api来绘图，用来做canvas-cocos2d游戏引擎，网页游戏开发，绘制网页特效。

2.多媒体元素

audio 音频播放器
video 视频播放器

属性：
autoplay 自动播放
controls 控制器
loop 循环播放
muted 静音
source 类似于src

3.input表单元素

3.1input类型

a.Input 类型: color

在input字段主要用于选取颜色

<input type="color">

在这里插入图片描述

b.Input 类型: date

date 类型允许你从一个日期选择器选择一个日期。

<input type="date">

在这里插入图片描述

c.Input 类型: datetime

datetime 类型允许你选择一个日期(UTC 时间)。

<input type="datetime">

在这里插入图片描述

d.Input 类型: datetime-local

datetime-local 类型允许你选择一个日期和时间 (无时区).

<input type="datetime-local">

在这里插入图片描述

e.Input 类型: email

email 类型用于应该包含 e-mail 地址的输入域。

<form action="">
  <input type="email">
  <input type="submit">
</form>

在这里插入图片描述

f.Input 类型: month

month 类型允许你选择一个月份。

<input type="month">

在这里插入图片描述

g.input 类型 range

range是一个进度条框

<input type="range">

在这里插入图片描述

g.input 类型 time

time 类型允许你选择一个时间。

<input type="time">

在这里插入图片描述

h.Input类型 week

week 类型允许你选择周和年。

<input type="week">

在这里插入图片描述

3.2 表单属性

a.autocomplete

记录下上次提交的表单数据，当再次输入时智能提示

on 开启表单输入智能提示
off 关闭智能提示

b.novalidate

不验证表单

c.datalist

通过ID进行绑定

<input type="text" list="ipt" />
    <datalist id="ipt">
      <option>a</option>
      <option>ab</option>
      <option>abc</option>
      <option>abcd</option>
      <option>abcde</option>
      <option>abcdef</option>
  </datalist>

在这里插入图片描述

d.pattern

pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。

<form action="#">
   <input type="text" pattern="\d+" title="请输入纯数字...">
   <input type="submit">
</form>

在这里插入图片描述

d.placeholder

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

<form action="#">
        提示
        <input type="text" required>
        <input type="submit">
    </form>

在这里插入图片描述

e.required

required 属性规定必须在提交之前填写输入域（不能为空）。

<form action="#">
        不能为空
        <input type="text" placeholder="这里在提示哦">
        <input type="submit">
    </form>

在这里插入图片描述

4.HTML5中新的语义元素

许多现有网站都包含以下HTML代码： div id=“nav”, div class=“header”, 或者 div id=“footer”, 来指明导航链接, 头部, 以及尾部.HTML5 提供了新的语义元素来明确一个Web页面的不同部分
在这里插入图片描述

相当于div

article 标签定义相对页面独立的区域
aside 标签定义侧边栏的
bdi 标签定义相对文本独立（隔离类似span）
header 定义头部区域
footer 定义底部区域
nav 标签定义导航
sesstion 定义区段标签
time 时间标签
address 地址标签

特别的几个结构标签

a.dialog

	提示信息

<dialog open>
        信息提示
    </dialog>

在这里插入图片描述
b.进度条

	meter    progress

<meter value="10" max="100"></meter>
<progress value="20" max="100"></progress>

在这里插入图片描述
c.突出显示

  <mark>  突出显示

在这里插入图片描述
d.details

 描述文档的细节

<details>
            <summary>个人信息</summary>
            <p>
                标签规定了用户可见的或者隐藏的需求的补充细节。
                标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在
                元素的内容对用户是不可见的，除非设置了 open 属性。
            </p>
        </details>