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.hqwc.cn/news/283405.html

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

      相关文章

      shell子进程管理

      shell子进程管理

      简介 在我们平时写代码过程中&#xff0c;可能经常会遇到串行执行速度慢 &#xff0c;串行无法执行多个任务&#xff0c;这时便需要使用子进程同时执行。使用父进程创建子进程时&#xff0c;子进程会复制父进程的内存、文件描述符和其他相关信息。当然&#xff0c;子进程可以独…
      阅读更多...
      Web前端-JavaScript（js表达式）

      Web前端-JavaScript（js表达式）

      文章目录 JavaScript基础第01天1.编程语言概述1.1 编程1.2 计算机语言1.2.1 机器语言1.2.2 汇编语言1.2.3 高级语言 1.4 翻译器 2.计算机基础2.1 计算机组成2.2 数据存储2.3 数据存储单位2.4 程序运行 3.初始JavaScript3.1 JavaScript 是什么3.2 JavaScript的作用3.3 HTML/CSS/…
      阅读更多...
      医疗智能化革命：AI技术引领医疗领域的创新进程

      医疗智能化革命：AI技术引领医疗领域的创新进程

      一、“AI”医疗的崛起 随着人工智能&#xff08;AI&#xff09;技术的崛起&#xff0c;"AI"医疗正在以惊人的速度改变着医疗行业的面貌。AI作为一种强大的工具&#xff0c;正在为医疗领域带来前所未有的创新和突破。它不仅在医学影像诊断、病理学分析和基因组学研究等…
      阅读更多...
      tomcat错误

      tomcat错误

      Error running Tomcat8: Address localhost:1099 is already in use window环境&#xff0c;打开cmd netstat -ano | findstr :1099发现对应PID为24732 结束PID taskkill /PID 24732 /F
      阅读更多...
      R语言【rgbif】——occ_search对待字符长度大于1500的WKT的特殊处理真的有必要吗？

      R语言【rgbif】——occ_search对待字符长度大于1500的WKT的特殊处理真的有必要吗？

      一句话结论&#xff1a;只要有网有流量&#xff0c;直接用长WKT传递给参数【geometry】、参数【limit】配合参数【start】获取所有记录。 当我在阅读 【rgbif】 给出的用户手册时&#xff0c;注意到 【occ_search】 强调了 参数 【geometry】使用的wkt格式字符串长度。 文中如…
      阅读更多...
      配置Nginx解决跨域问题

      配置Nginx解决跨域问题

      Nginx 中将前端请求中的所有以 “/apiUrl” 开头的路径代理到 http://192.12.200.101:9813 例如&#xff1a; /apiUrl/login > http://192.12.200.101:9813/login 配置nginx环境 进入Nginx 的配置文件编辑界面: sudo nano /etc/nginx/conf.d/default.conf开始编辑 defaul…
      阅读更多...
      计算机网络（1）：开始

      计算机网络（1）：开始

      计算机网络&#xff08;1&#xff09;&#xff1a;开始 计算机网络在信息时代中的作用 21世纪的一些重要特征就是数字化、网络化和信息化&#xff0c;是一个以网络为核心的信息时代。要实现信息化就必须依靠完善的网络&#xff0c;因为网络可以非常迅速地传递信息。因此网络现…
      阅读更多...
      STM32/STM8资源节约主义设计方式

      STM32/STM8资源节约主义设计方式

      STM32/STM8资源节约主义设计方式 在小资源芯片进行代码设计时&#xff0c;如STM32C0系列&#xff0c;STM8系列&#xff0c;因为官方库本身要包含各种场景应用特征的支持&#xff0c;所以会有一些冗余的代码占用更多FLASH空间。当需要实现资源占用最简化设计方式时&#xff0c;…
      阅读更多...
      AAAI中稿心得

      AAAI中稿心得

      很幸运我们的一篇工作中稿了AAAI2024&#xff0c;题目是 Self-Prompt Mechanism for Few-Shot Image Recognition. 很高兴能在研二的上学期中稿一篇a会保底&#xff0c;也是我中稿的第一篇工作&#xff0c;成为我申请博士的资本。最重要的是&#xff0c;让枯燥无味的科研&#…
      阅读更多...
      3.3【窗口】窗口的几何形状（二，窗口属性）

      3.3【窗口】窗口的几何形状（二，窗口属性）

      写在前面 应用程序使用窗口来显示内容。一些属性决定了窗口及其内容的大小和位置。其他属性决定了窗口内容的外观和解释。 了解窗口属性引用的两个坐标系非常重要。如果你知道你正在使用的坐标系，那么为你的窗口属性选择设置值会容易得多，并且会更有意义。 一，显示相关属…
      阅读更多...
      12.16~12.17图的存储方式（邻接矩阵，邻接表），相应定义与构建，PTA特性（要初始化），BFS抓牛，判断题

      12.16~12.17图的存储方式（邻接矩阵，邻接表），相应定义与构建，PTA特性（要初始化），BFS抓牛，判断题

      图的存储方式 邻接矩阵 #include<iostream> using namespace std; #define maxn; struct tu {int juzhen[maxn][maxn];//行为起点&#xff0c;列为终点&#xff0c;即第一个为起点&#xff0c;第二个为终点//确定一个点的出度&#xff0c;就固定行&#xff0c;即第一个…
      阅读更多...
      读取小数部分

      读取小数部分

      1.题目描述 2.题目分析 //假设字符串为 char arr[] "123.4500"; 1. 找到小数点位置和末尾位置 代码如下&#xff1a; char* start strchr(arr, .);//找到小数点位置char* end start strlen(start) - 1;//找到末尾位置 如果有不知道strchr()用法的同学&#xf…
      阅读更多...
      推荐文章
      最新文章

      Copyright @ 2022~2023