Web前端-HTML(常用标签)

45,662次阅读
没有评论

共计 4428 个字符,预计需要花费 12 分钟才能阅读完成。

文章目录

  • 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" />
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. 内部链接 直接链接内部页面名称即可 比如 首页
  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 + /     
  • 注释是给人看的,目的是为了更好的解释这部分代码是干啥的,程序是不执行这个代码的

1.6 团队约定


div>...div>
div>...div>	
	
div>
    ...
div>

2. 路径(重点、难点)

2.1 概述

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

Web 前端 -HTML(常用标签)

2.2 绝对路径

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

2.3 相对路径

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

  • 同一级路径:只需输入图像文件的名称即可,如

    image-20230205153716604

  • 下一级路径:图像文件位于 HTML 文件同级文件夹下(例如文件夹名称为:images)如

    image-20230205154339267

  • 上一级路径:在文件名之前加入“…/”,如果是上两级,则需要使用“…/ …/”,以此类推,如

    image-20230205154413046

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

3. 锚点定位(难点)

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

2. a href="html02.html#two">跳转到 html02.htmla>    

4. 列表标签(重点)

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

Web 前端 -HTML(常用标签)

4.2 无序列表 ul(重点)

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

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

案例:

Web 前端 -HTML(常用标签)

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>

Web 前端 -HTML(常用标签)

 ul>
        li>
            p> Applep>
            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(了解)

Web 前端 -HTML(常用标签)

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

案例:

Web 前端 -HTML(常用标签)

 h3>2022 冬奥会金牌榜h3>
    ol>
        li>中国li>
        li>俄罗斯li>
        li>美国li>
        li>日本li>
        li>韩国li>
    ol>
    

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> 

代码示例案例:

Web 前端 -HTML(常用标签)

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

    原文地址: Web 前端 -HTML(常用标签)

      正文完
       0
      Yojack
      版权声明:本篇文章由 Yojack 于2024-10-14发表,共计4428字。
      转载说明:
      1 本网站名称:优杰开发笔记
      2 本站永久网址:https://yojack.cn
      3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
      4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
      5 本站所有内容均可转载及分享, 但请注明出处
      6 我们始终尊重原创作者的版权,所有文章在发布时,均尽可能注明出处与作者。
      7 站长邮箱:laylwenl@gmail.com
      评论(没有评论)