前端学习第一天--编程软件vscode使用、HTML标签

白桃苏打水

已于 2022-03-09 07:47:15 修改

阅读量2.9k

点赞数 12

文章标签：前端 vscode html

于 2022-03-05 14:58:49 首次发布

本文链接：https://blog.csdn.net/bestier/article/details/123293171

版权

vscode软件基本操作

第一步：下载vscode，官网下载即可，不会的可以搜索下载教程。
第二步：下载插件
打开vscode，在最左侧最下面找到四个方块图标
最左侧一栏最下面一个

点击进来之后直接在搜索框内输入名称，选择对应插件进行下载：
简体中文Chinese

为了能在浏览器看见效果open in browser
在这里插入图片描述

后面会用到 live server
在这里插入图片描述

第三步：新建文件夹
直接在电脑D盘或者其他硬盘新建一个文件夹，可命名为前端。

第四步：在vscode内打开文件夹。
文件–>打开文件夹
在这里插入图片描述
第五步：新建一个index.html文件
在刚刚的文件夹内部
要注意结构，注意分层，后期会建很多个文件夹以及文件，乱的话影响后续观看。

1代表新建文件，2代表新建文件夹，也可以右键，选择新建文件夹或者新建文件
在这里插入图片描述
***注意：新建文件夹时不需要后缀，新建文件时要后缀.html。

基本代码快速显示

英文状态下打出感叹号，再按tab键
会自动生成必要代码。
先打英文感叹号，如下再按Tab键

按tab键之后显示如图

一些基本操作：``

1、注释：Ctrl+？
多行注释：选中多行，再Ctrl+？
注释的内容只有开发人员能看到
2、注意要先Ctrl+s，再右键点击open in browser，就可以在浏览器显示效果
3、关于保存
如果是小圆圈，说明没保存，保存会变成叉号，如图所示
未保存
已保存

认识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>

逐行解释如下：

<!-- HTML是一种超文本标记语言，注意，不是编程语言。 -->

<!DOCTYPE html>
<!-- //文档声明：这是一个HTML文档 -->
<!-- 尖括号内的内容被称为标签，大部分成对出现，后面比前面多了/。 -->

<html lang="en">
<!-- /页面语言是英语，language=english,供浏览器识别 -->

<head>
    <!-- 头部，存放元数据，不会显示在浏览器上，是一些针对网页的设置项。 -->

    <meta charset="UTF-8">
    <!-- meta表示设置  后面表示编码是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>
    <!-- title:页面标题 -->

</head>

<body>
    <!-- body内的内容直接显示在页面上。 -->
    <!-- 内容一定要写在标签内， -->
    <!-- 注释：Ctrl+？，注释的内容只有开发人员能看到 -->
    <!-- 注意要先Ctrl+s，否则点击open in browser也不会在浏览器显示。 -->

</body>

</html>

需要注意的一些细节：

接下来就正式进入HTML的学习了，首先学习一些标签：

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>
    我是一行普通的文字
    <h1>我是大标题</h1>
    <h2>我是二级标签</h2>
    <h3>我是三级标签</h3>
    <h4>我是四级标签</h4>
    <h5>我是五级标签</h5>
    <h6>我是六级标签</h6>
    <!-- 标题标签自带加粗效果，且会沾满一行，意思是，不管在其后面写什么，都会自动换行。 -->
    Ctrl+z 撤回

</body>

</html>

在这里插入图片描述

字体修饰标签
换行符br

如果没加换行符，哪怕写的时候分行了，显示在浏览器上也是一行

在这里插入图片描述
加了,浏览器会识别出来，就会分行显示

其他的字体修饰标签：
在这里插入图片描述
效果如下：

案例练习
利用刚刚学习的字体修饰标签

在这里插入图片描述

<!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>
    <h1>人间至味</h1>
    <big>
    <strong>
        风雨犹祝，<del>山海同欢</del>，<sup>是承天地之佑。</sup><br>
    <u>星移斗转</u>，沧海桑田，烟火人间依旧。
   </strong></big>
</body>

</html>

图片标签
第一步：建文件夹用来放图片，把图片拖到image文件夹内。接着，用代码让图片在浏览器显示出来。

例图：

<!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>
    <img src="./image/baidu.gif" alt="">  //图片标签img
</body>

</html>

图片标签的一些属性：
alt 加载失败时的提示文字。
width height 宽高
src 路径，即图片存放的位置
title 鼠标放到图片上会显示的文字，需要鼠标静止不动一下
在这里插入图片描述
重点强调路径，分为绝对和相对，尤其是相对路径：
绝对路径：
存放在电脑上的，比如C盘，换了电脑可能就查不到。不建议使用
相对路径：
在文件夹内部的，需要看图片文件夹和html文件的关系
./ image文件夹和HTML位于同级
在这里插入图片描述
…/ image位于02字体标签内，要先出来一级找到02字体标签

…/…/上上级

超链接标签

href是将要跳转去的链接
a之间填写显示的文字，链接是直接加在文字上的

常用属性：target
target="_blank" 新建标签页打开
在这里插入图片描述

target="_self" 在当前标签页打开
在这里插入图片描述
链接练习：
实现4个页面间的跳转，点击哪个字母就去到哪个页面

方法：首先，建4个HTML文件，写入4个a标签，标签内依次写上四个页面的a链接，
再单独加上一行文字：这里是XX页面

<!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>
    <h1>这里是A页面</h1>
    <a href="A.html">A</a>
    <a href="B.html">B</a>
    <a href="C.html">C</a>
    <a href="D.html">D</a>

</body>

</html>

怎么实现点击图片跳转链接的功能呢：
在这里插入图片描述

列表
有序列表
Ol为整个列表，li表示每一个项
这是最基本的ol列表

可以利用type属性来改变序号的样式：
有5种样式
1代表数字，A代表大写字母，a代表小写字母，I代表罗马数字，i代表小写罗马数字

在这里插入图片描述
效果如下：

无序列表
默认带圆点。

同样可以利用type更改样式
disc（小圆点，默认），circle圆，square方块

自定义列表

可在列表内加一些样式

列表练习：

所需图片：
请添加图片描述

<!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>
    <strong> <big>热歌榜</big> </strong> <img src="./img/play.png" alt="">
    <ul type="none">
        <strong> <li>01 <img src="./img/06.jpg">桥边姑娘 </li>
        <li>02 <img src="./img/06.jpg">桥边姑娘</li>
        <li>03 <img src="./img/06.jpg">桥边姑娘</li></strong>
    </ul>



    <dl>
        <b>
        <dt><strong>热歌榜<img src="./img/play.png" alt=""> </strong></dt>
        <dd>01 <img src="./img/06.jpg">桥边姑娘</dd>
        <dd>02 <img src="./img/06.jpg">桥边姑娘</dd>
        <dd>03 <img src="./img/06.jpg">桥边姑娘</dd>
        </b>
    </dl>
</body>

</html>

表格
第一步：创建一个表格
三层，最外层是table，中间层是tr，表示行，最内层是td，表示列。

Table内的属性：
border为边框，不写border表示没有，啥也看不见。一般写1。
Width height要定义宽高，否则的话会很小。
在这里插入图片描述
写上宽高以及边框后

Caption：表格标题
写上标题以及填充部分

Align=“center” 水平居中
写在哪哪里实现，tr或td都可

Th表头效果，自带加粗效果。
注意：th要写在tr内

Cellspacing 表格之间的空隙，不用加单位。一般情况下，把cellspacing设为0
在这里插入图片描述
Cellpadding:内容与表格之间的距离，不用加单位

合并单元格：（重点）
合并行：rowspan（跨行合并），上合并下，写在需要合并的最上面，把下面的删掉。
即删除的是不同tr内的td

合并列：colspan（跨列合并），左合并右，把右边的删掉，即删除的是同一个tr内的td
在这里插入图片描述
练习:
课程表制作
主要是练习行列合并。
最下面一行的边框是因为浏览器兼容的问题，暂时不考虑解决。

<!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>
    <table width="600" height="350" border="1" cellspacing="0">
        <tr align="center">
            <th></th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
            <th>星期六</th>
        </tr>

        <tr align="center">
            <td rowspan="2">上午</td>
            <td>123</td>
            <td>456</td>
            <td>789</td>
            <td>000</td>
            <td>145</td>
            <td>789</td>
        </tr>
        <tr align="center">
            <td>124</td>
            <td>688</td>
            <td>786</td>
            <td>542</td>
            <td>235</td>
            <td>789</td>
        </tr>
        <tr align="center">
            <td colspan="7">午休</td>
        </tr>
        <tr align="center">
            <td rowspan="2">下午</td>
            <td>124</td>
            <td>688</td>
            <td>786</td>
            <td>542</td>
            <td>235</td>
            <td>789</td>
        </tr>
        <tr align="center">

            <td>124</td>
            <td>688</td>
            <td>786</td>
            <td>542</td>
            <td>235</td>
            <td>789</td>
        </tr>
    </table>
</body>

</html>