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 标签（元素）

分类方式：

有无闭合标签：
- 单标签没有闭合标签单标签内以 /结尾如：
- 双标签由开始标签+内容+结束标签构成如：
  hello world
块级元素
- 定义：块级元素占据其父元素（容器）的整个空间，通常浏览器会在块级元素前后另起一个新行，即会导致换行
- 示例：
  - 大区块元素 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 循环播放

元素嵌套

嵌套规则：
- 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素
- 块级元素不能放在
  里面
- 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：
  
  　　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 已注册 ®

6.3 KiB Raw Blame History Unescape Escape

HTML 简介

什么是HTML

html 基本结构

HTML 标签（元素）

常用标签详解

元素嵌套

HTML 特殊符号

6.3 KiB

Raw Blame History