219 lines
6.3 KiB
Markdown
219 lines
6.3 KiB
Markdown
# 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>
|
||
```
|
||
|
||
效果如下：
|
||
|
||
|
||
|
||
- 无序列表 （ul -li）
|
||
|
||
- 常用属性
|
||
|
||
- type
|
||
- circle 空心圆
|
||
- disk 实心圆
|
||
- square 方块
|
||
|
||
- ```
|
||
<ul>
|
||
<li> 列表中第一项的内容</li>
|
||
</ul>
|
||
```
|
||
|
||
|
||
|
||
- 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 常用的特殊字符：
|
||
|
||
-   空格
|
||
- © 版权 ©
|
||
- ® 已注册 ®
|
||
|