入门级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
感谢阅读