# HTML 简介	

#### 	什么是HTML

​			HTML (超文本标记语言 )  不是一门编程语言，而是一种用于定义网页内容的含义和结构 的标记语言 ，全称 超文本标记语言。由一系列元素（element）组成。

​			HTML 通过标记（markup） 来标明文本，图片和其他内容 ，除 HTML以外的其他技术则通常用来描述一个网页的表现与展示效果（通过css） 或功能行为 （js）



#### html 基本结构

​	一个html 的基本 结构如下：

> <!-- 在此处写注释内容 -->  用于在html文件中插入 注释



```
<!DOCTYPE html>               <!-- 文档声明 -->
<html>   					  <!-- <html></html>  定义文档整体 -->
<head>				 		  <!-- <head></head>  对页面进行设置，定义标题，外链css,js文件等 -->
    <meta charset="UTF-8">    <!-- 定义网页的编码格式 -->
    <title>Document</title>   <!-- 定义页面标题 -->
</head>
<body>						  <!-- 编写网页上显示的内容 -->
    
</body>
</html>
```





### HTML 标签（元素）

分类方式：

- 有无闭合标签： 
  - 单标签    没有闭合标签  单标签内以 /结尾  如：<img />
  - 双标签    由开始标签+内容+结束标签 构成  如 ：<p>hello world</p>  
- 块级元素
  - 定义：块级元素占据其父元素（容器）的整个空间  ，通常浏览器会在块级元素前后另起一个新行，即会导致换行
  - 示例： 
    - 大区块元素  div
    - 段落元素  p
    - 表格元素 table
    - 列表元素 ul , ol, li
    - 滚动元素 marquee
    - 水平线元素  hr
    - 标题元素  hn  (h1!~h6)
- 内联元素
  - 定义：通常出现在块级元素中，包裹文档内容的一小部分，不会导致换行
  - 示例
    - 超链接  a
    - 文本区域  span
    - 表格标签   label
    - 斜体   i
    - 加粗  b, em, strong
    - 下划线  u
    - 多行文本输入框   textarea



#### 常用标签详解

-  段落标签

  ```
  <p>我是段落标签</p>
  ```

- 列表元素

  - 有序列表 （ol-li）

    - 属性：

      - reversed  布尔值 值为true/false 指定编号是否为从高到低反向排列
      - start  一个整数值属性 值应该是数字  指定列表的起始值 
      - type 设置编号的类型  可选值如下：
        - 1 数字编号 （默认）
        - a  小写英文字母编号
        - A  大写英文字母编号
        - i 小写罗马数字编号
        - I 大写罗马数字编号

      > start 和type 在html4中被废弃 但是在html5 中被重新引入

    ```
    <ol>
      	<li>列表中第一列的内容</li>
      	...   更多列
    </ol>
    ```

    效果如下：

    ![image-20201217105145904](html.assets/image-20201217105145904-1608173514959.png)

  -  无序列表 （ul -li）

    - 常用属性

      -  type
        - circle  空心圆
        - disk    实心圆
        - square   方块

    - ```
      <ul>
      	<li> 列表中第一项的内容</li>
      </ul>
      ```

      ![image-20201217113857619](html.assets/image-20201217113857619.png)

- hr  水平线

- hn 标题元素

- 空元素   没有内容的html 元素叫空元素

- h1~h6标题

- a 超链接

  - 属性 href 指定跳转到的网址

  - 具有默认的样式

  - 属性：

    - href 指定跳转到的网址
    - download  属性值为文件名
    - target 指定在哪里打开链接
      - _self 当前页面加载
      - _blank 新页面打开
      - title  鼠标悬停时的提示信息

  - 相对路径和绝对路径

    > **相对路径**-以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对。
    >
    > **绝对路径**-以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。
    > 　　
    > 　　其实绝对路径与相对路径的**不同处**，只在于描述目录路径时，所采用的参考点不同。由于对网站上所有文件而言，根目录这个参考点对所有文件都是一样的，因此，运用以根目录为参考点的路径描述方式才会被称之为绝对路径。
    > 　　
    > 　　以下为建立路径所使用的几个特殊符号，及其所代表的意义。
    > 　　“.”–代表目前所在的目录。
    > 　　“..”–代表上一层目录。
    > 　　“/”–代表根目录。



- 多媒体元素
  - 图片（img 标签）
    - 属性
      - src 显示图像的URL 
      - alt 规定图像的替代文本  即图片加载失败的提示文本
  - 视频（video 标签）
    - 属性
      - src  播放视频的URL
      - autoplay  值为autoplay  视频在就绪后马上播放
      - controls   值为controls  向用户显示控件（如播放按钮）
      -   loop  值为loop 循环播放
  - 音频（audio） 
    - 属性  和video标签属性类似
      - src  播放音频的URL
      - autoplay  值为autoplay  视频在就绪后马上播放
      - controls   值为controls  向用户显示控件（如播放按钮）
      -   loop  值为loop 循环播放

#### 元素嵌套

- 嵌套规则：

  - 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素

  - 块级元素不能放在<p>里面

  - 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：

    　　h1、h2、h3、h4、h5、h6、p、dt

  -  li 内可以包含 div 标签  li 和 div 标 签都是装载内容的容器，地位平等，没有级别之分

  - 块级元素与块级元素并列、内嵌元素与内嵌元素并列

    - ```
      <div>
      	<h2></h2>
      	<p></p>
      </div> —— 对   块级元素嵌套内联元素和块级元素
      
      <div>
      	<a href=”#”></a>
      	<span></span>
      </div> —— 对   块级元素嵌套内联元素
      
      <div>
      	<h2></h2>
      	<span></span>
      </div> —— 错  h2 是块级元素  span 是内联元素  块级元素不能喝内联元素并列
      
      ```



#### HTML 特殊符号

HTML 常用的特殊字符：

- &nbsp  空格
- &copy  版权   ©
- &reg  已注册   ®

