初识HTML

将船买酒白云边

于 2023-05-03 16:12:32 发布

阅读量684

点赞数 2

分类专栏：前端三件套文章标签： html 前端 css

本文链接：https://blog.csdn.net/m0_51945115/article/details/130473840

版权

前端三件套专栏收录该内容

2 篇文章 0 订阅

订阅专栏

初识HTML

文章目录

初识HTML

HTML标签

html是一种超文本标记语言，不需要环境打开既是界面，是一种超快搭建界面的一种语言，主要使用是软件有Visual Studio Code,简称VS Code。

在这里插入图片描述

在该软件中编写代码，html代码由HTML结尾，不需要像其他软件那样使用编译器或者环境，HTML只需要一个浏览器，其编译速度是非常简单和便捷的，有多么简单呢？举个例子！

<html>
    hello world!
</html>

在这里插入图片描述

打开浏览器就可以看到如下界面。

在编译器中可快速生成HTML基本标签框架，有如下方法可以参考：

1.使用英文！然后按Tab即可

2.使用html:5

生成如下标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个HTML页面</title>
</head>
<body>
    
</body>
</html>

这个是html的基本结构。

最上面的<!DOCTYPE html>表示的是使用语言为HTML。

<html lang="en">代表的是中文网页还是英文网页，中文网页使用的zh,英文网页是使用en,其中的区别在于使用英文网页可以翻译为中文，其实在实际使用时并没有太大区别。

<head>标签表示的是头部，是网页中比较关键的信息，其中的<meta>标签中包含了一些开发中使用的功能，比如说UTF-8，就是该页面使用的字符集，而下面由包含的内容是对手机的一种适配调整。<title>标签中是用于标识网页头部标题：

在这里插入图片描述

<body>标签中包含的是页面显示的内容，相当于第一个例子，其中hello world就是在其中的代码。

标签中的关系

标签中存在这一系列的关系，可以让我们更好的去使用他们，并记住他们，在我们搭建的框架中，就存在这些关系。

父子关系：

html标签（父）和body标签（子），head标签（子）都构成了父子关系

head标签也是title标签的父标签

兄弟关系：

head标签和body标签构成兄弟关系，因为拥有同样的父标签

在后期都学习中会有更多的标签存在以上的关系，所以善于分辨一些关系对我们编写代码是有一定帮助的。

常见标签

注释标签:

<!-- 我是注释 -->

注释标签，就像之前所学那样，只是程序员自己对代码的一种解释说明，而对用户并没有其他用处的一种方式，所以在注释标签中写的内容并不会在网页上显示。

标题标签：h1~h6

<h1>h1标签</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h5>h5标签</h5>
<h6>h6标签</h6>

页面效果：

在这里插入图片描述

可以看见数字越大，其标签字体越小，相当于在家中，排行第一大的为老大，第二为老二，第三为老三……。就可以很轻易的分辨这些标签所对应的字体大小。

段落标签:p

段落标签在一些文章中很常见，对于一些长文本，需要对文本进行段落划分时，就需要使用到p标签，如果没有使用p标签，网页是无法识别你的文本是分为多少段进行描述的。

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

——《百度百科》

我们如果直接将其放在HTML中，会是如下结果：

在这里插入图片描述

使用p标签，将需要隔开的段落放在同一个p标签中：

<p>HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>
    <p>超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。</p>

在这里插入图片描述

换行标签：br 和空格：&nbsp

在html中都特殊标签，换行标签，编译器无法识别内容中的换行，需要使用换行标签进行换行，相同的，编译器也无法识别内容中的空格个数，也需要使用一个字符串来代替换行。

举个栗子🐱‍🚀：

<p>HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
    </p>
    <br>
    <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
    </p>

在这里插入图片描述

使用这几个标签就可以做一个文章网页，使用标题，段落标签和空格字符串，调整文章整体的格式。

格式化标签

加粗： ,
倾斜：,
删除线：<del></del>,<s></s>

举个栗子🐱‍🚀:

<p>
    <strong>HTML</strong>的全称为<b>超文本标记语言</b>，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个<del>非常</del>逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明<em>文字，图形、动画、声音、表格、链接</em>等。
    </p>

在这里插入图片描述

其实这种表现方式经常在css中使用，这种特殊格式一般以css为主。

图片标签：img

使用img标签必须带有src属性，用于指定图片的路径。

路径可以使用相对路径也可以使用绝对路径，网络路径（网络路径是指在网络上的图片，访问该网页时将其链接作为路径使用）。这里使用的是相对路径，使用了设置高度的height.

<img src="boy.png" height="300px" />

在这里插入图片描述

img的其他属性：

alt:替换文本，当图片不能正常显示，会替换成文字
title：提示文本，当鼠标放在图片上会有相对应提示
width/height：控制图片宽度高度，如果只设置一个就会按比例进行缩放，如果对图片大小有要求，可以设置两个比例
border：边框参数，一般不建议使用，在css中设置

例如：

这里我将图片名称改了

<img src="boy1.png" height="300px" alt="这里有一个图片" title="boy图片" />

在这里插入图片描述

这个是alt属性的效果，title效果大家可以动手试一下！

标签中的属性可以有多个，而且属性不分前后顺序，使用空格分割，使用键值对的方式来设置属性。

链接标签：a

和图片标签一样，链接标签也有必须带着的属性 href,用于指定跳转的链接。

<a href="http://www.baidu.com">百度</a>

在这里插入图片描述

点击“百度”即可跳转至指定链接。

链接标签属性：

target 属性是链接跳转方法“_blank”是指跳新的页面，默认是“_self”使用当前页面跳转。
href 属性可以使用空链接“#”，使用链接标签也可以做锚点跳转。

<a href="#">我是一个空链接</a>
<a href="#name">第二段</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
<p id="name">
    超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。
</p>

空链接，点击无反应。锚点链接，点击链接即可跳转。

在这里插入图片描述

表格标签

table：表示整个表格（所有表格标签的父标签）
tr：表示表格的一行
td：表示表格的一个单元格
th：(一个单元格)表格标题，会居中加粗
thead：和th一样，th是thead的缩写
tbody：表格的主体部分

建立一个3行3列的表格：

<table border="2px" width="300px" height="100px">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>地址</th>

        </tr>
        <tr>
            <td>张三</td>
            <td>16</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>18</td>
            <td>杭州</td>
        </tr>
    </table>

在这里插入图片描述

table表格标签的属性：

align：对齐方式，是相对于表格和外部环境的对其方式，有center，left，right可以使用。
border：表格边框，如果不加边框就相对于没有边框的表格
cellpadding：元素距离表格的宽度，相对于表格中内边距
cellspacing：单元格与单元格之间的距离

添加一下几项属性，改变表格位置与形状

<table border="2px" width="300px" height="100px" align="center" cellpadding="5px" cellspacing="10px">

在这里插入图片描述

合并单元格：

rowspan：对统一横的行进行合并
colspan：对同一竖的列进行合并

合并时需要将合并的单元格进行删除。

例如这里合并年龄使用rowspan:

<tr>
    <td>张三</td>
    <!-- 从开始合并的行加入需要合并的行总数 -->
    <td rowspan="2">16</td>
    <td>北京</td>
</tr>
<tr>
    <td>李四</td>
    <!-- <td>18</td> -->
    <td>杭州</td>
</tr>

在这里插入图片描述

列合并，将年龄和地址合并使用colspan：

<tr>
    <td>张三</td>
    <td colspan="2">16</td>
    <!-- <td>北京</td> -->
</tr>
<tr>
    <td>李四</td>
    <td>18</td>
    <td>杭州</td>
</tr>

在这里插入图片描述

根据这篇文章可以做一个如下页面：

在这里插入图片描述

将船买酒白云边

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初识HTML

HTML的全称为超文本标记语言，是一种标记语言。在html中都特殊标签，换行标签，编译器无法识别内容中的换行，需要使用换行标签进行换行，相同的，编译器也无法识别内容中的空格个数，也需要使用一个字符串来代替换行。段落标签在一些文章中很常见，对于一些长文本，需要对文本进行段落划分时，就需要使用到p标签，如果没有使用p标签，网页是无法识别你的文本是分为多少段进行描述的。注释标签，就像之前所学那样，只是程序员自己对代码的一种解释说明，而对用户并没有其他用处的一种方式，所以在注释标签中写的内容并不会在网页上显示。
复制链接

扫一扫