前言
今天开始总结学习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）的所有代码。
元素：
这是一个段落
这个
元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签
，以及一个结束标签
元素内容是：这是一个段落
元素：
这是一个段落
元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 ，以及一个结束标签 。
元素内容是另一个 HTML 元素（p 元素）。
元素：
这是一个段落
元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 ，以及一个结束标签 。
元素内容是另一个 HTML 元素（body 元素）。
HTML结构
它的结构一般如下：
这里是标题
等级为一大标题
段落
中文网页需要使用 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 。
注释格式：
声明为 HTML5 文档 元素是 HTML 页面的根元素 元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。 元素描述了文档的标题</div><div><body> 元素包含了可见的页面内容（主体）</div><div><h1> 元素定义一个大标题</div><div><div> 元素定义一个段落</div><div><br /></div><div>整个html文档中最重要的就是<body></body>中的部分了，它也是我们展现在外面的那一部分。</div><div><br /></div><div>下面我们一一介绍一下在<body>中常用到的东西吧！！！</div><div><br /></div><div>HTML的标签</div><div>HTML 标记标签通常被称为 HTML 标签 (HTML tag)。</div><div><br /></div><div>HTML 标签是由尖括号包围的关键词，比如 <html></div><div>HTML 标签通常是成对出现的，比如 <div> 和 </div></div><div>标签对中的第一个标签是开始标签，第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签</div><div><br /></div><div>标签的属性</div><div>HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。并且属性总是以名称/值对的形式出现，比如：name=“value”。</div><div><br /></div><div>基本格式：<标签名 属性1="属性值1" 属性2="属性值2"></标签名></div><div><br /></div><div>标签可以拥有多个属性</div><div><br /></div><div>属性必须写在开始标签中，位于标签名后面</div><div><br /></div><div>属性之间不区分顺序</div><div><br /></div><div>标签名与属性、属性与属性之间使用空格隔开</div><div><br /></div><div>任何属性都有默认值，省略该属性表示使用默认值</div><div><br /></div><div>字体标签</div><div>格式：</div><div><font>....</font></div><div>作用：规定文本字体，字体尺寸，字体颜色</div><div>示例：<font color="red" size="5">这是一段测试文本</font></div><div><br /></div><div>其中<br>是代表换一行，<br> 标签没有结束标签</div><div><br /></div><div>标题标签</div><div>h 即 head 的简写，有<h1>、<h2>、<h3>、<h4>、<h5>、<h6> 6种，从左到右字号依次变小。</div><div><br /></div><div>6个标题标签在页面中的重要性是有区别的，其中h1标签的重要性最高，h6标签的重要性最低。</div><div><br /></div><div>基本格式：<h1></h1></div><div><br /></div><div>像<h7>这种错误的标签在展示时不起作用</div><div><br /></div><div>段落标签</div><div>p 即 paragraph 的简写，段落标签<div></div></div><div><br /></div><div>基本格式：<div>段落内容</div></div><div><br /></div><div>段落中的文本内容超出浏览器宽度之后会执行自动换行</div><div><br /></div><div>水平线标签</div><div>hr 即 horizontal 的缩写，水平线标签<hr /></div><div>其作用是在页面中插入一条水平线</div><div><br /></div><div>基本格式：<hr /></div><div>这是一个自闭合标签。（普通标签成对出现；自闭合标签不需要包裹内容，自己就执行了开始和结束的操作）</div><div><br /></div><div>容器标签</div><div>div 即 division 的缩写，分割、区分的意思，span 即 span ，跨度、范围的意思。容器标签 <div></div> 和 <span></span></div><div>这俩本质上是一个容器，其中div标签我们使用频率高，比较重要。</div><div>基本格式：</div><div><br /></div><div><div>这是div标签中的内容</div> </div><div><span>这是span标签中的内容</span></div><div>1</div><div>2</div><div>图像标签</div><div>图像标签 <img />，img 即 image 的缩写。</div><div><br /></div><div>基本格式：<img src="图片URI/URL" /></div><div><br /></div><div><img />常用属性如下：</div><div><br /></div><div>属性 属性值 属性含义</div><div>src URI/URL 图像的路径</div><div>alt 文本 图像无法正常显示时的提示文本</div><div>title 文本 鼠标悬停于图像时显示的文本</div><div>width 像素 图像的宽度（单位：px）</div><div>height 像素 图像的高度（单位：px）</div><div>border 数字 设置图像边框的宽度</div><div>设置图像的宽高时，如果想等比缩放，则只设置其中一个即可</div><div><br /></div><div>超链接标签</div><div>a标签</div><div>超链接标签<a></a>，anchor 的缩写</div><div><br /></div><div>基本格式：</div><div><a href="跳转目标(url)" target="目标窗口的弹出方式">超链接文本或图像</a></div><div>href , 指定要跳转的URL地址</div><div>target , 指定目标窗口的打开方式。取值为 _self 或==_blank== , _self 为默认值为本窗口打开，_blank 表示新窗口打开</div><div><br /></div><div><base>标签</div><div><br /></div><div><base> 标签可以限定同一页面内所有 超链接 的打开方式。</div><div><base target="_blank"></div><div>设置 <base> 之后依旧可以为某个单独的超链接设置打开方式</div><div><br /></div><div>注意：</div><div><br /></div><div>外链需要添加 http:// 或 https:// 前缀</div><div><br /></div><div>内部链接 直接链接内部页面名称即可，如 <a href="index.html">首页</a></div><div><br /></div><div>如果当时没有确定链接目标时，可以为 href 赋值 为 “#” ,即 href="#",表示一个空连接</div><div><br /></div><div>各种网页元素，如 文本、图像、表格、音频、视频等都可以作为超链接的载体</div><div><br /></div><div>锚点</div><div>通过创建锚点，可以快速定位到目标内容区域</div><div><br /></div><div>创建锚点分为两步：</div><div><br /></div><div>1.为目标内容（即锚点）创建id 并赋值</div><div>2.将超链接文本与锚点的id 关联，<a href="#id名称"> 超链接文本 </a></div><div><br /></div><div>路径</div><div>相对路径</div><div>相对于当前html文件所在的位置，为相对路径</div><div><br /></div><div>如：</div><div><br /></div><div>图像文件和HTML文件位于同一文件夹中，只需要输入图像文件的名称即可，<img src="logo.gif"/></div><div><br /></div><div>图像文件位于Html文件的下一级文件夹，输入文件夹名和文件名，二者之间用“/” 隔开，<img src="image/logo.gif"/></div><div><br /></div><div>图像文件位于HTML文件的上一级，在文件名之前加 " …/ ", 上两级则使用 " …/…/ ",依次类推。<img src="../image/logo.gif"/></div><div><br /></div><div>绝对路径</div><div>所在位置为绝对路径，有根据在本地与在网络上分为两种</div><div><br /></div><div>本地绝对路径</div><div>如： D:\picture\img\csa12.gif</div><div><br /></div><div>网络绝对路径</div><div><br /></div><div>列表</div><div>无序列表</div><div>无序列表 <ul> ，所谓无序列表就是以小圆点或者小方块作为行首标志的列表。无序列表的各项之间是并列的，没有顺序级别的区分。</div><div><br /></div><div>格式如下：</div><div><br /></div><div><body></div><div> <ul></div><div> <li>无序列表1</li></div><div> <li>无序列表2</li></div><div> <li>无序列表3</li></div><div> <li>无序列表4</li></div><div> </ul></div><div></body></div><div><br /></div><div>输出为：</div><div><br /></div><div>无序列表1</div><div><br /></div><div>无序列表2</div><div><br /></div><div>无序列表3</div><div><br /></div><div>无序列表4</div><div><br /></div><div>注意：</div><div><br /></div><div><ul></ul> 之间只能嵌套 <li></li>,不允许嵌套其他标签</div><div><li></li> 之间相当于一个容器，可以嵌套任意标签</div><div><br /></div><div>有序列表</div><div>有序列表 <ol></ol></div><div>内部也是嵌套<li></li></div><div>默认以 1、2、3…作为行首排序标志</div><div>如：</div><div><br /></div><div><body></div><div> <ol ></div><div> <li>有序列表1</li></div><div> <li>有序列表2</li></div><div> <li>有序列表3</li></div><div> <li>有序列表4</li></div><div> </ol></div><div></body></div><div><br /></div><div>输出为：</div><div><br /></div><div>有序列表1</div><div>有序列表2</div><div>有序列表3</div><div>有序列表4</div><div>表格</div><div><table></table> 用来定义表格，</div><div><tr></tr> 用来定义行，嵌套在 <table></table> 中</div><div><td></td> 用来定义行中的单元格，嵌套在 <tr></tr> 中</div><div><tr></tr> 中只能嵌套<td></td> , 但 <td></td> 相当于一个容器，可以嵌套任意元素</div><div>表格相关的属性如下：</div><div><br /></div><div>属性名称 含义 属性取值</div><div>border 表格的边框默认 border=“0”,即无边框 像素值</div><div>cellspacing 单元格与单元格边框之间的间距。默认 cellspacing=“2” 像素值</div><div>cellpadding 单元格内容与单元格边框的间距。默认 cellpadding=“1” 像素值</div><div>width 表格的宽度 像素值</div><div>height 表格的高度 像素值</div><div>align 表格在页面中的水平对齐方式 left 、center 、right</div><div>caption 标题 文本</div><div>colspan 从当前列向后 横跨几列, 应用于td、th 数字</div><div>rowspan 从当前行向下 竖跨几行, 应用于td、th 数字</div><div><br /></div><div>表头标签</div><div>表头一般位于表格的第一行或者第一列。</div><div>表头标签为 <th></th>，在显示的时候默认会显示为加粗的效果</div><div>增加表头时，使用 <th></th> 替代对应位置的 <td></td>即可</div><div><br /></div><div>表格结构</div><div>使用表格时，可以将表格分为头部、主体、页脚</div><div><br /></div><div><thead></thead> 用来定义头部。必须位于 <table></table> 中，一般包含网页的logo和导航等头部信息。</div><div><tbody></tbody> 用来定义表格的主体，一般包含网页中除头部和底部之外的其他内容。</div><div><br /></div><div>表格实例</div><div><!DOCTYPE html></div><div><html lang="en"></div><div><head></div><div> <meta charset="UTF-8"></div><div> <title>表格实例
| 姓名 | 属性 |
| 白白 | 战士 |
| 黑黑 | 法师 |
输出：
可以根据代码看看效果。
注意
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 可同时被选中
文本域标签
用来做大量文本的输入，支持多行
有 cols 、rows 属性。cols 限制每行中所输入的文本字数，rows 限制最大行数。
下拉菜单
用来定义下拉菜单
用来定义下拉菜单选项
中至少包含一对 ，
在 option 中定义了属性 selected="selected" 之后，表示该项被默认选中
表单域
表单域 ，该标签用来定义表单域，以实现用户信息的收集和传递，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> ———————————————— 版权声明：本文为CSDN博主「_ 大聪明」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/apple_51673523/article/details/121211559
输出效果：
