【HTML学习的第一天】

第二节：HTML常用标签

1.标签的格式

1. 使用<> 包起来

成对存在

      单标签/双标签

<标签名>标签体</标签名>   双标签

<标签名   />  单标签

注意：

标签必须闭合

标签必须正确的嵌套

2.常用标签：

2.1  h1--h6 标题标签

 <!-- h1--h6 标题标签 -->

   <h1>你好哈哈哈</h1>

   <h2>你好哈哈哈</h2>

   <h3>你好哈哈哈</h3>

   <h4>你好哈哈哈</h4>

   <h5>你好哈哈哈</h5>

   <h6>你好哈哈哈</h6>

2.2 段落p, br换行，hr分隔线

 <!-- 段落p, br换行，hr分隔线 -->

   <!-- 单个空格可以使用，但是多个就不行了  多个空格，也只会显示一个 -->

  

2.3 图像标签img

 格式：<img src="" alt="" />

 <!-- 图像标签：向网页中插入图片 image-->

   <!-- 思考：图片从哪来？本地，网络 -->

   <!-- 1.绝对路径：从跟目录/盘符开始 -->

   <!-- src : 写的就是图片的路径地址  alt:当图片加载失败时显示的内容 -->

   <img src="D:/QY162/html/html01/images/美女图/5.jpg" alt=""/>

   <!-- 2.相对路径:从当前位置出发 ————>目标文件到的位置 -->

   <!-- ./ 代表当前目录  可以不写 -->

   <!-- ../ 代表返回上级目录 -->

   <img src="./../../images/美女图/3.jpg" alt="" />

   <img src="images/美女图/3.jpg" alt="" />

 ​

   <!-- 3.引入网络图片 -->

   <!-- 步骤：打开浏览器 --》找到想要的图片--》F12-左上角箭头---》点击想要的图片--》复制 src属性。 -->

   <img src="https://pics3.baidu.com/feed/cf1b9d16fdfaaf51cf33ba5c9deba1e6f21f7a43.jpeg?token=0cbb896e2b8f3ba4f86b5cb2837ce729" alt="" />

2.4 列表标签

有序列表 

应用场景  如粉丝排行榜

<!-- ol是有序列表 -->

<ol>

       <li>刘德华 1000w</li>

       <li>模仿华 10w</li>

       <li>我是谁 1</li>

</ol>

无序列表

 应用场景：如无序菜单

<!-- ul是无序列表 -->

<ul>

       <li>第一章

              <ul>

                     <li>第一节

                            <ul>

                                   <li>第一段

                                          <ul>

                                                 <li>第一句</li>

                                                 <li>第二句</li>

                                          </ul>

                                   </li>

                                   <li>第二段</li>

                            </ul>

                     </li>

                     <li>第二节</li>

              </ul>

       </li>

       <li>第二章</li>

       <li>第三章</li>

</ul>

自定义列表

<!-- 自定义列表 -->

<dl>

       <dt>第一章</dt>

       <dd>第一节</dd>

       <dd>第二节</dd>

       <dd>第三节</dd>

</dl>

<dl>

       <dt>第二章</dt>

       <dd>第一节</dd>

       <dd>第二节</dd>

       <dd>第三节</dd>

</dl>

列表嵌套

列表嵌套时注意标签不能出现交叉

小结：ol和ul只控制是否有序，li才是列表 list

    有序列表常用在粉丝排行榜等有顺序的场景

    无序列表常用在菜单等不需要区分顺序的场景

    自定义列表常用在底部联系我们，主要特点就是一个主题跟着多个解释说明

2.5 a标签

2.5.1做超链接标签  跳转页面

<!-- 跳转网络地址 -->   

<a href="http://www.baidu.com">百度</a>   

<!-- 本地网页 -->   

<a href="123.html">123.html</a>

<!-- target="_self"默认，当前标签页打开  target="_blank"新建标签页打开 -->   

<a href="http://www.baidu.com" target="_blank">百度 target跳转</a>

2.5.2做锚点

概述：使用命名锚点可以快速的链接到同一个网页或指定网页中的某个位置

返回顶部/底部        侧边的导航栏

<!--同一个html中-->

<a id="bbb"></a>  <!--锚点 要跳到的位置 （ps：用id兼容性好些）-->

<a name="aaa"></a> <!--锚点 要跳到的位置--> 

<a href="#aaa">跳转</a>  <!--点的地方  点超链接---》锚点跳-->

<!--不同html页面-->

<!-- 跳转到123.html指定位置  前提：得先进入这个页面 再去找锚点 -->

<a href="123.html#bbb">跳转到123.html指定位置</a>

2.5.3发邮件mailto

<a href="mailto:1423432@qq.com">发邮件</a>

2.6 文本标签 font字体   i斜体  b粗体  sup上标  sub下标

<p>

       <font color="red" size="50">

              <i>你_好</i><b>嘿^嘿嘿</b>

       </font>

</p>

2.7 音频audio，视频标签video

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

<audio src="../新二神曲.mp3" autoplay controls="controls">

       <source src="../111.mp3"></source>

       <source src="../111.mp2"></source>

       <source src="../111.flac"></source>

  </audio>

  <video src="../书法大师.mp4" autoplay controls="controls">

       <source src="../111.mp4"></source>

       <source src="../111.avi"></source>

       <source src="../111.flv"></source>

  </video>