2020-12-17 14:30:15 +08:00
|
|
|
|
# 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
|
2020-12-18 17:07:56 +08:00
|
|
|
|
- 下划线 u
|
2020-12-17 14:30:15 +08:00
|
|
|
|
- 多行文本输入框 textarea
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 常用标签详解
|
|
|
|
|
|
|
|
|
|
|
|
- 段落标签
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
<p>我是段落标签</p>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
- 列表元素
|
|
|
|
|
|
|
|
|
|
|
|
- 有序列表 （ol-li）
|
|
|
|
|
|
|
|
|
|
|
|
- 属性：
|
|
|
|
|
|
|
|
|
|
|
|
- reversed 布尔值 值为true/false 指定编号是否为从高到低反向排列
|
|
|
|
|
|
- start 一个整数值属性 值应该是数字 指定列表的起始值
|
|
|
|
|
|
- type 设置编号的类型 可选值如下：
|
|
|
|
|
|
- 1 数字编号 （默认）
|
|
|
|
|
|
- a 小写英文字母编号
|
|
|
|
|
|
- A 大写英文字母编号
|
|
|
|
|
|
- i 小写罗马数字编号
|
|
|
|
|
|
- I 大写罗马数字编号
|
|
|
|
|
|
|
|
|
|
|
|
> start 和type 在html4中被废弃 但是在html5 中被重新引入
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
<ol>
|
|
|
|
|
|
<li>列表中第一列的内容</li>
|
|
|
|
|
|
... 更多列
|
|
|
|
|
|
</ol>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
效果如下：
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- 无序列表 （ul -li）
|
|
|
|
|
|
|
|
|
|
|
|
- 常用属性
|
|
|
|
|
|
|
|
|
|
|
|
- type
|
|
|
|
|
|
- circle 空心圆
|
|
|
|
|
|
- disk 实心圆
|
|
|
|
|
|
- square 方块
|
|
|
|
|
|
|
|
|
|
|
|
- ```
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li> 列表中第一项的内容</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- hr 水平线
|
|
|
|
|
|
|
|
|
|
|
|
- hn 标题元素
|
|
|
|
|
|
|
|
|
|
|
|
- 空元素 没有内容的html 元素叫空元素
|
|
|
|
|
|
|
|
|
|
|
|
- h1~h6标题
|
|
|
|
|
|
|
|
|
|
|
|
- a 超链接
|
|
|
|
|
|
|
|
|
|
|
|
- 属性 href 指定跳转到的网址
|
2020-12-18 17:07:56 +08:00
|
|
|
|
|
2020-12-17 14:30:15 +08:00
|
|
|
|
- 具有默认的样式
|
|
|
|
|
|
|
2020-12-18 17:07:56 +08:00
|
|
|
|
- 属性：
|
|
|
|
|
|
|
|
|
|
|
|
- href 指定跳转到的网址
|
|
|
|
|
|
- download 属性值为文件名
|
|
|
|
|
|
- target 指定在哪里打开链接
|
|
|
|
|
|
- _self 当前页面加载
|
|
|
|
|
|
- _blank 新页面打开
|
|
|
|
|
|
- title 鼠标悬停时的提示信息
|
|
|
|
|
|
|
|
|
|
|
|
- 相对路径和绝对路径
|
|
|
|
|
|
|
|
|
|
|
|
> **相对路径**-以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对。
|
|
|
|
|
|
>
|
|
|
|
|
|
> **绝对路径**-以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。
|
|
|
|
|
|
>
|
|
|
|
|
|
> 其实绝对路径与相对路径的**不同处**，只在于描述目录路径时，所采用的参考点不同。由于对网站上所有文件而言，根目录这个参考点对所有文件都是一样的，因此，运用以根目录为参考点的路径描述方式才会被称之为绝对路径。
|
|
|
|
|
|
>
|
|
|
|
|
|
> 以下为建立路径所使用的几个特殊符号，及其所代表的意义。
|
|
|
|
|
|
> “.”–代表目前所在的目录。
|
|
|
|
|
|
> “..”–代表上一层目录。
|
|
|
|
|
|
> “/”–代表根目录。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- 多媒体元素
|
|
|
|
|
|
- 图片（img 标签）
|
|
|
|
|
|
- 属性
|
|
|
|
|
|
- src 显示图像的URL
|
|
|
|
|
|
- alt 规定图像的替代文本 即图片加载失败的提示文本
|
|
|
|
|
|
- 视频（video 标签）
|
|
|
|
|
|
- 属性
|
|
|
|
|
|
- src 播放视频的URL
|
|
|
|
|
|
- autoplay 值为autoplay 视频在就绪后马上播放
|
|
|
|
|
|
- controls 值为controls 向用户显示控件（如播放按钮）
|
|
|
|
|
|
- loop 值为loop 循环播放
|
2020-12-23 10:29:16 +08:00
|
|
|
|
- 音频（audio）
|
|
|
|
|
|
- 属性 和video标签属性类似
|
2020-12-18 17:07:56 +08:00
|
|
|
|
- src 播放音频的URL
|
|
|
|
|
|
- autoplay 值为autoplay 视频在就绪后马上播放
|
|
|
|
|
|
- controls 值为controls 向用户显示控件（如播放按钮）
|
|
|
|
|
|
- loop 值为loop 循环播放
|
|
|
|
|
|
|
2020-12-17 14:30:15 +08:00
|
|
|
|
#### 元素嵌套
|
|
|
|
|
|
|
|
|
|
|
|
- 嵌套规则：
|
|
|
|
|
|
|
|
|
|
|
|
- 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素
|
|
|
|
|
|
|
|
|
|
|
|
- 块级元素不能放在<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 是内联元素 块级元素不能喝内联元素并列
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2020-12-17 17:57:50 +08:00
|
|
|
|
#### HTML 特殊符号
|
2020-12-17 14:30:15 +08:00
|
|
|
|
|
|
|
|
|
|
HTML 常用的特殊字符：
|
|
|
|
|
|
|
|
|
|
|
|
-   空格
|
|
|
|
|
|
- © 版权 ©
|
|
|
|
|
|
- ® 已注册 ®
|
|
|
|
|
|
|
