整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

HTML5开发文档—3、新增的HTML5结构标签

增的HTML5结构标签

结构标签：(块级元素) 有意义的div

标签含义
<article>定义独立的、完整的相关内容块
<header>定义一个页面或一个区域的头部内容
<nav>定义导航类辅助内容
<section>定义一块区域
<aside>定义页面非正式内容部分的侧边栏
<hgroup>定义h1~h6标题组合
<figure>定义元素的组合，多用于图片与图片描述组合
<figcaption>定义 figure元素的描述
<footer>定义一个页面或一个区域的底部内容

传统div+css布局方式

HTML5布局方式

div+css布局方式和HTML5布局方式的区别、意义

小结

HTML标签包含结构标签和基础标签，基础标签是在页面制作最常使用的一些标签。基础标签包含标题标签（<h1>~<h6>）、换行标签（<br>）、段落标签（<p>）、水平线标签（<hr>）、格式标签及文本标签。表格可以把相互关联的信息元素集中定位，使浏览页面的人一目了然。表格需要通过表格标记<table>、行标记<tr>、单元格标记<th>或<td>等标记按一定的关系嵌套共同完成。通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

习题

1．哪一个不是HTML5新增的语义化标记元素（B）

A．section B．head

C．article D．aside

天是2022年第一天，站在2022年的开始回首整个2021年并没有发现自己有很大的进步。2022年一定要行动起来，丰富自己。

2022年给自己定几个目标：

  1. 重新学习前端之路
  2. 搭建一个自己的博客网站 ---每周发送一至两篇文章记录自己重新学习前端之路
  3. 培养自己一个爱好
  4. 减肥
  5. 带老婆出去旅游一趟
  6. 每月读一本书

重学之路从HTML开始

HTML简介

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等 HTML历史上有如下版本： ①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。 ②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。 ③HTML 3.2：1997年1月14日，W3C推荐标准。 ④HTML 4.0：1997年12月18日，W3C推荐标准。 ⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。 ⑥HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持 `

HTML 标记标签通常被称为 HTML 标签 (HTML tag) <标签>内容</标签>

HTML 元素包含了开始标签与结束标签，元素的内容是开始标签与结束标签之间的内容，元素属性是 HTML 元素提供的附加信息。

HTML基础结构

文档声明头

<!DOCTYPE html> 声明为 HTML5 文档

页面的根元素

<html> 元素是 HTML 页面的根元素

头部标记

<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。

浏览器标签名

<title> 元素描述了文档的标题，浏览器标签名，通常放到head里面

页面主体

<body> 元素包含了可见的页面内容

常见的标签

块级元素

块级元素只能出现在 <body> 元素内。

格式

默认情况下，块级元素会新起一行。

内容模型

一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。 HTML 标准中块级元素和行内元素的区别至高出现在 4.01 标准中。在 HTML5，这种区别被一个更复杂的内容类别 (en-US)代替。”块级“类别大致相当于 HTML5 中的流内容 (en-US)类别，而”行内“类别相当于 HTML5 中的措辞内容 (en-US)类别，不过除了这两个还有其他类别。

标签与描述

标签名

描述

address

联系方式信息

article (HTML5)

文章内容

aside (HTML5)

伴随内容

blockquote

块引用

dd

定义列表中定义条目描述

div

定义列表中定义条目描述

dl

文章内容

fieldset

表单元素分组

figcaption (HTML5)

图文信息组标题

figure (HTML5)

可附标题内容元素

footer (HTML5)

区段尾或页尾

form

表单

h1~h6

标题

header (HTML5)

页头

hgroup (HTML5)

标题组

hr

分割线

nav (HTML5)

导航

noframes

针对不支持框架的用户的替代内容

noscript

针对不支持客户端脚本的用户的替代内容

ol

有序列表

p

段落

section (HTML5)

一个页面区段

table

表格

tbody

表格中的主体内容

td

表格中的单元

tfoot

表格中的表注内容（脚注）

th

表格中的表头单元格

thead

表格中的表头内容

time

日期/时间

tr

表格中的行

ul

无序列表


行内元素

一般情况下，行内元素只能包含数据和其他行内元素。

格式

默认情况下，行内元素不会以新行开始，而块级元素会新起一行。

标签与描述

标签名

描述

a

锚

abbr

缩写

acronym

只取首字母的缩写

b

粗体

bdo

文字方向

big

大号文本

br

简单的折行

button

按钮 (push button)

cite

引用(citation)

code

计算机代码文本

command

命令按钮

dfn

项目

del

被删除文本

em

强调文本

embed

外部交互内容或插件

i

斜体字

img

图像

input

输入控件

kbd

键盘文本

label

input 元素的标注

map

图像映射

mark

有记号的文本

objec

内嵌对象

progress

任何类型的任务的进度

q

短的引用

samp

计算机代码样本

select

选择列表（下拉列表）

small

小号文本

span

文档中的节

strong

强调文本

sub

下标文本

sup

上标文本

textarea

多行的文本输入控件

time

日期/时间

tt

打字机文本

var

文本的变量部分

video

视频

wbr

可能的换行符

行内块元素

行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。

格式 默认情况下，行内元素不会以新行开始，能够识别宽高

标签与描述

标签名

描述

img

图片

input

输入框

textarea

多行文本

相互之间的转换

  1. 块级标签转换为行内标签：display:inline;
  2. 行内标签转换为块级标签：display:block;
  3. 转换为行内块标签：display：inline-block;

常⽤的meta标签

meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。

常用的meta标签：

  1. charset，用来描述HTML文档的编码类型：
<meta charset="UTF-8" >
  1. keywords，页面关键词：
<meta name="keywords" content="关键词" />
  1. description，页面描述：
<meta name="description" content="页面描述内容" />
  1. refresh，页面重定向和刷新：
<meta http-equiv="refresh" content="0;url=" />
  1. viewport，适配移动端，可以控制视口的大小和比例：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  1. 搜索引擎索引方式：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

相关面试题

HTML5有哪些更新

  1. 新增语义化标签：nav、header、footer、aside、section、article
  2. 音频、视频标签：audio、video
  3. 数据存储：localStorage、sessionStorage
  4. canvas（画布）、Geolocation（地理定位）、websocket（通信协议）
  5. input标签新增属性：placeholder、autocomplete、autofocus、required
  6. history API：go、forward、back、pushstate

移除的元素有

纯表现的元素：basefont，big，center，font, s，strike，tt，u;

对可用性产生负面影响的元素：frame，frameset，noframes；

对HTML语义化的理解

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。 语义化的优点如下：

  1. 有利于SEO，有利于搜索引擎爬虫；
  2. 增强了可读性，结构更加清晰，便于团队的开发与维护。

常⽤的meta标签有哪些

参考上文

行内元素有哪些？块级元素有哪些？

参考上文

head 标签有什么作用，其中什么标签必不可少？

head 标签用于定义文档的头部，它是所有头部元素的容器。 head 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。 文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 下面这些标签可用在 head 部分：base, link, meta, script, style, title 其中 title 定义文档的标题，它是 head 部分中唯一必需的元素。

DOCTYPE(⽂档类型) 的作⽤

DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。 浏览器渲染页面的两种模式（可通过document.compatMode获取，比如，语雀官网的文档类型是CSS1Compat）：

  1. CSS1Compat：标准模式（Strick mode），默认模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。
  2. BackCompat：怪异模式(混杂模式)(Quick mode)，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。

src和href的区别

src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。

src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。 href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果在文档中添加

Canvas和SVG的区别

  1. SVG： SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。 其特点如下：
  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序（比如谷歌地图）
  • 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
  • 不适合游戏应用
  1. Canvas： Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。 其特点如下：
  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘 注：矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。

渐进增强和优雅降级之间的区别

  1. 渐进增强（progressive enhancement): 主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验。
  2. 优雅降级 (graceful degradation)： 一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。

两者区别：

  • 优雅降级是从复杂的现状开始的，并试图减少用户体验的供给；而渐进增强是从一个非常基础的，能够起作用的版本开始的，并在此基础上不断扩充，以适应未来环境的需要；
  • 降级（功能衰竭）意味着往回看，而渐进增强则意味着往前看，同时保证其根基处于安全地带。

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。 在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

“渐进增强”观点则认为应关注于内容本身。内容是建立网站的诱因，有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。


在线咨询
上一篇：JavaScript中必须了解的3种创建数组的方式
下一篇：Web前端开发基础知识，设置网页背景图，如何在网页中插入图片

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 綦江县 天元区 赛罕区 井冈山市 芜湖 贵池区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服