HTML概述
html全称：超文本标记语言
html作用：用来制作网页的，包括图片、文本、超链接等
浏览器F12打开开发者模式
HTML基础语法
```html
<!DOCTYPE html><!-- 声明当前是一个html文件 -->
<html lang="en"> <!-- 根标签 lang(language) 页面的语言-->
<!-- 头部 ：
一般不在页面上显示
-->
<head>
<!-- 声明当前html页面的编码格式 -->
<meta charset="UTF-8">
<!-- 标题：显示在浏览器的标签页上 -->
<title>Title</title>
</head>
<!-- 身体：此处的内容都是显示在浏览器的窗体中的 -->
<body>
<!--
标签的书写语法：
双标签： <标签名 属性名=属性值></标签名>
单标签 <标签名 属性名=属性值 />
-->
<a href="http://www.baidu.com">百度</a>
</body>
</html>
```
HTML常用标签
| 标签 | 作用 |
|---|---|
<h1>-<h6> | 标题标签 |
<hr> | 水平线标签 |
<font> | 修饰文本的字体、颜色、大小等等 |
<i> | 修饰文本的字体是倾斜的 |
<b> | 修饰文本的字体加粗 |
&实体名称; | 特殊字符 |
<a> | 超链接标签 |
<img> | 图片标签 |
<ul>、<ol> | 列表标签 |
<div> | 容器标签，一般div+css用于布局的 |
<span> | 容器标签，一般span+css修饰文本的，替代标签的 |
<table> | 表格标签 |
标题标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
h1 - h6 ：标题标签
align: 标题的水平对齐方式
left:靠左
center:居中
right：靠右
-->
<h1 align="left">一级标题</h1>
<h2 align="center">二级标题</h2>
<h3 align="right">三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
水平线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>公司简介</h1>
<!--
hr: 水平线
size: 水平线的粗细，单位px(像素)
width: 宽度，可以是具体数值（单位px），或者是百分比
color:颜色，值可以是
1.颜色对应的单词，red..
2.颜色16进制的值 #FF00FF
-->
<hr size="5px" width="80%" color="red" >
</body>
</html>
文本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>公司简介</h1>
<hr size="5px" width="80%" color="red" >
<!--
font : 修饰文本的
color: 颜色
size:文本的大小，取值1-7
face:文本的字体，楷体，宋体等等
i: 斜体
b: 加粗
-->
<font color="red" size="5" face="楷体">“测试测试测试测试”</font>
1测试2<i><b>3测试测试4</b></i>
测试测试111<br>测试测试测试测试
</body>
</html>
段落和换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
p标签： 段落标签
br标签： 换行
-->
<p>
<font color="red" size="5" face="楷体">“测试测试测试测试”</font>1测试2<i><b>3测试测试4</b></i>
</p>
</body>
</html>
字符实体
对于html中一些特殊字符，无法直接通过输入法录入。此时需要字符实体。
超链接标签
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>04-超链接</title>
</head>
<body>
<!--
a标签: anchor 锚 (超链接标签)
1.作为超链接标签
href: 访问资源的地址
a.当前项目内资源，直接相对路径访问即可
b.网络资源，必须加上http协议，http://www.baidu.com
target: 打开资源的方式
_self: 当前窗口打开资源
_blank:新开一个窗口打开资源
2.作为锚点（类似书签的作用）
第一步：<a name=锚点名> 来定义锚点
第二步： <a href="#锚点名"> 设置点击跳转
3.扩展：当成按钮来使用
， <a href="javascript:void(0)" οnclick='alert('弹框')'>点我</a>
href="javascript:void(0)" 固定写法，
οnclick=事件，js时会讲
-->
<a name="top">
页面最上方
</a> <br>
<!-- 1.超链接 -->
<a href="http://www.baidu.com">百度一下,你就知道</a> <br>
<a href="./01_basic.html" target="_self">访问01页面</a> <br>
<a href="./01_basic.html" target="_blank">访问01页面</a> <br>
<!-- 3.按钮 -->
<a href="javascript:void(0)" onclick='alert('弹框')'>点我</a>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<!-- 2.锚点 -->
<a href="#top">回到最上方</a>
</body>
</html>
总结：
1.作为超链接访问网络资源时，必须要加上http协议
2.访问当前页面内资源的时候，需要加上#
3.扩展,当成按钮来使用 ，<a href='javascript:void(0)'></a>
图像标签
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>05-图像</title>
</head>
<body>
<!--
img : image 图像
1. 必要属性 src (source 源)
a. 图片放在static web下的img文件夹
b. 设置两种
1). 本地图片
2). 远程图片
2. width: 宽度
3. height: 高度
只要设置单边, 另一边也会等比例缩放
所以一般宽高不会同时设置, 同时设置不好看
4. alt : 如果图片加载失败,出现的提示
(网络图片被删除)
5. title: 鼠标移上去出现的提示
-->
<img src="img/a.jpg" alt="">
<img src="img/a.jpg" alt="" width="160px">
<img src="img/a.jpg" alt="" height="320px">
<img src="img/a.jpg" alt="a图片加载失败" title="点击查看主页">
<img src="img/b.jpg" alt="b图片加载失败" >
<!--<img src="../img/a.jpg" alt="" height="480px" width="160px">-->
<hr>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590041812129&di=ef864577ea0bee96a549bab4a3fdec76&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn16%2F740%2Fw1440h900%2F20180416%2Fc681-fzcyxmv4458667.jpg" alt="">
</body>
</html>
小结：
1.img标签用来引入图片
2.src是图片的地址，可以是当前项目资源，也可以是互联网图片资源
列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
ol(orderly list): 有序号的列表
li:声明列表项
type:属性，声明序号的格式： 1，A, I
ul(unorderly list): 无序号的列表
li:声明列表项
type:属性，声明序号的格式： disc, square,circle
-->
西红柿炒鸡蛋
<ol type="I">
<li>打蛋</li>
<li>放葱花和料酒</li>
<li>切西红柿</li>
<li>放油烧热</li>
<li>炒蛋</li>
<li>炒西红柿</li>
</ol>
<ul type="square">
<li>打蛋</li>
<li>放葱花和料酒</li>
<li>切西红柿</li>
<li>放油烧热</li>
<li>炒蛋</li>
<li>炒西红柿</li>
</ul>
</body>
</html>
div和span标签
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>07-容器标签</title>
<style>
div,span{
background-color: red;
}
</style>
</head>
<body>
<!--
<div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的
1. div标签和span标签没有特殊效果
2. div标签包裹的内容会自动换行
3. span标签包裹的内容不会自动换行
-->
<div>div1</div>
<div>div2</div>
<span>span1</span>
<span>span2</span>
</body>
</html>
基本表格
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>09-基本表格</title>
</head>
<body>
<!--
嵌套标签:
1. table 表格标签
2. tr 标签 table row 行
3. td 标签 table data 数据
描述: 一个表格,有几行,每行有几个数据(单元格)
属性:
1. table标签属性
a. border : 边框
b. cellspacing : 单元格之间的距离
c. cellpadding: 边框和内容之间的距离
d. width: 宽度
e. align : 排列(left right center) 整个表格居中
f. bgcolor : 背景色 background
补充: 如果多个属性之间存在冲突情况,浏览器是有优先级
(规律: 先左后右,先上后下, 网页坐标原点: 左上角)
2. tr 标签属性
a. align 对整行的内容起作用
b. bgcolor
3. td 标签属性
a. align 对当前 单元格内容起作用
b. bgcolor
c. height 高度 (设置一个单元格,整行都生效)
-->
<table border="1px" cellspacing="0px" cellpadding="10px" width="500px" align="center" >
<tr align="center" >
<td>姓名</td>
<td>年龄</td>
<td>身高</td>
<td>体重</td>
</tr>
<tr>
<td align="center" bgcolor="#ffc0cb" height="50px">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
小结：
合并表格
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>10-表格合并</title>
</head>
<body>
<!--
跨行 和 跨列(td标签的属性)
a. rowspan : 跨行
b. colspan : 跨列(column)
一个4行4列的表格
需求1:
第一行第一列
和 第二行第一列 的单元格进行合并?
思路:
1. 首先完成4行4列的表格 table>tr*4>td*4 最后tab
2. 判断跨行还是跨列(从左至右,从上至下)
a. 让一个单元格占多个位置(膨胀)
b. 同行跨列, 同列跨行
3. 删除多余单元格
-->
<table border="1px" cellspacing="0px" cellpadding="10px">
<tr align="center">
<td rowspan="2">11</td>
<td>12</td>
<td colspan="2">13</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
</tr>
</table>
</body>
</html>
HTML表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
form： 表单：所有的表单项都需要放到<form>标签中
input:
type="text" : 文本框，用户输入可见的内容
type="password": 密码框，用户录入不可见内容
type="radio": 单选按钮，用户只能选择一个。通过name分组，同一组radio实现单选
checked设置默认选中
type="checkbox": 复选框,用户可以选择多个
type="file" : 文件上传组件
type="date" : 日期组件
type="reset": 重置按钮，重置表单内容
type="submit": 提交表单
type="button": 普通按钮，结合js才能有功能
textarea: 文本域，用来输入一段内容
select: 下拉列表,
<option>声明列表项 ,selected默认选中
-->
<form>
<table width="400px">
<tr>
<td>用户名:</td>
<td><input type="text"></td>
</tr>
<tr>
<td>用户名:</td>
<td><input type="password"></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" name="sex" checked> 男 <input name="sex" type="radio"> 女</td>
</tr>
<tr>
<td>爱好:</td>
<td><input type="checkbox"> 吃饭 <input type="checkbox"> 烫头 <input type="checkbox" checked> 写代码 </td>
</tr>
<tr>
<td>学历:</td>
<td>
<select>
<option>--请选择--</option>
<option>小学</option>
<option>初中</option>
<option>高中</option>
<option selected>专科</option>
<option>本科</option>
</select>
</td>
</tr>
<tr>
<td>头像:</td>
<td><input type="file"></td>
</tr>
<tr>
<td>出生年月:</td>
<td><input type="date"></td>
</tr>
<tr>
<td>自我介绍:</td>
<td><textarea role="10" cols="40"></textarea> </td>
</tr>
<tr>
<td>隐藏域</td>
<td><input type="hidden"></td>
</tr>
<tr>
<td colspan="2">
<input type="reset">
<input type="submit">
<input type="button" value="普通按钮">
</td>
</tr>
<tr>
<td>银行卡</td>
<td>
<input name="bank" type="radio"> 建设银行
<input name="bank" type="radio"> 交通银行
</td>
</tr>
</table>
</form>
</body>
</html>
小结：
input:
type="text" 文本框,用户输入可见内容
type="password" 密码框,用户输入不可见内容
type="radio" 单选按钮,通过name属性分组,然后才能实现单选
type="checkbox" 多选框,用户可以选择多个
checked属性,可以设置单选框和多选框的默认选中状态
type="file" 文件上传
type="date" 出生年月
type="reset" 重置按钮
type="button" 这仅仅是一个按钮
type="submit" 提交表单,提交到form标签的action属性的位置
<select> 下拉列表
<option> 标签声明下拉列表的列表项
selected可以设置默认选中的下拉选项
<textarea> 文本域,输入一段内容
表单细节
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
表单提交数据的细节：
action: 提交的地址信息(后台服务器的地址)
method: 表单提交的方式
get:(默认的)
1.表单提交的数据以？拼接的格式显示在浏览器的地址栏中
url?key=value&key=value
2.提交的数据有长度的限制。
post:
1.提交的数据不会再地址栏的后面显示
2.提交的数据没有长度的限制。（文件上传）
PS: 我们所学习的任何提交方式只要没有指定post，都是get
1.表单标签必须要添加name属性，表单才能将数据提交给服务器。要不然不会提交。
name属性：用来标识表单提交的值是什么（用户名，密码）
2.如果是用户选择的标签，例如：单选按钮，复选框，下拉列表
必须给标签添加value属性：value就是提交给服务器的值
3.浏览器的表单提交数据给服务器的格式：
标签的name的属性值 = 标签提交的值&标签的name的属性值 = 标签提交的值
4.对于下拉列表来说，提交给服务器的值是 选中的option的value值
-->
<form action="http://localhost:8080" method="get">
<table width="400px">
<tr>
<td>用户名:</td>
<td><input name="username" value="zhangsan" type="text"></td>
</tr>
<tr>
<td>用户名:</td>
<td><input name="password" type="password"></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" name="sex" value="male" checked> 男 <input value="female" name="sex" type="radio"> 女</td>
</tr>
<tr>
<td>爱好:</td>
<td><input name="hobby" value="eat" type="checkbox"> 吃饭
<input name="hobby" value="tangtou" type="checkbox"> 烫头
<input name="hobby" value="coding" type="checkbox" checked> 写代码 </td>
</tr>
<tr>
<td>学历:</td>
<td>
<select name="education">
<option value="">--请选择--</option>
<option value="xiaoxue">小学</option>
<option value="chuzhong">初中</option>
<option value="middleSchool">高中</option>
<option value="zhuanke" selected>专科</option>
<option value="benke">本科</option>
</select>
</td>
</tr>
<tr>
<td>头像:</td>
<td><input name="img" type="file"></td>
</tr>
<tr>
<td>出生年月:</td>
<td><input name="birthday" type="date"></td>
</tr>
<tr>
<td>自我介绍:</td>
<td><textarea role="10" cols="40"></textarea> </td>
</tr>
<tr>
<td>隐藏域</td>
<td><input type="hidden"></td>
</tr>
<tr>
<td colspan="2">
<input type="reset">
<input type="submit">
<input type="button" value="普通按钮">
</td>
</tr>
<tr>
<td>银行卡</td>
<td>
<input name="bank" type="radio"> 建设银行
<input name="bank" type="radio"> 交通银行
</td>
</tr>
</table>
</form>
</body>
</html>
小结：
1.表单控件需要放在<form>标签中
2.<form>标签的action属性是表单数据提交的服务器地址
3.<form>标签的method设置数据提交的方式
get:限制提交数据的长度。并且数据以key=value&key=value的格式跟在地址的后面
post:不限制数据提交的长度，数据还是以key=value&key=value的格式提交，但是不显示在浏览器地址栏中
4.所有的标签必须要添加name属性，数据才能被提交
5.用户选择的标签，例如radio，必须要填写value属性，要不然没有数据提交给服务器
6.select下拉列表，提交给服务器的数据是选中的<option>的value值
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
