当前位置: 首页 > article >正文

【视频+图文详解】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.kler.cn/a/526552.html

相关文章:

  • CF 761A.Dasha and Stairs(Java实现)
  • hdfs:介绍三个脚本
  • 【go语言】gorm 快速入门
  • Rust:Rhai脚本编程示例
  • 创作三载·福启新章2025
  • doris:HLL
  • 如何在本地部署deepseek-r1模型【详细步骤】
  • Java8_StreamAPI
  • LruCache实现
  • 【gRPC-gateway】option定义规则及HttpBody响应
  • leetcode——翻转二叉树(java)
  • 【网络】3.HTTP(讲解HTTP协议和写HTTP服务)
  • 《Windows 11轻松设置:一键优化系统,提升电脑效率》
  • Three.js实现3D动态心形与粒子背景的数学与代码映射解析
  • 变量声明是否可以放在语句之后?变量声明?声明变量一定需要指定类型吗?函数范围快捷使用临时变量?
  • 低代码产品插件功能一览
  • 火语言RPA--Http请求
  • 《Origin画百图》之同心环图
  • 大数据相关职位 职业进阶路径
  • 【重生之我在学习C语言指针详解】
  • 视频编辑系列——Shotcut如何裁切视频黑边并放大画面导出
  • 【练习】PAT 乙 1027 打印沙漏
  • python-leetcode-填充每个节点的下一个右侧节点指针 II
  • 基于阿里云百炼大模型Sensevoice-1的语音识别与文本保存工具开发
  • 【Numpy核心编程攻略:Python数据处理、分析详解与科学计算】1.20 极值追踪:高效获取数据特征的秘诀
  • TypeScript 学习 - 单元测试