H5学习笔记1

半愚半智

已于 2024-08-25 16:22:06 修改

阅读量673

点赞数 12

文章标签：学习笔记算法

于 2024-08-25 16:15:53 首次发布

本文链接：https://blog.youkuaiyun.com/wy2015_wy2015/article/details/141528986

版权

H5文档结构：

<!DOCTYPE html>

<head>

<title>H5文档标题内容</title>

</head>

<body>

</section>

</body>

</html>

H5元素类型

新分类：

结构性元素

header：定义了文档的头部区域

article：定义一个文章主体区域

footer：定义了文档的底部区域

nav：定义导航链接的部分

section：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

块级元素

aside:定义页面的侧边栏内容

figure:规定独立的流内容（图像、图表、照片、代码等等）

code:定义计算机代码文本

dialog:定义对话框，比如提示框

行内语义元素

meter:定义度量衡。仅用于已知最大和最小值的度量。

time:定义日期或时间，或者两者。

progress:定义运行中的进度（进程）。

video:定义视频，比如电影片段或其他视频流。

audio:定义音频内容。

交互性元素

details:用于描述文档或文档某个部分的细节

datagrid:

menu:定义菜单列表。

command:定义命令按钮，比如单选按钮、复选框或按钮。只有 IE 9 支持 command 标签。

一般分类：

块状元素‌

通常从新的一行开始，并且其后的元素也从新的一行开始；

元素的高度、宽度、行高以及顶和底边距都可以设置；

且元素的宽度在不设置的情况下，默认是它本身父容器的100%。

如<div>、<p>、<h1>到<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>等

内联元素

‌与其他元素在同一行上显示；

元素的高度、宽度及顶部和底部边距不可设置；

元素的宽度就是它包含的文字或图片的宽度，不可改变。

如<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>等

内联块状元素‌

具有内联元素的特性，同时也可以设置宽度和高度；

如<img>和<input>。

注意：

设置display:block可以将元素显示为块级元素，

设置display:inline将元素设置为内联元素。

设置display:inline-block则可以将元素设置为内联块状元素。

可变元素

会根据周围的元素种类不一样，显示不一样的效果

非主流分类

置换元素

浏览器要根据元素的属性和属性值，才能决定渲染什么效果

(input丨button丨img)

非置换元素

除去置换元素，都是

H5主体内容

标识文章：

article、header：页面或文章的独立完整可以被引用部分；一般由标题、内容和脚注组成

内容分段：

section：页面内容分区；一般由标题和内容组成；直接定义样式用div。

导航设计：

nav：页面导航的链接组，导航到其它页面或页面其他部分

辅助设计：

aside：

文章页面的附属信息引用、侧边栏、广告、导航条

微格式设计：

time日期时间、电话号码、企业邮箱

发布日期：

pubdate：布尔属性

H5语义模块

标题块：

引导或导航作用：<header></header>；放置标题及其它内容，位于页面开头。

标题分组：

未标题或子标题分组：<hgroup></hgroup>；搜索引擎识别

脚注块：

内容块的脚注：

<footer></footer>；放置父模块注释、作者、相关阅读链接、版权

联系信息：

联系信息：<address></address>；可以与脚注块、时间一起使用；放置作者名称、电子邮箱、真实地址、电话号码