说明：
本篇文章总结的是最近学习到的HTML的内容（最近开始跟着老杜的课学习），总结的都是常用的知识点，对后端开发人员的初学者来说需要掌握的基础知识。
HTML总结目录
HTML的使用目录
1、HTML框架
图画形式展现如下：
2、表格的创建
使用的标签
| 标签名称 | 说明 |
|---|---|
| table | 表格的创建标签 |
| h1 | 一级标题 |
| border | 边框像素 |
| width | 宽度 |
| hight | 高度 |
| align | 可以标记居中显示 |
| tr | 表示一行 |
| td | 表示一列 |
| br | 换行 |
| hr | 加一条横线 |
创建表单样例
<!DOCTYPE HTML>
<html>
<head>
<title>表单的创建</title>
<meta charset="UTF-8">
</head>
<body>
<!--border="1px":设置表格的边框为1像素
width:宽度
height:高度
align:居中显示
hr：加一条横线
-->
<h1 align="center">员工信息列表</h1>
<hr>
<table border="1px" width="60%" hight="150px" align="center">
<tr align="center">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
</table>
</body>
</html>
显示结果
3、单元格的合并
使用的标签
| 标签名称 | 说明 |
|---|---|
| th | 表示的表头 |
| colspan | 单元格的行合并 |
| rowspan | 单元格的列合并 |
需要注意使用行和并colspan时，随便保留一行即可，在使用列合并的必须在第一列上完成合并
<!Doctype html>
<html>
<head>
<title>单元格的合并</title>
<meta charset="utf-8" />
</head>
<body>
<table border="1px" width="50%">
<tr>
<!--th标签也是单元格标签，多的是加粗加居中-->
<th>员工编号</th>
<th>员工薪资</th>
<th>部门名称</th>
</tr>
<tr>
<td>1</td>
<!--<td colspan="2">2</td>-->
<!--实现单元格的行合并-->
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<!--实现单元格的列合并-->
<td rowspan="2">c</td>
</tr>
<tr>
<td>x</td>
<td>y</td>
</tr>
</table>
</body>
</html>
展示结果
4、背景颜色和背景图片
使用的标签
| 标签名称 | 说明 |
|---|---|
| src | 表示的文件的路径 |
| alt | 文件找不到货不存在时显示内容 |
使用样例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>背景颜色和背景图片</title>
</head>
<!--背景图片贴在整个的网页上，图片是放在一个格子里-->
<!--<body BGCOLOR="red" BACKGROUND="Img/张杰.png">-->
<body>
<img src="../Img/张杰.png" width="800px" alt="图片找不到">
<!--换行-->
<br><br>
</body>
</html>
5、超链接和列表
使用的标签
| 标签名称 | 说明 |
|---|---|
| a | 超链接的使用标签 |
| ul | 无序列表标签 |
| ol | 有序列表 |
| href | 超链接的路径 |
使用样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--有序列表-->
<ol type="a">
<li>水果
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>梨</li>
</ol>
</li>
<li>蔬菜</li>
<li>甜品</li>
</ol>
<!--无序列表-->
<ul>
<li>中国
<ul>
<li>北京
<ul>
<li>海淀区</li>
<li>朝阳区</li>
</ul>
</li>
<li>上海</li>
<li>杭州</li>
</ul>
</li>
<li>美国</li>
<li>日本</li>
</ul>
</body>
</html>
<a href="https://www.baidu.com" target="_blank">百度</a>
<a href="https://www.126.com" target="_blank">网易</a>
6、表单的使用【重点内容】
说明
①表单的作用？
收集用户信息。表单展现之后，用户填写表单，点击提交按钮，提交数据给服务器
②使用form画表单
③一个网页可以存在多个表单
④表单最终是需要提交数据给服务器的,form标签有一个属性action属性，这个属性用来指定服务器的地址，
action属性用来说明数据提交给那个服务器
action属性和img标签中的href一样都可以向服务器发送请求。
⑤http://192.168.32.182:8080/oa/save表示的是请求的路径
使用的标签
| 标签名称 | 说明 |
|---|---|
| action | 表单需要提交的服务器 |
| input | 表示输入 |
| type | input的属性，表示输入的数据类型 |
| name | 标识当前的标签（拥有name属性的才会提交数据给服务器） |
| value | input标签的属性，当前是选择类型时需要指明数据 |
| select | 表示一个选择列表 |
| textarea | 表示文本域可以指明宽度和高度 |
使用样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册表单</title>
</head>
<body>
<!--method：采用post方式提交的时候，用户提交的信息不会显示在浏览器地址栏中
采用get方式提交的时候，用户提交的信息不会显示在浏览器的地址栏中-->
<form action="http://localhost:8080" method="post">
用 户 名：
<input type="text" name="username" />
<br>
密 码：
<input type="password" name="userpwd">
<br>
确认密码：
<input type="password" >
<br>
性 别：<!--在radio中使用相同的name表示只能选一个-->
<!--在单选按钮中必须设置value提交给服务器-->
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<br>
兴趣爱好：
<input type="checkbox" name="interest" value="eat">吃饭
<input type="checkbox" name="interest" value="sleep" checked>睡觉
<input type="checkbox" name="interest" value="play">打豆豆
<br>
学历：
<!--select是支持多选的-->
<select name="grade" multiple="multiple" size="2">
<!--默认选项使用的是selected-->
<option value="High school">高中</option>
<option value="college">大专</option>
<option value="Undergraduate course" selected>本科</option>
<option value="A master's degree" >硕士</option>
<option value="Dr.">博士</option>
</select>
<br>
简介：<!--textarea文本域--没有value属性--><br>
<textarea rows="10" cols="60" name="introduce"></textarea>
<br>
<input type="submit" value="提交">
<input type="reset" value="清空">
<!--提交的数据username=abc&userpwd=123&sex=1&interest=eat&interest=sleep&grade=Dr.&introduce=我是博士生-->
</form>
<!--超链接也可以提交数据，不过超链接提交的数据是不可变的，表单提交的数据是活的-->
<a href="http://localhost:8080/oa/save?username=root&userpwd=111">提交</a>
</body>
</html>
7、file控件和隐藏域
file控件
<input type="file">
隐藏域：
网页上看不到，但是会提交给服务器
使用样例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hidden隐藏域</title>
</head>
<body>
<form action="http://localhost:8080/oa/save">
<!--网页上看不到，但是会提交给服务器-->
<input type="hidden" name="userid" value="123">
用户代码<input type="text" name="userCode">
<br>
<input type="submit" value="提交">
</form>
</body>
</html>
8、readonly和disable…
属性描述
| readonly | disable | |
|---|---|---|
| 相同点 | 只读不可以修改 | 只读不可以修改 |
| 不同点 | 可以提交给服务器 | 不可以提交给服务器 |
使用样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>readonly和disable的使用</title>
</head>
<body>
<form>
<!--readonly和disable的相同点：都是只读不可以修改
不同点：readonly可以提交给服务器，但是disable不可以提交给服务器-->
用户代码:<input type="text" name="userCode" value="study" readonly>
用户姓名:<input type="text" name="username" value="张三" disabled>
<input type="submit" value="提交">
</form>
</body>
</html>
属性描述
| 名称 | 说明 |
|---|---|
| maxlength | 限制输入的字符个数 |
9、id属性
属性描述：
①在HTML文档中，任何元素都有id属性，id是该节点的唯一标识，所以在一个HTML文档中id不能重复
②表单提交的时候只和name有关和id无关
③id的作用：
JavaScript语言，可以对HTML文档中的任意节点进行增删改操作 ，但是在做增删改之前，需要先拿到这个节点，通常我们就是通过id来拿到这个节点对象。id的存在就是方便我们拿到节点
<form id="myform">
<input type="text" id="username" name="username">
<input type="password" id="passwpwd" name="passpwd">
</form>
10、div和span标签
理解描述
①div和span的作用
div和span都可以称为图层.，图层的作用就是为了保证页面布局的灵活性， 图层就是一个一个的盒子，div嵌套div就是盒子套盒子。 div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。
②过去使用的是table标签，灵活性差
③div和span的区别？
div单独占一行（默认情况下），span不会独自占用一行
div可以嵌套div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div和span标签</title>
</head>
<body>
<div id="div1">div标签1</div>
<div id="div2">div标签2</div>
<span id="myspan1">span标签1</span>
<span id="myspan2">span标签2</span>
</body>
</html>
运行结果
581
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
