• 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)添加空格(&nbsp;),一个空格占一个字节

    <!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>

       

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

  • 相关阅读:
    Spring Boot初学
    Spring MVC必须知道的执行流程
    日志Log4j使用
    SpringMVC处理中文乱码
    Maven设置阿里云镜像
    Maven项目中配置文件导出问题
    使用Limit实现分页
    web项目中设置首页
    JVM 学习笔记记录
    Python内存管理&垃圾回收机制
  • 原文地址:https://www.cnblogs.com/jingdenghuakai/p/11031370.html
Copyright © 2020-2023  润新知