Web前端-HTML（常用标签）

文章目录

  • 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.mzph.cn/news/231302.shtml

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

      相关文章

      MySQL进阶｜MySQL中的事务（一）

      MySQL进阶｜MySQL中的事务（一）

      文章目录 数据库事务MySQL中的存储引擎InnoDB存储引擎架构什么是事务事务的状态总结 数据库事务 MySQL 事务主要用于处理操作量大&#xff0c;复杂度高的数据。比方我想要删除一个用户&#xff08;销户&#xff09;以及这个用户的个人信息、订单信息以及其他信息&#xff0c;这…
      阅读更多...
      2024年软件测试入坑指南，新人必看系列

      2024年软件测试入坑指南，新人必看系列

      本科非计算机专业&#xff0c;在深圳做了四年软件测试工作&#xff0c;从之前的一脸懵的点点点&#xff0c;到现在会点自动化测试&#xff0c;说一点点非计算机专业人员从事软件测试的心得体会&#xff0c;仅供参考交流。 如果你是非计算机专业&#xff0c;毕业不久&#xff0…
      阅读更多...
      ＜JavaEE＞ 文件IO -- File类和文件操作

      ＜JavaEE＞ 文件IO -- File类和文件操作

      目录 一、文件的概念 二、文件系统 三、文件类型 四、使用 File 类进行文件操作 4.1 File 类中的 pathSeparator 属性 4.2 File 类构造方法 4.3 File 类常用方法 一、文件的概念 什么是文件&#xff1f; 广义上的“文件”是指抽象化的操作系统中的硬件设备和软件资源&a…
      阅读更多...
      第十三章 SpringCloud Alibaba 实现 Seata--分布式事务

      第十三章 SpringCloud Alibaba 实现 Seata--分布式事务

      分布式事务基础 事务 事务指的就是一个操作单元&#xff0c;在这个操作单元中的所有操作最终要保持一致的行为&#xff0c;要么所有操作 都成功&#xff0c;要么所有的操作都被撤销。简单地说&#xff0c;事务提供一种“要么什么都不做&#xff0c;要么做全套”机制。 本地事…
      阅读更多...
      RAG检索增强技术在知识库智能检索场景下的应用实践

      RAG检索增强技术在知识库智能检索场景下的应用实践

      如果你对这篇文章感兴趣&#xff0c;而且你想要了解更多关于AI领域的实战技巧&#xff0c;可以关注「技术狂潮AI」公众号。在这里&#xff0c;你可以看到最新最热的AIGC领域的干货文章和案例实战教程。 一、知识检索增强的基本概述 1.1、知识检索增强技术提出的背景 1.1.1、L…
      阅读更多...
      Spring Boot学习随笔- JSP小项目-员工管理系统（验证码生成、增删改查）

      Spring Boot学习随笔- JSP小项目-员工管理系统（验证码生成、增删改查）

      学习视频&#xff1a;【编程不良人】2021年SpringBoot最新最全教程 第十章、项目开发 实现一个登录注册&#xff0c;增删改查功能的系统 10.1 项目开发流程 需求分析 分析用户主要需求 提取项目核心功能&#xff0c;根据核心功能构建页面原型 库表设计&#xff1a; 分析系统…
      阅读更多...
      基于FPGA的视频接口之高速IO（CML）

      基于FPGA的视频接口之高速IO（CML）

      简介 本章节是对于高速IO接口应用的一个扩展&#xff0c;目前扩展为CML。 CML&#xff08;电流模式逻辑-即Current Mode Logic&#xff09;。电路主要靠电流驱动&#xff0c;也是所有高速数据接口形式中最简单的一种&#xff0c;它的输入与输出的匹配集成在芯片内部&#xff0c…
      阅读更多...
      mysql innodb知识记录

      mysql innodb知识记录

      官方文档 官网架构图 innodb 特性 内存 buffer pool 采用优化后的LRU算法&#xff0c; 3/8 of the buffer pool is devoted to the old sublist.The midpoint of the list is the boundary where the tail of the new sublist meets the head of the old sublist.When In…
      阅读更多...
      逆向登录（js逆向）

      逆向登录（js逆向）

      链接: aHR0cHM6Ly9zc28ubHlua2NvLmNvbS9jdXN0b21lci9sb2dpbj9jbGllbnRfaWQ9OGMxNWE2NGY2Nzk0NDY5YjhhNTlmMTBiODNjZWYzYzEmcmVkaXJlY3RfdXJpPWh0dHBzOi8vaDUubHlua2NvLmNuOjQ0My9hdXRoL21hbGwvaDUvbG9naW4mcmVzcG9uc2VfdHlwZT1jb2RlJnNjb3BlPW9wZW5pZCZzdGF0ZT0zNGQ4NGYxNmIwY…
      阅读更多...
      MySQL安装——备赛笔记——2024全国职业院校技能大赛“大数据应用开发”赛项——任务2：离线数据处理

      MySQL安装——备赛笔记——2024全国职业院校技能大赛“大数据应用开发”赛项——任务2：离线数据处理

      MySQLhttps://www.mysql.com/ 将下发的ds_db01.sql数据库文件放置mysql中 12、编写Scala代码&#xff0c;使用Spark将MySQL的ds_db01库中表user_info的全量数据抽取到Hive的ods库中表user_info。字段名称、类型不变&#xff0c;同时添加静态分区&#xff0c;分区字段为etl_da…
      阅读更多...
      Win10电脑退出安全模式的两种方法

      Win10电脑退出安全模式的两种方法

      在Win10电脑中&#xff0c;大家可以点击进入系统安全模式&#xff0c;完成相对应的系统设置。但是&#xff0c;很多用户进入安全模式完成设置后&#xff0c;不知道怎么操作才能成功退出安全模式&#xff1f;接下来小编给大家分享两种简单的方法&#xff0c;帮助大家成功退出Win…
      阅读更多...
      强大的数学软件 GeoGebra 多平台适用

      强大的数学软件 GeoGebra 多平台适用

      GeoGebra 是一款教育数学软件&#xff0c;可以帮助学生和教师探索、学习和教授各种数学概念和科学领域的知识。GeoGebra 以其灵活性和强大的功能而闻名&#xff0c;它融合了几何、代数、微积分、概率、统计和其他数学领域的工具&#xff0c;以及绘图和计算功能。 功能 GeoGeb…
      阅读更多...
      Java魔法解密：HashMap底层机制大揭秘

      Java魔法解密：HashMap底层机制大揭秘

      文章目录 一、 源码深度解析1.1 窥探Java集合框架中的设计思想1.2 逐行解读HashMap的源代码1.2.1 类信息1.2.2 常量属性1.2.3 变量属性1.2.4 节点信息1.2.5 构造方法1.2.6 put方法1.2.6.1 putVal方法1.2.6.2 putTreeVal方法1.2.6.3 tieBreakOrder方法1.2.6.4 treeifyBin方法1.2…
      阅读更多...
      lua语法

      lua语法

      lua语法 1.lua数据类型 lua 脚本输出乱码&#xff0c;将lua脚本改为UTF-8编码&#xff0c;并且需要DOS下修改代码页&#xff1a;CHCP 65001 即可。 基本语法 注释 print("script lua win")-- 单行注释--[[多行注释]]--标识符 类似于&#xff1a;java当中 变量、…
      阅读更多...
      新建vue3项目

      新建vue3项目

      三种方法 一. 第一种方式 1、操作步骤&#xff1a; 创建项目目录 vue create 项目名称选择配置方式 ? Please pick a preset: #选择一个配置 Default &#xff08;[Vue 3] babel, eslint&#xff09;Default &#xff08;[Vue 2] babel, eslint&#xff09;Manually select …
      阅读更多...
      Python：（Sentinel-1）如何解析SNAP输出的HDF5文件并输出为GeoTIFF？

      Python：（Sentinel-1）如何解析SNAP输出的HDF5文件并输出为GeoTIFF？

      博客已同步微信公众号&#xff1a;GIS茄子&#xff1b;若博客出现纰漏或有更多问题交流欢迎关注GIS茄子&#xff0c;或者邮箱联系(推荐-见主页). Python&#xff1a;&#xff08;Sentinel-1&#xff09;如何解析SNAP输出的HDF5文件并输出为GeoTIFF&#xff1f; 01 前言 最近…
      阅读更多...
      Spring之容器：IOC（1）

      Spring之容器：IOC（1）

      学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…
      阅读更多...
      【Android Studio】各个版本下载地址

      【Android Studio】各个版本下载地址

      下载地址&#xff1a; https://developer.android.com/studio/archive?hlzh-cn
      阅读更多...
      java期末大作业(星辰对决--五子棋AI)

      java期末大作业(星辰对决--五子棋AI)

      星辰闪耀星空棋&#xff0c;璀璨洒满宇宙间。 Java编织智慧谱&#xff0c;FindYou翩舞奇妙规。 黑白对弈纵横展&#xff0c;人机较量激荡心。 星光指引胜利路&#xff0c;创造奇迹指尖舞。 代码: 等改好了再放上来 效果图: 日志: 2023/12/17 今天去网上学了一下AI下五子棋…
      阅读更多...
      什么同源策略？

      什么同源策略？

      同源 同源指的是URL有相同的协议、主机名和端口号。 同源策略 同源策略指的是浏览器提供的安全功能&#xff0c;非同源的RUL之间不能进行资源交互 跨域 两个非同源之间要进行资源交互就是跨域。 浏览器对跨域请求的拦截 浏览器是允许跨域请求的&#xff0c;但是请求返回…
      阅读更多...
      推荐文章
      最新文章

      Copyright @ 2022~2023