目录
1.什么是HTML
HTML全称“Hyper Text Markup Language（超文本标记语言）”，是网页的标准语言。HTML并不是一门编程语言，而是一门描述性的标记语言。
学习html就是在学习各种标签，来搭建网页的“骨架”。在HTML中，标签有很多种，如文字标签、图片标签、表单标签等。
简单来说描述不同的事物就用不同的标签，举个例子，如果你要在浏览器显示一段文字，就应该使用“段落标签——p”；如果要在浏览器显示一张图片，就应该使用“图片标签——img”。针对你想显示东西的不同，使用的标签也会不同。总而言之，学习HTML就是学习各种各样的标签，然后针对你想显示什么东西，再对应地使用正确的标签，非常简单。
2.HTML标签
上图是HTML的基本结构，从中我们可以看出，一个页面是由4个部分组成的。
（1）文档声明：<!DOCTYPE html>
（2）html标签对：<html></html>
（3）head标签对：<head></head>
（4）body标签对：<body></body>
2.1 !DOCTYPE 声明
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前，<!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本，以便于浏览器的解析器使用正确的文档标准解析这个文档。若声明错误或未声明会导致文档以怪异模式呈现。
注意：1.<!DOCTYPE> 标签没有结束标签。
2.<!DOCTYPE> 声明不区分大小写。
3.总是先给 HTML 文档添加 <!DOCTYPE> 声明，确保浏览器能够预先知道文档类型。
2.2 HTML的头部head
元素包含了所有的头部标签元素。在 元素中你可以插入脚本（scripts）, 样式文件（css），及各种meta信息。
2.3 HTML的常用标签
2.3.1HTML标题标签 （h）
为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即 标题标签语义： 作为标题使用，并且依据重要性递减。
如：
h1~h6标签的字体是会加粗，字体的大小是会减小，标题标签是会占据一行的。
2.3.2 HTML的段落标签（p）
可以把 HTML 文档分割为若干段落，在网页中要把文字有条理地显示出来，离不开段落标签。
如：<p>段落标签</p>
<p>标签在默认情况下，会根据浏览器窗口大小自动换行。
2.3.3 水平线标签 （hr）
在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成。如下图：
2.3.4 换行标签 （br）
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签。
2.3.5 div 和 span标签 (div) (span)
div 和 span 是没有语义的 是我们网页布局主要的2个盒子
<div>你好，蝶恋花魂</div> <span>你好，蝶恋花魂</span>
他们两个都是盒子，用来装我们网页元素的， 只不过他们有区别，现在我们记住
- div标签 用来布局的，但是现在一行只能放一个div
- span标签 用来布局的，一行上可以放好多个span
2.3.6 文本格式化标签
| 标签 | 显示效果 |
|---|---|
| <b></b>和<strong></strong> | 文字以粗体方式显现 |
| <i></i>和<em></em> | 文字以斜体方式显示 |
| <s></s>和<del></del> | 文字以加删除线的方式显示 |
| <ins></ins> | 文字以加下划线方式显示 |
2.3.7 图像标签 （img）
要想在网页中显示图像就需要使用图像标签。语法如下：
语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。
| 属性 | 属性值 | 描述 |
| src | URL | 图像的路径 |
| alt | 文本 | 图像不能显示时显示的文本 |
| tittle | 文本 | 鼠标悬停时显示的文本 |
2.3.8 链接标签
超链接的语法格式：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
| 属性 | 作用 |
| href | 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。 |
2.3.9 注释标签
在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。起到标注作用，便于理解和记忆。
语法格式：
<!-- 注释语句 -->
如上图所示：注释是解释代码的含义，程序是不执行的。
总结展示：
3. HTML列表
3.1 列表
列表是网页中最常用的一种数据排列方式。
| 列表 | 注意 | |
| 有序列表 | <ol> <li>列表项<li></ol> | ol标签和li标签是配合一起使用，不可以单独使用，而且<ol>标签的子标签只能是li标签，不能是其他标签。 |
| 无序列表 | <ul> <li>列表项</li></ul> | 和有序列表是一样的 |
| 自定义列表 | <dl> <dt>名词</dt> <dd>描数</dd></dl> | <dl>标记和</dl>标记分别定义了定义列表的开始和结束，dt标签用于添加要解释的名词，而dd标签用于添加该名词的具体解释。 |
3.2 type 属性
在HTML中，我们可以使用type属性来改变列表项符号。默认情况下，有序列表使用数字作为列表项符号。
| type在列表中的用法 | |||||||||||||
| 有序列表 |
| ||||||||||||
| 无序列表 |
| ||||||||||||
总结展示：
4 HTML表单
在HTML中，表单标签有5种：form、input、textarea、select和option。
4.1 form 标签
语法：
<form> 各种表单标签 </form>
| 属性 | 说明 | |
|---|---|---|
| name | 表单名称 | 设置名称 |
| method | 提交方式 | method属性取值有两个：一个是“get”，另外一个是“post”。 |
| action | 提交地址 | action属性用于指定表单数据提交到哪一个地址进行处理。 |
| target | 打开方式 | form标签的target属性跟a标签的target属性是一样的，一般用到“_blank”属性值 |
| enctype | 编码方式 | enctype属性用于指定表单数据提交的编码方式，一般不做修改。 |
4.2 input 标签
在一般情况下，input标签是实现大多数表单的
| 属性值 | 浏览器效果 | |
| text |  | 单行文本框 |
| password |  | 单行密码框 |
| radio |  | 单选框 |
| checkbox |  | 多选框 |
| button |  | 按钮 |
| file |  | 文件上传 |
4.2.1 单行文本框
在HTML中，单行文本框是使用input标签来实现的，其中type属性取值为“text”。单行文本框常见于注册登录中。
语法：
<input type="text" >
| 属性 | 说明 |
|---|---|
| value | 设置文本框的默认值，也就是默认情况下文本框 |
| size | 设置文本框的长度 |
| maxlength | 设置文本框中最多可以输入的字符数 |
4.2.2 密码文本框
密码文本框跟单行文本框相似，但显示的内容是不可见的。
密码文本框的属性是跟单行文本框的属性是一样的。
语法：
<input type="password" >
4.2.3 单选框
语法：
<input type="radio" name="组名" value="取值" >
4.2.4 复选框
复选框相较于单选框可以选择多项。
语法：
<input type="checkbox" name="组名" value="取值" >
4.2.5 按钮
语法：<input type="button" value="取值" >或
<button>值</button>
4.2.6 文件上传
语法：
<input type="file" >
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
