龙一品 发表于 2023-10-3 19:52:54

HTML5跟HTML的区别；我个人觉得HTML5不是增加了一些标签，还有什么功能？

HTML5跟HTML的区别；我个人觉得HTML5不是增加了一些标签，还有什么功能？

sanqiren 发表于 2023-10-3 19:53:14

HTML5是HTML的第五个版本，HTML5中删除或修改了许多元素。今天来学习HTML5的新特性。
一、概述

HTML5的新增特性主要是针对以前的不足，增加了一些新的标签和表单以及表单属性等。
很多新特性都有兼容性问题，基本是IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。
二、语义化标签 （★★）

以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的
<div class=“header”> </div>
<div class=“nav”> </div>
<div class=“content”> </div>
<div class=“footer”> </div>发展到了HTML5后，新增了一些语义化标签，这样的话更加有利于浏览器的搜索引擎搜索，也方便了网站的seo（Search Engine Optimization，搜索引擎优化），下面就是新增的一些语义化标签
- `<header>` 头部标签
- `<nav>` 导航标签
- `<article>` 内容标签
- `<section>` 定义文档某个区域
- `<aside>` 侧边栏标签
- `<footer>` 尾部标签
http://pic1.zhimg.com/v2-d91a0e3f0ebd7a4d9f0e4e44668ea6db_r.jpg?source=1940ef5c
三、多媒体标签

多媒体标签分为 音频 **audio** 和视频 **video** 两个标签 使用它们，我们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件了。
因为多媒体标签的 属性、方法、事件比较多，因此我们需要什么功能的时候，就需要去查找相关的文档进行学习使用。

http://pica.zhimg.com/v2-6fc6ec3292e4582db7906141a6596169_r.jpg?source=1940ef5c
四、视频标签video（★★★）

基本使用
当前 元素支持三种视频格式： 尽量使用 mp4格式
使用语法：
html <video src="media/mi.mp4"></video>

http://pica.zhimg.com/v2-d6e2409f4b9a4762daf82f05ca3c3e2e_r.jpg?source=1940ef5c
兼容写法

由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法，这种写法了解一下即可
<videocontrols="controls"width="300">
    <source src="move.ogg" type="video/ogg" >
    <source src="move.mp4" type="video/mp4" >
    您的浏览器暂不支持 <video> 标签播放视频
</ video >上面这种写法，浏览器会匹配video标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本。
video常用属性


http://pic1.zhimg.com/v2-be27e4df5ad4afbdb946e2da2594716d_r.jpg?source=1940ef5c
属性有很多，有一些属性需要大家重点掌握。
- `autoplay`自动播放
- 注意： 在google浏览器上面，默认禁止了自动播放，如果想要自动播放的效果，需要设置 muted属性
- `width`宽度
- `height`高度
- `loop`循环播放
- `src`播放源
- `muted` 静音播放示例代码：
<video src="media/mi.mp4" autoplay="autoplay" muted="muted"loop="loop" poster="media/mi9.jpg"></video>五、音频标签-audio

基本使用：当前元素支持三种视频格式： 尽量使用mp3格式
使用语法：
<audio src="media/music.mp3"></audio>
http://picx.zhimg.com/v2-d6e2409f4b9a4762daf82f05ca3c3e2e_r.jpg?source=1940ef5c
兼容写法：
由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法，这种写法了解一下即可
< audio controls="controls">
    <source src="happy.mp3" type="audio/mpeg" >
    <source src="happy.ogg" type="audio/ogg" >
    您的浏览器暂不支持 <audio> 标签。
</ audio>上面这种写法，浏览器会匹配audio标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本
audio常用属性


http://picx.zhimg.com/v2-2d7f1dd58f55d7fb2ff299a126ebecbd_r.jpg?source=1940ef5c
<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>六、总结

- 音频标签和视频标签使用方式基本一致
- 浏览器支持情况不同
- 谷歌浏览器把音频和视频自动播放禁止了
- 我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以（可以通过JavaScript解决）
- 视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性

七、新增表单元素（★★）

在H5中，帮我们新增加了很多类型的表单，这样方便了程序员的开发

http://pic1.zhimg.com/50/v2-b4038cd0a6016f12c45bb4a70770e65b_720w.jpg?source=1940ef5c
代码类型：
<!-- 我们验证的时候必须添加form表单域 -->
<form action="">
    <ul>
      <li>邮箱: <input type="email" /></li>
      <li>网址: <input type="url" /></li>
      <li>日期: <input type="date" /></li>
      <li>时间: <input type="time" /></li>
      <li>数量: <input type="number" /></li>
      <li>手机号码: <input type="tel" /></li>
      <li>搜索: <input type="search" /></li>
      <li>颜色: <input type="color" /></li>
      <!-- 当我们点击提交按钮就可以验证表单了 -->
      <li> <input type="submit" value="提交"></li>
    </ul>
</form>常见输入类型：
text password radio checkbox button file hidden submit reset image新增输入类型：

http://picx.zhimg.com/v2-fb627fa7c7d2b6201eb3a25f4e3f88ff_r.jpg?source=1940ef5c
类型很多，我们现阶段重点记忆三个：numbertelsearch
八、往期30篇合集


[*]前端HTML第一天：什么是网页？什么是HTML？网页怎么形成？
[*]HTML标签大全
[*]前端学习：表格学习，附练习+源码
[*]前端学习之列表，附送全套源码
[*]CSS入门最全笔记
[*]CSS样式表
[*]CSS之emmet语法
[*]CSS的复合选择器
[*]CSS的显示模式
[*]CSS背景：颜色、图片、平铺、背景图片位置、背景图像
[*]CSS三大特性：叠层性、继承性、优先级
[*]前端学习之CSS盒子模型以及PS基础
[*]CSS之圆角边框、盒子阴影、文字阴影
[*]CSS之浮动知识点汇总
[*]CSS前端基础了解PS切图
[*]CSS属性书写顺序（重点）
[*]CSS练手之学成在线页面制作
[*]CSS定位的4种分类
[*]CSS综合案例：学成在线模块添加
[*]HTML+CSS之定位（position）的应用
[*]HTML+CSS案例：淘宝轮播图
[*]CSS之元素的显示与隐藏
[*]HTML+CSS综合案例：土豆网鼠标经过显示遮罩
[*]【重点】CSS之精灵图
[*]CSS字体图标
[*]CSS三角以及京东三角案例
[*]CSS用户界面样式源码
[*]CSS之vertical-align 属性应用
[*]CSS：溢出的文字省略号显示
[*]CSS常见布局技巧+案例

dfo2545 发表于 2023-10-3 19:53:46

iPhoneX 和 iPhone 有什么区别？
我个人觉得 iPhoneX 不就是加了一个刘海，还有什么功能？
市场总是在不断变化，iPhone 需要不断出新的版本满足人们新的需求，一个标准也是。

http://picx.zhimg.com/v2-c432a469f3b55cd393da57f539c87726_r.jpg?source=1940ef5c
HTML5 是 HTML 的一个版本，当然以后还会出现 HTML5.5、HTML6 或 HTML2020。。。
HTML5 除了新增几个标签、也增加了很多接口。

摘录：
HTML5 是定义 HTML 标准的最新的版本。 该术语表示两个不同的概念：

[*]它是一个新版本的HTML语言，具有新的元素，属性和行为，
[*]它有更大的技术集，允许更多样化和强大的网站和应用程序。这个集合有时称为HTML5和朋友，通常缩写为HTML5。
设计为所有Open Web开发人员都可以使用，此引用页面链接到许多关于HTML5技术的资源，根据其功能分为几个组。

[*]语义：能够让你更恰当地描述你的内容是什么。
[*]连通性：能够让你和服务器之间通过创新的新技术方法进行通信。
[*]离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。
[*]多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。
[*]2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。
[*]性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用。
[*]设备访问 Device Access：能够处理各种输入和输出设备。
[*]样式设计: 让作者们来创作更加复杂的主题吧！
自己去看看吧：HTML5

另外，HTML5 随着移动互联网的发展现在已经普及。
HTML5 算是一个老技术了。

gysldj 发表于 2023-10-3 19:54:10

表面上是标签的改动，但实际上应该是改动这些标签后所带来的影响，这才是html5标准提出的意义。html5已经不是SGML的子集，主要是关于语义化以及离线存储、位置、多任务等功能的增加。主要的变化有：

[*]简单的声明
       因为不是SGML的子集，不需要对DTD的引用，所以有了更简化的Doctype声明

[*]更好的语义特性
      增加了<header>、<footer>等新的内容标签，使网站结构更加清晰，更清楚每块内容是什么，这样也有利于搜索引擎分析页面，改善SEO效果

[*]更全面的表单特性
   表单中增加了calendar、date、time、email、url、search等一堆属性，有了这些新属性，开发表单时真的会方便很多

[*]很多新的API
      如用于及时绘图的canvas标签，好地替代了Flash和Silverlight；用于媒介回放的video和audio标签，还有离线数据库存储（localStorage，sessionStorage）等

[*]新技术
       webworker，提供了JavaScript多线程解决方案；websocket,解决浏览器与后台服务器双向通讯问题；Geolocation，实现地理位置定位等

[*]删除可用CSS替代的以及对可用性产生负面影响的标签
       如font,big,center以及frame、frameset等

df652 发表于 2023-10-3 19:54:15

分广义和狭义的理解
1.狭义的理解HTML5就是新的html协议，作为一个超文本传输协议，就是多了几个标签而已。
2.广义理解HTML5则是指与html5同一时期诞生的新的一系列Web组件，包括css3，Websocket，jsAPI等
后来广义上的这些东西一般称为H5，事实上H5是广义HTML5的缩写，这个时候HTML5一般指狭义的html协议。
很多答主说的HTML5除了标签带还有各种东西其实应该指H5而不是HTML5

ttitp 发表于 2023-10-3 19:54:20

HTML5 功能全览：HTML5

不要以为 HTML5 只是添加了一些标签。
页: [1]
查看完整版本: HTML5跟HTML的区别；我个人觉得HTML5不是增加了一些标签，还有什么功能？