Web前端-HTML（常用标签）

news/2025/3/16 6:28:00/

文章目录

  • 1. HTML常用标签
    • 1.1 排版标签
      • 1）标题标签h (熟记)
      • 2）段落标签p ( 熟记)
      • 3）水平线标签hr(认识)
      • 4）换行标签br (熟记)
      • 5）div 和 span标签(重点)
      • 6）排版标签总结
    • 1.2 标签属性
    • 1.3 图像标签img (重点)
    • 1.4 链接标签(重点)
    • 1.5 注释标签
    • 1.6 团队约定
  • 2. 路径(重点、难点)
    • 2.1概述
    • 2.2 绝对路径
    • 2.3 相对路径
  • 3. 锚点定位（难点）
  • 4. 列表标签（重点）
    • 4.1 网页中的列表应用的场景有哪些？
    • 4.2 无序列表 ul （重点）
    • 4.3 有序列表 ol （了解）
    • 4.4 自定义列表（理解）
    • 4.5 列表总结

1. HTML常用标签

  • HTML标签有很多，这里我们学习最为常用的，后面有些较少用的，我们可以查下手册就可以了。

1.1 排版标签

  • 排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。

1）标题标签h (熟记)

  • 单词缩写： head 头部、 标题

  • 为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即h1-h6

<h1>   标题文本   </h1>
<h2>   标题文本   </h2>
<h3>   标题文本   </h3>
<h4>   标题文本   </h4>
<h5>   标题文本   </h5>
<h6>   标题文本   </h6>

  • 显示效果如下：

  • 注意 :

    • 一行是只能放一个标题的

2）段落标签p ( 熟记)

  • 单词缩写： paragraph 段落 [ˈpærəgræf] 无须记这个单词

  • 可以把 HTML 文档分割为若干段落

  • 在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是

<p>  文本内容  </p>
  • 是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

3）水平线标签hr(认识)

  • 单词缩写： horizontal 横线 [ˌhɔrəˈzɑntl] 同上

  • 在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，

    就是创建横跨网页水平线的标签。其基本语法格式如下：

  • <hr />是单标签

4）换行标签br (熟记)

  • 单词缩写： break 打断 ,换行

  • 在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

<br />

5）div 和 span标签(重点)

  • div span 是没有语义的 是我们网页布局主要的2个盒子 想必你听过 css+div

  • div 就是 division 的缩写 分割， 分区的意思 其实有很多div 来组合网页。

  • span 跨度，跨距；范围

  • 语法格式：

  <div></div><span></span>

他们两个都是盒子，用来装我们网页元素的， 只不过他们有区别，现在我们主要记住使用方法和特点就好了

  • div标签 用来布局的，但是现在一行只能放一个div
  • span标签 用来布局的，一行上可以放好多个span，不换行

6）排版标签总结

标签名定义说明
标题标签作为标题使用，并且依据重要性递减

段落标签可以把 HTML 文档分割为若干段落
水平线标签没啥可说的，就是一条线

换行标签
div标签用来布局的，但是现在一行只能放一个div
span标签用来布局的，一行上可以放好多个span

1.2 标签属性

  • 所谓属性就是外在特性 比如 手机的颜色 手机的尺寸 ，总结就是手机的。

    image-20230205152916847

  • 手机的颜色是黑色

  • 手机的尺寸是 8寸

  • 水平线的长度是 200

  • 图片的宽度 是 300

  • 使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
<手机 颜色="红色" 大小="5寸">  </手机>

1.3 图像标签img (重点)

  • 单词缩写： image 图像

  • 要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签以及和他相关的属性。（它是一个单身狗）

  • 语法如下：

<img src="图像URL" />

  • 该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。

  • **注意: **

    • 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
    • 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
    • 采取 键值对 的格式 key=“value” 的格式

  • 重点属性掌握点：

    • src：表示链接图片的地址，包含图片名称
    • alt：当图片不能正常显示提示的文本信息
    • title：表示鼠标悬停在图片时显示的信息
    • width：图片占屏幕的像素宽度
    • height：图片占屏幕的像素高度
<img src="xnkl.JPEG" alt="图片不见了" title="这是新年快乐的海报" width="1512">

1.4 链接标签(重点)

  • 单词缩写： anchor 的缩写 [ˈæŋkə®] 。基本解释 锚, 铁锚 的

  • 在HTML中创建超链接非常简单，只需用标签把文字包括起来就好。

  • 语法格式：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性作用
href用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能
target用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，__blank为在新窗口中打开方式。
  • 注意：
  1. 外部链接 需要添加 http:// www.baidu.com
  2. 内部链接 直接链接内部页面名称即可 比如 < a href=“index.html”> 首页
  3. 如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href=“#”)，表示该链接暂时为一个空链接。
  4. 不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
 <a href="https://www.baidu.com" target="_blank">百度一下</a><a href="https://www.baidu.com"><img src="xnkl.JPEG" alt="xxx">
</a>

1.5 注释标签

  • 在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

  • 简单解释：

  • 注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。

  • 语法格式：

    <!-- 注释语句 -->     快捷键是：    ctrl + /

  • 注释重要性：

    image-20230205153211767

  • 注释是给人看的，目的是为了更好的解释这部分代码是干啥的， 程序是不执行这个代码的

1.6 团队约定

  • 一般用于简单的描述，如某些状态描述、属性描述等

  • 注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行

  • 推荐：

<!-- Comment Text -->
<div>...</div>
  • 不推荐：
<div>...</div><!-- Comment Text -->	<div><!-- Comment Text -->...
</div>

2. 路径(重点、难点)

2.1概述

  • 实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们。

    image-20230205153304290

  • **目录文件夹： **

    image-20230205153521163

  • **根目录 **

打开目录文件夹的第一层 就是 根目录

​ image-20230205153601289

2.2 绝对路径

  • 绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，指当所有网页引用同一个文件时，所使用的路径都是一样的。
  • “F:\web\img\logo.gif”，或完整的网络地址，例如“http://www.baidu.cn/images/logo.gif”。
  • 注意：
  • 绝对路径用的较少，我们理解下就可以了。

2.3 相对路径

  • 以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对路径。

  • 同一级路径：只需输入图像文件的名称即可，如<img src=“baidu.gif” >

    image-20230205153716604

  • 下一级路径：图像文件位于HTML文件同级文件夹下（例如文件夹名称为：images）如<img src=“images/baidu.gif” >

    image-20230205154339267

  • 上一级路径：在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推， 如<img src=“…/baidu.gif” >

    image-20230205154413046

相对路径，是从代码所在的这个文件出发， 去寻找我们的目标文件的，而 我们所说的 上一级 下一级 同一级 简单说，就是 图片 位于 HTML 页面的位置

3. 锚点定位（难点）

  • 通过创建锚点链接，用户能够快速定位到目标内容。

  • 创建锚点链接分为两步：

1. 使用相应的id名标注跳转目标的位置。 (找目标)<a href="#two">第二集</a><p id="two"> 第二季电视剧剧情 </p>2. <a href="html02.html#two">跳转到html02.html</a>

4. 列表标签（重点）

4.1 网页中的列表应用的场景有哪些？

​ image-20230205154541696

4.2 无序列表 ul （重点）

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>......
</ul>

  • ul就是声明一下。这是一个无序列表，li表示列表项

  • 脚下留心：

 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
值描述
disc默认值、实心圆
circle空心圆
square实心方块

案例：

image-20230205154616707 
<body><p>我的电脑</p><ul type="square"><li >我的c盘<ul type="disc"><li>我的视频</li><li>我的音乐</li><li>我的文档</li></ul></li><li>我的D盘<ul type="disc"><li>我的视频</li><li>我的音乐</li><li>我的文档</li></ul></li></ul>
</body>
image-20230205154809826 
 <ul><li><p> Apple</p><img src="https://www.apple.com.cn/v/iphone-13-pro/f/images/overview/design/design_display_pro_max__dswn1tntiywm_large_2x.png"alt="" height="200"></li><li><p>华为</p><img src="https://www.apple.com.cn/v/iphone-13-pro/f/images/overview/design/design_display_pro_max__dswn1tntiywm_large_2x.png"alt="" height="200"></li><li><p>三星</p><img src="https://www.apple.com.cn/v/iphone-13-pro/f/images/overview/design/design_display_pro_max__dswn1tntiywm_large_2x.png"alt="" height="200"></li><li><p>小米</p><img src="https://www.apple.com.cn/v/iphone-13-pro/f/images/overview/design/design_display_pro_max__dswn1tntiywm_large_2x.png"alt="" height="200"></li></ul>

4.3 有序列表 ol （了解）

​ image-20230205164734726

  • 有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：
<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>......
</ol>

案例：

​ image-20230205164811997

 <h3>2022冬奥会金牌榜</h3><ol><li>中国</li><li>俄罗斯</li><li>美国</li><li>日本</li><li>韩国</li></ol><!--  type:1,A,a,I,i -->

4.4 自定义列表（理解）

  • 定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：
<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd>...<dt>名词2</dt><dd>名词2解释1</dd><dd>名词2解释2</dd>...
</dl>

代码示例案例：

image-20230205164842440 
<dl><dt>什么是帅哥</dt><dd>身高够高</dd><dd>有钱</dd><dd>帅气</dd><dt>什么是美女</dt><dd>身高够高</dd><dd>有钱</dd><dd>漂亮</dd>
</dl>

4.5 列表总结

标签名定义说明
    		无序标签里面只能包含li 没有顺序，我们以后布局中最常用的列表
      		有序标签里面只能包含li 有顺序， 使用情况较少
      		自定义列表里面有2个兄弟， dt 和 dd

      我们现在还没有学布局，现在只要保证2个点：

      1. 学会什么时候用无序列表， 学会什么时候用自定义列表
      2. 无序列表和自定义列表代码怎么写？
      3. 具体的我们刚才看的布局，等我们学了css 在来全面布局。

      http://www.ppmy.cn/news/1273743.html

      相关文章

      谷歌宣布向云计算客户开放 Gemini Pro，开发者可用其构建应用

      谷歌宣布向云计算客户开放 Gemini Pro，开发者可用其构建应用

      12 月 14 日消息&#xff0c;美国时间周三&#xff0c;谷歌宣布了一系列升级的人工智能&#xff08;AI&#xff09;功能&#xff0c;旨在为其云计算客户提供更好的服务。这家科技巨头正试图赶上竞争对手&#xff0c;比如微软和 OpenAI&#xff0c;它们都在积极利用人工智能的热…
      阅读更多...
      SpringMVC的文件上传、多文件上传

      SpringMVC的文件上传、多文件上传

      概念&#xff1a;上传/下载应用 对于上传功能&#xff0c;我们在项目中是经常会用到的&#xff0c;比如用户注册的时候&#xff0c;上传用户头像&#xff0c;这个时候就会使用到上传的功能。而对于下载&#xff0c;使用场景也很常见&#xff0c;比如我们项目中有个使用说明是是…
      阅读更多...
      apache shiro 反序列化漏洞解决方案

      apache shiro 反序列化漏洞解决方案

      apache shiro 反序列化漏洞解决方案 反序列化漏洞解决方案产生原因解决方案1&#xff1a;1.升级shiro至最新版本1.7.1解决方案2&#xff1a;修改rememberMe默认密钥&#xff0c;生成随机密钥。 反序列化漏洞解决方案 反序列化漏洞介绍 序列化&#xff1a;把对象转换为字符串或…
      阅读更多...
      Flink系列之：监控反压

      Flink系列之：监控反压

      Flink系列之&#xff1a;监控反压 一、反压二、Task 性能指标三、示例四、反压状态 Flink Web 界面提供了一个选项卡来监控正在运行 jobs 的反压行为。 一、反压 如果你看到一个 task 发生 反压警告&#xff08;例如&#xff1a; High&#xff09;&#xff0c;意味着它生产数…
      阅读更多...
      QT作业4

      QT作业4

      实现一个闹钟&#xff0c;当输入时间后&#xff0c;点击启动到达时间后循环播报三遍&#xff0c;便签内容 头文件&#xff1a; #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTextToSpeech> //文本转语言类 #include <QTimerEvent> //定…
      阅读更多...
      Web前端-HTML（初识）

      Web前端-HTML（初识）

      文章目录 1.认识WEB1.1 认识网页&#xff0c;网站1.2 思考 2. 浏览器&#xff08;了解&#xff09;2.1 五大浏览器2.2 查看浏览器占有的市场份额 3. Web标准&#xff08;重点&#xff09;3.1 Web 标准构成结构表现行为 1.认识WEB 1.1 认识网页&#xff0c;网站 网页主要由文字…
      阅读更多...
      电子元器件介绍——三极管（五）

      电子元器件介绍——三极管（五）

      电子元器件介绍 文章目录 电子元器件介绍前言一、晶体管的基础知识二、场效应晶体管1.绝缘栅场效应晶体管 三、晶体管和FET比较 前言 这一节我们学习三极管。 一、晶体管的基础知识 晶体三极管全称为双极结型晶体管。它的基本功能是具有电流放大作用。 上图B是基极&#…
      阅读更多...
      图像与视频压缩算法

      图像与视频压缩算法

      图像压缩是通过减少图像数据量来降低图像文件的大小&#xff0c;从而减少存储空间和传输带宽。有多种图像压缩算法&#xff0c;它们可以分为两大类&#xff1a;有损压缩和无损压缩。 无损压缩算法&#xff1a; Run-Length Encoding (RLE): 这是一种简单的无损压缩方法&#x…
      阅读更多...
      最新文章

      Copyright @ 2022~2023