HTML5教程（三）- 常用标签

1 文本标签-h

标题标签（head）：
- 自带加粗效果，从h1到h6字体大小逐级递减
- 一个标题独占一行

语法

 <h1>一级标题</h1>
 <h2>二级标题</h2>
 <h3>三级标题</h3>
 <h4>四级标题</h4>
 <h5>五级标题</h5>
 <h6>六级标题</h6>

在这里插入图片描述

2 段落标签-p

介绍
用于定义段落，将整个网页分为若干个段落形式显示。
语法
```
<p>段落文本</p>
```
特点
1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
2. 段落和段落之间保有空隙。
使用

3 普通文本标签-span

介绍
- 行内块，用来组合文档中的行内元素。

语法

<span>行分区标签，用于对特殊文本特殊处理</span>

使用

4 格式标签

浏览器会忽略代码中的换行和空格，只显示为一个空格。想要实现页面中的换行，需要借助于换行标签。

<br>     换行
<b>加粗文本</b>    <!-- bold -->   <strong>加粗文本</strong>
<i>斜体文本</i>       <!-- italic -->   <em>加粗文本</em>
<code>电脑自动输出</code>
<sub>下标</sub> 
<sup>上标</sup>
<strong>加重文字</strong>
<del>删除字<del>    
<u>下划线</u>

在这里插入图片描述

5 字符实体

某些情况下，浏览器会将一些特殊字符按照HTML的方式解析，影响显示结果。此时需要将这类字符转换为其他的形式书写

 使用 &lt; 在页面中呈现 "<"
 使用 &gt; 在页面中呈现 ">"
 使用 &nbsp; 在页面中呈现一个空格
 使用 &copy; 在页面中呈现版权符号"©"
 使用 &yen; 在页面中呈现人民币符号"￥"

在这里插入图片描述

6 容器标签-div

常用于页面结构划分，结合CSS实现网页布局

<div id="top">页面顶部区域</div>
<div id="main">页面主体区域</div>
<div id="bottom">页面底部区域</div>

在这里插入图片描述

7 图片标签-img

图片标签：用于在网页中插入一张图片。
1. src：用于给出图片的URL【必填】
2. width/height：用于设置图片尺寸，取像素值，默认按照图片的原始尺寸显示。
3. title：用于设置图片标题，鼠标悬停在图片上时显示
4. alt：用于设置图片加载失败后的提示文本

语法

<img src="" width="" height="" title="" alt="">

在这里插入图片描述

其他用法

路径
- 绝对路径
  - 目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
- 相对路径
  - 以引用文件所在位置为参考基础，而建立出的目录路径。

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级，如：<img src=‘刘亦菲.png’>
下一级路径	/	图像文件位于HTML文件下一级，如：<img src=‘image/刘亦菲.png’>
上一级路径	…/	图像文件位于HTML文件上一级，如：<img src=‘…/image/刘亦菲.png’>

<body>
    <!-- 使用 img 标签来加载网络图片(必须要联网) -->
    <!-- src 表示用来加载图像的路径（网络/本地） -->
    <img src="https://img10.360buyimg.com/img/jfs/t1/176863/16/41608/14330/668e3421F64b41094/15c9d9130b980a51.png" alt="京东logo">

    <!-- alt 当图片加载失败时，在网页中显示的文字信息 -->
    <img src="images/logo.png" alt="天府学院logo">

    <!-- 使用 img 标签来加载本地图片（常用） -->
    <!-- 图像的路径：绝对路径 -->
    <img src="C:\Users\blning\下载\刘亦菲.jpg" alt="">

    <!-- 图像的路径：相对路径（推荐） -->
    <img src="./image/刘亦菲.png" alt="">

    <!-- img 其他的属性 -->
    <img src="./image/刘亦菲.png" 
         alt="图片加载失败显示的信息"
         title="鼠标放在图像上显示的信息"
         width="200px"
         height="150px"
         border="3px">
</body>

8 超链接标签-a

超链接（anchor，锚）：用户可以点击超链接实现跳转至其他页面
1. href：用于设置目标文件的URL【必填】
2. target：用于设置目标文件的打开方式，默认在当前窗口打开（取值：“_self”），设置新建窗口打开目标文本(取值：“_blank”)
```
<a href="http://www.taobao.com" target="_self">淘宝</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
```

其他用法

<body>
    <h1 id="title">标题</h1>
    <!-- 外部链接：已经进行域名备案的网站 -->
    <a href="http://www.taobao.com" target="_self">淘宝</a>
    <a href="http://www.baidu.com" target="_blank">百度</a>
    
    <!-- 内部链接：本地html文件 -->
    <a href="h_tag.html">a标签</a>

    <!-- 空链接：跳转到自身 -->
    <a href="#">首页</a>

    <!-- 下载链接：href 里面地址是一个文件或者压缩包 -->
    <a href="HTML简介.pptx">PPT</a>

    <!-- 网页元素链接：网页中的各种元素：图片、音频、视频、表格等 -->
    <a href="../Day01/image/刘亦菲.png">刘亦菲</a>
    
    <!-- 锚点链接：点击链接快速定位到页面中的某个位置 设置标签：id -->
    <a href="#contents">看内容</a>
    <div style="width: 300px; height: 800px; background-color: aquamarine;">块</div>
    <div id="contents">内容</div>
    <a href="#title">回标题</a>
</body>

9 导航标签-nav

介绍
- 用于定义页面的导航链接部分区域。

示例

<div>
      <nav>
        <a href="">HTML</a>
        <a href="">CSS</a>
        <a href="">JavaScript</a>
        <a href="">JQuery</a>
      </nav>
</div>

在这里插入图片描述