阿ken的HTML、CSS的入门指南(二)_HTML 页面元素和属性

1,980 阅读8分钟

感激相遇 你好 我是阿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元素时,需注意:

  1. 不要将section元素用来设置样式的页面容器,那是div的特性。section元素并非一个普通的容器元素,当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div
  2. 如果article元素、aside元素或nav元素更符合使用条件,那么不要使用section元素。
  3. 没有标题的内容区块不要使用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 元素主要功能是在文本中高亮显示某些字符
emstrong 有相似之处,但相比之下更随意灵活


实例15:
代码如下:

在这里插入图片描述


运行结果:

在这里插入图片描述

2.5.3 cite 元素

cite 元素可以创建一个引用标记,一旦使用该标记,被使用标记的文档的内容就会以斜体的样式展示在页面中。


实例16:
代码如下:

在这里插入图片描述


运行结果:

在这里插入图片描述

2.6 全局属性

2.6.1 draggable 属性

draggable 属性用来定义元素是否可以拖动
该属性有 truefalse两个值,默认是false
属性是true时可以拖动,反之不能


实例17:
代码如下:

在这里插入图片描述


运行结果:

在这里插入图片描述

注意:本实例在网页中所实现的效果并不能拖动,如果要想真正实现拖动功能,必须与JavaScript结合使用。

2.6.2 hidden 属性

该属性也是有truefalse(默认值)两个值,当属性为true值时,元素将会被隐藏。


实例18:
代码如下:


运行结果:

在这里插入图片描述

2.6.3 spellcheck 属性

spellcheck 属性主要针对于input元素和textarea文本输入框,对用户输入的文本内容进行拼写和语法检查。
该属性也有两个值falsetrue(默认值)
值为true时检测输入框中的值,反之不检测


实例19:
代码如下:

在这里插入图片描述


运行结果:

在这里插入图片描述

2.6.4 contenteditable 属性

contenteditable 属性规定是否可编辑元素的内容,但是前提是该元素必须可以获得鼠标焦点并且其内容不是只读的。
该属性有falsetrue两个值
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的入门指南(十一)_浮动与定位

🌊🌈关于后记:

感谢阅读,希望能对你有所帮助 博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我 感谢每一位小伙伴不吝赐教

原创不易,「点赞」+「评论」 谢谢支持❤