HTML5基础

最新推荐文章于 2024-07-21 17:58:14 发布

书生_yu

最新推荐文章于 2024-07-21 17:58:14 发布

阅读量237

点赞数

分类专栏：笔记文章标签： html5 html web

本文链接：https://blog.csdn.net/m0_56252128/article/details/118758214

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML5介绍

1）HTML5 是 HTML 最新的修订版本，是下一代 HTML 标准，2014年10月由万维网联盟（W3C）完成标准制定。

2）HTML5 的设计目的是为了在移动设备上支持多媒体。

3）HTML5 还引进了新的功能，可以真正改变用户与文档的交互方式。

HTML5文档

在编写 HTML5 文档时，<!doctype> 声明必须位于 HTML5 文档中的第一行:

<!DOCTYPE html>

字符编码 (字符集) 声明也被简化:

<meta charset="UTF-8">

HTML5新特性

绘画元素 canvas

媒介回放元素video

本地离线存储元素locaStorage、sessionStorage

特殊内容元素 article、footer、header、nav、section等

表单控件 calendar、date、time、email、url、search等

HTML5内容模型

HTML5 中引入了很多的标记元素，根据内容类型的不同，这些元素被分成了7大类：

1.内容类型列表

内联（Embedded）

流（Flow）

标题（Heading)

交互（Interactive）

元数据（Metadata）

短语（Phrasing）

区（Sectioning)

2.内容类型

元数据（Metadata）：通常出现在页面的head中，设置页面其他部分的表现和行为。

内联（Embedded）：在文档中添加其他类型的内容。

交互（Interactive）：与用户交互的内容。

标题（Heading）：定义段落标题。

短语（Phrasing）：文本和文本标记元素。

HTML元素

1.结构性元素

结构性元素主要负责 Web 的上下文结构的定义，确保 HTML 文档的完整性

1）section：在 Web 页面应用中，该元素也可以用于区域的章节表述。

<section>
  <h1>first</h1>
  <p>first first</p>
</section>

<h1>second</h1>
<p>second second</p>

2)header：页面主题上的头部。

<header>
    <h1>Internet Explorer 9</h1>
    <p><time pubdate datetime="2018-03-15"></time></p>
</header>

3) footer：页面的底部（页脚）。

<footer>
  <p>html</p>
  <p><time pubdate datetime="2018-03-20"></time></p>
</footer>

4) nav：是专门用于菜单导航、链接导航的元素。

<nav>
  <a href="https://www.baidu.com">百度</a> |
  <a href="https://mp.csdn.net">CSDN</a> |
  <a href="https://www.taobao.com">淘宝</a> |
</nav>

5) article：用于表示一篇文章的主题部分，一般为文字集中显示的区域。在 HTML5 中，<article> 标签定义独立的内容。<article> 标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分。 <article> 的潜在来源：论坛帖子博客文章新闻故事评论

<article>
  <h1>Internet Explorer 9</h1>
  <p> Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>
</article>

2.级块性元素

级块性元素主要完成 Web 页面区域的划分，确保内容的有效分隔

1）aside：用以表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。<aside> 标签定义 <article> 标签外的内容。<aside> 的内容应该与附近的内容相关。

<p>My family and I visited The Epcot center this summer.</p>
<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

2）figure：是对多个元素进行组合并展示的元素，通常与 <figcaption> 联合使用。

<figure>
  <img src="images/10.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>

3) code：表示一段代码块。注意观察加<code>与没加的区别

<code>
    <h4>Epcot Center</h4>
    <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</code>
    <h4>Epcot Center</h4>
    <p>The Epcot Center is a theme park in Disney World, Florida.</p>

4) dialog：用于表达人与人之间的对话，该元素还包括 <dt> 和 <dd>这两个组合元素，它们常常同时使用。<dt> 用于表示说话者，而 <dd> 用来表示说话者的内容。目前只有 Chrome 和 Safari 6 支持 dialog 标签。

<dialog open>
	<dt>提示:</dt>
	<dd>好好学习，天天向上</dd>
</dialog>

3.行内语义性元素

行内语义性元素主要完成 Web 页面具体内容的引用和表述，是丰富内容展示的基础

1) meter：表示特定范围内的数值，可用于工资、数量、百分比等；

<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>

2) time：表示时间值。

<p>我们在每天早上 <time>9:00</time> 开始上班。</p>
<p>我在 <time datetime="2021-02-14">情人节</time> 有个约会。</p>

3) mark：定义带有记号的文本。

<p>Do not forget to buy <mark>milk</mark> today.</p>

4) progress：用来表示进度条，可通过对其 max、min、step 等属性进行控制，完成对进度的表示和监视。

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

5) video：视频元素，用于支持和实现视频（含视频流）文件的直接播放，支持缓冲预载和多种视频媒体格式，如 MPEG-4、OggV 和 WebM 等。<video> 标签定义视频，比如电影片段或其他视频流。

<video> 元素提供了播放、暂停和音量控件来控制视频。 <video> 元素和 <audio> 元素一样，都有 src，controls，autoplay 和 loop 属性。 <video> 元素元素也提供了 width 和 height 属性控制视频的尺寸。

<video width="320" height="240" controls>
    <source src="C:\Users\y謙\Desktop\study\如果有一天我变得很有钱.mp4" type="video/mp4">
    您的浏览器不支持 video 标签。
</video>

6) audio：音频元素，用于支持和实现音频（音频流）文件的直接播放，支持缓冲预载和多种音频媒体格式。<audio> 标签定义声音，比如音乐或其他音频流。<audio> 元素支持的 3 种文件格式：MP3、Wav、Ogg。

<audio> 元素中的常见的属性有： src 属性：规定音频文件的 URL。 controls 属性：如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。 autoplay 属性：如果出现该属性，则音频在就绪后马上播放。 loop 属性：如果出现该属性，则每当音频结束时重新开始播放。

<audio controls>
  <source src="https:........." type="audio/ogg">
  您的浏览器不支持 audio 元素。
</audio>

4.交互性元素

交互性元素主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础

1) details：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如单击）与 <legend> 交互才会显示出来。

<details>
<summary>html</summary>
<p> - html css.</p>
<p>html css js</p>
</details>

2) datalist：定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

3) menu：主要用于交互菜单。注释：所有主流浏览器均不支持 menu 元素。

<menu type="toolbar">
 <li>
  <menu label="File">
   <button type="button" onclick="file_new()">新建</button>
   <button type="button" onclick="file_open()">打开</button>
   <button type="button" onclick="file_save()">保存</button>
  </menu>
 </li>
 <li>
  <menu label="Edit">
   <button type="button" onclick="edit_cut()">剪切</button>
   <button type="button" onclick="edit_copy()">复制</button>
   <button type="button" onclick="edit_paste()">粘贴</button>
  </menu>
 </li>
</menu>

4) command：用来处理命令按钮。

<menu>
<command type="command" label="Save" onclick="save()">Save</command>
</menu>

5.progress

<progress> 标签定义运行中的任务进度（进程）。 <progress> 标签的属性有：max：规定需要完成的值。value：规定进程的当前值。

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

HTML5表单新属性

1.placeholder 属性

HTML5 添加了 placeholder 的新属性。在 <input> 和 <textarea> 元素上，此属性提供一种提示，描述输入域所期待的值。简短的提示在用户输入值前会显示在输入域上。

<form>
   <input type="text" name="fname" placeholder="First name">
   <input type="text" name="lname" placeholder="Last name">
   <input type="submit" value="提交">
</form>

2.required 属性

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

<form autocomplete="off">
  Username: <input type="text" name="username" required>
  <input type="submit">
</form>

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

3.search属性

新的搜索输入类型可用于创建搜索框：

<input type="search" name="searchitem">

表单输入类型

<form>
  <input type="email" name="email" placeholder="example@example.com">
  <br>
  <input type="tel" name="usrtel" placeholder="666.666.6666">
  <br>
  <input type="url" name="homepage" placeholder="example.com">
</form>