HTML代码框架+标签初识1

初识HTML代码框架+标签初识1

此文章建议了解HTML定义再来学习
一.HTML所需插件和一些基础操作
- 1.1如何快速生成代码
- 1.2标题和内容
- [1.4第一个插件Auto Rename Tag](#1.4第一个插件Auto Rename Tag)
- 1.5第二个插件view-in-browser
- [1.6 第三个插件Live Server](#1.6 第三个插件Live Server)
二.解析生成的代码框架
三.HTML标签
- 3.1标题&段落&换行标签
- 3.2格式化标签
- 3.3img标签_(src属性)01
- 3.4img属性02
- [3.5 -a标签href属性](#3.5 -a标签href属性)
- - [3.5.1 跳转到某一个网站](#3.5.1 跳转到某一个网站)
  - [3.5.2 跳转到自己写的文件](#3.5.2 跳转到自己写的文件)
  - [3.5.3 跳转到当前页面刷新页面](#3.5.3 跳转到当前页面刷新页面)
  - [3.5.4 点击图片跳转到相应页面](#3.5.4 点击图片跳转到相应页面)
- [3.6 target属性](#3.6 target属性)

此文章建议了解HTML定义再来学习

一.HTML所需插件和一些基础操作

在正式讲解之前，我先为大家介绍 HTML 开发中常用的三个插件，以及如何快速生成代码框架。

1.1如何快速生成代码

我们只需按下 Shift + ！ + 回车 ，即可快速搭建好 HTML 的基础框架，如下图所示：

1.2标题和内容

我们在两个 title 标签中间所写的内容，就是文件的标题。
我们在两个 body 标签中间所写的内容，就是文件的主体内容。

如下图所示：

## 1.3如何打开文件查看

我们先按 Ctrl + S 保存文件，然后右键文件，找到 Reveal in File Explorer ，再点开文件即可查看。

那么我们展示的文件内容如下：

1.4第一个插件Auto Rename Tag

插件的作用 我们在里面写其它东西我们的也会自动补上去如下图所示这样一来我们的书写就方便了一点(我们点击install即可下载)

1.5第二个插件view-in-browser

插件的作用就是我们编辑好了我们的代码我们可以直接用这个插件把代码跑起来就行不需要再打开文件刷新查看
如何使用我们右键文件找到View in Browser 直接点击就可以运行了

1.6 第三个插件Live Server

插件的作用：我们改了文件的内容但是我们保存之后原先那个文件直接打开不改变如下图所示我们有了这个插件之后所起的作用就是我们改变内容保存文件之后原先那个文件就会自动改变

二.解析生成的代码框架

1.<!DOCTYPE html>：这个代码表示的是我们的html的版本指定了当前版本为5

<html lang="en"> ：指定当前页面的内容是一个英文的
<meta charset="UTF-8"> ：浏览器的解码规则

如果我们的代码是按照ISO来编写的那么我们的文件将会出现乱码如下图所示

4.<meta name="viewport" content="width=device-width, initial-scale=1.0">这个代码主要是让移动端适配的因为我们主要学习Web端所以不做过多的解释

<title>Document</title> 这个代码就是文件的名字在标签里面的那个就是文件的名字

6.<body></body> 这里面写的就是文章的内容

三.HTML标签

3.1标题&段落&换行标签

3.1.1注释

注释标签 我们直接选中需要注释的内容用快捷键Ctrl+反斜杠就能生成

javascript 复制代码

<body>
    这是内容
    <!-- 这是注释 -->
</body>

我们在运行之后展示的效果如下图所示

右图是源代码左边是展示的效果

3.1.2标题标签h1-h6

我们先观察以下的代码以及运行的结果

javascript 复制代码

<body>
    <h1>这是内容</h1>
    <h2>这是内容</h2>
    <h3>这是内容</h3>
    <h4>这是内容</h4>
    <h5>这是内容</h5>
    <h6>这是内容</h6>
</body>

可以看到我们的h1到h6标签 随着数字增大 我们在屏幕上显示的字的大小逐渐减小 而且两行之间都有间隙这是浏览器里面自带的样式(CSS)

补充一点 我们按住F12打开源码选住一行发现有颜色交替这是浏览器默认的格式后面会教我们如何去更改

3.1.3段落标签-----p标签

p标签是用来分段落的 ，这里特别提示一下我们的回车不能达到换行的目的这里面的回车相当于一个空格

先看下列的代码和运行的结果

javascript 复制代码

<body>
   <p>我是一名热爱计算机的大一新生</p>
   <P>我是一名热爱计算机</P>
   <P>的大一新生</P>
</body>

从运行的结果就可以发现我们的每一个p标签就代表一个段落

3.1.4换行标签------br标签

我们先看下面的代码和运行效果

javascript 复制代码

<body>
   <p>我是一名<br>热爱<br/>计算机的大一新生</p>
   <P>我是一名热爱计算机</P>
   <P>的大一新生</P>
</body>

这里我们可以看到一个<br>或者一个<br/>标签就相当于一次换行在HTML里面不区分换行的开始和结束标签，但是我们推荐写成<br/>

换行标签比段落标签的间隙要小

3.2格式化标签

加粗：strong标签和b标签
倾斜：em标签和i标签
删除线：del标签和s标签
下划线：ins标签和u标签
同一个标签有两种表示 的方法我们用其中一个就可以，但是也有区分我们的前者都有强调的作用（通过这些强调我们可以让爬虫获取到我们当前的这个文本）

提前说一下：我们在企业里面基本都是用CSS去实现这些效果的但是我们的HTML也可以实现这样的效果

3.2.1加粗标签-----strong标签

我们可以直接看下面的代码和运行的结果(后面的三个标签也是同样的展示方法) 看出这个strong的使用方法以及作用

javascript 复制代码

<body>
    这是内容<br>
   <strong>这是内容</strong>
</body>

3.2.2倾斜标签----em标签

javascript 复制代码

<body>
    这是内容<br>
    <em>这是内容</em>
</body>

3.2.3删除线标签----del标签

kotlin 复制代码

<body>
    这是内容<br>
    <del>这是内容</del>
</body>

3.2.4下划线标签----ins标签

javascript 复制代码

<body>
    这是内容<br>
    <ins>这是内容</ins>
</body>

3.3img标签_(src属性)01

3.3.1相对路径展示图片

提前说明一下我们的img标签有很多的属性我们先讲解src属性（img标签必须带有src属性，表示图片的路径）

当前文件夹下面的文件

javascript 复制代码

<body>
    <img src="./280992ea161f7384c0d5090caf75693a (1).jpeg">
</body>

当前文件夹下文件夹里面的文件

javascript 复制代码

<body>
    <img src="./img/553de04672eb96c343e91a3cfee7f053.jpeg">
</body>

上一层路径下面的图片

上层路径下面的图片：

javascript 复制代码

<img src="../280992ea161f7384c0d5090caf75693a (1).jpeg">

展示的效果

3.3.2绝对路径展示图片

比如我先来展示一下如下图的D盘里面的图片

javascript 复制代码

<body>
    <img src="D://280992ea161f7384c0d5090caf75693a (1).jpeg">
</body>

展示效果

3.3.3如果是网络上的资源怎么办？

我们可以直接找到图片的地址复制放到双引号里面

javascript 复制代码

<body>
    <img src="https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%275a6J6aG65bCP57qi55qu6JG16Iqx5Z%2B65Zyw566A5LuLXzE3MzQ0NjkzNDIuODcwNjA0OA%3D%3D%27/0.png">
</body>

最后展示的结果

3.4img属性02

3.4.1alt属性

alt属性的作用：替换文本，当文本不能正确显示的时候，会显示一个替换的文字

平时引入图片路径的时候会导致图片路径写错 ，我们的alt属性就可以用文字去替换图片，就以下面的代码为例这个图片是刚才当前路径下的图片（为了看出alt的效果在引入路径的时候少了一个a）

javascript 复制代码

<body>
    <img src="./280992ea161f7384c0d5090caf75693 (1).jpeg" alt="你的图片加载失败">
</body>

最后的文件展示的效果（提示一下只有图片加载失败的时候才会展示出来文字）

3.4.2title属性

title属性的作用：提示文本，鼠标放到图片上会有提示

我们直接看使用的效果

javascript 复制代码

<body>
     <img src="280992ea161f7384c0d5090caf75693a (1).jpeg"  title="百度图片">
</body>

鼠标放到图片上面会有文字的提示

3.4.3width/height属性

width/height属性的作用：控制宽度和高度，高度和宽度一般改一个就行，因为另外一个会等比例放缩，否则的话就会图片失衡

我们直接看使用的效果

先看原始的图片

javascript 复制代码

<body>
     <img src="280992ea161f7384c0d5090caf75693a (1).jpeg"  title="百度图片" width="100px " height="100px">
</body>

这里说一下我们的px是像素的意思这个px越大图片越大

处理之后的图片

3.4.4border属性

border属性的作用：边框，参数是宽度的像素，但是一般使用CSS来设定

我们直接看使用方法代码和使用效果图片

javascript 复制代码

<body>
     <img src="280992ea161f7384c0d5090caf75693a (1).jpeg"  title="百度图片" width="100px " height="100px" border="10px">
</body>

使用效果图片（为了明显观看到边框，所以用了10px）

3.5 -a标签href属性

功能：点击文字可以跳转到相应页面，然后配合-a标签的href属性就能达成目的，代码如下

3.5.1 跳转到某一个网站

下面以跳转到百度为例，我们先找到百度的链接，

javascript 复制代码

<body>
    <a href="https://www.baidu.com/">跳转到百度</a>
</body>

文件展示的效果如下

3.5.2 跳转到自己写的文件

我以当前的路径举例子，当前目录有html01和02，我要实现从01跳转到02的效果

使用代码如下

javascript 复制代码

<body>
    <a href="https://www.baidu.com/">跳转到百度</a>
    <a href="html02.html">跳转到html02</a>
</body>

展示文件的效果如下

3.5.3 跳转到当前页面刷新页面

直接跳转到当前页面即可

javascript 复制代码

<body>
    <a href="https://www.baidu.com/">跳转到百度</a>
    <a href="html02.html">跳转到html02</a>
    <a href="html01.html">刷新页面</a>
</body>

3.5.4 点击图片跳转到相应页面

我们就以跳转到百度为例，我们先用img标签把百度图片引进来，然后再用上面的百度链接就行了

javascript 复制代码

<body>
    <a href="https://www.baidu.com/">
        <img src="432fc2831b3bda9a92f0dfa62be0b99c.jpeg"> 
    </a>
</body>

展示的效果如图，我们直接点击图片就能跳转到百度页面

3.6 target属性

我们如果要在其中一个页面跳转到另一个页面并且原先的页面不被后面的页面覆盖掉，那么我们就要用target属性去实现，我们前面讲解的href属性之所以把原来的页面覆盖掉是因为target打开的方式默认是_self，如果是_black则用新的标签打开

所以我们想要达到这种跳转不覆盖的效果就要把target变成_black，接下来就以跳转到百度为例子

javascript 复制代码

<body>
    <a href="https://www.baidu.com/" target="_black">跳转到百度</a>
</body>

展示的效果