html5最快熟练掌握并上手

最新推荐文章于 2022-10-17 20:35:42 发布
最新推荐文章于 2022-10-17 20:35:42 发布
阅读量154 收藏
点赞数
分类专栏： 前端基础 文章标签： html5 简介 定义 优势 劣势 语义化 新增 多媒体 音频 视频 input 表单属性 前景 趋势 现状 拓展 概念 广义 拓展 小结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013946061/article/details/112450847
版权

文章目录

1. 重点提炼

  • 【了解】什么是HTML5
  • 【理解】HTML5新标签
  • 【记忆】HTML5新增表单元素属性

2. 什么是 HTML5

2.1 HTML版本

image-20200816092217512


2.2 html5简介

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。用于取代HTML4与XHTML的新一代标准版本，所以叫HTML5。作为新的html语言，具有新的元素，属性和行为。


XHTML 可扩展超文本标记语言
XHTML是一种增强了的HTML，它的可扩展性和灵活 性将适应未来网络应用更多的需求 。


HTML5
HTML5的设计目的是为了在移动设备上支持多媒体，有更大的技术集，允许更多样化和强大的网站和应用程序。

增加了新特性：语义特性，本地存储特性，设备兼容特 性，连接特性，网页多媒体特性，三维、图形及特效特 性，性能与集成特性，CSS3特性。

废弃一些元素和属性比如 font 、center 等…


2.3 HTML5 的概念与定义

  • 定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML
  • 两个概念：
    • 是一个新版本的 HTML 语言，定义了新的标签、特性和属性
    • 拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5

2.4 HTML5 拓展了哪些内容

  • 语义化标签
  • 本地存储
  • 兼容特性
  • 2D、3D
  • 动画、过渡
  • CSS3 特性
  • 性能与集成

2.5 HTML5 的现状

绝对多数新的属性，都已经被浏览器所支持，最新版本的浏览器已经开始陆续支持最新的特性，

总的来说：HTML5 已经是大势所趋


2.6 优势与劣势

HTML5 优势

提高可用性和改进用户的友好体验
更好的语义化标签
可以给站点带来更多的多媒体元素(视频和音频)
可以很好的替代FLASH和Silverlight
当涉及到网站的抓取和索引的时候，对于SEO很友好；
将被大量应用于移动应用程序和游戏
可移植性好


HTML5 劣势

该标准并未能很好的被PC端浏览器所支持


2.7 HTML5前景趋势

  • 移动优先
  • 游戏开发者领衔“主演”

image-20200816092951427


2.8 广义的HTML5


2.9 小结

  • HTML5就是HTML 版本的第五次重大修改，目的为了适用移动端的发展
  • 版本： HTML4– XHTML – HTML5
  • 简单了解 HTML5 的优缺点
  • HTML5 前景移动端优先
  • 广义的HTML5 是 HTML5本身 + CSS3 +JavaScript

3. HTML5 新增标签

3.1 什么是语义化

以前布局，我们基本用div来做。 div 对于搜索引擎来说，是没有语义的。

<div class=“header”> </div>
<div class=“nav”> </div>
<div class=“content”> </div>
<div class=“footer”> </div>

3.2 新增了那些语义化标签

  • header — 头部标签
  • nav — 导航标签
  • article — 内容标签
  • section — 块级标签
  • aside — 侧边栏标签
  • footer — 尾部标签

主要目的是帮助搜索引擎更快抓取信息。

在这里插入图片描述

3.2.1 example01

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        header,
        nav,
        section {
            display: block;
            height: 120px;
            background-color: pink;
            margin: 10px;
        }
    </style>

</head>

<body>
    <header> header</header>
    <header> header</header>
    <nav> nav </nav>
    <section></section>
</body>

</html>

image-20200816095537621

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.08
Branch： branch04
commit description：a2.08（example01—— HTML5新增语义标签）

tag：a2.08


3.3 使用语义化标签的注意

  • 语义化标签主要针对搜索引擎
  • 新标签可以使用一次或者多次
  • 在 IE9 浏览器中，需要把语义化标签都转换为块级元素
  • 语义化标签，在移动端支持比较友好，
  • 另外，HTML5 新增的了很多的语义化标签，随着课程深入，还会学习到其他的

4. 多媒体音频标签重点提炼

  1. 多媒体标签有两个，分别是

    • 音频 – audio
    • 视频 – video

  2. audio 标签说明

    • 可以在不使用标签的情况下，也能够原生的支持音频格式文件的播放，
    • 但是：播放格式是有限的

  3. audio 支持的音频格式

    • audio 目前支持三种格式

  4. audio 的参数


5. 多媒体视频标签

多媒体标签包含两个，具体如下：

  • 音频：<audio>
  • 视频：<video>

使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的 flash 和其他浏览器插件


5.1 audio音频标签

HTML5 在不使用插件的情况下也可以原生的支持音频格式文件的播放，当然支持格式是有限的。


5.1.1 音频格式

当前，<audio>元素支持三种音频格式：

格式IE9Firefox3.5Opera10.5Chrome3.0Safari3.0
Ogg Vorbis✔️✔️✔️
MP3✔️✔️✔️
Wav✔️✔️✔️

5.1.2 <audio> 音频标签语法格式

<audio src="文件地址" controls="controls"></audio>


< audio controls="controls"	>
<source src="happy.mp3" type="audio/mpeg" >
<source src="happy.ogg" type="audio/ogg" >
您的浏览器暂不支持audio标签。
</ audio>

5.1.3 <audio> 音频标签常见属性

属性值描述
autoplayautoplay如果出现该属性，则音频在就绪后马上播放。（谷歌浏览器把该属性禁了）
controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。
looploop如果出现该属性，则每当音频结束时重新开始播放。（循环播放）
preloadpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。 如果使用 “autoplay”，则忽略该属性。
srcurl要播放的音频的 URL。

5.1.4 example02

5.1.4.1 example02-1
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
     <audio src="media/snow.mp3" controls="controls"></audio>
</body>

</html>

直接播放就可以听到音乐了。

image-20200816102840165

image-20200816103255495

但是它的重大缺陷大家也可以看到，就是不同浏览器，播放风格不统一。

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.09
Branch： branch04
commit description：a2.09（example02-1——audio标签的基本使用）

tag：a2.09


5.1.4.2 example02-2

因为不同浏览器支持不同格式，我们采取的解决方案是我们为这个音频准备多个格式。

准备多个来源。 => 浏览器如果不兼容第一个source，就会去找第二个，有点类似if逻辑判断。

    <audio controls="controls">
        <source src="media/snow.mp3" type="audio/mpeg" />
        <source src="media/snow.ogg" type="audio/ogg" />
            您的浏览器不支持播放声音
    </audio>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.10
Branch： branch04
commit description：a2.10（example02-2——audio标签兼容使用）

tag：a2.10


5.2 video 视频标签

  • 目前支持三种格式（基本准备mp4和ogg，大部分浏览器均是支持的）
格式IEFirefoxOperaChromeSafari
OggNo3.5+10.5+5.0+No
MPEG 49.0+NoNo5.0+3.0+
WebMNo4.0+10.6+6.0+No

5.2.1 <video> 视频标签语法格式

<video src="文件地址" controls="controls"></video>


< video	controls="controls"	width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的浏览器暂不支持video标签。播放视频
</ video >

5.2.2 <video> 视频标签常见属性

属性值描述
autoplayautoplay视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
controlscontrols向用户显示播放控件
widthpixels(像素)设置播放器宽度
heightpixels(像素)设置播放器高度
looploop播放完是否继续播放该视频，循环播放
preloadauto（预先加载视频）none（不应加载视频）规定是否预加载视频(如果有了autoplay 就忽略该属性）
srcurl视频url地址
posterImgurl加载等待的画面图片
mutedmuted静音播放

5.2.3 video 代码演示

<body>
  <!-- <video src="./media/video.mp4" controls="controls"></video> -->

  <!-- 谷歌浏览器禁用了自动播放功能，如果想自动播放，需要添加 muted 属性 -->
  <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
    <source src="./media/video.mp4" type="video/mp4">
    <source src="./media/video.ogg" type="video/ogg">
  </video>
</body>

5.2.4 example03

5.2.4.1 example03-1

一般视频会非常大且清晰度高，这样缩小之后不至于模糊。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        video {
            width: 300px;
        }
    </style>
</head>

<body>
     <video src="media/video.mp4" controls="controls"></video>
</body>

</html>

在这里插入图片描述

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.11
Branch： branch04
commit description：a2.11（example03-1——video标签使用）

tag：a2.11


5.2.4.2 example03-2

因为不同浏览器，播放控件的样式都不一样，所以有的时候是不需要，而是自动播放的。

谷歌浏览器把自动播放功能给禁用了（其他浏览器不禁用）

有解决方案： 给视频添加静音属性，同时设置循环播放，并设置兼容性

<video autoplay muted="muted" loop="loop">

    <video autoplay muted="muted" loop="loop">
        <source src="media/video.mp4" type="video/mp4" />
        <source src="media/video.ogg" type="video/ogg" />
        您的浏览器太low了，不支持播放此视频
    </video>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.12
Branch： branch04
commit description：a2.12（example03-2——video标签使用，给视频添加静音属性，同时设置循环播放，并设置兼容性）

tag：a2.12


5.2.4.3 example03-3

可以设置播放加载等待的画面图片

    <video muted="muted" loop="loop" poster="media/pig.jpg" controls>
        <source src="media/video.mp4" type="video/mp4" />
        <source src="media/video.ogg" type="video/ogg" />
        您的浏览器太low了，不支持播放此视频
    </video>

image-20200816123235222
在这里插入图片描述

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.13
Branch： branch04
commit description：a2.13（example03-3——video标签使用，设置播放加载等待的画面图片）

tag：a2.13


5.3 总结

  • 音频标签与视频标签使用基本一致
  • 多媒体标签在不同浏览器下情况不同，存在兼容性问题
  • 谷歌浏览器把音频和视频标签的自动播放都禁止了
  • 谷歌浏览器中视频添加 muted 标签可以自己播放，音频不可以
  • 视频标签是重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性
  • 注意：重点记住使用方法以及自动播放即可，其他属性可以在使用时查找对应的手册

6. H5新增input表单

属性值说明
type=“email”限制用户输入必须为Email类型（验证）
type=“url”限制用户输入必须为URL类型（验证）
type=“date”限制用户输入必须为日期类型（验证）
type=“time”限制用户输入必须为时间类型（验证）
type=“month”限制用户输入必须为月类型（验证）
type=“week”限制用户输入必须为周类型（验证）
type=“number”限制用户输入必须为数字类型（验证）
type=“tel”手机号码
type=“search”搜索框
type=“color”生成一个颜色选择表单

6.1 example04

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <form action="">
        邮箱: <input type="email" />
        <input type="submit" value="提交">
    </form>
</body>

</html>


    <form action="">
        <ul>
            <li>邮箱: <input type="email" /></li>
            <li>网址: <input type="url" /></li>
            <li> <input type="submit" value="提交"></li>
        </ul>
    </form>

必须输入完整url

<li>日期: <input type="date" /></li>


<li>时间: <input type="time" /></li>

重点在于输入数字，做数字验证。

只能输入数字和e（科学计数法）。

<li>数量: <input type="number" /></li>

重点在于手机号码，注册用户都需要它。

<li>手机号码: <input type="tel" /></li>

由于各个国家手机号码格式不一定一样，这里没做验证。

重点在于搜索框，在页面当中也会经常用到。

<li>搜索: <input type="search" /></li>

可以点击✖️ 任何一次性删除所有内容。

颜色选择表单。

<li>颜色: <input type="color" /></li>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.14
Branch： branch04
commit description：a2.14（example04——h5表单使用）

tag：a2.14

我们可以在手机上看看效果。

在这里插入图片描述


7. H5新增表单属性

属性值说明
requiredrequired表单拥有该属性表示其内容不能为空，必填
placeholder提示文本（占位符）表单的提示信息，存在默认值将不显示
autofocusautofocus自动聚焦属性，页面加载完成自动聚焦到指定表单
autocompleteoff / on当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。 默认已经打开，如 autocomplete=”on “关闭 autocomplete =”off”-需要放在表单内同时加上name属性-同时成功提交
multiplemultiple可以多选文件提交

7.1 example05

以上表单，几乎是什么都可以提交。

required属性限制表单不能为空

    <form action="">
        用户名: <input type="text" required="required"> 
        <input type="submit" value="提交"> 
    </form>

placeholder属性 => 提示文本/占位符 （字体灰色，而value值是黑色）

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

image-20200816135244732

autofocus => 自动聚焦属性，页面加载完成自动聚焦到指定表单

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

name => 便于利用url调用接口或切换页面路由

autocomplete =>

当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

默认已经打开，如 autocomplete='on'

关闭 autocomplete ='off' （用得较多，这是隐私，一般都不想记录这些输入的内容）

使用前提如下：

  • 需要放在表单内同时加上name属性
  • 同时成功提交
用户名: <input type="text" required="required" placeholder="请输入用户名" autofocus="autofocus" name="username">


用户名: <input type="text" required="required" placeholder="请输入用户名" autofocus="autofocus" name="username" autocomplete="off">

multiple => 多选文件，多用于上传用

上传头像: <input type="file" name="" id="" multiple="multiple">

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.15
Branch： branch04
commit description：a2.15（example05——HTML5新增表单属性）

tag：a2.15


8. H5小结

  1. HTML5 里面新增的语义化标签
  2. HTML5 视频标签设置自动播放以及修改大小
  3. HTML5 中新增的数字表单、手机号码表单以及搜索表单
  4. HTML5 表单中新增的占位符以及多选属性



（后续待补充）
溜_x_i_a_o_迪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5快速上手
weixin_46345928的博客
03-22 342
为了学习交互式编程这门课，需要一些基础的HTML的知识。但是为了节约时间，不可能学习得太深入，只需要学习HTML的一个适宜的子集即可。下面是从老师的ppt和B站上的基础课总结来的，供我做项目和期末时查看。 一.HTML简介 简介是为了理解HTML的本质和特点，以便于我记忆HTML的语法和具体使用HTML。下面以罗列的形式说明HTML： 1.HTML是一门标记性语言（markup language），而不是一门编程语言（language）。它的作用是提供网页的基本结构和内容，而不是描述网页的行为。 2
html5练手小程序
01-07
html5练手写的小程序，index.html
H5快速上手
m0_72678953的博客
10-17 158
HTML5快速上手
html5之快速上手canvas
Xingmahao_的博客
12-11 209
一、Canvas绘制线条 Context对象的beginPath方法表示开始绘制路径，moveTo(x, y)方法设置线段的起点，lineTo(x, y)方法设置线段的终点，stroke方法用来给透明的线段着色。moveto和lineto方法可以多次使用。最后，还可以使用closePath方法，自动绘制一条当前点到起点的直线，形成一个封闭图形，省却使用一次lineto方法; <body...
HTML5前端技术分享：快速上手yeoman
liuyingv8的博客
05-16 572
　　Yeoman是google和其他团队联合开发的一个脚手架工具. 他的主旨是利用bower,gulp或者grunt迅速搭建一个易用的工作流，再说白点 ，就是为我们的项目搭建框架目录结构，使用它我们还能很快捷的建立项目中的依赖关系。　　Yeoman的logo 是一个带帽子的铁皮人 因为yeoman的使用依赖于node以及bower 在这里我们就不多做介绍了 网上有很多例子 就不一一赘述了 安装完n...
html+css快速入门教程 一周时间轻松上手
11-08
了解并熟练使用这些基础标签是HTML学习的第一步。 CSS则为HTML元素提供了样式，如颜色、字体、布局等。通过选择器（如元素选择器、类选择器、ID选择器）来指定需要应用样式的元素，然后设置属性来改变元素的外观。...
Ajax中文手册(快速上手)
06-20
**Ajax中文手册(快速上手)** Ajax，全称Asynchronous JavaScript and XML，是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新，提高了用户...
十分钟Pyecharts快速上手使用！
12-21
Pyecharts 是一个用于生成 ECharts 图表的 Python 库，它允许开发者使用 Python 代码创建各种复杂的可视化图形。ECharts 是百度开发的一个基于 ...通过学习和实践，可以熟练掌握其使用，提升数据展示的效果和效率。
HTML代码大全，HTML代码大全
最新发布
04-17
了解并熟练掌握这些HTML代码是成为Web开发者的必备基础。"HTML代码大全"这样的资源可以帮助初学者快速上手，同时也为经验丰富的开发者提供了方便的参考。通过阅读`html最全代码.pdf`，你可以系统地学习和查阅HTML的...
geolocation:浏览器 HTML5 JS 地理定位演示
07-16
HTML5的地理定位功能是现代Web开发中的一个重要特性，它允许网页应用获取用户设备的地理位置信息，从而实现个性化服务、...这个压缩包中的示例项目是一个很好的学习资源，能够帮助开发者快速上手并熟练掌握这一技术。
html5完整的练手项目,仿百度图片首页--HTML+CSS练手项目1【Table】
weixin_39906114的博客
06-04 292
【本文为原创，转载请注明出处】技术【css+html】 布局【table】图片准备【百度图标、10张不同类型图】------------------------------------------------------------------------------------------------------------步骤1 table 布局1 2 3 4 5 仿百度...
前端练手html5,每日一点前端-4-html5小练习
weixin_39785524的博客
06-27 112
前言：这是我之前在看后盾网html5视频时做的一些小样例，现在我把我认为一些有意思的东西拿出来跟大家分享一下，还望多多指教。1.datalist标签，这个标签制作的下拉可省了不少事呢……此处注意input里的list=“li”与datalist里的id=“li”。datalist使用展示.gif贴上一段简短的代码：请输入姓名：张三李四王五2.div的拖拽，这个效果可以做出一些跟随鼠标在浏览器内移动...
html5拖拽上手
Kami丶
02-28 121
注意： Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。 注释：在 Safari 5.1.2 中不支持拖放。 设置拖拽元素 &amp;lt;p id=&quot;one&quot; draggable=&quot;true&quot;&amp;gt;这是一个可以拖拽的p标签&amp;lt;/p&amp;gt; 拖拽事件 ondragstart 当鼠标开始拖拽被拖拽元
HTML小练手（一）
10-09 1579
代码  &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html";charset="gb2312"/&gt; &lt;title&gt; 基本页面 &lt;/title&gt; &lt;body bgcolor="#66ccff"&am
HTML小练手（二）
10-09 609
代码 &lt;html&gt; &lt;head&gt; &lt;title&gt;学院人数统计&lt;/title&gt; &lt;body bgcolor="#66ccff"&gt; &lt;table border="1" align="center"&gt; &lt;tr align="center"&g
一个练手的企业级网页
TSeven37的博客
10-01 469
最近在巩固html5、css3基础知识，所以今天趁着国庆，普天同庆的日子，来好好摩擦摩擦 这是在慕课网学习的时候，由于自己设计感不是很好，所以借鉴了慕课网的练习素材，本文基本上没用到js 代码地址：https://github.com/Steven37/EnterprisePage.git...
HDF5快速上手全攻略
热门推荐
C0ding...
03-19 6万+
Hierarchical Data Format(HDF)是一种针对大量数据进行组织和存储的文件格式。本文回归了HDF5的安装和使用，涉及文件结构，数据集读写，子集访问等基本操作，以及分块与压缩，添加属性，并行化等高级课题。此外，文中还列出了python和C++的实用代码。
自学web前端练手——HTML基础
lvshaoshishang的博客
03-03 2633
网站实现如下内容： （1）包含两个网页，内容跟英语相关，具体内容自己设计。 （2）网页中要用到div标签，合理对网页的区域进行划分。 （3）每个网页都有导航栏，导航栏可以水平也可以垂直排列，可以通过导航栏在两个页面之间跳转。 （4）网页有一级标题。 （5）网页有正文段落。 （6）网页上用到1个图片，美化页面。 只是纯粹练手没有使用CSS来美化网页。 效果图如下： 附上代码： kris.html...
JEECMS入门与环境搭建：快速上手建站教程
特别关注了JEECMS v3.x版本的标签教程，这些标签是构建动态页面的关键，如[@cms_channel_list]、[@process_time/]等，帮助开发者熟练运用模板引擎生成动态内容。 5. 实战教程： 文档还包含一系列实战指南，如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值