初识html

168 阅读2分钟

第一天笔记

Web标准

结构:表示html

样式:表示css

行为:表示javascript

网页的骨架认知

网页的骨架构成
<!DOCTYPE html>
<html>
    <!--表示网页的头部-->
    <head>
        <title>这里面写网页的标题</title>
    </head>
    <!--表示网页的身体,一般内容都写在body中-->
    <body>
     
    </body>
</html>

标题标签

标题标签分为h1~h6,其中h1为一级标题字体显示最大,h6为6级标题字体显示最小,一般用于网页展示文章的标题使用。

段落标签

段落标签:<p>
            里面放要显示的段落
        </p>
段落标签也是独占一行的,其主要作用为文章布局,将一段文章成段落试放在一个网页当中。

路径

分为:绝对路径和相对路径两种。

  • 绝对路径:绝对路径是指文件从文件所在盘符开始寻找,一级一级往下找直到找到文件为止。

     <img src="D:\Web前端81\Day01\images\l.jpg" alt=""><br>
    
  • 相对路径:相对路径是指目标文件相对于当前文件的路径。一般在写网页时基本上都使用相对路径。

    相对路径又分为以下3种:

    1. 上级目录

      上级目录用../来表示,src="../../",一个../表示往上一级目录,上两级是../../以此类推。
      
    2. 下级目录

      下级目录用/表示, <img src="images/dog.gif" alt="">,一个/表示往下一级
      
    3. 同级目录

      同级目录下的文件可以直接写目标文件的文件名称,也可以用./来自动选择文件。
      <img src="cat.gif" alt="">
      

图片标签

图片标签主要是用来在网页之中插入图片

图片标签的语法为:<img src="目标图片的路径" alt="" title="">

图片标签的属性:

  1. alt:标签表示替代文本,指在图片显示加载不出来时,可以显示文本说明图片.

  2. title:表示图片的说明文本,指在网页中鼠标悬停在图片上时,可以显示图片的信息.

    • 在图片标签中可以定义图片的大小,例如width可以定义宽度,height可以定义高度。
    • border标签可以为图片定义边框的粗细,但是这一属性基本不用,后期可以用css来改变边框大小。

文本格式化标签

  • <!--字体加粗-->
    <strong>表示字体加粗</strong>
    <b>字体加粗</b>
    <!--字体倾斜-->
    <em>字体倾斜</em>
    <i>字体倾斜</i>
    <!--下划线-->
    <ins>下划线</ins>
    <u>下划线</u>
    <!--删除文字-->
    <del>删除文字</del>
    <s>删除文字</s>