【视频+图文详解】HTML基础3-html常用标签

图文教程

html常用标签

常用标签

1. 文档结构

  1. <!DOCTYPE html>:声明HTML文档类型。
  2. <html>:定义HTML文档的根元素。
  3. <head>:定义文档头部,包含元数据。
  4. <title>:设置网页标题,浏览器标签页显示。
  5. <body>:定义网页的主体内容。

2. 文本格式化

     1.<h1> ~ <h6>:定义标题,<h1>是最高级,<h6>是最低级。

-注意:标题系列标签有助于浏览器搜索的优化,搜索引擎抓取标题的内容,h1标签的权重最大,但一个页面只能使用一个h1标签,如果使用多个h1标签那么搜索优先级会降低

     2.<p>:定义段落。

     3.<br>:换行。

     4.<strong>:加粗文本,语义上表示强调。

     5.<em>:斜体文本,语义上表示强调。

     6.<b>:加粗文本(只是样式,语义不如<strong>)。

     7.<i>:斜体文本(只是样式,语义不如<em>)。

     8.<u>:下划线文本。

3. 链接与图片

  1. <a>:定义超链接。
  2. <img>:插入图片,需设置 src 属性指向图片地址。
    格式: <img src="hello/ma.jpg" alt="">

-src属性:图片源;

-alt属性:图片替换文本(当图片不显示的时候会显示我们写上去的文本)

注意:hello文件和ma.jpg要放在此源代码文件夹下才会显示出来

<img src="images/1.jpg" title="鸟巢的远景">

其中title属性的作用是设置鼠标悬在图片上时看到的文本

  1. <link>:连接外部资源,通常用于外部样式表。
  2. <meta>:定义网页的元数据,如字符集、描述、关键字等。

4. 列表

  1. <ul>:无序列表。
  2. <ol>:有序列表。
  3. <li>:列表项。
  4. <dl>:定义定义列表。
  5. <dt>:定义定义列表项的标题。
  6. <dd>:定义定义列表项的描述。

5. 表格

  1. <table>:定义表格。
  2. <tr>:定义表格的行。
  3. <td>:定义表格的单元格。
  4. <th>:定义表格头部单元格,通常为加粗居中的文本。
  5. <caption>:定义表格的标题。

相对路径和绝对路径

(还是以上边的图片嵌入为例)

--相对路径:从当前文件或目录的位置出发,指定目标文件或目录的路径。

--绝对路径:从文件系统的根目录开始,完整指定文件或目录的位置路径。

比如相对hello文件夹(文件路径为F:\hello),ma.jpg的相对路径为hello/ma.jpg,ma.jpg的绝对路径为F:\hello\ma.jpg

--html源代码文件:就是包括这行代码的源代码文件

锚点

锚点:HTML中的一种标记,用于在同一页面内或不同页面之间创建可跳转的链接位置。

<a></a>(在指定位置添加一个超级链接);需要注意的是锚点中的锚和点的使用方法不同,后面会做出详细讲解。

--a标签的几个属性:

1.href:可以跳转链接;也可以跳转html文件

2.target属性(要搭配_blank关键词):是否在新标签页打开链接(点击链接后会打开一个新标签页然后加载内容)

【页面内跳转锚点的设置有两种方法】

关于页面内锚点的概述:如下图所示,就是我们看一些网页上面的索引

【方法一】:通过设置标签a的name属性达到页面跳转锚点的方法

,href属性,后面一定要加#

<a href="#jbxx">基本信息</a>

锚点的点,name属性设置成跳转的链接

<a name="jbxx"></a>

【方法二】:设置锚点的点为标签的id属性

<a href="#jbxx">基本信息</a>

锚点的点由原来的a标签的name属性变为了其他标签id属性,使用方法跟href一致

<h3 id="jbxx">基本信息</h3>

这种方法是直接在我们的<h3>标签标题中直接引入id属性(id属性适配所有html标签)

视频教程

哔哩哔哩(B站)搜索框中输入“uid=3546393096489381”即可

用户:star010_

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/9833.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

回顾:Maven的环境搭建

1、下载apache-maven-3.6.0 **网址:**http://maven.apache.org 然后解压到指定的文件夹&#xff08;记住文件路径&#xff09; 2、配置Maven环境 复制bin文件夹 的路径D:\JavaTool\apache-maven-3.6.0\bin 环境配置成功 3、检查是否配置成功 winR 输入cmd 命令行输入mvn -v…

【Numpy核心编程攻略:Python数据处理、分析详解与科学计算】1.30 性能巅峰:NumPy代码优化全攻略

1.30 性能巅峰&#xff1a;NumPy代码优化全攻略 目录 #mermaid-svg-CMVXy3CN2tNmW8RJ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-CMVXy3CN2tNmW8RJ .error-icon{fill:#552222;}#mermaid-svg-CMVXy3CN2tNmW8RJ …

白嫖DeepSeek:一分钟完成本地部署AI

1. 必备软件 LM-Studio 大模型客户端DeepSeek-R1 模型文件 LM-Studio 是一个支持众多流行模型的AI客户端&#xff0c;DeepSeek是最新流行的堪比GPT-o1的开源AI大模型。 2. 下载软件和模型文件 2.1 下载LM-Studio 官方网址&#xff1a;https://lmstudio.ai 打开官网&#x…

冲刺蓝桥杯之速通vector!!!!!

文章目录 知识点创建增删查改 习题1习题2习题3习题4&#xff1a;习题5&#xff1a; 知识点 C的STL提供已经封装好的容器vector&#xff0c;也可叫做可变长的数组&#xff0c;vector底层就是自动扩容的顺序表&#xff0c;其中的增删查改已经封装好 创建 const int N30; vecto…

mysql_init和mysql_real_connect的形象化认识

解析总结 1. mysql_init 的作用 mysql_init 用于初始化一个 MYSQL 结构体&#xff0c;为后续数据库连接和操作做准备。该结构体存储连接配置及状态信息&#xff0c;是 MySQL C API 的核心句柄。 示例&#xff1a; MYSQL *conn mysql_init(NULL); // 初始化连接句柄2. mysql_…

C++中常用的排序方法之——冒泡排序

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///计算机爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于C中常用的排序方法之——冒泡排序的…

ARM嵌入式学习--第十天(UART)

--UART介绍 UART(Universal Asynchonous Receiver and Transmitter)通用异步接收器&#xff0c;是一种通用串行数据总线&#xff0c;用于异步通信。该总线双向通信&#xff0c;可以实现全双工传输和接收。在嵌入式设计中&#xff0c;UART用来与PC进行通信&#xff0c;包括与监控…

解锁微服务:五大进阶业务场景深度剖析

目录 医疗行业&#xff1a;智能诊疗的加速引擎 电商领域&#xff1a;数据依赖的破局之道 金融行业&#xff1a;运维可观测性的提升之路 物流行业&#xff1a;智慧物流的创新架构 综合业务&#xff1a;服务依赖的优化策略 医疗行业&#xff1a;智能诊疗的加速引擎 在医疗行业迈…

基于Flask的旅游系统的设计与实现

【Flask】基于Flask的旅游系统的设计与实现&#xff08;完整系统源码开发笔记详细部署教程&#xff09;✅ 目录 一、项目简介二、项目界面展示三、项目视频展示 一、项目简介 该系统采用Python作为后端开发语言&#xff0c;结合前端Bootstrap框架&#xff0c;为用户提供了丰富…

《HelloGitHub》第 106 期

兴趣是最好的老师&#xff0c;HelloGitHub 让你对编程感兴趣&#xff01; 简介 HelloGitHub 分享 GitHub 上有趣、入门级的开源项目。 github.com/521xueweihan/HelloGitHub 这里有实战项目、入门教程、黑科技、开源书籍、大厂开源项目等&#xff0c;涵盖多种编程语言 Python、…

一文讲解Java中的BIO、NIO、AIO之间的区别

BIO、NIO、AIO是Java中常见的三种IO模型 BIO&#xff1a;采用阻塞式I/O模型&#xff0c;线程在执行I/O操作时被阻塞&#xff0c;无法处理其他任务&#xff0c;适用于连接数比较少的场景&#xff1b;NIO&#xff1a;采用非阻塞 I/O 模型&#xff0c;线程在等待 I/O 时可执行其…

Linux——网络(tcp)

文章目录 目录 文章目录 前言 一、TCP逻辑 1. 面向连接 三次握手&#xff08;建立连接&#xff09; 四次挥手&#xff08;关闭连接&#xff09; 2. 可靠性 3. 流量控制 4. 拥塞控制 5. 基于字节流 6. 全双工通信 7. 状态机 8. TCP头部结构 9. TCP的应用场景 二、编写tcp代码函数…

Flutter使用Flavor实现切换环境和多渠道打包

在Android开发中通常我们使用flavor进行多渠道打包&#xff0c;flutter开发中同样有这种方式&#xff0c;不过需要在原生中配置 具体方案其实flutter官网个了相关示例&#xff08;https://docs.flutter.dev/deployment/flavors&#xff09;,我这里记录一下自己的操作 Android …

MySQL备忘录

MySQL 的一些基础知识记录&#xff0c;包括一些配置文件&#xff0c;cmd命令等 前言 这里使用的MySQL版本是8.0.25 MySQL安装&#xff0c;包括相关配置文件文本内容&#xff0c;相关cmd命令 通过安装包配置环境变量使用cmd管理员权限通过命令安装MySQL 8.0.25 一、安装配置 …

Prompt提示词完整案例:让chatGPT成为“书单推荐”的高手

大家好&#xff0c;我是老六哥&#xff0c;我正在共享使用AI提高工作效率的技巧。欢迎关注我&#xff0c;共同提高使用AI的技能&#xff0c;让AI成功你的个人助理。 许多人可能会跟老六哥一样&#xff0c;有过这样的体验&#xff1a;当我们遇到一个能力出众或对事物有独到见解的…

Maui学习笔记- SQLite简单使用案例02添加详情页

我们继续上一个案例&#xff0c;实现一个可以修改当前用户信息功能。 当用户点击某个信息时&#xff0c;跳转到信息详情页&#xff0c;然后可以点击编辑按钮导航到编辑页面。 创建项目 我们首先在ViewModels目录下创建UserDetailViewModel。 实现从详情信息页面导航到编辑页面…

Linux文件原生操作

Linux 中一切皆文件&#xff0c;那么 Linux 文件是什么&#xff1f; 在 Linux 中的文件 可以是&#xff1a;传统意义上的有序数据集合&#xff0c;即&#xff1a;文件系统中的物理文件 也可以是&#xff1a;设备&#xff0c;管道&#xff0c;内存。。。(Linux 管理的一切对象…

HttpClient学习

目录 一、概述 二、HttpClient依赖介绍 1.导入HttpClient4依赖 2.或者导入HttpClient5依赖 3.二者区别 三、HttpClient发送Get请求和Post请求测试 (一)通过HttpClient发送Get请求 (二)通过HttpClient发送Post请求 一、概述 HttpClient是 Apache 软件基金会提供的一…

【重生之我在学习C语言指针详解】

目录 ​编辑 --------------------------------------begin---------------------------------------- 引言 一、指针基础 1.1 内存地址 1.2 指针变量 1.3 指针声明 1.4 取地址运算符 & 1.5 解引用运算符 *** 二、指针运算 2.1 指针加减运算 2.2 指针关系运算 三…

< OS 有关> BaiduPCS-Go 程序的 菜单脚本 Script: BaiduPCS-Go.Menu.sh (bdgo.sh)

目标&#xff1a; 使用 日本阿里云的 VPM 传输文件。 暂时方案&#xff1a; 使用 主机JPN 下载 https://huggingface.co/ 上模型从 JPN 放到 度狗上在家里从狗度下载 为了减少编程&#xff0c;尽量使用现在软件 &#xff0c;就找到 GitHub - qjfoidnh/BaiduPCS-Go: iikira…