Html初学经验分享（保姆级）

lengyu15

于 2023-09-18 22:01:51 发布

阅读量117

点赞数 2

文章标签： html 前端 vscode

本文链接：https://blog.csdn.net/lengyu15/article/details/132992360

版权

本文介绍了HTML语言的基本概念，包括其用途、编辑工具推荐、特点以及文档结构。详细讲解了HTML文档结构、标签分类（双标签、单标签和块级/内联元素），并举例展示了特殊符号的使用。对于初学者，强调了掌握常用标签和结构的重要性。

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

一、初识html

1.HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language。HTML 是⼀种⽤来开发⽹⻚的计算机语⾔，它通过标签（标记式指令）将⽂本、⾳视频、图⽚、表格、按钮、输⼊框等内容显示出来。也就是说，HTML 是⽤来给⽹⻚内容进⾏排版和布局的。

2.HTML 编辑器

推荐可以使用专业的 HTML 编辑器来编辑 HTML，小编为大家推荐几款常用的编辑器：

你可以从以上软件的官网中下载对应的软件，按步骤安装即可。

3.html的特点

简易性： HTML语⾔⽐较简单，使⽤操作⽅便，灵活⽅便
可扩展性： HTML⽬前有着⼴泛的应⽤，并且增加了标识符等要求
平台⽆关性： HTML可以使⽤在⼴泛的平台上，这也是万维⽹盛⾏的另⼀个原因
通⽤性： HTML是⼀种通⽤的语⾔，⽤户可以创建图⽂结合的⻚⾯，⽆论什么浏览器，都可以进⾏访问

4.学会了html我们就可以简单搭建一个简易的网页，就让小编带领大家，进入前端学习路之html篇。冲冲冲！^_^

二、html文档结构

下图是VScode中,所呈现的基本html文档框架：

相信很多初学朋友，看到这些会有点蒙，这都什么啊，看不懂。别担心让小编带你深入了解，紧跟小编步伐哟~

1.具体语法说明如下：

<!DOCTYPE html>：这是⽂档类型声明，⽤来告诉浏览器这个⽂档是标准的HTML⽂档（从技术上来说它并不是标签），doctype 声明不区分⼤⼩写；
<html></html>：该标签是 HTML⻚⾯的根标签，其他所有的标签都需要在<html>和</html>标签之间定义；
<head></head>：该标签中⽤来定义 HTML ⽂档的⼀些信息，例如标题、编码格式等等；
<meta charset="UTF-8">：⽤来指明当前⽹⻚采⽤ UTF-8 编码，UTF-8 是全球通⽤的编码格式，绝⼤多数⽹⻚都采⽤ UTF-8 编码；
<title></title>：该标签⽤来定义⽹⻚的标题，⽹⻚标题会显示在浏览器的标签栏；
<body></body>：该标签⽤来定义⽹⻚中我们能通过浏览器看到的所有内容，例如段落、标题、图⽚、链接等等；

2.上述代码运行结果如图：

三、html标签的语法格式

1.形式分类

通常可以分为双标签和单标签

双标签

双标签包含开始标签和结束标签，标签内容也在两者中间
大部分标签都是双标签

单标签

单标签⼜叫⾃闭和标签，没有结束标签
单标签⽐较少，⽐如：<br/> <hr/> <input/> <img/> <link/>

2.结构分类

通常分为两⼤类，块级元素和内联元素（⾏内元素）

块级元素

块级元素特点：

⽆论是否使⽤<br/>换⾏标签，块级元素都会在⾃动换⾏
块级元素的宽度、⾼度都可以改变
块级元素中可以包含其他的块级元素或内联元素

内联元素（行内元素）

内联元素（行内元素）特点：

和其他元素在同⼀⾏显示
内联元素的宽、⾼不能改变
内联元素的宽度就是其中内容的宽度，且不能改变
内联元素的⾼度 height 设置⽆效，但是可以通过 line-height 来设置行高

3.案例济源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div align="center">
        <h2>南垞</h2>
        <p>【唐代】
            <small>王维</small>
        </p>
        <hr width="30%">
        <p>
            轻舟南<ins>垞</ins><strong>(cha)</strong>去
        </p>
        <p>
            北垞<mark>淼</mark>难即
        </p>
        <p>
            <strong>隔浦望人家</strong>
        </p>
        <p>
           <em>遥遥不相识</em> 
        </p>
    <hr>
    <!-- 
        行内标签:
            1.不自动换行
            2.行内元素中只能包含行内元素，不能包含块级元素
            3.行内元素不能改变宽度和高度
     -->
     <h2>行内元素</h2>
     <!-- 斜体标签 -->
     <em>em标签</em>
     <i>i标签</i>
     
     <!--  加粗标签 -->
     <strong>大大大</strong>
     <b>b标签</b>
     <!--  小字体标签 -->
     <small>小小小</small>
     <!--  高亮标签 -->
     <mark>高亮</mark>
     <!--  下划线标签 -->
     <ins>下划线</ins>
     <!-- 下标文本标签sub -->
     <strong>
        co<sub>2</sub>
     </strong>
     <!-- 上标文本标签sup -->
     <strong>
        2<sup>10</sup>
     </strong>
  
    <!-- span标签 :行内元素中的代表元素(浏览器默认的文字样式) -->
    <span>span标签</span>

    <!-- 水平线标签/分割线标签 -->
    <hr width="30%">

    <!-- 
        co2：
            1.加粗
            2.斜体
            3.下划线
            4.背景颜色(黄色)
     -->
    
        <strong>
            <em>
                <ins>
                    <mark>
                        co<sub>2</sub>
                    </mark>
                </ins>
            </em>
        </strong>
     </div>
</body>
</html>

运行结果如图：

四、html中的特殊符号

在⽹⻚中，我们通常需要显示⼀些特殊符号。

1.常用的特殊符号表

2.案例及源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div><!-- 
        特殊符号格式: &特殊符号;
            &ensp; 半个空白位
            &emsp; 一个空白位
            &nbsp; 不断行的空白
     -->

     <p>据了解，丫丫回国后，要先到上海进行隔离检疫。&ensp;世界动物保护协会科学家孙全辉表示，按照《中华人民共和国进出境动植物检疫法实施条例》规定，入境动物需&ensp;要进行隔离检疫。&emsp;因此大熊猫从国外回来也需要这一步，主要检疫丫丫是否携带一些未知的疾病或病菌。按照相关规定，隔离检疫的时间一般是30天。孙全辉建议，回国后，丫丫将面对全新的生活环境，这对在国外生活了将近20年的“丫丫”来说可能会不适应。这段时间应尽量减少游客的打扰，并为它提供可口的食物和适宜的居住环境，帮助它尽快熟悉新环境。<br>据了解，丫丫回国后，要先到上海进行隔离检疫。世界动物保护协会科学家孙全辉表示，按照《中华人民共和国进出境动植物检疫法实施条例》规定，入境动物需&nbsp;要进行隔离检疫。因此大熊猫从国外回来也需要这一步，主要检疫丫丫是否携带一些未知的疾病或病菌。按照相关规定，隔离检疫的时间一般是30天。孙全辉建议，回国后，丫丫将面对全新的生活环境，这对在国外生活了将近20年的丫丫来说可能会不适应。这段时间应尽量减少游客的打扰，并为它提供可口的食物和适宜的居住环境，帮助它尽快熟悉新环境。</p>
    
     <!--比较大小符号  -->
     <p>10&gt;5 <br> 6&lt;12</p>
     <!-- 版权符 -->
     版权<sup>&copy;</sup>
     <!-- 商标符 -->
     用友<sup>&trade;</sup>
     <!-- 已注册 -->
     用友<sup>&reg;</sup>
     <!-- &quot; 双引号 &apos; 单引号 -->
     <p>&quot;据了解，丫丫回国后，要先到上海进行隔离检疫。&quot;</p>
     <p>&apos;据了解，丫丫回国后，要先到上海进行隔离检疫。&apos;</p></div>
</body>
</html>

运行结果如图：