文章目录
一、HTML介绍
1、介绍
HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
2、HTML标签
(1).介绍
形如下面这样的就是HTML标签。
<div>XXX</div>
由一个开始标签开始，以对应的结束标签结束。
当然也有些标签只有开始标签，比如<br>、<img>、input等。
(2).嵌套
HTML标签可以进行嵌套，如下面这样：
<div>
<span>Look!</span>
</div>
(3).属性
标签可以没有属性、或者拥有若干个属性。
这些属性
- 以键值对的形式呈现出来，形如
key="value" - 写在开始标签内，以空格分隔
<div class="nav" id="user">
3、HTML文档结构
(1).完整结构
一个完整的HTML文档，一般结构如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
</body>
</html>
Tips：很多IDE，可以用过输入英文感叹号按下回车，生成上述结构
(2).<!DOCTYPE html>标签
告知浏览器该页面文件的文档类型，指示web浏览器使用哪个HTML版本编写页面。
Tips：必须放在文件第一行。
(3).<html>标签
告知浏览器自身是一个HTML文档，限定文档的开始点和结束点
(4).<head>标签
定义文档的头部，通常在这里引用样式表，其中的<title>标签存放文档的标题。
(5).<body>标签
定义文档的主题内容。
4、HTML注释
用下面这样的标签来进行注释
<!-- 这是注释 -->
<!-- 多行注释
多行注释
多行注释 -->
5、HTML标签分类
简单的划分，一般可以分为块状标签和内联标签。
两者的最大区别在于，块级标签会为自己的内容占据新的一行，内联标签不会。
二、常用HTML标签整理
1、总体整理
(1).文本标签
| 标签 | 功能 | 属性 | 块状/内联 | 是否有闭合标签 |
|---|---|---|---|---|
<h1>至<h6> |
标题（h1最大，h6最小） |
块状 | 有 | |
<p> |
段落 | 块状 | 有 | |
<span> |
普通文本 | 内联 | 有 | |
<strong> |
加粗强调 | 内联 | 有 | |
<img> |
图片 | src |
内联 | 无 |
<a> |
超链接 | href、title、target、 |
内联 | 有 |
<ul> |
无序列表 | 块状 | 有 | |
<ol> |
有序列表 | 块状 | 有 | |
<li> |
列表元素 | 块状 | 有 | |
<label> |
标签 | for |
内联 | 有 |
(2).表单标签
| 标签 | 功能 | 属性 | 块状/内联 | 是否有闭合标签 |
|---|---|---|---|---|
<form> |
表单 | action、method |
块状 | 有 |
<input> |
单行文本输入框 | type、placeholder、name、value、readonly、disabled |
内联 | 无 |
<textarea> |
多行文本输入框 | placeholder、name、cols、rows |
内联 | 有 |
<select> |
选项菜单 | name、multiple |
内联 | 有 |
<option> |
选项 | value |
块状 | 有 |
<button> |
按钮 | type |
内联 | 有 |
2、整体示例
(1).文本标签
Html文档
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<h1>一级标题</h1>
<p>
一段文字，这段文字描述了ABCDEFGHIJKLMN
一段文字，这段文字描述了ABCDEFGHIJKLMN
一段文字，这段文字描述了ABCDEFGHIJKLMN
一段文字，这段文字描述了ABCDEFGHIJKLMN
一段文字，这段文字描述了ABCDEFGHIJKLMN
一段文字，这段文字描述了ABCDEFGHIJKLMN
一段文字，这段文字描述了ABCDEFGHIJKLMN
<span>突如其来的span标签内容</span>
<strong>突如其来的strong标签内容</strong>
</p>
<img src="https://csdnimg.cn/cdn/content-toolbar/csdn-logo_.png?v=20190924.1" alt="">
<a href="https://www.csdn.net/" target="_blank">新窗口打开CSDN首页</a>
<ul>
<li>无序列表元素</li>
<li>无序列表元素</li>
<li>无序列表元素</li>
<li>无序列表元素</li>
</ul>
<ol>
<li>有序列表元素</li>
<li>有序列表元素</li>
<li>有序列表元素</li>
<li>有序列表元素</li>
</ol>
<labe>label元素一般用在表单里，用for属性给表单元素绑定id哦</labe>
</body>
</html>
效果图示
(2).表单标签
Html文档
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<form>
<input type="text" name="nickname1" />
<br>
<input type="text" placeholder="昵称" name="nickname2" />
<br>
<input type="text" placeholder="昵称" name="nickname3" value="小明" />
<br>
<input type="text" placeholder="昵称" name="nickname4" value="小明(不可修改)" readonly />
<br>
<input type="text" placeholder="昵称" name="nickname4" value="小明(不可修改)" disabled />
<br>
<input type="password" placeholder="密码" name="psw" />
<br>
<textarea rows="5" cols="40" placeholder="输入你想输入的一段话"></textarea>
<br>
<select>
<option value ="v1">v1</option>
<option value ="v2">v2</option>
<option value ="v3">v3</option>
</select>
<br>
<select multiple>
<option value="s1">s1</option>
<option value="s2">s2</option>
<option value="s3">s3</option>
</select>
<br>
<button type="button">样式按钮</button>
<button type="submit">提交按钮</button>
</form>
</body>
</html>
效果图示
