HTML基础 (上)

秒速五厘米 2024-03-22 11:36 33阅读 0赞

**目录**

一 什么是HTML

二 HTML基础结构

2.1 认识HTML标签

2.2 HTML文件基本结构

2.3 标签的层次结构

2.4 标签的属性

2.5 理解VScode默认生成的框架

三 HTML常见标签

3.1 注释标签

3.2 标题标签: h1 ~ h6

3.3 段落标签: p

3.4 换行标签: br

3.5 文字格式化标签

3.6 图片标签: img

3.7 超链接标签: a

3.7 列表标签

四 综合练习

总结

--------------------

## 一 什么是HTML ##

HTML的全称为超文本标记语言(Hyper Text Markup Language)，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。通俗点来讲就是HTML是用来写前端页面的，我们平时浏览器的各种页面都是由HTML写成的．

我们可以通过快捷键F12或者fn+F12来查看任意一个浏览器页面的HTML源码

## ![1340b50678be48eca9bc60fb6b190bb1.png][] ##

## 二 HTML基础结构 ##

### 2.1 认识HTML标签 ###

HTML代码是由"标签"来构成的,标签的基本格式如下:

<body>hello</body>

*  标签名(body)需要放在<>中
 *  大部分的HTML标签成对出现,<body>为开始标签,</body>为结束标签
 *  少数标签只有开始标签,这类标签被称为单标签
 *  开始标签和结束标签之间的是内容
 *  开始标签中可以带有一些属性

形如:

<body id="hello">hello</body>

这相当于给当前这对标签设置了一个唯一的标识符

### 2.2 HTML文件基本结构 ###

<html>
        <head>
            <title>我的页面</title>
        </head>
        <body>
            hello world
        </body>
    </html>

*  html 标签是整个html文件的根标签,同时也是最顶层标签
 *  head 标签中写的是页面的属性,例如页面的标题,页面的字符集等等
 *  body 标签中写的是页面上具体要显示的内容
 *  title 标签中写的是页面的标题

上面的代码运行起来,我们就可以得到如下页面![5f9ecb27d9fa40c392866c9d4d46a48f.png][]

### 2.3 标签的层次结构 ###

每个标签之间具有如下两种关系

*  父子关系
 *  兄弟关系

<html>
        <head>
            <title>我的页面</title>
        </head>
        <body>
            hello world
        </body>
    </html>

这其中有如下关系

1.  head 和 body 是 html 的子标签,html 是 head 和 body 的父标签,他们互为父子关系
2.  title 是 head 的子标签,head 是 title 的父标签
3.  head 和 body 之间是兄弟关系

### 2.4 标签的属性 ###

标签的属性有以下几个特点

1.  属性可以有多个, 但是均不能写道标签之前
2.  属性之间用空格作为分割,可以有多个空格,也可以是换行
3.  属性之间不分先后顺序
4.  属性使用键值对的格式来表示

示例如下(src标签和其属性在本文后序有详细解释):

### 2.5 理解VScode默认生成的框架 ###

在VScode中,我们输入 html 后 ,选择 html:5 即可默认生成如下 html 框架

![321015ca4c464495a15d024102b27322.png][]

*  <!DOCTYPE html> 称为DTD(文档类型定义),描述当前文件是一个HTML5的文件
 *  <html lang="en"> 这个其实就是给html标签加上了一个lang属性,同时long的值为 en,表示当前页面是一个英文页面(有些浏览器会根据此处的生命提示是否进行自动翻译)
 *  <meta charset="UTF-8"> 描述当前页面的字符编码方式, 没有这一行的话可能会导致汉字不能正确解析,出现乱码
 *  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 其中的 viewport 指的是设备的屏幕上能用来显示网页的那一块区域, width=device-width, initial-scale=1.0 是在设置可视区和设备的宽度等宽,同时设置初始缩放为不可缩放.
 *  <title>Document</title> title标签是描述当前页面的名字,即当前页面的初始名字为 Document

## 三 HTML常见标签 ##

有了以上对HTML的基础认识后,我们来学习一些常见的标签,来自己制作出特别的界面

### 3.1 注释标签 ###

注释是不会出现在网页界面上,其主要目的是提高代码的可读性,我们在VScode中可以通过 ctrl+/ 进行快速注释和取消注释

### 3.2 标题标签: h1 ~ h6 ###

> 代码示例如下

> 效果如下

![240b4734eca047daaae111ee4a664ecf.png][]

使用标题标签时候要注意以下两点

1.  标题标签自带换行
2.  标题标签是数字越大,字体越小,我们可以参考一级标题,二级标题,三级标题来理解,即一级标题字最大.

### 3.3 段落标签: p ###

我们可以发现当我们将一段比较长的文本粘贴带 html 的 body 标签中,即使我们在VScode中已经分好了段落,当我运行起来就会发现其并没有分成段落,因此我们需要利用段落标签来实现分段

> 代码示例如下

<p>这是第一段</p>
    <p>这是第二段</p>

> 效果如下

![8386db5f0017461ab1670a422e256285.png][]

使用p标签要注意以下几点:

1.  p 标签不单单是换行,即 p 标签和别的内容之间一个空隙
2.  p 标签描述的段落开头没有缩进
3.  对于每一对 p 标签中的内容,会自动根据浏览器宽度来决定排版
4.  html 内容首尾处的换行,空格均无效
5.  在 html 中文字之间输入的多个空格只相当于一个空格
6.  html 源码中直接输入的换行在解析的时候不会解析为换行,而是在页面中显示一个空格

### 3.4 换行标签: br ###

> 使用示例如下

<p>
        p 标签不单单是换行,即 p 标签和别的内容之间一个空隙 <br/>
        p 标签描述的段落开头没有缩进<br/>
        对于每一对 p 标签中的内容,会自动根据浏览器宽度来决定排版<br/>
        html 内容首尾处的换行,空格均无效<br/>
        在 html 中文字之间输入的多个空格只相当于一个空格<br/>
        html 源码中直接输入的换行在解析的时候不会解析为换行,而是在页面中显示一个空格<br/>
    </p>

> 效果如下

![e8ba07a8df934130959ebc36defbe87c.png][]

使用 br 标签要注意以下几点

1.  br 是一个单标签
2.  br 标签不像 p 标签一样带有很大的空隙, br 标签只是单单的换行
3.  <br/> 是规范写法, 不建议写成 <br>

### 3.5 文字格式化标签 ###

*  加粗: strong 标签 和 b 标签
 *  倾斜: em 标签 和 i 标签
 *  删除线: del 标签 和 s 标签
 *  下划线: ins 标签 和 u 标签

> 代码示例如下

> 效果如下

![0fe958e635334cc397aa547d554863fd.png][]

### 3.6 图片标签: img ###

img 标签的常见属性:

*  src: 表示图片的路径,可以是相对路径,也可以是绝对路径.(这里对于相对路径和绝对路径的区别和用法不做过多解释,不会的老铁可以去查一查)
 *  alt: 替换文本, 当图片不能够正确显示的时候,显示替换的文字
 *  width / height: 控制宽度高度,高度和宽度一般改一个就行,另外一个可以等比例缩放,若同时改可能会导致图片失衡
 *  border: 边框,参数是宽度的像素
 *  title: 图片标题,即当我们光标落在该图片上时, 光标上显示的文字

我们使用 img 标签是想要在界面上展示图片的,因此 img 标签必须带有 src 属性

> 代码示例如下

注意:src路径是相对路径,即我已经提前把该图片放到和该html文件相同的目录下了,且其文件名为 dog.png

> 效果如下

![8872f65e363a462da6cef683245f5283.png][]

### 3.7 超链接标签: a ###

a 标签的常见属性:

*  href: 点击后要的页面的链接
 *  target: 打开方式, 默认是\_self, 该方式下点击之后跳转的新页面会占用我们当前页面, 而我们一般用的时候会把改成 \_blank, 改成之后点击链接会开启一个新页面来显示

特别注意使用 a 标签的时候要注意以下两点:

1.  a 标签的 href 属性必须具备,否则无法进行跳转
2.  a 标签必须有内容,否则在页面上不会显示 a 标签的任何东西

a 标签中 href 属性中链接的几种形式:

1. 外部链接: 引用其他网站的地址

2. 内部链接: 在网页内部之间的连接, 写出相对路径即可

首先在相同目录下,创建一个test.html, 之后我们在写一个html文件,在这个文件中通过这个代码就可以实现跳转到test页面

<a href="test.html">跳转到test页面</a>

3. 下载链接: href 对应的路径是一个文件的时候,浏览器就会执行下载任务

4. 空链接: 使用\#来占位

这种情况下,我们点击页面上的空链接文字,不会进行跳转

5. 网页元素链接: 我们可以给网页页面上的任意元素添加链接

<a href="http://www.sogou.com">
        <img src="dog.png">
    </a>

6 锚点链接: 通过这个可以实现网页位置跳转,类似于点击目录,跳转到响应段落

以下是代码示例,只是演示使用的基本方法

7. 禁止跳转链接: 当我们不想让该链接进行跳转的时候,就将其 href 属性设为 javascript:void(0) 或者 javascript:; 即可

### 3.7 列表标签 ###

#### 1. 无序列表: ul 和 li ####

> 代码示例

> 效果如下

![961bf27dead343608cae73faca862b1a.png][]

#### 2. 有序列表: ol 和 li ####

> 代码示例

>  效果如下

![f61560e260db4ecc9dffd3656ffa9cb1.png][]

#### 3. 自定义列表 dl dt(小标题) 和 dd ####

> 代码示例

<dl>
        <dt>西游记四人组</dt>
        <dd>唐僧</dd>
        <dd>孙悟空</dd>
        <dd>猪八戒</dd>
        <dd>沙悟净</dd>
    </dl>

> 效果如下

![0bc31a0bc70b42bf81f2e464afc2a23c.png][]

#### 4. 注意事项 ####

*  每一种列表中的标签均是并列关系
 *  ul / ol 标签中只能放 li 标签,dl 中只能放 dt 标签 和 dd 标签
 *  想要不同列表嵌套,可以在 li 标签中放其他标签

## 四 综合练习 ##

学习了以上这些基本标签的使用,我们就可以写出一些基本的网页页面,这里演示一个简单的网页版简历.

> 预期页面效果

![dd70317e2d414c8ea9f814f076676ff1.png][]

> 代码如下

提醒,图片可以自行在网上找一个图片,下载到和 html 文件的同目录下,之后修改代码中的图片路径名,即可正确显示出图片.

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>我的简历</title>
    </head>
    <body>
        <h2>某某某</h2>
        <div>
            
            <div>
                <h3>基本信息</h3>
                
                <img src="dog.png" alt="个人图片" title="某某某" height="300px" height="150px">
            </div>
            <div>
                <p>求职意向: Java开发工程师</p>
            </div>
            <div>
                <p>联系电话: XXX-XXX-XXXX</p>
            </div>
            <div>
                <p>邮箱: xxx@foxmail.com</p>
            </div>
            <div>
                
                <p><a href="#" target="_blank">我的 gitee</a></p>
            </div>
            <div>
                
                <p><a href="#" target="_blank">我的 博客</a></p>
            </div>
        </div>
    
        
        <div>
            <h3>教育背景</h3>
            <ol>
                <li>1990 - 1996 小葵花幼儿园 幼儿园</li>
                <li>1996 - 2002 小葵花小学 小学</li>
                <li>2002 - 2005 小葵花中学 中学</li>
                <li>2005 - 2008 小葵花中学 高中</li>
                <li>2008 - 2012 小葵花大学 计算机专业 本科</li>
            </ol>
        </div>
    
        
        <div>
            <h3>专业技能</h3>
            <ul>
                <li>Java基础语法扎实, 已经刷了800道Leetcode题</li>
                <li>常见数据结构都可以独立实现并熟练运用</li>
                <li>熟知计算机网络理论, 并且可以独立排查常见问题</li>
                <li>掌握Web开发能力, 并且独立开发了学校的留言墙功能</li>
            </ul>
        </div>
    
        
        <div>
            <h3>我的项目</h3>
            <ol>
                <li>
                    <h3>留言墙</h3>
                     <p>开发时间: 2008年9月->2008年12月</p>
                     <p>功能介绍:
                        <ul>
                            <li>支持留言发布</li>
                            <li>支持匿名留言</li>
                        </ul>
                     </p>
                </li>
                <li>
                    <h3>学习小助手</h3>
                    <p>开发时间: 2008年9月->2008年12月</p>
                    <p>功能介绍:
                        <ul>
                            <li>支持错题检索</li>
                            <li>支持同学探讨</li>
                        </ul>
                    </p>
                </li>
            </ol>
        </div>
    
        
        <div>
            <h3>个人评价</h3>
            <p>在校期间，学习成绩优良，多次获得奖学金</p>
        </div>
    </body>
    </html>

## 总结 ##

这里是 html 中较为基础的知识,很有趣,也很有用,希望可以对每一个读者产生良好的影响.

制作不易,如果该博客对您有帮助,还请您点赞,收藏 + 关注支持一波小编, 感谢!

[1340b50678be48eca9bc60fb6b190bb1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/04f39df1d9984d1e99dafa45e4ff7aab.png
[5f9ecb27d9fa40c392866c9d4d46a48f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/34e05b32705c4fbe96918e0576b60c3d.png
[321015ca4c464495a15d024102b27322.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/8a5ac45493fa43b5a6643fc7385321c1.png
[240b4734eca047daaae111ee4a664ecf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/b6b31517bb0d4016a292685f72470053.png
[8386db5f0017461ab1670a422e256285.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/49a278a97cbd4f8d80306131778f0c21.png
[e8ba07a8df934130959ebc36defbe87c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f7a28721768f47a78340a876fbafbdfb.png
[0fe958e635334cc397aa547d554863fd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/208639e63aeb4e58a3ca5c41f15cf4f4.png
[8872f65e363a462da6cef683245f5283.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/46831d63343e44fca63a3be324b33093.png
[961bf27dead343608cae73faca862b1a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/16e035f1cb724c299b84433301c40fcc.png
[f61560e260db4ecc9dffd3656ffa9cb1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/9468796f998b428e97f81148cfca3868.png
[0bc31a0bc70b42bf81f2e464afc2a23c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/64c0f93c10da40bcb3afeab5f991e0c6.png
[dd70317e2d414c8ea9f814f076676ff1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/da239e618a5b4788b21301cf409135c2.png