说明:
本篇文章总结的是最近学习到的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>
运行结果