入门级HTML、CSS_HTML页面元素及属性
你好，我是阿Ken
下面开始我们今天要复习巩固的内容 —— HTML页面元素及属性
本博客暂适用于刚刚接触HTML以及好久不看想要复习的小伙伴
去年暑假外公进了重症监护室
后来抢救过来
我在医院住了半个月
方才知道人竟如此脆弱
现在他老人家还好好的已很欣慰
真的
你爱的人和爱你的人可能看到不到你衣锦还乡的一天了
还请务必努力
前面衔接
入门级HTML、CSS_HTML基础
这部分基础入门没技术含量
直接堆实例多练就好了
2.1_列表元素
2.1.1_ul 元素(无序)
实例：
代码如下：
运行后：
2.1.2_ol 元素(有序)
实例：
代码如下：
运行后：
2.1.3_dl 元素
实例：
代码如下：
运行后：
2.1.4_列表元素的嵌套
实例：
代码如下：
运行后：
案例：举一反三推出其他嵌套结构，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<dl>
<dt>看</dt>
<dd>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</dd>
<dt>这</dt>
<dd>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</dd>
<dt>里</dt>
<dd>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</dd>
</dl>
</body>
</html>
运行结果：
2.2_结构元素
2.2.1_header 元素
header 元素通常用来放置在网站页面头部做标题，可以包含网站logo照片、搜索表单及其他内容。
具有引导和导航的作用。
实例：
代码如下：
运行后：
2.2.2_nav 元素
nav元素用于定义导航链接
实例：
代码如下：
运行后：
点击1234中的任意一个链接:
在上面这段代码中，通过在nav元素内部嵌套有序列表 ol 来搭建导航结构。通常，一个HTML页面中可以包含多个nav元素，作为页面整体或不同部分的导航。具体来说，nav 元素可以用于以下几种场合。
● 传统导航条:目前主流网站上都有不同层级的导航条，其作用是跳转到网站的其他主页面。
● 侧边栏导航:目前主流博客网站及电商网站都有侧边栏导航，目的是将当前文章或当前商品页面跳转到其他文章或其他商品页面。
● 页内导航:它的作用是在本页面几个主要的组成部分之间进行跳转。
● 翻页操作:翻页操作切换的是网页的内容部分，可以通过单击“上-页"或“下一页"切换，也可以通过单击实际的页数跳转到某页。
除了以上几点以外，nav 元素也可以用于其他重要的、基本的导航链接组中。
2.2.3_article 元素
article 元素代表文档、页面或者应用程序中与上下文不相关的独立部分，该元素经常被用于定义一篇日志、一条新闻或用户评论等。
2.2.4_aside 元素
aside 元素用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。
aside元素的用法主要有如下两种：
- 被包含在article元素内作为主要内容的附属信息。
- 在article元素之外使用，作为页面或站点全局的附属信息部分。最常用的使用方式是侧边栏，其中的内容可以是友情链接、广告单元等。
2.2.5_section 元素
section 元素用于对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容和标题组成。
在使用 section 元素时，需注意：
- 不要将 section 元素用来设置样式的页面容器，那是 div 的特性。section 元素并非一个普通的容器元素，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用 div。
- 如果 article 元素、aside 元素或 nav 元素更符合使用条件，那么不要使用 section 元素。
- 没有标题的内容区块不要使用 section 元素定义
2.2.6_footer 元素
footer 元素用于定义一个页面或者区域的底部，可以包含所有通常放在页面底部的内容。
一个页面可以包含多个 footer 元素，也可以在 article 元素或者 section 元素中添加 footer 元素。
2.3_分组元素
2.3.1_figure 元素和 figcaption 元素
figure 元素用于定义独立的内容（如图像、图标、照片、代码等）。
figcaption 元素用于为figure元素组添加标题
一个figure元素内最多允许使用一个figcaption元素，该元素应放在figure元素的第一个或者最后一个子元素的位置
实例：
代码如下：
运行后：
2.3.2_hgroup 元素
hgroup 元素用于将多个标题（主标题和副标题或者子标题）组成一个标题组，通常它与 h1 ~ h6 元素组合使用。
通常，将hgroup元素放在header元素中。
实例：
代码如下：
运行后：
2.4_页面交互元素
2.4.1_details 元素和 summary 元素
details 元素用于描述文档或文档某个部分的细节
details 元素经常与 summary 元素配合使用，一般用details定义标题
实例：代码如下，
运行后：
2.4.2_progress 元素
progress 元素用于表示一个任务的完成度。
value：已经完成的工作量
max：总共有多少工作量
实例：代码如下，
运行后：
2.4.3_meter 元素
meter 元素用于表示指定范围内的数值。
| 属性 | 说明 |
|---|---|
| high | 定义度量的值位于哪个点被界定为高的值 |
| low | 定义度量的值位于哪个点被界定为低的值 |
| max | 定义最大值，默认值是1 |
| min | 定义最小值，默认值是0 |
| optimum | 定义什么样的度量值是最佳的值。如果该值高于high属性，则意味着值越高越好。如果该值低于low属性的值，则意味着值越低越好 |
| value | 定义度量的值 |
实例：
代码如下：
运行后：
当鼠标指针放在结果中的进度条上会显示”99分“
2.5_文本层次语义元素
2.5.1_time 元素
time元素用于定义时间或日期，可以代表24小时中的某一时间。time元素不会在浏览器中呈现任何特殊效果，但是该元素能以机器可读的方式对日期和时间进行编码，这样，用户能够将生日提醒或其他事件添加到日程表中，搜索引擎也能够生成更智能的搜索结果。
datatime：用于定义相应的时间或日期。
pubdate：用于定义time元素中的日期/时间是文档（或article元素）的发布日期。取值一般为“pubdate”。
运行结果：
运行结果：
2.5.2_mark 元素
mark 元素主要功能是在文本中高亮显示某些字符。
与 em strong 有相似之处，但相比之下更随意灵活
实例：
代码如下：
运行后：
2.5.3_cite 元素
cite 元素可以创建一个引用标记，一旦使用该标记，被使用标记的文档的内容就会以斜体的样式展示在页面中。
实例：
代码如下：
运行后：
2.6_全局属性
2.6.1_draggable 属性
draggable 属性用来定义元素是否可以拖动
该属性有 true、false 两个值，默认是 false
属性是 true 时可以拖动，反之不能
实例：
代码如下：
运行后：
注意：本实例在网页中所实现的效果并不能拖动，如果要想真正实现拖动功能，必须与JavaScript结合使用。
2.6.2_hidden 属性
该属性也是有 true、false（默认值） 两个值，当属性为 true 值时，元素将会被隐藏。
实例：
代码如下：
运行后：
2.6.3_spellcheck 属性
spellcheck 属性主要针对于input元素和textarea文本输入框，对用户输入的文本内容进行拼写和语法检查。
该属性也有两个值 false、true（默认值）
值为true时检测输入框中的值，反之不检测
实例：
代码如下：
运行后：
2.6.4_contenteditable 属性
contenteditable 属性规定是否可编辑元素的内容，但是前提是该元素必须可以获得鼠标焦点并且其内容不是只读的。
该属性有 false、true 两个值
true表示可编辑，false表示不可编辑
实例：
代码如下：
运行后：
很多看起来很简单的事情
不去认真做总会出现各种各样的错误
慢慢的你就会认识到自己其实没有这么强
最可怕的事情并不是你意识到自己能力有限
可怕的是当你意识到自己能力不足后自甘堕落过的寥寥草草
你好，我是阿Ken
感谢阅读