文章目录
- 前言
- 一、HTML简介
- 二、HTML标签介绍
- 1.标题标签
- 2.段落标签
- 3.换行标签
- 4.hr标签
- 5.span标签
- 6.div标签
- 7.img标签
- 8.超链接标签
- 9.注释标签
- 10.特殊字符
- 11.格式化标签
- 12.sup上标和sub下标
- 13.pre预格式化标签
- 三、行内元素、行内块元素和块级元素
前言
学习HTML之前，我们首先需要了解什么是HTML:
HTML：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。它不是一种编程语言，而是一种标记语言，使用标签来描述网页。HTML文档也叫做web页面。
一、HTML简介
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
实例解析：
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
注意：doctype声明是不区分大小写的，用来告知web浏览器页面使用了那种HTML版本。
对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候需要在头部将字符声明为 UTF-8。
二、HTML标签介绍
1.标题标签
代码如下（示例）：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>运行结果：
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
解析：
标题标签的默认样式是自动加粗的，字体一级标题最大，六级标题最小，每个标题标签独占一行。
标题标签是块元素
2.段落标签
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
我是一段很长的话，
我是一段很长的话，
我是一段很长的话，
我是一段很长的话，
我是一段很长的话，
我是一段很长的话，
我是一段很长的话，
我是一段很长的话，
我是一段很长的话，
我是一段很长的话，
我是一段很长的话，
我是一段很长的话，
我是一段很长的话，
</p>
<p>
我是一段很长的话，
</p>
<p>
我是一段很长的话，
</p>
</body>
</html>运行结果：
我是一段很长的话， 我是一段很长的话， 我是一段很长的话， 我是一段很长的话， 我是一段很长的话， 我是一段很长的话， 我是一段很长的话， 我是一段很长的话， 我是一段很长的话， 我是一段很长的话， 我是一段很长的话， 我是一段很长的话， 我是一段很长的话，
我是一段很长的话，
我是一段很长的话，
解析：
段落标签p,里面的内容是以段落的形式体现的，如果一个段落的文字太多，那么它会自适应浏览器窗口，一行显示不下，则会换行；如上面的运行结果。
它代表着一个自然段。
段落标签是块元素
3. 换行标签
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
第一行<br/>
第二行<br/>
第三行<br/>
</body>
</html>运行结果：
第一行
第二行
第三行
解析：
换行标签br的作用是，强制换行，如上代码如果不加br标签。那么它就会在一行上显示i。br是单标签。
4.hr标签
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
hr {
margin: 50px;
}
div>hr {
height: 20px;
background-color:red;
}
</style>
</head>
<body>
<hr>
<div>
<hr>
</div>
</body>
</html>运行结果：
解析：
hr标签：给页面添加一个分割线
hr标签，可以添加样式，如上图所示
5. span标签
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<span>1234</span>
<span>5678</span>
</body>
</html>运行结果：
解析 ：
<span> 用于对文档中的行内元素进行组合。
<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。
<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
<span>标签不同于<p>标签是一个行内元素（不独占一行）
6.div标签
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>这是一个div</div>
<div>这是一个div</div>
<div>
<p>这是一个div</p>
</div>
<p>
<div>z5343</div>
</p>
</body>
</html>运行结果：
解析：
<div>标签可以看出是一个盒子容器，这里面可以放别的标签
<div>标签是一个块元素
如上图控制台所示（打开控制台的方式：F12）：<div>标签里面可以包含<p>标签，<p>标签，里面不可以放<div>标签
7.img标签
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="smiley-2.gif" alt="Smiley face" width="100" height="100"
title="face">
</body>
</html>运行结果：
解析：
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
src的路径分为：网上的图片路径和本地的图片路径
8.超链接标签
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度</a>
</body>
</html>解析：
作用：点击文字跳到链接的地方
a是行内元素
href：规定链接的目标URL
target：（链接窗口的打开方式）
- _blank：新窗口打开。
- _parent：在父窗口中打开链接。
- _self：默认，当前页面跳转。
- _top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。
9.注释标签
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 这是一行注释 -->
</body>
</html>解析：
<!-- -->
1. 注释只是为了提醒程序猿，这个代码是干啥的，并不参与执行，不要随便乱写注释，注释能够被外面的有心人看到!!!
2. 注释可以直接通过 ctrl + / 来切换注释
3. 注释不能嵌套
10.特殊字符
空格(html中默认是不显示空格的，也就是说通过空格键加了空格也没有多个空格的效果，加多少个都是显示一个空格效果，需要这些特殊字符才能显示出空格效果)
> >
< <
& &
¥ ¥
11.格式化标签
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<strong>加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<ins>下划线</ins>
<u>下划线</u>
</body>
</html>运行结果：
解析：
<strong> 和 <b> 都是加粗文本，但是<strong>的语义更加强列
12.sup上标和sub下标
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
x<sup>2</sup>
</p>
<p>
log<sub>2</sub>10
</p>
</body>
</html>运行结果 ：
13. pre预格式化标签
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<pre>
我是一个 有样式
的文字
</pre>
</body>
</html>运行结果：
解析：
可以看出上面的代码和运行结果显示<pre>标签保留了文本中的空格和换行
<pre> 标签可定义预格式化的文本。
被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
三、行内元素、行内块元素和块级元素
HTML 可以将元素分类方式分为行内元素、块级元素和行内块元素.
使用display属性能够将三者任意转换:
display:inline;// 转换为行内元素
display:block;// 转换为块级元素
display:inline-block// 转换为行内块元素行内元素（inline element）
特点：
1.不会独占一行，它是自左向右排列，一行排满再换行
2.行内元素的宽和高，默认是被内容撑开的
3.对 margin 仅设置左右方向有效，上下无效，padding 设置上下左右都有效
4.不会自动进行换行
常用行内元素：span em strong a i ......
行内块元素
特点：
1.兼具块元素和行内元素特点
2.不会独占一行，可自定义宽高
3.默认排序方式为从左到右
块元素（block element）
特点：
1.能够识别宽高
2.margin 和 padding 的上下左右均对其有效
3.独占一行
4.多个块级元素标签写在一起，默认排序方式为从上至下
常用块元素：div h1-h6 p header footer nav......
