这个内容主要是给后端开发工程师看的部分HTML总结，对于前端开发工程师，此内容可作为入门，之后还有深入学习。
1.引言
早期，电脑上主要是各种客户端应用程序（如qq），现在更多的是浏览各个网页，这种架构也从以前的CS（Client/Server , 客户端/服务器）向BS（Browser/Server，浏览器/服务器）方向转变，因此，基于web编程的网页前端技术成为了主流。如下图所示，客户端通过HTTP协议向服务器端请求资源，服务器从数据库中找到响应的资源向客户端做出响应。
前端目前一般使用HTML+CSS+JavaScript的模式：
- HTML：决定页面上显示什么内容（如页面上的所有文字信息）
- CSS：页面上显示内容的风格（主要用于让显示的内容更加美观）
- JavaScript：页面特效
2.基础语法
html语言是解释型语言，不是编译型浏览器是容错的，即使有部分错误，不影响网页的打开，只不过局部内容可能有问题。
准备工作:
- 创建：首先，通过右击创建记事本，可以创建一个.txt文件，之后把txt后缀改为html
- 打开：HTML的编辑器有很多，常用的有，如：Dreamweaver、EditPlus、HBuilder、sublime text、Notepad++等，即使没有，用记事本打开也可以写
- 格式化工具：https://www.sojson.com/jshtml.html
语法
- html页面中由一对标签组成：
- 称之为 开始标签
- 称之为 结束标签
- html里面的模块
- head 表示网页的头部信息，有网页名称title，元信息meta：编码charset等
- body 表示网页的内容
- 单标签：开始标签和结束标签是同一个，斜杠放在单词后面
- br表示换行 。br标签是一个单标签。（break）
- p 表示段落标签（program）
- span 不换行的块标记
- img 标签图片标签
- src属性表示图片文件的路径
- width和height表示图片的大小
- alt表示图片的提示
- 路径的问题：
- 相对路径
- 绝对路径
- h1~h6 : 标题标签
- 列表标签:
- ol 有序列表（order list）
- start 表示从*开始
- type 显示的类型：A a I i 1(deafult)
- ul 无序列表（unorder list）
- type disc(default) , circle , square
- ol 有序列表（order list）
- 文字特效：
- u 下划线 （underLined）
- b 粗体 （bold）
- i 斜体 （italic）
- 上下标：
- 上标 sup
- 下标 sub
- 特殊符号（实体）：数字符号，查表：HTML字符实体，不用背
- 小于号 <
- 大于等于号 ≥
- 版权 ©
- a 表示超链接
- href 链接的地址（hypetest reference）
- target:
- _self 在本窗口打开
- _blank 在一个新窗口打开
- _parent 在父窗口打开
- _top 在顶层窗口打开
- div 层
举例
<html>
<head>
<title>这是我的第一个网页</title>
<meta charset="UTF-8">
</head>
<body>
HELLO WORLD!<br/>你好，HTML！
<p>这里是一个段落</p>
<p>这里是第二个段落</p>
<img src="D:\sgg2021\0927_javaweb\1109\02.代码\imgs\girl.jpg" width="57" height="73" alt="这里是一张图片"/>
<h1>标题一</h1>
<h2>标题一</h2>
<h3>标题一</h3>
武林高手排行榜:
<ol type="i" start="3">
<li>扫地僧</li>
<li>萧远山</li>
<li>慕容博</li>
</ol>
武林大会人员名单：
<ul type="circle">
<li>乔峰</li>
<li>阿朱</li>
<li>马夫人</li>
</ul>
你是<b><i><u>喜欢</u></i></b>是<b>甜</b>月饼还是<i>咸</i><u>月饼</u>？
<br/>
水分子的化学式： H<sub>2</sub>O <br/>
氧气的化学式： O<sup>2</sup><br/>
5<10
10>5
5≤10
10≥5
注册商标 ®
版权符号 ©
<span>赵又廷</span>，夺妻之仇。
<a href="http://www.baidu.com" target="_self">百度一下</a><br/>
<ol type="a">
<li>大海</li>
<li>蓝天</li>
<li>河流</li>
</ol>
</body>
</html>
3.表格
语法
- 表格 table
- 表头列 th
- 行 tr （table row）
- 列 td（table data cell）
table中有如下属性（虽然已经淘汰，但是最好了解一下）
- border：表格边框的粗细
- width:表格的宽度
- cellspacing：单元格间距
- cellpadding：单元格填充
tr中有一个属性
- align -> center , left , right
td中属性
- rowspan : 行合并
- colspan : 列合并
举例
<html>
<head>
<title>表格标签的学习</title>
<meta charset="UTF-8">
</head>
<body>
<table border="1" width="600" cellspacing="0" cellpadding="4">
<tr align="center">
<th>姓名</th>
<th>门派</th>
<th>成名绝技</th>
<th>内功值</th>
</tr>
<tr align="center">
<td>乔峰</td>
<td>丐帮</td>
<td>少林长拳</td>
<td>5000</td>
</tr>
<tr align="center">
<td>虚竹</td>
<td>灵鹫宫</td>
<td>北冥神功</td>
<td>15000</td>
</tr>
<tr align="center">
<td>扫地僧</td>
<td>少林寺</td>
<td>七十二绝技</td>
<td>未知</td>
</tr>
</table>
<hr/>
<table border="1" cellspacing="0" cellpadding="4" width="600">
<tr>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr align="center">
<td>苹果</td>
<td rowspan="2">5</td>
<td>20</td>
<td>100</td>
<td><img src="imgs/del.jpg" width="24" height="24"/></td>
</tr>
<tr align="center">
<td>菠萝</td>
<td>15</td>
<td>45</td>
<td><img src="imgs/del.jpg" width="24" height="24"/></td>
</tr>
<tr align="center">
<td>西瓜</td>
<td>6</td>
<td>6</td>
<td>36</td>
<td><img src="imgs/del.jpg" width="24" height="24"/></td>
</tr>
<tr align="center">
<td>总计</td>
<td colspan="4">181</td>
</tr>
</table>
</body>
</html>
4.表单
在浏览器中，有很多需要用户填写的信息通过http传送给服务器保存，例如登入、注册等操作，这些信息表称为表单。
语法
- 表单 form
- input type=“text” 表示文本框，
- name属性必须要指定，否则这个文本框的数据将来是不会发送给服务器的
- value 默认值
- input type=“password” 表示密码框
- input type=“radio” 表示单选按钮。
- 需要注意的是，name属性值保持一致，这样才会有互斥的效果;
- checked属性设置默认选中的项
- input type="checkbox"表示复选框。
- name属性值建议保持一致，这样将来我们服务器端获取值的时候获取的是一个数组
- select 表示下拉列表。
- 每一个选项是option，
- value属性是发送给服务器的值
- selected表示默认选中的项
- textarea 表示多行文本框（或者称之为文本域）,它的value值就是开始结束标签之间的内容
- input type=“submit” 表示提交按钮
- input type=“reset” 表示重置按钮
- input type=“button” 表示普通按钮
举例
<html>
<head>
<title>表单标签的学习</title>
<meta charset="UTF-8">
</head>
<body>
<form action="demo04.html" method="post">
昵称：<input type="text" value="请输入你的昵称"/><br/>
密码：<input type="password" name="pwd"/><br/>
性别：<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female" checked/>女<br/>
爱好：<input type="checkbox" name="hobby" value="basketball"/>篮球
<input type="checkbox" name="hobby" value="football" checked/>足球
<input type="checkbox" name="hobby" value="earth" checked/>地球<br/>
星座：<select name="star">
<option value="1">白羊座</option>
<option value="2" selected>金牛座</option>
<option value="3">双子座</option>
<option value="4">天蝎座</option>
<option value="5">天秤座</option>
</select><br/>
备注：<textarea name="remark" rows="4" cols="50"></textarea><br/>
<input type="submit" value=" 注 册 "/>
<input type="reset" value="重置"/>
<input type="button" value="这是一个普通按钮"/>
</form>
</body>
</html>
在点注册时，由于是submit提交，所以会通过么中的方法中“post”方法请求demo04.html资源，真实场景一般发送给服务器。通过网络协议，可以查看到提交的表单。
5. 页面框架&页面嵌入
- 通过页面框架，可将页面进行划分
- 页面嵌入可嵌入子页面
语法
frameset 表示页面框架 ， 这个标签已经淘汰，了解，不需要掌握
frame表示框架中的具体页面引用
iframe 在一个页面嵌入一个子页面
举例
<html>
<head></head>
<frameset rows="20%,*" > <!-- frameborder="no" -->
<frame src="frames/top.html"/>
<frameset cols="15%,*">
<frame src="frames/left.html"/>
<frameset rows="80%,*">
<frame src="frames/main.html"/>
<frame src="frames/bottom.html"/>
</frameset>
</frameset>
</frameset>
</html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
这里是demo06页面的内容！！
<iframe src="frames/top.html"/>
</body>
</html>
