时隔一天第二阶段他来了 html！！！！！！！！！！！
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 超文本传输协议 80https 加密的超文本传输协议 443tls加密 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.相对根路径 从根开始换路径只需要关注目标资源路径/xxxx3.绝对路径 https:// www.baidu.com / 带协议的路径http 超文本传输协议 80https 加密的超文本传输协议 443tls加密 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.要有form2.指定提交的地址 通过 action="/myserver"3.设置method 提交方式get特点1.参数直接拼接在url上2.url长度有限制 最长不超过4k3.只允许传字符 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>