本次笔记分类为JavaEE内（链接：JavaEE简明笔记），因为JavaEE知识过多且较复杂，所以对每个知识点进行分类整理,整理完成后全部进入JavaEE笔记中。
HTML是超文本标记语言，不是编程语言，是一种用来制作超文本文档的简单描述性标记语言，语法较为简单。
静态网页制作语言。
持续更新中ing
你的三连就是我最大的动力。
引入式案例
这里以VScode为例，保存文件为.html。
<html>
<head>
<title>S</title>
</head>
<body>
Hello
</body>
</html>
下图用Edge打开文本界面。
一个完整的HTML文件包括标题、段落、列表、表格以及各种嵌入对象，这些统称为元素。
<html>
<head>
头部信息
</head>
<body>
文档主体部分
</body>
</html>
文本及版面风格的控制
字体控制
<font>标签
<font face=字体类型 size=字体大小 color=颜色值 style=样式>...</font>
face:指定字体类型，如宋体、Times new roman等
size:有效值1-7的整数
color：字体颜色，用#做前缀，十六进制，也可以是颜色名称
下面是font的展示代码与界面
<html>
<head>
<title>Font标签的使用</title>
</head>
<body bgcolor="#eeeeee">
<center>
<font>默认字体</font>
<font size="1">1号字体</font>
<font size="4" face="楷体" color=blue>4号字体</font>
<font size=3>
<p>
<b>黑体字</b><i>斜体字</i>
<u>加下划线</u>
</p>
<p><cite>Welcome!</cite></p>
<p>a<sub>1</sub>=x<sub>2</sub>+y<sub>2</sub></p>
</font>
</center>
</body>
</html>
标题
HTML提供了标题标记，一个为6个标题
<html>
<head>hn标签的使用</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3 align=center>三级标题</h3>
</body>
</html>
网页整体风格控制
bgcolor：网页的背景颜色
text：设置网页文本的背景颜色
background：设置网页的背景图形，以平铺方式作为网页背景
分段和换行控制
1分段：使用p标记实现，p表示一段落的开始，/p表示段落的结束，一个单独的p可以产生一个空行。
2换行：用标记br来实现，无对应的结束标记，换行。为了保证某一个单词的完整性，有时禁止某处换行，此时使用nobr标记。
3预格式化文本：pre标记
4分隔线：hr标记
<hr size=宽度 width=长度 align=对齐方式 color=颜色 noshade>
size:设置水平线宽度
width：水平线的长度
align:水平线的对齐方式
color:指定线条颜色
<hr>单标记
图像、超链接和表格
1图像标记
（抽时间详细讲一下这个相对路径和绝对路径）
这里对相对路径、绝对路径做个说明：相对路径：以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对。
绝对路径：以Web 站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。其实绝对路径与相对路径的不同处，只在于描述目录路径时，所采用的参考点不同。由于对网站上所有文件而言，根目录这个参考点对所有文件都是一样的，因此，运用以根目录为参考点的路径描述方式才会被称之为绝对路径。
<img src=图像文件的地址 alt=文字 border=边框宽度 width=图像宽度 height=图像高度 align=对齐方式>
src:相对路径/绝对路径
alt:鼠标放在图片上，显示一小段文字，一般为标题
border：像素，默认为0
<html>
<head>img标签的使用</head>
<body>
<img src="C:\Users\Jack Leo\Desktop\HTML.jpg">
</body>
</html>
2超链接
超链接对网页来说极为重要，是HTML最强大和最有价值的功能。（link）
超链接基于a标记
<a href="URL" target=目标> </a>
href是超文本引用的缩写，target是如何打开指定的网页
target有以下几个值：
1._blank:在一个新的窗口
2._self:默认设置
3._parent:在上一级窗口显示
4._top:整个窗口打开忽略所有框架结构
<html>
<head><title>标签的使用</title></head>
<body>
<a href="http://www.baidu.com" target="_blank">新窗口打开百度网站</a>
</body>
</html>
定义锚点
<a name=锚名> 文字</a>
3表格
表格是网页排版的灵魂，包含的内容也比较多。
<table>
<tr>
<tr>单元格的文字</tr>
</tr>
</table>
table（整个表格属性）标记属性很多，常用语法如下：
<table align=对齐方式 bgcolor=表格背景色 border=边界宽度 bordercolor=边界颜色 height=表格高度 width=表格宽度 >
tr（表格各行属性）标记属性
<tr align=对齐方式 valign=垂直对齐方式 height=行高 background=背景图案></tr>
tr标记和table标记类似
td（设置单元格）标记和前面类似。
<html>
<head><title>绘制表格</title></head>
<body bgcolor="#ffffff">
<table border="2" width="100%" bordercolor="#008000" cellspacing="1">
<tr><!--第一行-->
<td></td>
<td colspan="2"></td> <!--第2，3个单元格合并-->
<td colspan="2"></td> <!--第4，5单元格合并-->
</tr>
<tr><!--第2行-->
<td rowspan="3"></td><!--和下面两行相应的单元格合并-->
<td></td>
<td></td>
<td></td>
<td></td><!--第2，3，4，5单元格-->
</tr>
<tr><!--第3行-->
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
HTML的表单
表单是浏览者与网站实现互动的重要手段，主要功能是收集网站所需的信息。例如，当在网上申请电子邮件信箱时，就需要填写表单。
创建表单使用form标记，语法格式
<form name=表单名 action=表单处理程序或网页 method="get"或"post" target=窗口打开方式 enctype=MIME类型>
action属性的值是表单处理程序的名称或网页名（包括网络路径）,即设置给谁处理。
method提交的方法，处理程序从表单中获得信息的方式。
服务器处理表单数据之后要返回给客户端一些信息。
| enctype取值 | 含义 |
|---|---|
| text/plian | 以纯文本的形式传送 |
| application/x-www-form-urlencoded | 默认的编码形式 |
| multipart/form-data | MIME编码 |
表单数据提交到邮箱
<form method="Post" action="mailto:jackleo120@126.com" enctypr="text/plian">
文本框控件
<input type="text" name=控件名称 size=控件长度 maxlength=最长输入字符数 value=初始值>
input 输入类控件
size 文本框的显示长度
maxlength最多可以输多少字符
value初始文本
密码文本框
<input type="password" name="控件名称" size=控件长度 maxlength value>
密码域显示。
单选按钮
<input type="radio" name=控件名称 value checked>
radio表示一个单选按钮
checked处于被选中状态
复选框
<input type="checkbox" name= value= checked>
checkbox表示复选框
下拉菜单
<select name=控件名称>
<option value=选项值 1 selected>显示内容1</option>
<option value=选项值 2>显示内容2</option>
</select>
案例实践
界面
扫一扫
241
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
