前言
今天开始总结学习Java Web，而学习Java Web我们应该先学习一些网页搭建基础的东西，今天我们就先从HTML开始。
目录
初识HTML
什么是HTML呢？
HTML
大名：Hyper Text Markup Language
寓意： 超文本 标记 语言
HTML是一种标记语言，它的作用是结构化Web网页及其内容。也就我们一般用来排版的一门语言，让我们搭建的网页结构更加符合客户需求。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言，标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
HTML元素
HTML 文档是由 HTML 元素定义的组成的。HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
<p>元素：
<p>这是一个段落 </p>
这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>
元素内容是：这是一个段落
<body> 元素：
<body>
<p>这是一个段落</p>
</body>
<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签<body> ，以及一个结束标签</body> 。
元素内容是另一个 HTML 元素（p 元素）。
<html> 元素：
<html>
<body>
<p>这是一个段落</p>
</body>
</html>
<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>。
元素内容是另一个 HTML 元素（body 元素）。
HTML结构
它的结构一般如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这里是标题</title>
</head>
<body>
<h1>等级为一大标题</h1>
<p>段落</p>
</body>
</html>
中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
注释格式：<!--此处为注释内容-->
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容（主体）
<h1> 元素定义一个大标题
<p> 元素定义一个段落
整个html文档中最重要的就是<body></body>中的部分了，它也是我们展现在外面的那一部分。
下面我们一一介绍一下在<body>中常用到的东西吧！！！
HTML的标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如
<html>
HTML 标签通常是成对出现的，比如<p>和</p>
标签对中的第一个标签是开始标签，第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签
标签的属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。并且属性总是以名称/值对的形式出现，比如：name=“value”。
基本格式：
<标签名 属性1="属性值1" 属性2="属性值2"></标签名>标签可以拥有多个属性
属性必须写在开始标签中，位于标签名后面
属性之间不区分顺序
标签名与属性、属性与属性之间使用空格隔开
任何属性都有默认值，省略该属性表示使用默认值
字体标签
格式：
<font>....</font>
作用：规定文本字体，字体尺寸，字体颜色
示例：<font color="red" size="5">这是一段测试文本</font>
其中<br>是代表换一行，<br> 标签没有结束标签
标题标签
h 即 head 的简写，有<h1>、<h2>、<h3>、<h4>、<h5>、<h6> 6种，从左到右字号依次变小。
6个标题标签在页面中的重要性是有区别的，其中h1标签的重要性最高，h6标签的重要性最低。
基本格式：<h1></h1>
像<h7>这种错误的标签在展示时不起作用
段落标签
p 即 paragraph 的简写，段落标签<p></p>
基本格式：<p>段落内容</p>
段落中的文本内容超出浏览器宽度之后会执行自动换行
水平线标签
hr 即 horizontal 的缩写，水平线标签<hr />
其作用是在页面中插入一条水平线
基本格式：<hr />
这是一个自闭合标签。（普通标签成对出现；自闭合标签不需要包裹内容，自己就执行了开始和结束的操作）
容器标签
div 即 division 的缩写，分割、区分的意思，span 即 span ，跨度、范围的意思。容器标签 <div></div> 和 <span></span>
这俩本质上是一个容器，其中div标签我们使用频率高，比较重要。
基本格式：
<div>这是div标签中的内容</div>
<span>这是span标签中的内容</span>
图像标签
图像标签 <img />，img 即 image 的缩写。
基本格式：<img src="图片URI/URL" />
<img />常用属性如下：
| 属性 | 属性值 | 属性含义 |
|---|---|---|
| src | URI/URL | 图像的路径 |
| alt | 文本 | 图像无法正常显示时的提示文本 |
| title | 文本 | 鼠标悬停于图像时显示的文本 |
| width | 像素 | 图像的宽度（单位：px） |
| height | 像素 | 图像的高度（单位：px） |
| border | 数字 | 设置图像边框的宽度 |
设置图像的宽高时，如果想等比缩放，则只设置其中一个即可
超链接标签
a标签
超链接标签<a></a>，anchor 的缩写
基本格式：
<a href="跳转目标(url)" target="目标窗口的弹出方式">超链接文本或图像</a>
href , 指定要跳转的URL地址
target , 指定目标窗口的打开方式。取值为 _self 或==_blank== , _self 为默认值为本窗口打开，_blank 表示新窗口打开
<base>标签
<base> 标签可以限定同一页面内所有 超链接 的打开方式。
<base target="_blank">
设置 <base> 之后依旧可以为某个单独的超链接设置打开方式
注意：
外链需要添加 http:// 或 https:// 前缀
内部链接 直接链接内部页面名称即可，如
<a href="index.html">首页</a>如果当时没有确定链接目标时，可以为 href 赋值 为 “#” ,即 href="#",表示一个空连接
各种网页元素，如 文本、图像、表格、音频、视频等都可以作为超链接的载体
锚点
通过创建锚点，可以快速定位到目标内容区域
创建锚点分为两步：
1.为目标内容（即锚点）创建id 并赋值
2.将超链接文本与锚点的id 关联，<a href="#id名称"> 超链接文本 </a>
路径
相对路径
相对于当前html文件所在的位置，为相对路径
如：
图像文件和HTML文件位于同一文件夹中，只需要输入图像文件的名称即可，<img src="logo.gif"/>
图像文件位于Html文件的下一级文件夹，输入文件夹名和文件名，二者之间用“/” 隔开，<img src="image/logo.gif"/>
图像文件位于HTML文件的上一级，在文件名之前加 " …/ ", 上两级则使用 " …/…/ ",依次类推。<img src="../image/logo.gif"/>
绝对路径
所在位置为绝对路径，有根据在本地与在网络上分为两种
本地绝对路径
如： D:\picture\img\csa12.gif
网络绝对路径
如：https://blog.csdn.net/apple_51673523?spm=1000.2115.3001.5343
列表
无序列表
无序列表
<ul>，所谓无序列表就是以小圆点或者小方块作为行首标志的列表。无序列表的各项之间是并列的，没有顺序级别的区分。
格式如下：
<body>
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
<li>无序列表4</li>
</ul>
</body>
输出为：
- 无序列表1
- 无序列表2
- 无序列表3
- 无序列表4
注意：
<ul></ul> 之间只能嵌套 <li></li>,不允许嵌套其他标签
<li></li> 之间相当于一个容器，可以嵌套任意标签
有序列表
有序列表 <ol></ol>
内部也是嵌套<li></li>
默认以 1、2、3…作为行首排序标志
如：
<body>
<ol >
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>有序列表4</li>
</ol>
</body>
输出为：
- 有序列表1
- 有序列表2
- 有序列表3
- 有序列表4
表格
<table></table> 用来定义表格，
<tr></tr> 用来定义行，嵌套在 <table></table> 中
<td></td> 用来定义行中的单元格，嵌套在 <tr></tr> 中
<tr></tr> 中只能嵌套<td></td> , 但 <td></td> 相当于一个容器，可以嵌套任意元素
表格相关的属性如下：
| 属性名称 | 含义 | 属性取值 |
|---|---|---|
| border | 表格的边框默认 border=“0”,即无边框 | 像素值 |
| cellspacing | 单元格与单元格边框之间的间距。默认 cellspacing=“2” | 像素值 |
| cellpadding | 单元格内容与单元格边框的间距。默认 cellpadding=“1” | 像素值 |
| width | 表格的宽度 | 像素值 |
| height | 表格的高度 | 像素值 |
| align | 表格在页面中的水平对齐方式 | left 、center 、right |
| caption | 标题 | 文本 |
| colspan | 从当前列向后 横跨几列, 应用于td、th | 数字 |
| rowspan | 从当前行向下 竖跨几行, 应用于td、th | 数字 |
表头标签
表头一般位于表格的第一行或者第一列。
表头标签为 <th></th>，在显示的时候默认会显示为加粗的效果
增加表头时，使用 <th></th> 替代对应位置的 <td></td>即可
表格结构
使用表格时，可以将表格分为头部、主体、页脚
<thead></thead> 用来定义头部。必须位于 <table></table> 中，一般包含网页的logo和导航等头部信息。
<tbody></tbody> 用来定义表格的主体，一般包含网页中除头部和底部之外的其他内容。
表格实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格实例</title>
</head>
<body>
<table cellspacing="2" cellpadding="10" align="center" border="5">
<thead>
<tr>
<th>姓名</th>
<th>属性</th>
</tr>
</thead>
<tbody>
<tr>
<td>白白</td>
<td>战士</td>
</tr>
<tr>
<td>黑黑</td>
<td>法师</td>
</tr>
</tbody>
</table>
</body>
</html>
输出：
可以根据代码看看效果。
注意
html中是没办法实现上下居中的，如果设置上下居中，需要通过js程序来设置。除此之外我们还可以在外面嵌套一层table，用table中的td来控制居中
表单
html 中一个完整的表单通常由 表单元素、提示信息、表单域（即多个表单的父容器）三部分组成。
常用属性：
| 属性 | 取值 | 含义 |
|---|---|---|
| type | text | 单行文本输入框（不换行的） |
| type | password | 密码输入框 |
| type | radio | 单选框（配合name 可以实现单选效果） |
| type | checkbox | 复选框 |
| type | button | 普通按钮 |
| type | submit | 提交按钮 |
| type | reset | 重置按钮 |
| type | image | 图像形式的提交按钮 |
| type | file | 文件域, 点击之后打开文件选择器 |
| name | 任意文本 | 控件名称 , name 相同则表示是同一组数据 |
| value | 任意文本 | 默认文本值 |
| size | 正整数 | 显示大小 |
| checked | checked | 默认是否被选中 |
| maxlength | 正整数 | 控制输入的最大字符数量 |
多个 radio 使用相同的 name ，则表示这是一组数据，这样可以实现单选效果。如果不加 name 多个 radio 可同时被选中
文本域标签
<textarea></textarea>用来做大量文本的输入，支持多行
有 cols 、rows 属性。cols 限制每行中所输入的文本字数，rows 限制最大行数。
下拉菜单
<select></select> 用来定义下拉菜单
<option></option> 用来定义下拉菜单选项
<select></select> 中至少包含一对 <option></option>，
在 option 中定义了属性 selected="selected" 之后，表示该项被默认选中
表单域
表单域
<form></form>，该标签用来定义表单域，以实现用户信息的收集和传递，form中的内容通常都会被提交到服务器。每个表单都应该有自己的表单域。
基本语法格式：
<form action="url地址" method="提交方式" name="表单名称">
...各种表单控件...
</form>
结言
HTML语言在后期只是为我们网页搭建提供一个大概框架，其中美化其他设置我们是在CSS中完成的，所以大家时间充足的情况对HTML不必太过于执着，但是如果你有时间还是好好学习学习。
最后本应该找写实例来演示一下的，但是我已经写不动了，所以我在网上找了一个例子给大家看看（示例原文链接在最后）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML网页布局</title>
<style>
body {
font: 14px Arial,sans-serif;
margin: 0px;
}
header {
padding: 10px 20px;
background: #acb3b9;
}
header h1 {
font-size: 24px;
}
.container {
width: 100%;
background: #f2f2f2;
}
nav, section {
float: left;
padding: 20px;
min-height: 170px;
box-sizing: border-box;
}
section {
width: 80%;
}
nav {
width: 20%;
background: #d4d7dc;
}
nav ul {
list-style: none;
line-height: 24px;
padding: 0px;
}
nav ul li a {
color: #333;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
footer {
background: #acb3b9;
text-align: center;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>C语言中文网</h1>
</header>
<div class="wrapper clearfix">
<nav>
<ul>
<li><a href="http://c.biancheng.net/">首页</a></li>
<li><a href="http://c.biancheng.net/html/">HTML教程</a></li>
<li><a href="http://c.biancheng.net/css3/">CSS教程</a></li>
<li><a href="http://c.biancheng.net/js/">JS教程</a></li>
<li><a href="http://c.biancheng.net/java/">Java教程</a></li>
<li><a href="http://c.biancheng.net/python/">Python教程</a></li>
</ul>
</nav>
<section>
<h2>网站简介</h2>
<p>C语言中文网创办于 2012 年初，是一个在线学习<b>编程</b>的网站。C语言中文网已经发布了众多优质编程教程，包括C语言、C++、Java、Python 等，它们都通俗易懂，深入浅出。</p>
<p>C语言中文网将会持续更新，并且不忘初心，坚持创作优质教程。</p>
</section>
</div>
<footer>
<p>www.biancheng.net</p>
</footer>
</div>
</body>
</html>
输出效果：
原文：HTML示例
2485
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
