当前位置：首页 > news >正文

HTML基础知识

news 来源：原创 2025/5/15 15:15:35

HTML是超文本标记语言（HyperText Markup Language）的缩写，是用于创建网页的标记语言。HTML由一系列的元素（elements）或标签（tags）组成，这些元素描述了网页的结构和内容。当浏览器解析HTML文件时，它会根据标记来渲染页面的内容和布局。

1）标签语法：

标签成队出现，中间包裹内容，符号< >中放的英文字母就是标签名。

2）HTML基本骨架

快速生成HTML基本骨架，在vs code中的.html文件中，通过！（英文）配合Enter / Tab 键就可以自动的生成HTML基本的骨架。

3）标签的关系

父子关系（嵌套关系）

<html></html>和<head></head>就是父子关系。

兄弟关系（并列关系）

<head></head>和<body></body>就是兄弟关系。

4）注释

其中的.....就是被注释的内容，可以使用快捷键Ctrl+ / 可以快速注释和取消注释。注释的内容会看不见。

5）标题标签（h1-h6）

新闻标题、文章标题、网页区域名称、产品名称等等

显示特点：文字加粗、字号逐渐减小、独占一行（换行）

对于h1标签，一个网页只用一次，其他不限次数。

6）段落标签（p）

一般用在新闻的段落、文章段落、产品描述信息等等。

p标签是超过就会自动换行的，两个p之间是有空白间隙的。

7）换行（br）和水平线（hr）标签

直接换行是显示不出来换行效果的，只有加上br标签才能实现换行。

8）文本格式化标签

为文本添加特殊的格式，以突出重点，常见的文本格式：加粗、倾斜、下划线、删除线。

一般使用左边的。且文本格式化标签不换行，在一行显示。

9）图像标签（img）

在网页中插入图片，<img src = "图片的URL">

图片标签不支持换行，在一行显示。

图像标签的属性：

10）超链接（a）

作用就是点击跳转到其他页面

target属性设置target="_blank"就可以实现在新窗口打开该网页，而不是覆盖当前网页。

11）音频标签audio

12）视频标签video

测试案例1：

<!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>
    <h1>cce</h1>
    <hr>
    <p>尤雨溪，前端框架<a href="#">Vue.js</a> 的作者，<a href="#">HTML5</a> 版Clear的
        打造人，独立开源开发者。曾就职于Google Development Group。
        由于工作中大量接触开源的项目lavaScrip，最后自己也走上了开源之路
    </p>
    <img src="./QR.png" alt="照片">
    
    <h2>学习经历</h2>
    <p>sajbdvhjsndvii打造人，独立开源开发者。曾就职于Google Development Group。
        由于工作中大量接触开源
    </p>

    <h2>主要成就</h2>
    <p>打造人， <strong>独立开源开发者</strong>。曾就职于Google Development Group。
        <ins>由于工作中大量接触开源的项目lavaScrip</ins>
    </p>
    <p>2014年2月</p>
    
    <h2>社会任职</h2>
    <p>2016年9月3日，在南京的JSConf上，Vue作者尤雨溪正式宣布加盟x团队，
        尤雨溪称他将以技术顾问的身份加入Weex团队来做Vue和aScript runtime 整合，
        目标是让大家能用Vue 的语法跨三端。
    </p>

</body>
</html>

测试案例2：

<!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>
    <h1>Vue.js</h1>
    <hr>
    <p>
        Vue(读音 /ju:/，类似于 vew) 是一套用于构建用户界面的渐进式JavaScript框架。
        [5]与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
        Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
        另一方面，当与现代化的工具链以及各种支持类库结合便用时，
        Vue也完全能够为复杂的单页应用(SPA)提供驱动。
        <p>其作者为<a href="#" target="_blank">尤雨溪</a> </p>
    </p>
    
    <p>sajbdvhjsndvii打造人，独立开源开发者。曾就职于Google Development Group。
        由于工作中大量接触开源
    </p>

    <p>打造人，独立开源开发者。曾就职于Google Development Group。由于工作中大量接触开源的项目lavaScrip
    </p>
    <p>2014年2月</p>
    
    <video src="./2.mp4" controls></video>

</body>
</html>