day1_html
第二阶段课程介绍
javaSE java基础
web应用程序 (后端 数据处理)
安卓客户端 app
web应用程序
打基础 http协议
网络数据是如何传输的
(把基础拉平)
javaEE Servlet
网页端 (显示界面) 服务端(java数据处理) 数据库(数据持久化处理)
1html
html 超文本标记语言 写网页 决定网页中有什么
通过浏览器读取和运行
简单的html示例
<html>
<head>
<title>my page</title>
</head>
<body>
hello html!!!!!
</body>
</html>html运行在浏览器中
浏览器内核 html解析器 css解析器 javascript解析器 (处理浏览器兼容性)
google内核 (为准)
火狐内核
苹果内核
开发者工具
浏览器是前端代码的运行和调试工具
按 f12 或者 右键 --> 检查
访问网页时
每次把对应网站的页面数据 下载到自己的浏览器里运行
修改代码 做调试 (与源码无关)
2开发工具
vscode 免费开发工具 微软的开发工具
轻量级开发工具 第三方插件市场火热 可以根据自己的需求定制
安装过程 无脑一直下一步 (安装目录尽量不要改 改的话 目录不要带中文)
配置插件
自动保存要开启
运行html
3html语法和标签
html中 使用标签 <英文>
不同的标签有不同的显示效果
属性 用来描述标签的附加信息
<标签 属性="属性值"> 不同的标签有不同的属性和属性值
两类标签
单标签(自结束标签) <标签 /> 有独立的功能 不需要嵌套使用
双标签 <标签 >标签体</标签> 与层次结构有关
使用时 要注意标签是单还是双
4html常用标签
标签显示方式
html中 独立成行的元素 叫块元素 block
从左到右排列 叫行内元素(内联元素) inline标签嵌套使用 标签中包含标签
<u>两<span>个</span><strong>单身</strong><em>狗</em> </u>4.1排版标签
标题标签
h1-h6 加粗 行间距 独占一行
换行看标签
br
段落标签
p
块标签
div
分割线
hr
行内元素
span
加粗标签
strong
斜体
em
下划线
u<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
html中 独立成行的元素 叫块元素 block
从左到右排列 叫行内元素(内联元素) inline
标签嵌套使用 标签中包含标签
标题标签
h1-h6 加粗 行间距 独占一行
换行看标签
br
段落标签
p
块标签
div
分割线
hr
行内元素
span
加粗标签
strong
斜体
em
下划线
u
-->
<h2>静夜思--李白 </h2>
窗前明月光 <br/>
地上鞋一双 <br/>
一个单身狗 <br/>
脱的精光光 <br/>
<p>
窗前明月光 <br/>
地上鞋一双
</p>
<p>一个单身狗</p>
<p>脱的精光光</p>
<div>窗前明月光</div>
<div>地上鞋一双</div>
<div>一个单身狗</div>
<div>脱的精光光</div>
<hr/>
<!-- html5之前 使用大量单字母标签 有歧义
html5之后 同样的功能 扩展了多字母 减少歧义 -->
<u>两<span>个</span><strong>单身</strong><em>狗</em> </u>
</body>
</html>4.2列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 有序列表 -->
<ol type="i">
<li>月饼礼盒设计费1000万？胖东来回应新</li>
<li>特朗普对俄“态度突变” 原因披露</li>
<li>净网：2人非法破解无人机系统被查处</li>
<li>老人去世留8套房 给非亲生女儿最多热</li>
<li>俞孔坚坠机身亡 学生发声缅怀</li>
</ol>
<!-- 无序列表 -->
<ul type="square">
<li>月饼礼盒设计费1000万？胖东来回应新</li>
<li>特朗普对俄“态度突变” 原因披露</li>
<li>净网：2人非法破解无人机系统被查处</li>
<li>老人去世留8套房 给非亲生女儿最多热</li>
<li>俞孔坚坠机身亡 学生发声缅怀</li>
</ul>
<!-- 自定义列表 -->
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dt>震惊 80岁老汉竟然钻入儿媳妇房间</dt>
<dd>给孙子拿尿布</dd>
</dl>
<!--
4月饼礼盒设计费1000万？胖东来回应新
5特朗普对俄“态度突变” 原因披露
6净网：2人非法破解无人机系统被查处
7老人去世留8套房 给非亲生女儿最多热
8俞孔坚坠机身亡 学生发声缅怀
-->
</body>
</html>4.3超链接标签
作用 跳转网页
本质 换浏览器地址栏
参数:
target 打开方式
默认当前网页
_blank 新网页 href 跳转地址
当前服务器内跳转
1.相对路径 每个文件系统中 结构相同
两个资源文件中 经过的路径和文件
./
../
资源
2.相对根路径 从根开始换路径
只需要关注目标资源路径
/xxxx
跳转到外部服务器
3.绝对路径
https:// www.baidu.com / 带协议的路径http协议的url路径格式
http:// 127.0.0.1 : 5500 /day1_html/folder2/4%E8%B6%85%E9%93%BE%E6%8E%A5.html?key=value&key=value
协议 地址 找到计算机 端口号(应用程序绑定) 资源地址 请求参数 http 超文本传输协议 80
https 加密的超文本传输协议 443
tls加密
url编码 url链接上 只允许ascII字符 超链接示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
a标签本质 换浏览器地址栏
http:// 127.0.0.1 : 5500 /day1_html/folder2/4%E8%B6%85%E9%93%BE%E6%8E%A5.html
协议 地址 找到计算机 端口号(应用程序绑定) 资源地址 请求参数
file:/// C:/Users/Administrator/Desktop/mypage.html 本地文件协议
href 跳转地址
当前服务器内跳转
1.相对路径 每个文件系统中 结构相同
两个资源文件中 经过的路径和文件
./
../
资源
2.相对根路径 从根开始换路径
只需要关注目标资源路径
/xxxx
3.绝对路径
https:// www.baidu.com / 带协议的路径
http 超文本传输协议 80
https 加密的超文本传输协议 443
tls加密
url编码 url链接上 只允许ascII字符
target 打开方式
默认当前网页
_blank 新网页
-->
<a href="./../1html介绍.html" target="_blank">超链接</a>
<a href="/day1_html/1html介绍.html" target="_blank">超链接</a>
<a href="https://www.baidu.com/s?wd=%E4%BD%A0%E5%A5%BD%E5%95%8A" target="_blank">看川普</a>
</body>
</html>4.4锚点
锚点 a标签可以控制在当前页面位置跳转
href="#" 到顶部
href="###" 占位用 不跳转
href="#id值" 跳到制定的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
通用html属性 每个元素都可以加
id 唯一标记
class 样式类别
style 直接编辑样式
-->
<h1>新闻</h1>
<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><br><br><br><br>
<h1 id="news">最新消息</h1>
<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><br><br><br><br>
<h1 id="weather">天气信息</h1>
<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><br><br><br><br>
<h1>星座运势</h1>
<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><br><br><br><br>
<a href="###">回到顶部</a> <a href="#news">回到天气</a>
</body>
</html>4.5图片标签
图片标签
src 可以用的路径方式
1.相对路径
2.相对根路径
3.绝对路径
title 图片说明浮动窗
alt 图片显示不出来的说明
height 高度
width 宽度<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
src 可以用的路径方式
1.相对路径
2.相对根路径
3.绝对路径
title 图片说明浮动窗
alt 图片显示不出来的说明
height 高度
width 宽度
-->
<a href="https://www.baidu.com">
<img width="100" height="100" alt="图片" title="这是图片" src="https://www.baidu.com/img/flexible/logo/pc/result@2.png"/>
</a>
</body>
</html>
图片与a标签的组合使用 美化a标签
用了百度的图片 点击之后跳转到百度首页
<a href="https://www.baidu.com">
<img width="100" height="100" alt="图片" title="这是图片" src="https://www.baidu.com/img/flexible/logo/pc/result@2.png"/>
</a>单标签 行内元素
4.6表格标签
table 表格
--border="1" 边框
tr 行
td 单元格
--align="center" 对齐方式
--colspan 跨列
--rowspan 跨行
th 列头 (自带加粗居中)
caption 表名
thead 头部
tbody 身体
tfoot 尾部表格示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>表格测试</h1>
<!--
table 表格
--border="1" 边框
tr 行
td 单元格
--align="center" 对齐方式
--colspan 跨列
--rowspan 跨行
th 列头 (自带加粗居中)
caption 表名
thead 头部
tbody 身体
tfoot 尾部
-->
<table border="1">
<caption>用户信息表</caption>
<!--
-->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>手机号</th>
<th>住址</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td align="center">18</td>
<td>1333333333</td>
<td rowspan="2">凤阳大街18号</td>
</tr>
<tr>
<td>小光</td>
<td>19111111111111111111111</td>
<td>155555555</td>
</tr>
</tbody>
<tfoot>
<tr>
<td align="center" colspan="4">联系我们:22333322333</td>
</tr>
</tfoot>
<!--
需要把多余的格子去掉
colspan 跨列
rowspan 跨行
-->
</table>
</body>
</html>4.7表单标签
提供输入框 选择框 让用户填入数据
统一提交给服务端
<!-- form 表单 -->
1.要有form
2.指定提交的地址 通过 action="/myserver"
3.设置method 提交方式
get特点
1.参数直接拼接在url上
2.url长度有限制 最长不超过4k
3.只允许传字符 ascII字符
4.参数可以保存为书签和历史记录
5.处理更快
post特点
1.参数不拼在url上 出现在请求体中
2.没有长度上限
3.可以传字符 可以传字节
4.参数不可以保存为书签和历史记录
5.处理稍慢
enctype 数据格式
字符 application/x-www-form-urlencoded
字节 multipart/form-data 只支持post get不行
4.有表单元素 配置name属性 传键值对
5.提交按钮 触发表单提交 注意: method不配置 默认get enctype不配置 默认 application/x-www-form-urlencoded
<form action="/myserver" >
<input type="text" name="username"/><br>
<button type="submit">注册</button>
</form>4.8常用表单元素(配合表单使用)
输入类
<!-- 1.普通输入框
<input type="text" value="aaa" name="username"/>
maxlength="5" 最大长度
value="aaa" 默认值
placeholder="请输入用户名" 提示信息
readonly 只读
disabled 禁用
-->
<!-- 2.密码框
<input type="password" maxlength="6" name="password"/>
maxlength="5" 最大长度
value="aaa" 默认值
placeholder="请输入用户名" 提示信息
readonly 只读
disabled 禁用
-->选择类
<!-- 1.单选按钮
<input name="gender" type="radio" value="1">男
name="gender" 分组
value="1" 选项的值
checked 默认选中
-->
<!-- 2.多选按钮 传值时有同名参数 hobby=1&hobby=2
<input name="hobby" type="checkbox" checked value="1">体育
name="hobby" 分组
value="1" 选项的值
checked 默认选中
-->
<!-- 3.下拉列表
multiple 多选下拉列表
<select name="country">
<option disabled selected >-----请选择-----</option>
<option value="1">中国</option>
<option value="2">美国</option>
<option value="3">泰国</option>
<option value="4">越南</option>
</select>
name使用在select标签上
option 选项标签
value="1" 选项值
selected 默认选中
disabled 禁用
--> 多行文本
<textarea name="remark" rows="5" cols="50"></textarea>
rows="5" 默认行数
cols="50" 默认列数示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="/myserver" >
<!-- 输入类 -->
<!-- 1.普通输入框
<input type="text" value="aaa" name="username"/>
maxlength="5" 最大长度
value="aaa" 默认值
placeholder="请输入用户名" 提示信息
readonly 只读
disabled 禁用
-->
<!-- 2.密码框
<input type="password" maxlength="6" name="password"/>
maxlength="5" 最大长度
value="aaa" 默认值
placeholder="请输入用户名" 提示信息
readonly 只读
disabled 禁用
-->
<!-- 选择类 -->
<!-- 1.单选按钮
<input name="gender" type="radio" value="1">男
name="gender" 分组
value="1" 选项的值
checked 默认选中
-->
<!-- 2.多选按钮 传值时有同名参数 hobby=1&hobby=2
<input name="hobby" type="checkbox" checked value="1">体育
name="hobby" 分组
value="1" 选项的值
checked 默认选中
-->
<!-- 3.下拉列表
multiple 多选下拉列表
<select name="country">
<option disabled selected >-----请选择-----</option>
<option value="1">中国</option>
<option value="2">美国</option>
<option value="3">泰国</option>
<option value="4">越南</option>
</select>
name使用在select标签上
option 选项标签
value="1" 选项值
selected 默认选中
disabled 禁用
-->
<!-- 多行文本
<textarea name="remark" rows="5" cols="50"></textarea>
rows="5" 默认行数
cols="50" 默认列数
-->
<!-- 其他类 -->
<!--
table 做一些简单的布局
-->
<table>
<tr>
<td align="right"> <label for="uname">用户名:</label> </td>
<td><input id="uname" type="text" value="aaa" name="username"/></td>
</tr>
<tr>
<td align="right">密码:</td>
<td><input type="password" maxlength="6" name="password"/></td>
</tr>
<tr>
<td align="right">性别:</td>
<td>
<input name="gender" type="radio" value="1">男
<input name="gender" type="radio" checked value="2">女
<input name="gender" type="radio" value="3">女装大佬
</td>
</tr>
<tr>
<td align="right">爱好:</td>
<td>
<input name="hobby" type="checkbox" checked value="1">体育
<input name="hobby" type="checkbox" value="2">军事
<input name="hobby" type="checkbox" checked value="3">动漫
</td>
</tr>
<tr>
<td align="right">国籍:</td>
<td>
<select name="country" >
<option disabled selected >-----请选择-----</option>
<option value="1">中国</option>
<option value="2">美国</option>
<option value="3">泰国</option>
<option value="4">越南</option>
</select>
</td>
</tr>
<tr>
<td align="right">备注:</td>
<td>
<textarea name="remark" rows="5" cols="50"></textarea>
</td>
</tr>
<tr>
<td align="right">其他:</td>
<td>
<input type="color"/>
<input type="datetime-local"/>
<input type="file"/>
</td>
</tr>
<tr>
<td align="right"></td>
<td><button type="submit">注册</button></td>
</tr>
</table>
<br>
</form>
</body>
</html>4.9音画标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video width="400" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML video.
</video>
</body>
</html>4.10网页图标
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="shortcut icon" href="imgs/a.png" type="image/x-icon">
</head>