HTML5学习总结（1）——HTML5基础知识

HTML5文档

在编写 HTML5 文档时，<!DOCTYPE html> 声明必须位于 HTML5 文档中的第一行。
HTML5 中的默认字符编码是 UTF-8。
对于中文网页需要使用声明编码，否则会出现乱码。

内容类型

元数据（Metadata）：通常出现在页面的head中，设置页面其他部分的表现和行为。
元素：<base>，<link>，<meta>，<noscript>，<script>，<style>，<title>。
内联（Embedded）：在文档中添加其他类型的内容。
元素：<audio>，<video>，<canvas>，<iframe>，<img>，<math>，<object>，<svg>。
交互（Interactive）：与用户交互的内容。
元素：<a> , <audio>, <video> , <button>, <details> , <embed> , <iframe> , <img> , <input> , <label> , <object> , <select> , <textarea>。
标题（Heading）：定义段落标题。
元素：<h1>，<h2>，<h3>，<h4>，<h5>，<h6>，<hgroup>。
短语（Phrasing）：文本和文本标记元素。
元素：<img>，<span>，<strong>，<label>，<br />，<small>，<sub>等。
流（Flow）：包含在文档正常流中的大多数HTML5元素。
区段（sectioning）内容：定义标题，内容，导航和页脚的范围。
元素：<article>，<aside>，<nav>，<section>

HTML5 的元素按优先等级定义为结构性元素、级块性元素、行内语义性元素和交互性元素四大类。

结构性元素

结构性元素主要负责 Web 的上下文结构的定义，确保 HTML 文档的完整性，这类元素包括以下内容

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

 <section><h1>结构性元素</h1><p>这是正文</p>
</section>

header：页面主题上的头部，区别于 <head> 元素。

<header><h1>头部内容</h1><p><time pubdate datetime="2021-01-01"></time></p>
</header>

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

<footer><p>底部内容</p><p><time pubdate datetime="2020-01-20"></time></p>
</footer>

nav：是专门用于菜单导航、链接导航的元素，是 “navigator” 的缩写。

<nav><a href="#">HTML</a> |<a href="#">CSS</a> |<a href="#">JavaScript</a>
</nav>

-article：用于表示一篇文章的主题部分，一般为文字集中显示的区域。

<article><h1>正文</h1><p> 这里是正文内容。</p>
</article>

级块性元素

级块性元素主要完成 Web 页面区域的划分，确保内容的有效分隔，这类元素包括以下几个：

aside：用以表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。

 <p>content</p><aside><h4>用以表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容</h4><p>this content is important.</p></aside>

figure：是对多个元素进行组合并展示的元素，常与

联合使用。

     <figure><img src="00.jpg" width="300" height="180"><figcaption>Fig1. - spiderman.</figcaption></figure>

code：表示一段代码块。

<code>
<h4>this is code</h4>
<p>this is code which different from others</p>
</code><h4>this is not code</h4><p>this is not code</p>

行内语义性元素

行内语义性元素主要完成 Web 页面具体内容的引用和表述

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

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

time：表示时间值。
mark：定义带有记号的文本。

<p>This is <mark>mark</mark> content</p>

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

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

video：视频元素，用于支持和实现视频文件的直接播放，支持缓冲预载和多种视频媒体格式，如 MPEG-4、OggV 和 WebM 等。
audio：音频元素，用于支持和实现音频（音频流）文件的直接播放，支持缓冲预载和多种音频媒体格式。

交互性元素

交互性元素主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础，这类元素包括以下几个：

details：用来表示一段具体的内容，但是内容默认可能不显示，与交互才会显示出来。
datalist：定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值

<input list="fruit">
<datalist id="fruit"><option value="apple"><option value="banana"><option value="orange"><option value="peach"><option value="mango">
</datalist>

HTML5学习总结（1）——HTML5基础知识相关推荐

《Java并发编程实践》学习笔记之一：基础知识
<Java并发编程实践>学习笔记之一:基础知识 1.程序与进程 1.1 程序与进程的概念 (1)程序:一组有序的静态指令,是一种静态概念: (2)进程:是一种活动,它是由一个动作序列组成 ...
汇编学习（1）——基础知识
汇编学习(1)--基础知识 ---谨以此系列文章记录我的汇编学习. 关于汇编说起汇编语言,那自然不得不想到机器语言,在汇编语言尚未诞生之际,程序猿们只能非常苦逼的敲着0和1,还要记住一大堆复杂难记 ...
学习python需要什么基础-学习Python需要哪些基础知识？
今天是腊月二十七,给各位朋友拜个早年! Python学习可以分为几个阶段,入门.进阶.应用. 先说说入门需要哪些基本的知识储备. Python因为易于学习的特点,入门很简单,掌握基本的Python知识 ...
python基础知识资料-学习Python列表的基础知识汇总
千里之行,始于足下.要练成一双洞悉一切的眼睛,还是得先把基本功扎扎实实地学好.今天,本喵带大家仔细温习一下Python的列表.温故而知新,不亦说乎. 当然,温习的同时也要发散思考,因为有些看似无关紧要 ...
Python学习--最完整的基础知识大全
##Python学习–最完整的基础知识大全关于python的基础知识学习,网上有很多资料,今天我就把我收藏的整理一下分享给大家! #####菜鸟教程python2 #####菜鸟教程python3 ...
学习hadoop需要具备基础知识
学习hadoop需要具备基础知识首先整体上了解Hadoop,包括hadoop是什么,能够做什么,使用场景等,不需要考虑细节问题.在有了整体上的了解后,就开始准备系统地学习hadoop.建议:勿一味学 ...
学python需要什么基础-学习Python需要哪些基础知识？
今天是腊月二十七,给各位朋友拜个早年! Python学习可以分为几个阶段,入门.进阶.应用. 先说说入门需要哪些基本的知识储备. Python因为易于学习的特点,入门很简单,掌握基本的Python知识 ...
小猪的Python学习之旅 —— 1.基础知识储备
小猪的Python学习之旅 -- 1.基础知识储备引言: (文章比较长,建议看目录按需学习-) 以前刚学编程的时候就对Python略有耳闻,不过学校只有C,C++,Java,C#. 和PHP有句&q ...
前端学习笔记（js基础知识）
前端学习笔记(js基础知识) JavaScript 输出 JavaScript 数据类型常见的HTML事件 DOM 冒泡与捕获流程控制语句 for..in 计时器 let,var,const的区别 ...
210学习日记(18)_ARM基础知识
210学习日记(18) --ARM基础知识注意: 以下大部分类容都来自网上现成的(直接拷贝过来的,然后经整理)!!!! 问1:ARM处理器工作模式有几种?各种工作模式下分别有什么特点? 答1:ARM ...