HTML - 2

HTML - 2

HTML5 是新一代 HTML 标准，由万维网联盟 W3C 完成标准制定

在狭义上是最新一代的 HTML 标准，广义上是指整个前端

HTML5优势

  1. 针对 Javascript 新增了很多可操作的接口

  2. 新增了一些语义化标签、全局属性

  3. 新增了多媒体标签，可以很好地替代 flash

  4. 更加侧重语义化，对于 SEO 更友好

  5. 可移植性好，可以在大量应用在移动设备上

HTML5兼容性

支持 Chrome、Safari、Opera、Firefox 等主流浏览器

IE 必须是9及以上才仅部分支持 HTML5

HTML5新增语义化标签

新增布局标签

标签名 语义
header 头部
footer 脚部
nav 导航栏
article 文章、帖子、评论等
section 页面中的某段文字、文章中的某段文字
aside 侧边栏
main 文档的主要内容（几乎不同）
hgroup 包裹连续的标题（几乎不同）

article 和 section 的区别：

  1. artical 里面可以有多个 section
  2. section 强调分段，如果一块内容需要分成几段的时候，可用 section 元素
  3. article 比 section 更强调独立性，如果一块内容比较独立完整，应该使用 article

新增状态标签

尺度 <meter>

定义已知范围内的标量测量

<!-- 20-80是正常值：绿色；其它区间：黄色 -->
<meter max="100" min="0" value="50" low="20" high="80"></meter>

<span>手机电量：</span>
<!-- 90在80-100之间：绿色 80-100; 黄色 20-80; 红色 0-20 -->
<meter max="100" min="0" value="50" low="20" high="80" optimu="90"></meter>

进度 <progress>

显式某个任务的进度

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

新增列表标签

<option>

搜索框关键字提示

<form action="#">
    <input type="text" list="mydata">
    <button>搜索</button>
</form>
<datalist id="mydata">
	<option value="周杰伦">周杰伦</option>
    <option value="周冬雨">周冬雨</option>
    <option value="马冬梅">马冬梅</option>
    <option value="温兆伦">温兆伦</option>
</datalist>

<details> <summary>

问答，对专有名词的解释

<details>
	<summary>details</summary>
    <p>点击展开详情内容</p>
</details>

新增文本标签

文本注音

<ruby>
	<span>魑魅魍魉</span>
    <rt>chi mei wang liang</rt> <!-- 浏览器中会自动放到文字头上 -->
</ruby>

文本标记

呈现搜索结果

<p>
    你好，我是<mark>胡图图</mark>。
</p>

新增表单控件属性

  • placeholder

可用于：文本输入类表单控件

  • required 必填

可用于：文本输入类表单控件

单选框（加在一个上，表示必须选一个）

多选框（加在一个上，表示必须选那一个）

账号：<input type="text" name="account" placeholder="请输入账号" required autofocus>
  • autofocus 自动获取焦点

可用于：all

  • autocomplete 自动完成 （基于历史输入）

文本输入类表单控件，不能用在 密码 单选 多选 多行输入 上

账号：<input type="text" name="account" autocomplete="on"> <!-- off -->
  • pattern 填写正则表达
账号：<input 
          type="text" 
          name="account" 
          placeholder="请输入账号" 
          required 
          autofocus
          autocomplete="on"
          pattern="\w{6}">

限制不了多行输入

不加 required 也可以不遵守正则表达输入

input新增type属性值

  • type="email"

输入要符合邮箱格式，输入为空可以提交

  • type="url"

输入要符合url格式，输入为空可以提交

<form action="#">
    邮箱：<input type="email" name="email">
    url：<input type="url" name="url">
    <button>提交</button>
</form>
  • type="number"

输入要是数值，输入为空可以提交

数值：<input type="number" name="number" step="2" max="80" min="20">
  • type="search"

没有校验，可以清空输入，输入为空可以提交

搜索：<input type="search" name="keywords">
  • type="tel"

不用于pc，移动端只允许输入数字，输入为空可以提交

电话：<input type="tel" name="phone">
  • type="range"
光照强度：<input type="range" name="range" max="80" min="20" value="20">
  • type="color"

颜色选择器 (默认黑色)

颜色：<input type="color" name="color">
  • type="date" type=month type=week type=time

输入为空可以提交

日期：<input type="date" name="date">
  • type=datetime-local

日期+时间

form新增属性

<!-- 表单不做任何校验 -->
<form action="" novalidate>
    
</form>

新增视频标签

<video>

<!-- 尽量用css调整宽高 -->
<video src="" width="" height=""></video>

controls 播放控制条

muted 自动静音

autoplay 自动播放（必须静音：受网页媒体参与度影响）

loop 循环播放

poster 视频封面（大小要和视频一致）

preload 预加载

<video src="" controls muted autoplay loop
       poster="./封面.jpg"
       preload="none"></video>
       <!--
		metadata: 加载视频基本信息 
			auto: 自动预加载 -->

新增音频标签

<auto>

autoplay （一般不行，受网页媒体参与度影响）可以通过js完成自动播放

<auto src="" controls muted loop
      preload="auto"></auto>
		<!-- none metadata -->

可以通过 css 设置宽高（高度是留出空白，不推荐），<auto> 标签没有 width height 属性

新增全局属性

  • contenteditable 
 <div contentediable="true">
    hello 
</div>
  • draggable 配合 js
 <div draggable="true">
    hello 
</div>
  • hidden 不占位隐藏
 <div hidden>
    hello 
</div>
  • spellcheck 拼写检查（浏览器要打开）
 <div spellcheck="true">
    hello 
</div>

  • contextmenu 配合 js 设置右键菜单

  • data-*

 <div data-a="1">
    hello 
</div>

兼容性问题

<head>
    <!-- 让IE浏览器处于一个最优的渲染模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对一些国产的“双核”浏览器的设置，让浏览器优先使用webkit内核去渲染网页 -->
    
    <!--[if lt ie 9]> 
	<script src="./html5shiv.js"></script>
	<![endif]-->
</head>
posted @   wajiez  阅读(22)  评论(0)  编辑  收藏  举报
相关博文：
· HTML - 1
· CSS - 2
· html5
· HTML5
· HTML5新增属性
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示