HTML基础 (上)-蒲公英云

一什么是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源码

" class="reference-link">

二 HTML基础结构

2.1 认识HTML标签

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

<body>hello</body>

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

形如:

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

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

2.2 HTML文件基本结构

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

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

上面的代码运行起来,我们就可以得到如下页面

2.3 标签的层次结构

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

父子关系
兄弟关系

我的页面

hello world

这其中有如下关系

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

2.4 标签的属性

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

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

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

<img src="dog.jpg" alt="狗" title="这是一个小狗"
    width="500px" height="800px">

2.5 理解VScode默认生成的框架

在VScode中,我们输入 html 后 ,选择 html:5 即可默认生成如下 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>Document</title>
    </head>
    <body>
    </body>
</html>

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

三 HTML常见标签

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

3.1 注释标签

<!-- 这是注释的基本格式 -->

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

3.2 标题标签: h1 ~ h6

代码示例如下

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

效果如下

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

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

3.3 段落标签: p

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

代码示例如下

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

效果如下

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

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

3.4 换行标签: br

使用示例如下

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

效果如下

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

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

3.5 文字格式化标签

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

代码示例如下

<strong>加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>

效果如下

3.6 图片标签: img

img 标签的常见属性:

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

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

代码示例如下

<img src="dog.png" alt="狗" title="这是一个小狗" width="500px">

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

效果如下

3.7 超链接标签: a

a 标签的常见属性:

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

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

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

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

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

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

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

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

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

下载文件
空链接: 使用#来占位

空链接

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

网页元素链接: 我们可以给网页页面上的任意元素添加链接
```
 <img src="dog.png">
```

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

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

<a href="#one">第一段</a>
<a href="#tow">第二段</a>
<a href="#three">第三段</a>
<!-- 这是第一段 -->
<p id="one">
    ...
</p>
<!-- 这是第二段 -->
<p id="two">
    ...
</p>
<!-- 这是第三段 -->
<p id="three">
    ...
</p>

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

3.7 列表标签

1. 无序列表: ul 和 li

代码示例

<ul>
    <li>唐僧</li>
    <li>孙悟空</li>
    <li>猪八戒</li>
    <li>沙悟净</li>
</ul>

效果如下

2. 有序列表: ol 和 li

代码示例

<ol>
    <li>唐僧</li>
    <li>孙悟空</li>
    <li>猪八戒</li>
    <li>沙悟净</li>
</ol>

效果如下

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

代码示例

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

效果如下

4. 注意事项

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

四综合练习

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

预期页面效果

代码如下

提醒,图片可以自行在网上找一个图片,下载到和 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>
            <!-- 这里可以填写你的gitee地址 -->
            <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>