HTML基础（一）

夏~辰

已于 2022-04-03 21:08:08 修改

阅读量273

点赞数 1

分类专栏：网安学习之路文章标签： html 学习 vscode

于 2022-03-06 22:54:06 首次发布

本文链接：https://blog.csdn.net/weixin_52555162/article/details/123314267

版权

网安学习之路专栏收录该内容

15 篇文章 3 订阅

订阅专栏

001：前言环境

工具：vs code 安装插件live server（你也可以根据自己的需要安装中文汉化包）

002：HTML的基本结构

<!DOCTYPE html>
<!-- 使用html5的标准文档进行解析 -->
<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>

如上图所示，上面的代码就是我们每天见到的网站页面的最基本的架构,其他的代码都是基于这个代码结构进行改造的

003：head标签

首先让我们来看看head标签里我们需要掌握的内容

来看看大致的代码吧：

<!DOCTYPE html>
<!-- 使用HTML5的标准进行文档解析 -->
<html lang="en">
    <!-- 根标签 -->
<head>
    <!-- 引入与网页相关的描述及配置信息 -->
    <!-- 下面是关于meta标签的学习 -->
    <meta charset="UTF-8">
    <!-- 这个是当前网页的字符编码 -->
    <meta name="keywords" content="CSDN,C1"> 
    <!-- meta标签中最重要的就是name和content标签，这里我们写的keywords意思是关键词，可以为读者或者爬虫提供搜索 -->
    <meta name="description" content="关于C1学习的文档">
    <!-- 这个是写一段对当前网站的描述 -->
    <meat name="auther" content="CSDN"></meat>
    <!-- 这个是写上网站作者名字或者组织 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- viewpoint的使用是为了防止页面被等比例压缩,width=device-width是等于设备宽度，initial-scale是元素的初始化比例
    这里除了宽度width,我们还可以改变窗口高度height,最大缩放比例maximum-scale,最小缩放比例minimum-scale
    还有user-scalable用来设置是否允许设置缩放比例，0是不允许，1是允许 -->
    <title>head标签</title>
    <!-- 下面是关于link标签的学习 -->
    <!-- <link rel="stylesheet" href="css/now.css"> -->
    <!-- 这是link标签主要是用来引用外部样式表,href是链接文件的路径，rel是当前文件与链接文档的关系：stylesheet是CSS样式表
    ,icon是小图标 -->
    <style>
        body{
            color:greenyellow
        }
    </style>
    <!-- style标签是用来引入内部样式表 -->
    <script src="js/now.js"></script>
    <script>
        alert("to study c1")
    </script>
    <!-- 上面是script的两种用法，一种是使用src引入外部js,另外一种就是直接在
    script里面写入js代码 -->
</head>
<body>
    <!-- 正文 -->
    hello world
</body>
</html>

根据这张思维导图，我们先来看看一些比较简单的部分：

01：title

首先是<title></title>这个标签里面改变的是标签页的值，比如我们写<title>head标签</title>：

产生效果如上

02 :style

这个标签改变的是内部样式表：

   <style>
        body{
            color:greenyellow
        }
    </style>

比如我们可以写上面这串代码，他的意思是设定页面字体颜色为greenyellow,产生效果如下：

现在你可以这样理解，假如我现在要改变字体颜色，使用style标签就可以直接写在html这个页面结构之中而不需要提前写在其他css文件里面然后进行调用

03:script

这个是引入js文件，比如我们要写一个弹窗，我们可以这样：

    <script>
        alert("to study c1")
    </script>

然后就会产生这样的效果：

当然你也可以这样去写：

<script src="js/now.js"></script>

然后新建一个js文件，里面写上：

产生的效果就是这样：

那么这两种方法区别在哪里呢？

从我上面的步骤相信小伙伴们就已经发现了，我们使用第一种没有src的那种方式是不需要新建一个js文件的，所以这两种方式的区别就在于是否从外部调用文件

好了，简单的介绍完了，下面开始介绍难一点的了：

04：meta标签

meta标签的作用是信息引入及说明，这里我们来看看meta标签的一些关键词以及他们的用法：

1：keywords关键词引入

比如我们来写这样的代码：

<meta name="keywords" content="CSDN，C1">

这句话的作用就是描述这个页面的关键词，方便其他人搜索和爬虫爬取，当然必须要知道的是name和content是meta标签中最重要的标签,name后面是标签的关键字，content是标签要解释的值

2:description 描述引入

再来看看这句代码：

<meta name="description" content="关于description的介绍">

这句话介绍的就是当前页面的作用了，相信小伙伴们也一定都能猜到

3：author 作者引入

这个是作者引入，和上面的用法一样：

<meta name="author" content="夏辰">

4：配置引入

这里就要复杂一点了：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这里

viewpoint的使用是为了防止页面被等比例压缩,width=device-width是等于设备宽度，initial-scale是元素的初始化比例，这里除了宽度width,我们还可以改变窗口高度height,最大缩放比例maximum-scale,最小缩放比例minimum-scale，还有user-scalable用来设置是否允许设置缩放比例，0是不允许，1是允许

05：link标签

再来介绍最后一个，link标签，他的作用就是用来引入外部资源，比如css、js文件等等

比如我们可以这样写：

<link rel="stylesheet" href="css/now.css">

我们需要知道，rel是表示当前文档与链接文档的关系：stylesheet是CSS样式表；icon是小图标

href是链接文件的路径，type是链接文件的类型，这串代码的作用和前面style标签中设置body字体颜色的作用是一样的，当然你需要在css文件里写上：

才会产生效果，因为是调用嘛哈哈

好了，这次文章就介绍到这里啦！

夏~辰

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
2
评论
HTML基础（一）

001：工具：vs code 安装插件live server（你也可以根据自己的需要安装中文汉化包）002：HTML的基本结构<!DOCTYPE html><html lang="en"> <head>  <meta charset="UTF-8"> &
复制链接

扫一扫