HTML5学习(三):布局标签、列表、超链接和id

article/2025/10/6 8:43:23

1、布局标签

  • header表示网页的头部(页眉)
  • main表示网页的主体部分(一个页面中只会有一个main)
  • footer表示网页的底部(页脚)
  • nav表示网页中的导航
  • aside和主体相关的其他内容(侧边栏)
  • article表示一个独立的文章
  • section表示一个独立的区块,上边的标签都不能表示时使用section
    在这里插入图片描述
  • div 块元素,没有任何的语义,就用来表示一个区块。目前来讲,div还是主要的布局元素
  • span 行内元素,没有任何的语义,一般用于在网页中选中文字

2、列表

在html中可以创建列表,html列表一共有三种:

  • 有序列表
  • 无序列表
  • 定义列表

有序列表
使用ol标签来创建有序列表,使用li表示列表项

<ol><li>Mix flour, baking powder, sugar, and salt.</li><li>In another bowl, mix eggs, milk, and oil.</li><li>Stir both mixtures together.</li><li>Fill muffin tray 3/4 full.</li><li>Bake for 20 minutes.</li>
</ol>

在这里插入图片描述
无序列表
使用ul标签来创建无序列表,使用li表示列表项

<ul><li>Milk</li><li>Cheese<ul><li>Blue cheese<ul><li>Sweet blue cheese</li><li>Sour blue cheese</li></ul></li><li>Feta</li></ul></li>
</ul>

在这里插入图片描述
定义列表
使用dl标签来创建定义列表,使用dt表示定义的内容,使用dd来对内容进行解释说明

<dl><dt>Beast of Bodmin</dt><dd>A large feline inhabiting Bodmin Moor.</dd><dt>Morgawr</dt><dd>A sea serpent.</dd><dt>Owlman</dt><dd>A giant owl-like creature.</dd>
</dl>

在这里插入图片描述

3、超链接

超链接可以让我们从一个页面跳转到其他页面,或者是当前页面的其他的位置
使用a标签来定义超链接,href属性指定跳转的目标路径,值可以是一个外部网站的地址,也可以写一个内部页面的地址
超链接是也是一个行内元素,在a标签中可以嵌套除它自身外的任何元素

<a href="https://www.baidu.com">超链接</a>

内部地址
当我们需要跳转一个服务器内部的页面时,一般我们都会使用相对路径,会以./../开头

  • ./ 表示当前文件所在目录,可以省略不写
  • ../表示当前文件所在目录的上一级目录

新建页面
打开超链接时,使用target属性,来指定超链接打开的位置。可选值:

  • _self在当前页面中打开超链接,默认值
  • _blank在新建页面中打开超链接

锚点跳转

  • 可以使用javascript:void(0);来作为href的属性,此时点击这个超链接什么也不会发生
  • 可以将#作为超链接的路径的占位符使用,此时点击这个超链接会跳转到当前页面的顶部的位置
  • 可以跳转到页面的指定位置(锚点),只需将href属性设置#目标元素的id属性值(唯一不重复)

4、id

  • id 属性规定 HTML 元素的唯一的 id。
  • id 在 HTML 文档中必须是唯一的。
  • id 属性可用作链接锚(link anchor),通过 JavaScript(HTML DOM)或通过 CSS 为带有指定 id 的元素改变或添加样式。

语法:

<element id="value">

http://chatgpt.dhexx.cn/article/Fbqj7Ztd.shtml

相关文章

网页整体布局基本模板

一、效果 二、代码 1、html文件 <!DOCTYPE> <html><head><meta charset"utf-8"/><title>网页名称</title><link rel"stylesheet" href"html5.css"></head><body><header><h1&…

前端开发_HTML5_布局-响应式布局

响应式布局 1.引入 我们通过之前的学习&#xff0c;学习了多种不同的布局方式。我们学习布局是为了解决页面样式的问题。我们知道HTML5不仅仅可以在电脑端显示&#xff0c;而且它还可以在手机端和平板端显示&#xff0c;但是我们会发现一个问题&#xff0c;当我们在电脑端调整…

html的表格布局

一、表格的属性 在 HTML 中&#xff0c;我们使用 <table> 标签来定义表格。HTML 中的表格和 Excel 中的表格是类似的&#xff0c;都包括行、列、单元格、表头等元素。除此之外还可以为你的制作有更好的呈现效果。 定义表头thead行tr列td主干tbody尾tfoot边框border表格宽…

HTML5 弹性布局

弹性布局 弹性布局相关属性 flex-direction相关属性 flex-wrap相关属性 justify-content相关属性 align-items相关属性 align-content相关属性 样例Demo 弹性布局相关属性 属性说明display值为flex时&#xff0c; 创建弹性布局容器flex-direct…

MySQL的缓存使用

MySQL的缓存功能,在开启时,执行相同的SQL查询语句时,会直接中获取结果集返回,当数据被修改,删除,新增等操作后, 缓存被清除. 1 MySQL语句执行的流程 1 客户端向服务端发起查询, 将查询SQL发给MySQL服务器. 2 服务器先查看缓存中是否存在,缓存命中,则直接返回. 3 服务器进行SQ…

缓存(本地缓存、分布式缓存)与数据库之间的数据一致性问题

点击上方“Java基基”&#xff0c;选择“设为星标” 做积极的人&#xff0c;而不是积极废人&#xff01; 每天 14:00 更新文章&#xff0c;每天掉亿点点头发... 源码精品专栏 原创 | Java 2021 超神之路&#xff0c;很肝~中文详细注释的开源项目RPC 框架 Dubbo 源码解析网络应…

MySQL缓存机制

1. MySQL缓存简介 MySQL缓存机制说明 MySQL缓存机制即缓存sql 文本及缓存结果&#xff0c;用KV形式保存再服务器内存中&#xff0c;如果运行相同的sql&#xff0c;服务器直接从缓存中去获取结果&#xff0c;不需要再去解析、优化、执行sql MySQL缓存失效 在表的结构或数据发生…

为什么数据库缓存如此重要?

您在数据库中拥有的信息越多&#xff0c;它随着时间的推移就会越慢。即使是为支持许多并发请求而精心设计的数据库管理系统也将最终达到极限。 数据库缓存是处理这些性能问题的最常见策略之一。缓存涉及将数据库查询的结果保存在更快&#xff0c;更容易访问的位置。正确完成后…

缓存 (模拟两种:数据库提供数据到缓存、外界提供数据到缓存)

一、缓存的作用 因此就有了缓存的作用&#xff1a; 代码模拟上面缓存的作用如下所示&#xff1a; 就拿以前我们做的通过id查询单条数据功能&#xff1a; 当开启服务器后&#xff0c;客户端访问该通过id查询单条数据功能时&#xff08;假设连续访问两次&#xff09;&#xff1a…

mysql的查询缓存

提高单台节点的性能无外乎就那么几种方式&#xff0c;缓存是首当其冲的&#xff0c;因为内存的性能比磁盘高的太多。缓存也是一种典型的空间换时间的策略 缓存的实现也有太多的方式&#xff0c;从静态页面缓存到服务端动态缓存&#xff0c;再到数据库级别缓存等等。随着大数据的…

缓存(本地缓存、分布式缓存)与数据库之间的数据一致性问题?

在现在的系统架构中&#xff0c;缓存的地位可以说是非常高的。因为在互联网的时代&#xff0c;请求的并发量可能会非常高&#xff0c;但是关系型数据库对于高并发的处理能力并不是非常强&#xff0c;而缓存由于是在内存中处理&#xff0c;并不需要磁盘的IO&#xff0c;所以非常…

mysql数据库缓存

一、开启缓存 mysql 开启查询缓存可以有两种方法来开启一种是使用set命令来进行开启&#xff0c;另一种是直接修改my.ini文件来直接设置都是非常的简单的哦。 开启缓存&#xff0c;设置缓存大小&#xff0c;具体实施如下&#xff1a; 1、修改配置文件my.ini windows下是my.i…

mysql 缓存机制

mysql缓存机制就是缓存sql 文本及缓存结果&#xff0c;用KV形式保存再服务器内存中&#xff0c;如果运行相同的sql,服务器直接从缓存中去获取结果&#xff0c;不需要在再去解析、优化、执行sql。 如果这个表修改了&#xff0c;那么使用这个表中的所有缓存将不再有效&#xff0c…

数据库缓存层

一 常见的缓存形式 : 1.文件缓存 (为了避免I/O开销,尽量使用内存缓存) 2.内存缓存 二 为什么要使用缓存 缓存数据是为了让客户端很少甚至不访问数据库服务器进行的数据查询,高并发下,能最大程度降低对数据库服务器的访问压力 一般的数据请求: 用户请求->数据查询->…

SQL查询缓存

适合读者 本教程适合于那些对缓存SQL查询以减少数据库连接与执行的负载、提高脚本性能感兴趣的PHP程序员。 概述 许多站点使用数据库作为站点数据存储的容器。数据库包含了产器信息、目录结构、文章或者留言本&#xff0c;有些数据很可能是完全静态的&#xff0c;这些将会从一个…

数据库之查询缓存

查询缓存配置 查看当前的MySQL数据库是否支持查询缓存SHOW VARIABLES LIKE have_query_cache; 查看当前MySQL是否开启了查询缓存SHOW VARIABLES LIKE query_cache_type; 查看查询缓存的占用大小SHOW VARIABLES LIKE query_cache_size; 查看查询缓存的状态信息show status li…

数据库缓存

一、什么是数据库缓存 我们知道常见的数据库&#xff0c;比如oracle、mysql等&#xff0c;数据都是存放在磁盘中。虽然在数据库层也做了对应的缓存&#xff0c;但这种数据库层次的缓存一般针对的是查询内容&#xff0c;而且粒度也太小&#xff0c;一般只有表中数据没有变更的时…

【技术干货】缓存随谈系列之一:数据库缓存

本文作者: 乔锐杰 现担任上海驻云信息科技有限公司运维总监/架构师。曾任职过黑客讲师、java软件工程师/网站架构师、高级运维、阿里云架构师等职位。维护过上千台服务器,主导过众安保险、新华社等千万级上云架构。在云端运维、分布式集群架构等方面有着丰富的经验。 以…

内连接、外连接、全连接图示语法

外连接 外连接分为外左连接(left outer join)和外右连接(right outer join) left outer join 与 left join 等价&#xff0c; 一般写成left join right outer join 与 right join等价&#xff0c; 一般写成right join左连接&#xff1a;左侧交集部分 语法&#xff1a;…

MySQL 内连接、外连接、左连接、右连接、全连接

建表语句&#xff1a; CREATE TABLE a_table (a_id int(11) DEFAULT NULL,a_name varchar(10) DEFAULT NULL,a_part varchar(10) DEFAULT NULL ) ENGINEInnoDB DEFAULT CHARSETutf8CREATE TABLE b_table (b_id int(11) DEFAULT NULL,b_name varchar(10) DEFAULT NULL,b_part v…