web技术——基本语法以及常用标签讲解

silence_sz

已于 2023-09-20 11:08:24 修改

阅读量646

点赞数 1

分类专栏：前端之web 文章标签：前端 html

于 2023-09-14 20:14:23 首次发布

本文链接：https://blog.csdn.net/qq_64131064/article/details/132887958

版权

前端之web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了HTML的基本概念，包括标签的使用、注释的重要性、HTML文档的标准结构，以及段落、文本样式、图片和超链接的标记方法。重点讲解了src和alt属性，以及图片尺寸控制的width和height特性。

摘要由CSDN通过智能技术生成

前言

HTML是一种标记语言,这意味着它用来标记文档中的各个部分，已指定文档在打印件或者显示器上的显示方式。简单来说，HTML就是超文本标记语言。
这里补充一些东西，可能大家初学不知道，html在哪里运行的，我习惯在vscode上面写该语言。当然，也可以在记事本里面运行。还有一点，HTML文档中大小写无严格规定。

壹、基本语法

1.1 含义

HTML中的基本语法单位称为标签。一般来说，标签用于指定内容的类别。标签的语法是利用一对尖括号“<>”将标签名称包围起来。
注意：大部分标签都是成对出现，当然也有单标签，后面我们会学到。
如下是一行简单的代码：This is simple stuff.
解释：
（1）即为开始标签，为结束标签；
（2）由上可知，结束标签里面带有“/”符号；
（3）在开始标签和结束标签，中间的就是标签的内容；
（4）运行之后，我们会发现，浏览器上面的内容，就是代码标签之间的内容。

1.2 注释

格式：
在这里插入图片描述

HTML文档和程序里面注释一样重要。浏览器会忽略掉HTML注释，这些注释只对人有用。注释的格式，如上图所示，可以单行和多行。

注意：除注释外，还有一些其他类型的文本出现在文档中，也会被浏览器忽视。会忽略掉无法识别 的标签，这里的标签就像其他高级语言里面的关键字，是规定约束好 的。此外还忽略掉空行，如果要在显示结果里面显示空行，需要加上特定的标签。

1.3 HTML文档的标准结构

1、每个HTML文档的第一行都是一个DOCTYPE命令，它指定了该文档所遵循的特定SGML文档类型定义，这个地方，不是很好理解，通俗的来讲，就是在这个命令里面定义许多规则，写完整体代码之后，它会把代码和命令里面定义对比一下，看看有没有错误。

<!DOCTYPE html>

2、文档中必须有以下四个标签：<html> <head> <title> <body>。
<html>：在最开始的部分，</html>：在末尾部分。
而在<html>里面会有一个特性lang，用于指定当前所用的语言，英语是“en”，中文简体是“zh-cn”，这里的cn也是域名，这里在计算机网络里面会讲。
演示：
在这里插入图片描述

解释：
一个HTML文档包含两部分，头(head)部分和主体(body)部分。<head>元素包多了文档的头部分，该部分提供了文档的相关信息，而没有提供文档内容。它总是包含两个简单元素:一个标题元素和一个meta元素。meta元素用来提供关于文档的额外信息。它不包含任何内容，而是通过特性指定信息。也就是所能表达的范围是8位，通常表达是UTF-8，也可以是16为32位，分别把8换成16和32。

<meta charset="utf-8">

这里面的反斜杠表示没有结束标签——开始标签和结束标签合为一个，即为我们之前提到的单标签。注意，也可以把斜杠去了。

我们来看一个基本的格式：

<!DOCTYPE html>
<html>
    <head>
        <title>  标题 </title>
        <meta charset="utf-8">
        ...
    </head>
    <body>
        ...
    </body>
</html>

贰、基本的文本标记

我们来学习一些有哪些标签，它们是什么意思，又怎么用。

2.1 段落

在文本前后加上即可。
演示：

<!DOCTYPE html>
<html>
    <head>
        <title>  标题 </title>
        <meta charset="utf-8">
    </head>
    <body>
        <p>
            hello         everyone
            we begin to study
        </p>
    </body>
</html>

在这里插入图片描述
大家有没有发现一个奇怪的现象，我在代码中打的既有多个空格，又有换行但是只显示空格，并且是一个空。这里就是我们之前讲的，在浏览器显示时候，会忽略掉HTML文档里面的空格和换行，需要用特定的标签来约定。

大家可以把下面代码写在自己的环境下试一下：

<!DOCTYPE html>
<html>
    <head>
        <title>  标题 </title>
        <meta charset="utf-8">  
    </head>
    <body>
        <p>
            <i>Hello,everyone.</i> <!--<i></i>:表示将包含的内容变成斜体字-->
        </p>
        <!--<p></p>:这对标签，可以将段落段落之间换行-->
        <p>
            <b>Hello, <br>ereryone </b> <!--<b></b>:表示将包含的内容编程粗体字-->
            <!--<br>:表示行中断，这里是单标签-->
        </p>
    </body>
</html>

结果：
在这里插入图片描述

2.2 保留空白字符

那么怎么样可以将文本原封不动的打印出来呢，我们引入pre标签。
来看下面代码：

<!DOCTYPE html>
<html>
    <head>
        <title> Hi </title>
        <meta charset="utf-8">  
    </head>
    <body>
        <pre>
            <b> <!--加粗标签-->
            你
               们
                  好
                     啊
                        !</b>
        </pre>
    </body>
</html>

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

2.3 标题

👀注意：我们要区分两个标签，一个是title，另一个就是我们现在讲的标题——<h>.
在这里插入图片描述
这里的标签，最后显示出来的效果在这个位置：

而我们现在讲的标签，标题一共分为六级，它们按照数字的变化而导致字号的改变，来看一下代码：

<!DOCTYPE html>
<html>
    <head>
        <title> Hi </title>
        <meta charset="utf-8">  
    </head>
    <body>
       <h1>hanmz</h1>
       <h2>hanmz</h2>
       <h3>hanmz</h3>
       <h4>hanmz</h4>
       <h5>hanmz</h5>
       <h6>hanmz</h6>
    </body>
</html>

效果图：
在这里插入图片描述
比如你想要强调某一行或者某个字，可以用以下方法：

<body>
        <p>
       <font size="5"> hanmzhi</font>
       </p>
       <p>
        <font size="20"> hanmzhi</font>
        </p>
    </body>

运用来加强字体，来看一下效果：
在这里插入图片描述

2.4 水平线

利用<hr>标签，注意，这里依然是单标签，我们到现在，已经学到了两种单标签了，一个是行中断： ，另一个就是现在这个。

叁、图片

3.1 简述

最常用的两种图片格式：可交换的图像格式（GIF）、联合图像专家组格式（JPEG）。
当前浏览器中绝大部分都是这两种格式，并且这两种格式文件可以压缩，能节约存储空间，通过Internt传输也比较快。

GIF图片文件扩展名为.gif，JPEG图片文件扩展文件为.jpg 或者 .jepg。最近还日趋流行的另一种图片格式为PNG，把它压缩后，并没有降低图片的清晰度，因而内存要占比前两种多。

3.2 元素

3.2.1 特性一

<img/>是一个行内元素，用于指定将要显示在文档中的图片。注意，这个元素没有内容，所有要在开始标签中带有一个斜杠，并没有结束标签，也是为单标签。

<img/>元素里面包含了两个特性：src和alt。

解释：
src：可以指定包含的图片文件
alt：当图片无法显示时，在本应显示图片的位置出现的文本。
看一下列子：

<!DOCTYPE html>
<html>
    <head>
        <title> Hi </title>
        <meta charset="utf-8">  
    </head>
    <body>
       <img src="han.jpg",alt="图片显示错误">
    </body>
</html>

效果如下：
在这里插入图片描述
可以看见，图片显示出来了。
这里需要有两个注意点：
（1）图片格式，没有完全显示出，需要借助滚动来看，这样子过于麻烦，那么如何减小像素呢？
（2）这点非常重要，一定要把该图片文件，放到你建立的html文件里面，否则显示不出，如下图所示：
在这里插入图片描述

3.2.2 特性二

img里面还有另外两个可选特性：width、height。
加上两行代码就可以了：
在这里插入图片描述

这俩个特性时用来约束图片的格式大小：
在这里插入图片描述

肆、超链接

大家先思考一下：html和网页之间是什么关系？
解答：html是一种超文本标志语言，最中运行环境是浏览器的网页。

书上的解释过于复杂，我来简化一下：
所有链接通过锚元素<a>中的特性指定，这也是一个行内元素。
格式：
在这里插入图片描述
href后面url地址是绝对地址，就是根目录开始的路径，而后面的圣诞节这三个字是在html运行后，在页面上显示的超文本链接，点击就可以进去，也相当于重命名。

silence_sz

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
web技术——基本语法以及常用标签讲解

HTML是一种标记语言,这意味着它用来标记文档中的各个部分，已指定文档在打印件或者显示器上的显示方式。简单来说，HTML就是超文本标记语言。这里补充一些东西，可能大家初学不知道，html在哪里运行的，我习惯在vscode上面写该语言。当然，也可以在记事本里面运行。还有一点，HTML文档中大小写无严格规定。
复制链接

扫一扫