首页 前端知识 【HTML】HTML页面和常见标签

【HTML】HTML页面和常见标签

2024-09-14 23:09:26 前端知识 前端哥 470 524 我要收藏

文章目录

  • 什么是前端
  • HTML 页面编写
  • 如何快速生成代码框架
  • 常见标签
    • 注释标签
    • 标题标签
    • 段落标签
    • 换行标签
    • 格式化标签

什么是前端

Web 前端,用来直接给以用户呈现的一个一个的网页。一个软件通常是由 后端+前端 完成的

  • 后端:通过 Java/C++等语言,完成相关的逻辑处理,将数据返回给前端

  • 前端:把后端返回过来的数据进行一系列的拼装之后,把完美的页面呈现给用户

  • Web 页面

  • PC 端应用程序页面

  • 移动端 APP 页面

HTML 页面编写

HTML 是超文本标记语言

  • 超文本:支持文本、声音、图片、视频、表格、链接
  • 标记:由许许多多的标签组成

HTML 是运行到浏览器上面的,就是说当你写完一个 HTML 代码之后,需要一个浏览器才能让它跑起来


双标签:标签有开始有结束

<html>
    <head>
        <title>这是页面标题</title>
    </head>
    <body>
        这是页面内容
    </body>
</html>
  • htmlhtml 文件的跟标签
  • head:编写页面相关的属性
  • title:页面标题
  • body:页面的内容展示信息

每一个标签相当于是一个节点,这么多的标签(节点)构成了一个 DOM 树。树就有一些子节点,headtitlebody… 就相当于是 html 的一个子标签

  • 所有的标签都是 html 的子标签
  • headbody 是兄弟标签
  • headtitle 是父子标签
    DOM 树中的每一个标签就相当与是一个对象,程序猿就可以通过代码拿到这些标签(拿到这些对象),之后就可以对这些对象进行“增删查改
    image.png|615

如何快速生成代码框架

直接在 vscode 中输入 ! + enter,生成:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>
  • <!DOCTYPE html>这里是在指定 html 的版本。这里指定当前 html 版本为 5。现在我们日常看到的网页基本上都是 html5
  • <html lang="en">这里是在指定语言lang 代表语言,en 代表 English。这是给浏览器看的,里面仍然什么语言都可以输入image.png|307
  • <meta charset="UTF-8">UTF-8 是文件解码方式。如果加码和解码的方式不一样,就会显示乱码
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">:移动端适配(不做过多研究)

常见标签

注释标签

注释不会显示在界面上,目的是提高代码的可读性

<!-- 这是注释 -->
  • 快捷键:Ctrl + / 可以快速的进行注释/取消注释

标题标签

有六个,从 h1 - h6,数字越大,字体越小

<html>
    <head>
        <title>这是页面标题</title>
    </head>
    <body>
        <!-- 这是注释 -->
        <h1>这是 h1 标题</h1>
        <h2>这是 h2 标题</h2>
        <h3>这是 h3 标题</h3>
        <h4>这是 h4 标题</h4>
        <h5>这是 h5 标题</h5>
        <h6>这是 h6 标题</h6>
    </body>
</html>

image.png|289

段落标签

p 标签表示一个段落

<html>
    <head>
        <title>这是页面标题</title>
    </head>
    <body>
        <!-- 这是注释 -->
        <p>
            今天是非常痛苦的,明天也是非常痛苦的
        </p>
        <p>
            但后天是非常令人高兴的,因为大部分人都会倒在明天晚上
        </p>
    </body>
</html>

image.png|544
注意:

  • 使用 p 标签,段落之间存在一个空隙
  • 当前的 p 标签描述的段落, 前面还没有缩进(未来 CSS 会学)
  • 自动根据浏览器宽度来决定排版
  • html 内容首尾处的换行,空格均无效
  • html 中文字之间输入的多个空格只相当于一个空格
  • html 中直接输入换行不会真的换行,而是相当于一个空格.

换行标签

brbreak 的缩写,表示换行

<html>
    <head>
        <title>这是页面标题</title>
    </head>
    <body>
        <!-- 这是注释 -->
        <p>
            今天是非常痛苦的,<br/>明天也是非常痛苦的
        </p>
        <p>
            但后天是非常令人高兴的,<br/>因为大部分人都会倒在明天晚上
        </p>
    </body>
</html>

image.png|533
注意:

  • br 是一个单标签(不需要结束标签)
  • br 标签不像 p 标签那样,两行间带有一个很大的空隙
  • <br/> 是规范写法,不建议写成<br>

格式化标签

  • 删除:strong 标签和 b 标签
  • 倾斜:em 标签和 i 标签
  • 删除线:del 标签和 s 标签
  • 下划线:ins 标签和 u 标签
<html>
    <head>
        <title>这是页面标题</title>
    </head>
    <body>
        <!-- 这是注释 -->
        <p>
            <strong>今天</strong>
            是非常痛苦的,
            <br/>
            <em>明天</em>
            也是非常痛苦的
        </p>
        <p><del>后天</del>
            是非常令人高兴的,
            <br/>
            因为大部分人都会倒在
            <ins>明天晚上</ins>
        </p>
    </body>
</html>

两种标签都能达到效果,但前者不仅能达到效果,还都有强调的作用,它们向搜索引擎、屏幕阅读器等辅助技术传达了文本的重要性,而不仅仅是视觉上的加粗

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18308.html
标签
评论
发布的文章

HTML5 CSS3面试题整理

2024-05-05 22:05:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!