前端学习 DAY01

HTML5

HTML页面结构

固定的结构：整体(html) 头部(head) 标题(title) 主体（body）

HTML标题

标题标签:
1.使用场景：新闻和文章的页面中
2.代码：

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    <!--只有6个标题-->

语义：1-6级标题，重要程度依次递减
独占一行

HTML段落标签

场景：在新闻和文章的页面使用，用于分段显示

   <!--段落标签-->
    <p>这是一个段落标签，这是一个段落标签，这是一个段落标签，这是一个段落标签，
        这是一个段落标签，这是一个段落标签
    </p>

独占一行

HTML换行标签

场景:让文字强制换行显示

<br>

特点:
单标签
文字强制换行

HTML文本格式化标签

  <p>
        <b>这是一个段落标签</b> <br> <!--加粗-->
        <u>这是一个段落标签</u> <br> <!--下划线-->
        <i>这是一个段落标签</i> <br> <!--斜体-->
        <s>这是一个段落标签</s> <br> <!--删除-->
        
        <strong>这是一个段落标签</strong> <br> <!--加粗-->
        <ins>这是一个段落标签</ins> <br> <!--下划线-->
        <em>这是一个段落标签</em> <br> <!--斜体-->
        <del>这是一个段落标签</del> <br> <!--删除-->
  
  
    </p>

HTML图片标签

场景:显示图片

    <img src="1.webp" alt="图片">

src alt 标签属性
src = “” --> src属性名 ""属性值
属性写在开始标签内部
一个标签可以拥有多个属性
多个属性之间用空格隔开
标签名和属性名之间必须用空格隔开
属性之间没有顺序之分 本地网络图片都可以
加载失败才会显示alt文本
title鼠标悬停显示文字
width显示宽度
height显示高度

HTML链接标签

场景:页面链接跳转
代码：

 <!--链接标签-->
    <!--href属性 指定链接路径 可以是html 也可以是图片..-->
    <a href="01-html标题.html" target="_blank">链接提示内容</a>
    <a href="./1.webp">链接提示内容</a>

    <a href="01-html标题.html"target="_blank">链接提示内容
        <img src="./1.webp" alt="失败" title="链接跳转">
    </a>

href 属性 链接路径
target属性 链接在哪个窗口打开 target"_blank"新窗口打开

HTML音频标签

场景：在页面中插入音频
代码：

<audio src=""controls autoplay loop></audio>

controls 显示播放的部件
autoplay 自动播放
loop 循环播放

HTML视频标签

场景:在页面插入视频
代码:

 <!--视频标签-->
    <video src="./QQ视频20220711083757.mp4"controls autoplay loop></video>

controls 显示播放的部件
autoplay 自动播放
loop 循环播放

列表标签

    <!--有序列表-->
    <ol>
    <li><b>11</b></li> <!--加粗-->
    <li>22</li>
    <li>33</li>
    </ol>
    <!--无序列表-->
    <ul>
        <li>44</li>
        <li>55</li>
        <li>66</li>
    </ul>

ol和ul标签内部只允许放li标签，li标签代表列表的每一项
li标签内部可以放任何内容

自定义列表标签

场景:在网页底部的导航当中通常会使用
标签组成:
dl标签 表示自定义列表的整体
dt标签 表示自定义列表的主题
dd标签 表示主题的每一项内容
嵌套规范
dl标签中只允许嵌套dl和dd标签

  <dl>
        <dt>班级</dt>
        <dt>姓名</dt>
        <dd>专业</dd>
        <dd>学号</dd>
    </dl>