感激相遇 你好 我是阿ken
作者:请叫我阿ken
链接:juejin.cn/user/109118…
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
🌊🌈关于前言:
文章部分内容及图片出自网络,如有问题请与我本人联系(主页介绍中有公众号)
本博客暂适用于刚刚接触HTML以及好久不看想要复习的小伙伴
🌊🌈关于内容:
2.1 列表元素
2.1.1 ul 元素(无序)
实例1:
代码如下:
运行结果:
2.1.2 ol 元素(有序)
实例2:
代码如下:
运行结果:
2.1.3 dl 元素
实例3:
代码如下:
运行结果:
2.1.4 列表元素的嵌套
实例4:
代码如下:
运行结果:
实例5:举一反三推出其他嵌套结构,
<!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
照片、搜索表单及其他内容。
具有引导和导航的作用。
实例6:
代码如下:
运行结果:
2.2.2 nav 元素
nav元素用于定义导航链接
实例7:
代码如下:
运行结果:
点击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
元素的第一个或者最后一个子元素的位置
实例8:
代码如下:
运行结果:
2.3.2 hgroup 元素
hgroup 元素用于将多个标题(主标题和副标题或者子标题)组成一个标题组,通常它与 h1 ~ h6 元素组合使用。
通常,将hgroup
元素放在header
元素中。
实例9:
代码如下:
运行结果:
2.4 页面交互元素
2.4.1 details 元素和 summary 元素
details 元素用于描述文档或文档某个部分的细节
details 元素经常与 summary 元素配合使用,一般用details定义标题
实例10:
代码如下:
运行结果:
2.4.2_progress 元素
progress 元素用于表示一个任务的完成度。
value:已经完成的工作量
max:总共有多少工作量
实例11:
代码如下:
运行结果:
2.4.3 meter 元素
meter 元素用于表示指定范围内的数值
属性 | 说明 |
---|---|
high | 定义度量的值位于哪个点被界定为高的值 |
low | 定义度量的值位于哪个点被界定为低的值 |
max | 定义最大值,默认值是1 |
min | 定义最小值,默认值是0 |
optimum | 定义什么样的度量值是最佳的值。如果该值高于high属性,则意味着值越高越好。如果该值低于low属性的值,则意味着值越低越好 |
value | 定义度量的值 |
实例12:
代码如下:
运行结果:
当鼠标指针放在结果中的进度条上会显示”99分“
2.5 文本层次语义元素
2.5.1 time 元素
time元素用于定义时间或日期,可以代表24小时中的某一时间。time
元素不会在浏览器中呈现任何特殊效果,但是该元素能以机器可读的方式对日期和时间进行编码,这样,用户能够将生日提醒或其他事件添加到日程表中,搜索引擎也能够生成更智能的搜索结果。
datatime
:用于定义相应的时间或日期。
pubdate
:用于定义time元素中的日期/时间是文档(或article
元素)的发布日期。取值一般为“pubdate
”。
实例13:
代码如下:
运行结果:
实例14:
代码如下:
运行结果:
2.5.2 mark 元素
mark 元素主要功能是在文本中高亮显示某些字符。
与 em
、strong
有相似之处,但相比之下更随意灵活
实例15:
代码如下:
运行结果:
2.5.3 cite 元素
cite 元素可以创建一个引用标记,一旦使用该标记,被使用标记的文档的内容就会以斜体的样式展示在页面中。
实例16:
代码如下:
运行结果:
2.6 全局属性
2.6.1 draggable 属性
draggable 属性用来定义元素是否可以拖动
该属性有 true
、false
两个值,默认是false
属性是true
时可以拖动,反之不能
实例17:
代码如下:
运行结果:
注意:本实例在网页中所实现的效果并不能拖动,如果要想真正实现拖动功能,必须与JavaScript
结合使用。
2.6.2 hidden 属性
该属性也是有true
、false
(默认值)两个值,当属性为true
值时,元素将会被隐藏。
实例18:
代码如下:
运行结果:
2.6.3 spellcheck 属性
spellcheck 属性主要针对于input元素和textarea文本输入框,对用户输入的文本内容进行拼写和语法检查。
该属性也有两个值false
、true
(默认值)
值为true
时检测输入框中的值,反之不检测
实例19:
代码如下:
运行结果:
2.6.4 contenteditable 属性
contenteditable 属性规定是否可编辑元素的内容,但是前提是该元素必须可以获得鼠标焦点并且其内容不是只读的。
该属性有false
、true
两个值
true
表示可编辑,false
表示不可编辑
实例20:
代码如下:
运行结果:
今日入门学习暂时告一段落
Peace
🌊🌈往期回顾:
阿ken的HTML、CSS的入门指南(一)_HTML基础
阿ken的HTML、CSS的入门指南(二)_HTML页面元素和属性
阿ken的HTML、CSS的入门指南(三)_文本样式属性
阿ken的HTML、CSS的入门指南(四)_CSS3选择器
阿ken的HTML、CSS的入门指南(五)_CSS盒子模型
阿ken的HTML、CSS的入门指南(六)_CSS盒子模型
阿ken的HTML、CSS的入门指南(七)_CSS盒子模型
阿ken的HTML、CSS的入门指南(八)_CSS盒子模型
阿ken的HTML、CSS的入门指南(九)_浮动与定位
阿ken的HTML、CSS的入门指南(十)_浮动与定位
阿ken的HTML、CSS的入门指南(十一)_浮动与定位
🌊🌈关于后记:
感谢阅读,希望能对你有所帮助 博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我 感谢每一位小伙伴不吝赐教
原创不易,「点赞」+「评论」 谢谢支持❤