【每日一题】文章部分内容及图片出自网络，如有

　　【每日一题】文章部分内容及图片出自网络，如有

　　版权归作者所有。商业转载请联系作者授权，非商业转载请注明出处。

　　关于前言：

　　文章部分内容和图片来自网络，如有问题请联系我（官方账号在首页介绍）

　　本博客暂时适合刚接触HTML的朋友，久久想回顾一下。

　　关于内容：2.1 列表元素2.1.1 ul 元素（无序）

　　示例 1：

　　代码如下：

　　

　　运行结果：

　　

　　2.1.2 ol 元素（有序）

　　示例 2：

　　代码如下：

　　

　　运行结果：

　　

　　2.1.3 dl 元素示例 3：

　　代码如下：

　　

　　运行结果：

　　

　　2.1.4 列表元素的嵌套

　　示例 4：

　　代码如下：

　　

　　运行结果：

　　

　　例5：类推介绍其他嵌套结构，

　　

看

1

2

3

这

1

2

3

里

1

2

3

复制代码

　　运行结果：

　　

　　2.2 结构元素2.2.1 头部元素

　　header元素通常放在网站页面的header中作为标题，可以收录网站logo图片、搜索表单等内容。

　　它具有引导和导航的作用。

　　示例 6：

　　代码如下：

　　

　　运行结果：

　　

　　2.2.2 导航元素

　　nav 元素用于定义导航链接

　　示例 7：

　　代码如下：

　　

　　运行结果：

　　

　　点击 1234 中的任意链接：

　　

　　在上面的代码中，导航结构是通过在 nav 元素中嵌套有序列表 ol 来构建的。通常，一个 HTML 页面可以收录多个导航元素作为整个页面或页面不同部分的导航。具体来说，nav 元素可用于以下情况。

　　● 传统导航栏：目前主流的网站有不同层次的导航栏，用于跳转到网站的其他主页面。

　　●侧边栏导航：目前主流博客网站和电商网站都有侧边栏导航，目的是将当前文章或当前产品页面跳转到其他文章或其他产品页面。

　　●页内导航：它的作用是在本页的主要组件之间跳转。

　　● 翻页操作：翻页操作切换网页的内容部分，可以通过点击“上一页”或“下一页”进行切换，也可以通过点击实际页码跳转到页面。

　　除了以上几点，nav 元素还可以用在其他重要和基本的导航链接组中。

　　

　　2.2.3 文章元素

　　article 元素表示与上下文无关的文档、页面或应用程序的独立部分。此元素通常用于定义帖子、新闻或用户评论。

　　

　　

　　2.2.4 旁边元素

　　aside 元素用于定义当前页面或文章的辅助信息部分。它可以收录对当前页面或主要内容、侧边栏、广告、导航栏和其他与主要内容不同的类似部分的引用。 .

　　side 元素主要有以下两种用途：

　　

　　

　　2.2.5 节元素

　　section 元素用于屏蔽网站或应用的页面内容。 section 元素通常由内容和标题组成。

　　使用section元素时，请注意：

　　不要使用section元素来设置页面容器的样式，这是div的特性。 section 元素不是普通的容器元素。当一个容器需要直接在style中定义或者通过脚本定义时，推荐使用div。如果article元素、aside元素或nav元素更适合使用，那么就不要使用section元素。不要为没有标题的内容块使用节元素定义

　　

　　

　　2.2.6 页脚元素

　　footer 元素用于定义页面或区域的底部，可以收录通常放置在页面底部的所有内容。

　　一个页面可以收录多个页脚元素，页脚元素也可以添加到文章元素或节元素中。

　　

　　

　　2.3 分组元素2.3.1 图形元素和 figcaption 元素

　　figure 元素用于定义独立的内容（如图片、图标、照片、代码等）。

　　figurecaption 元素用于为 figure 元素组添加标题

　　一个 figure 元素最多允许使用一个 figurecaption 元素，应该放在 figure 元素的第一个或最后一个子元素的位置

　　示例 8：

　　代码如下：

　　

　　运行结果：

　　

　　2.3.2 hgroup 元素

　　hgroup元素用于将多个标题（主标题和副标题或副标题）组合成一个标题组，通常与h1~h6元素组合使用。

　　通常，将 hgroup 元素放在 header 元素中。

　　示例 9：

　　代码如下：

　　

　　运行结果：

　　

　　2.4 页面交互元素2.4.1 详情元素和摘要元素

　　details 元素用于描述文档的细节或文档的一部分

　　details 元素常与summary 元素结合使用，details 一般用于定义标题

　　示例 10：

　　代码如下：

　　

　　运行结果：

　　

　　

　　2.4.2_progress 元素

　　progress 元素用于表示任务的完成程度。

　　值：完成的工作量

　　max：总共有多少工作

　　示例 11：

　　代码如下：

　　

　　运行结果：

　　

　　2.4.3 米元素

　　meter 元素用于表示指定范围内的值

　　属性说明

　　高

　　定义指标值在哪个点被定义为高值

　　低

　　定义指标值在哪个点被定义为低值

　　最大

　　定义最大值，默认值为1

　　分钟

　　定义最小值，默认为0

　　最佳

　　定义哪种指标是最佳值。如果该值高于high属性，则表示该值越高越好。如果该值低于low属性的值，则表示该值越低越好

　　价值

　　定义度量值

　　示例 12：

　　代码如下：

　　

　　运行结果：

　　

　　当鼠标指针放在结果中的进度条上时，会显示“99点”

　　2.5 文本级语义元素2.5.1 时间元素

　　time 元素用于定义时间或日期，可以表示 24 小时内的某个时间。时间元素不会在浏览器中呈现任何特殊效果，但该元素可以将日期和时间以机器可读的方式进行编码，以便用户可以将生日提醒或其他事件添加到日历中，搜索引擎也可以更智能地生成搜索结果。

　　datatime：用于定义对应的时间或日期。

　　pubdate：用于定义时间元素中的日期/时间为文档（或文章元素）的发布日期。该值通常为“pubdate”。

　　示例 13：

　　代码如下：

　　

　　

　　

　　运行结果：

　　

　　示例 14：

　　代码如下：

　　

　　运行结果：

　　

　　2.5.2 标记元素

　　主要功能

　　mark 元素是为了突出文本中的某些字符。

　　类似em，强壮，但相比之下更加随意灵活

　　示例 15：

　　代码如下：

　　

　　运行结果：

　　

　　2.5.3 引用元素

　　cite 元素可以创建引用标记。标记使用后，被标记的文档内容将以斜体显​​示在页面上。

　　示例 16：

　　代码如下：

　　

　　运行结果：

　　

　　2.6 全局属性2.6.1 可拖动属性

　　draggable 属性用于定义元素是否可以拖动

　　该属性有两个值，true 和 false，默认为 false

　　当属性为true时，可以拖动，反之亦然。

　　示例 17：

　　代码如下：

　　

　　运行结果：

　　

　　注意：这个例子在网页上实现的效果是不能拖动的。如果要实现拖动功能，必须结合JavaScript使用。

　　2.6.2 隐藏属性

　　该属性也有两个值，true 和 false（默认值）。当属性为真时，元素将被隐藏。

　　示例 18：

　　代码如下：

　　

　　运行结果：

　　

　　2.6.3 拼写检查属性

　　拼写检查属性主要针对input元素和textarea文本输入框，对用户输入的文本进行拼写和语法检查。

　　这个属性也有两个值false和true（默认值）

　　值为true时勾选输入框中的值，否则不勾选

　　示例 19：

　　代码如下：

　　

　　运行结果：

　　

　　2.6.4 contenteditable 属性

　　contenteditable 属性指定元素的内容是否可以编辑，但前提是该元素必须有鼠标焦点且其内容不是只读的。

　　该属性有两个值，false 和 true。

　　true 表示可编辑，false 表示不可编辑

　　示例 20：

　　代码如下：

　　

　　运行结果：

　　

　　今天的入门学习暂时结束

　　和平

　　过去的评论：

　　Aken 的 HTML 和 CSS 入门指南（一)_HTML 基础

　　Aken 的 HTML 和 CSS 介绍指南（二)_HTML 页面元素和属性

　　Aken 的 HTML 和 CSS 入门指南（三)_Text 样式属性

　　Aken 的 HTML 和 CSS 介绍指南（四)_CSS3 选择器

　　Aken 的 HTML 和 CSS 入门指南（五)_CSS 盒模型

　　Aken 的 HTML 和 CSS 入门指南（六)​​_CSS 盒模型

　　Aken 的 HTML 和 CSS 入门指南（七)_CSS 盒模型

　　Aken 的 HTML 和 CSS 入门指南（八)_CSS 盒模型

　　Aken 的 HTML 和 CSS 介绍指南（十)_floating 和定位

　　Aken 的 HTML 和 CSS 介绍指南（十一)_floating 和定位

　　关于附言：