HTML之基本语法（段落标签、标题标签、空格标签、换行标签、图片标签和图片的基本属性）

一、HTML标签

　　所谓的HTML的标签就是发明者认为定义好的一些单词，就相当于我们汉语中的字

二、HTML的语法

　　语法就是用来定义这些“字”应该如何解析或者书写的规则

三、常见标签及基本语法

　　1.人为的将HTML的标签分为单标签和双标签

　　　　<标签名称></标签名称>-----双标签

　　　　<标签名称 />----单标签

　　　　注意：在HTML书写中，标签可以进行嵌套，但不能进行交叉嵌套

　　2.常见标签

　　　　（1）标题标签：在HTML中认为定义了六种标题标签，分别为h1~h6的双标签，在一个网页当中只允许出现一个标题标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5</title>
    </head>
    <body>
        <h1>从今天开始学习HTML</h1>
        <h2>先自我介绍一下</h2>
        <h3>我叫coco</h3>
        <h4>来自中国</h4>
        <h5>今后我们一起学习</h5>
        <h6>请多关照</h6>
    </body>
</html>

（2）段落标签：p标签，<p></p>双标签

添加注释的格式，也可以使用快捷键，选中需要加注释的内容，按Ctrl+问号（英文输入法下），要去掉注释用同样的操作

　　注意：1.在HTML编写的过程中，我们手动的敲换行是没有用的 2.无论我们敲多少空格，在显示时只显示一个 3.每个P标签中是一个段落

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5</title>
    </head>
    <body>
        <h1>静夜思</h1>
        <!--1.在HTML编写的过程中，我们手动的敲换行是没有用的 2.无论我们敲多少空格，在显示时只显示一个 3.每个P标签中是一个段落-->
        <p>窗前明月光</p>
        <p>疑是地上霜</p>
        <p>举头望明月</p>
        <p>低头思故乡</p>
    </body>
</html>

（3）换行标签：<br/>单标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5</title>
    </head>
    <body>
        <h1>静夜思</h1>
        <p>
            窗前明月光
            <br/>
            疑是地上霜
            <br/>
            举头望明月
            <br/><br/><br/>
            低头思故乡
        </p>
    </body>
</html>

（4）添加空格（ ）,一个空格占一个字节

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5</title>
    </head>
    <body>
        <h1>HTML学习总结</h1>
        <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</n>我最近在学习HTML，今天的学习内容是HTML的基本语法和常见标签的使用
            </br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HTML的标签分为两类：单标签和双标签，双标签格式是<标签名称></标签名称>双标签成对出现，有开始有结束，单标签格式是</标签名称>，还学习了标题标签，h1~h6,双标签，分别表示不同的字体大小，建议一个网页中只使用一个h1标签，因为浏览器在进行索引是一般是对h1标签进行索引
        </p>
    </body>
</html>

（5）图片标签：img单标签这个标签的作用就是在网页当中插入图片，图片与HTML都是独立的文件，想在网页中显示图片，需要借助img标签将一个网页外部的图片拿到网页当中进行展示

<img src="" >在这个标签当中，我们可以发现，与p标签相比较多了一些东西，我们将这些东西称之为标签属性

a.标签属性与标签名之间用空格隔开

b.标签属性由属性名和属性值两部分组成，属性名和属性值用单等号进行连接

c.属性值需要放在引号中，单引号和双引号，引号要成对出现，如果属性值是数字，那么引号可以去掉

d.一个标签身上可以有多个属性，每个属性之间用空格隔开

e.src是img标签的一个属性，用来表示图片想要加载的地址

图片常见的属性

src:src是img标签的一个属性，用来表示图片想要加载的地址

alt:当图片加载不出来时，会显示这里面的文字

width/height:设置图片的宽度和高度，如果只设置高度或宽度，图片的另外一边会自动缩放

title：当鼠标悬停在图片上时，会显示这里面的文字

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5</title>
    </head>
    <body>
        <h1>白雪公主</h1>
        <img src="src/t014c45eaaa2508bc3e.webp.jpg" >
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>常见图片标签的属性</title>
    </head>
    <body>
        <!-- 正常的图片 -->
        <img src="src/t014c45eaaa2508bc3e.webp.jpg" >
        <!-- 设置图片的宽度 -->
        <img src="src/t014c45eaaa2508bc3e.webp.jpg" width="200" >
        <!-- 设置了高度的标签 -->
        <img src="src/t014c45eaaa2508bc3e.webp.jpg" height="400" >
        <!-- 同时设置了高度和宽度的标签 -->
        <img src="src/t014c45eaaa2508bc3e.webp.jpg" width="100" height="400">
        <!-- 设置了标题的标签 -->
        <img src="src/t014c45eaaa2508bc3e.webp.jpg"  title="白雪公主" >
        <!-- 当图片显示不出来时，用alt属性来显示图片未加载出来 -->
        <img src="src/t014c45eaaa2508bc1e.webp.jpg" alt="这是一张图片">
    </body>
</html>