HTML
# java学科的学习阶段1. javase1). standard edition : 标准版 (java基础语法)2). enterprice edition : 企业版 (企业级应用)3). micro edtion : 微型版2. javaweb (website : 网站)目的: 做一个简易的网站3. 框架SSM框架: javase + javaweb 整合4. 项目
# web阶段 : 做网站
1. 数据库(重点)
2. 前端
1). 网页
2). 开发模式: 前后端分离
3. 后端(重点)
# 前端
0. 网页 : 跟用户打交道
1. 基础
a. html : 网页结构
b. css : 美化网页
c. javascript : 交互效果
2. 高级
a. ajax + json
b. vue
c. elementUI
d. vue脚手架
# 开发环境
1. 开发工具 : HBuilder(改自eclipse),DreamWeaver,VScode
IDEA /VScode
2. 运行环境
浏览器(chrome : google浏览器)
# 今日目标
1. 会使用页面中的文字,超链接,图片,列表,特殊符号
2. 会使用表格完成页面布局
3. 掌握HTML表单控件
一 HTML概述
超文本标记语言（HyperText Markup Language）
作用：搭建基础网页
超文本：超出文本的范畴, 不仅具有普通文本的特性，同时还可以加入图片、视频、超链接等等。
标记：即标签，定义好的标签有不同的功能和效果；例如：
语言：人与计算机沟通桥梁
HTML 的语法规范是 由 W3C(World Wide Web Consortium 万维网联盟) 制定的。
html : HyperText Markup Language
XML: extensible markup language 可扩展的标记语言
不同:
html 的作用是显示数据, 标签名是有固定含义的, 不同的标签会有不同的效果 xml 的作用是存储和传输数据的, 标签名没有固定含义, 可以自定义
二 HTML基础【掌握】
2.1 快速入门
从今天开始，需要创建一个新的工作空间（空工程）
创建前端 static web/web/ js（模块）
标准前端工程结构
|-- 项目名
|- css 目录
|- js 目录
|- img 目录
index.html
<!DOCTYPE html>
<!--文档声明 document type html5.0(固定)-->
<html lang="en"> <!--根标签: html, language: (language 语言: en 英语/ zh-CN 简体中文) -->
<head> <!-- 头标签 : 元信息,对网页的描述 -->
<meta charset="UTF-8"> <!-- 编码 : 固定utf8 -->
<title>百度一下,我就知道</title> <!-- 网页标题 -->
</head>
<body> <!--主体标签-->
hello world
</body>
</html>
IDEA找不到浏览器
2.2 书写规范
1. 文档声明
要求：必须在第一行，固定格式
2. 标签
1). 要求：正确嵌套，正确闭合
2). 双标签
<开始></结束> start tag/end tag 开标签/闭标签
3). 单标签
<开始,自关闭/>
4). 补充: 元素(element) 从开标签到闭标签之间的所有内容
3. 属性
要求：必须在开始标签(单标签)中编写，属性值单双引都可
<开始 属性名="属性值"></结束>
4. 文本
要求：在标签体内编写
5. 注释
<!-- 注释内容 快捷键: ctrl+shift+/ -->
6. html和xml语法区别
1). xml语法要求很严格,基本上错一点都不行
2). hmtm语法要求没那么严格, 浏览器会自动纠错
三 HTML常用标签【记忆】
3.1 标签语义
学习标签是有技巧的，重点记住标签的语义，简单的理解为：这个标签能干啥
3.2 标题标签
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>01-标题</title>
</head>
<body>
<!--
TODO 标题标签
hn: headline number (标题)
1). h1 : 一级标题
2). n的取值 : 1-6,大到小
hr : horizontal 水平线
-->
<h1>悯农1</h1>
<h2>悯农2</h2>
<h3>悯农3</h3>
<h4>悯农4</h4>
<h5>悯农5</h5>
<h6>悯农6</h6>
春种一粒粟,秋收万颗子.
</body>
</html>
3.3 水平线标签
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>02-水平线</title>
</head>
<body>
<!--
# hr标签: 水平线(horizontal)
# html标签的属性
1). html的属性比较复杂, 不同标签的相同属性可能作用不同
不同标签的属性可能都不一样
2). html的属性用的少,会被css所替代
# 以hr为例,常见的属性
1. color : 颜色
1). 第一种: 颜色单词
2). 第二种: RGB写法 (更精准)
I. 光三原色: red green blue
II. 每个原色取值: 0-255 (16进制: 00-FF)
III. 语法:
完整 #ff0000
省略 #f00 (相邻两位一样,可以简写成一个)
2. size : 大小,尺寸
1). px : pixel 像素
3). width : 宽度
1). 第一种: 固定
300px
2). 第二种: 百分比
50% 表示占满当前网页的比例
4). align : 排列
left center right
左对齐 居中 右对齐
-->
<h1>悯农</h1>
春种一粒粟,秋收万颗子.
<hr>
<hr color="olive" size="100px" width="300px" align="left">
<hr color="#ff0000" size="50px" width="50%" align="center">
<hr color="#ffff00" size="50px" width="300px" align="right">
<hr color="#FF83FA">
<hr color="#3CABEB">
<hr color="#0f0">
<h1>静夜思</h1>
床前明月光,疑是地上霜.
<!-- <font size="7">字体</font>
<hr size="30px" color="black">
<span style="font-size: 100px">字体</span>-->
</body>
</html>
3.4 段落和换行标签
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>03-段落和换行</title>
<style>
p{
text-indent: 2em;
}
</style>
</head>
<body>
<!--
TODO:
br : break line 换行
p : paragraph 段落
1. 常识: 不同系统或不同软件识别的符号不一样
1). windows换行符: /r/n
2). 浏览器换行符 : br标签
2. 换行和分段的区别
1). br是单标签,p是双标签
2). 行间距不如段间距大
3. 补充: 每段的开头缩进两个字符
1). 实体字符:
2). css写法
-->
<p>
传智专修学院是一所为互联网、人工智能、工业4.0培养高精尖科技人才的应用型大学。<br>
学校经江苏省宿迁市教育局批准，由江苏传智播客教育科技股份有限公司投资创办。
</p>
<p>
当今世界已进入人工智能、机器人时代，人工智能、机器人已成为未来30年、甚至50年科技革命最重要的发展方向。世界各国越来越重视，我国政府也高度关注人工智能的发展，无论是党的十八大、十九大，还是2017、2018、2019的政府工作报告，均提出要重点发展人工智能、机器人，并提升到国家战略层面。
</p>
<p>
技术发展首要是人才，而我国这方面人才非常紧缺。根据国家相关部门测算，目前我国人工智能人才的缺口就已经超过了500万，国内的供求比例仅为1:10，供需比例严重失衡。并且随着社会信息革命的进一步深入，相应人才的缺口会越来越大。但在这些新技术面前，目前我国关于这方面人才的规模化培养，无论是高校还是科研机构，均没有成熟的培养体系和方案，都还处于摸索阶段。
</p>
</body>
</html>
3.5 超链接标签
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>04-超链接</title>
</head>
<body>
<!--
TODO: a (anchor 抛锚) 超链接标签
1. 必要属性 href (hypertext reference 超链接)
1). 远程地址: 网址 url
http://www.baidu.com
2). 本地地址:
./ 表示当前路径 (省略)
../ 表示上一级路径
3). 补充: 锚点
I. 先给一个标签设置一个标识
<h1 id="top">网页: 超链接</h1>
II. 锚点跳转 -> #标识
<a href="#top">回到网页头部</a>
2. target
1). _self : 在当前页面打开网址(默认)
2). _blank : 在新页面打开网址
-->
百度一下,你就知道 <br>
<h1 id="top">网页: 超链接</h1>
<a href="http://www.baidu.com" >百度一下,你就知道_当前页面打开</a> <br>
<a href="http://www.baidu.com" target="_self" >百度一下,你就知道_当前页面打开</a> <br>
<a href="http://www.baidu.com" target="_blank">百度一下,你就知道_新页面打开</a> <br>
<a href="01-标题.html">本地资源_标题页面</a> <br>
<a href="../index.html">本地资源_index页面</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> <br><br> <br><br> <br><br>
<a href="#top">回到网页头部</a>
</body>
</html>
3.6 图像标签
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>05-图像</title>
</head>
<body>
<!--
TODO img : image 图像
1. 必要属性 src (source 源)
a. 图片放在img文件夹
b. 设置两种
1). 本地图片 a.jpg (320*480)
2). 远程图片 (联网)
2. width: 宽度
3. height: 高度
只要设置单边, 另一边也会等比例缩放
所以一般宽高不会同时设置, 同时设置不好看
4. alt : 如果图片加载失败,出现的提示
(用户的网络不好/ 网络图片被删除)
5. title: 鼠标移上去出现的提示
-->
<img src="../img/a.jpg" alt="图片加载失败" title="这是我前女友"> <br>
<img src="b.jpg" alt="图片加载失败"> <br>
<img src="../img/a.jpg" width="160px"> <br>
<img src="../img/a.jpg" height="240px"> <br>
<img src="../img/a.jpg" width="320px" height="240px"> <br>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqqpublic.qpic.cn%2Fqq_public%2F0%2F0-2478353350-99B4B99AF675FB95ECB407376ACDE754%2F0%3Ffmt%3Djpg%26amp%3Bsize%3D319%26amp%3Bh%3D1350%26amp%3Bw%3D900%26amp%3Bppv%3D1&refer=http%3A%2F%2Fqqpublic.qpic.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651548183&t=d55bef82d0250eeaea7b0a208653fd3f" >
</body>
</html>
3.7 列表标签
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>06-列表</title>
</head>
<body>
<!--
1. 有序列表
父标签: ol (ordered list)
type=1, I, a (序号)
数字,罗马识字,字母
子标签: li (list) 列表项
2. 无序列表
父标签: ul (unordered list)
type=disc,circle,square
实心圆点, 空心圆, 方形
子标签: li (list) 列表项
快捷方式:
1. ul>li*3 tab自动补全
父标签>子标签*n
2. ctrl + alt + l : 代码格式化,好看
-->
<h1>冬奥会奖牌榜</h1>
<ol type="I">
<li>俄罗斯</li>
<li>美国</li>
<li>中国</li>
</ol>
<h1>电器区</h1>
<ul type="square">
<li>美的</li>
<li>苏泊尔</li>
<li>核心科技</li>
</ul>
</body>
</html>
3.8 div和span标签
- 没有语义的，他们就是一个盒子，用来装内容
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>07-容器标签</title>
</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>
3.9 转义（实体）字符
重要! 半个英语字母英文空格 一个汉字中文空格 小于号 < 大于号 > &符号 &
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>08-实体字符</title>
</head>
<body>
<!--
在html中有两种特殊的转义符号
1.与html语法有冲突 例如 a<b>c 小于号 <
2.输入法不方便输入 例如 ♥ ♥
常用的实体字符(了解)
-->
< <
♥ ❥(^_-) ♥ ♠
效果 <br>
半个英语字母英文空格 <br>
  一个汉字中文空格 <br>
小于号 < <br>
大于号 > <br>
&符号 & <br>
爱心 ♥ <br>
元 ¥ <br> ¥ £ $
</body>
</html>
3.10 基本表格
- 有条理性的展示数据内容
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>09-基本表格</title>
</head>
<body>
<!--
TODO:
1. 3个标签
1). table标签 : 表格
2). tr标签 : table row 表格行
3). td标签 : table data 表格数据
2. 编写表格的思路
1). 声明有一个表格: table
2). 在表格声明有一个行: tr
3). 在行里声明有一个数据:td
3. 属性
1). table的属性
I. border : 边框
II. cellspacing : 单元格于单元格之间的距离(外间距)
III. cellpadding : 单元格内的内容与边框之间的距离(内间距)
IV. width : 宽度
如果有多个属性冲突,有优先级关系(默认靠左,靠上)
V. align=center : 整个表格居中
2). tr标签
I. align=center : 整行的数据居中
3). td标签
I. align=center : 单元格的数据居中
4. 扩展
1) .th标签 (table header): td标签 + 居中加粗buff
2). b标签: 加粗
3). i标签: 斜体
-->
<table border="1px" cellspacing="0px" cellpadding="20px" width="500px" align="center">
<tr >
<th>姓名</th>
<th>年龄</th>
<th>身高</th>
<th>体重</th>
</tr>
<tr>
<td align="center"><b><i>张三</i></b></td>
<td>18</td>
<td>180</td>
<td>180</td>
</tr>
<tr align="center">
<td>李四</td>
<td>19</td>
<td>190</td>
<td>190</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
<td>200</td>
<td>200</td>
</tr>
</table>
</body>
</html>
3.11 合并表格
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>10-表格合并</title>
</head>
<body>
<!--
TODO: 合并单元格
1. 先写一个完整的单元格,不考虑合并的事情
2. 观察要合并的单元格,分析跨行还是跨列
3. 让一个单元格膨胀, 让其他单元格灭亡
举例A:
4行4列表格,让第一行的第一列和第二行的第一列合并
举例B:
让第一行的第三列和第一行的第四列合并
快键键:
table>tr*4>td*4 tab键
td属性:
1). rowspan : 跨行
2). colspan : column 跨列
-->
<table border="1px" cellspacing="0" cellpadding="10px" width="500px">
<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表单【重点】
4.1 表单概述
- 采集用户数据
- 发送数据到服务器端（java服务器）
4.2 表单控件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>11-表单控件</title>
</head>
<body>
<!--
TODO;
表单的作用: 收集用户的信息,提交到服务器
form标签: 表单
1. action : 服务器的地址
过几天学习后端了,我们会写自己的服务器地址,现在不用管
2. method : 请求方式
get : 默认取值,参数拼接在url中
post : 参数放在请求体
-->
<h1>登录表单</h1>
<form action="http://www.baidu.com" method="get">
<input type="text" name="username" placeholder="请输入用户名"> <br>
<input type="password" name="password" placeholder="请输入密码"> <br>
<input type="submit" value="登录">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>11-表单控件</title>
</head>
<body>
<!--
TODO;
1. form表单有3个重要子标签
1). input子标签
2). select子标签
3). textarea子标签
2. input标签
1). type : 类型
I. text (默认) : 文本
II. password : 密码
III. radio : 单选框
IV. checkbox : 复选框
V. date : 年月日
VI. file : 选择本地一个文件
VII. reset : 重置 (功能: 将表单内容初始化)
VIII. submit : 提交 (功能: 将当前表单数据提交到服务器)
坑:
radio还没实现单选/数据没能真的提交
2). name
I. 数据没能真的提交?
a. 原因:
url格式-> 协议://ip:port/资源位置?参数
jdbc:mysql://127.0.0.1:3306/day06?characterEncoding=utf8
参数-> name1=value1&name2=value2
因为刚才的选项框没有填写name,所以格式不完整,不能提交
b. 信息输入框(除了reset,submit)必须都要设置name属性
II. radio还没实现单选?
a. 原因: 缺乏前提,同一组radio才能单选
b. 相同name的radio,可以单选
3). value
I. 文本输入框可以不用设置value,填写的内容即为value
a. 文本: text,password,date,file
b. 如果设置了value,默认初始值
II. 选项框必须要设置value
a. 选项: radio , checkbox
b. 选项框默认值为on(没有意义),必须设置
III. 功能框设置value是显示的文本
reset/submit
4). checked
I. 选项框的默认选中 radio/checkbox
II. 写法
标准: checked="checked" 就是选中/不写就是不选中
省略: checked
5). placeholder : 占位符
文本提示
-->
<form action="http://www.baidu.com" method="get">
用户 <input type="text" name="username" placeholder="请输入用户名"> <br>
密码 <input type="password" name="password" value="123"> <br>
性别
<input type="radio" name="sex" value="male"> 男
<input type="radio" name="sex" value="female" checked="checked"> 女 <br>
喜好
<input type="checkbox" name="hobby" value="smoke" checked> 抽烟
<input type="checkbox" name="hobby" value="drink"> 喝酒
<input type="checkbox" name="hobby" value="firehead"> 烫头 <br>
生日 <input type="date" name="birthday"> <br>
头像 <input type="file" name="photo"> <br>
<input type="reset" value="初始化">
<input type="submit" >
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>11-表单控件</title>
</head>
<body>
<!--
TODO;
1. form表单有3个重要子标签
1). input子标签
2). select子标签
3). textarea子标签
2. select子标签 : 下拉框
1). 属性 name
2). 子标签 option (选项)
I. 属性 value
哪个option被选中,这个option的value就会被提交到服务器去
II. 属性 selected
默认选中
3. textarea子标签 : 文本域
1). name属性
2). cols : columns 列数
3). rows: 行数
4). maxlength : 最大输入长度
-->
<h1>注册表单</h1>
<form action="http://www.baidu.com" method="get">
籍贯
<select name="area">
<option value="1">福建</option>
<option value="2" selected>江苏</option>
<option value="3">浙江</option>
</select>
<br>
自我介绍 <br>
<textarea name="self" cols="30" rows="10" maxlength="5"></textarea><br>
<input type="submit">
</form>
</body>
</html>
快捷键
# Idea中的前端快捷键
1. 输入标签名之后,按tab,自动补全标签
若有收获，就点个赞吧
0 人点赞
