详细介绍：时隔一天第二阶段他来了 html！！！！！！！！！！！
day1_html
第二阶段课程介绍
javaSE java基础
web应用程序 (后端 数据处理)
安卓客户端 app
web应用程序
打基础 http协议
网络数据是如何传输的
(把基础拉平)
javaEE Servlet
网页端 (显示界面) 服务端(java数据处理) 数据库(数据持久化处理)
1html
html 超文本标记语言 写网页 决定网页中有什么
通过浏览器读取和运行
简单的html示例
my page
hello html!!!!!html运行在浏览器中
浏览器内核 html解析器 css解析器 javascript解析器 (处理浏览器兼容性)
google内核 (为准)
火狐内核
苹果内核
开发者工具
浏览器是前端代码的运行和调试工具
按 f12 或者 右键 --> 检查
访问网页时
每次把对应网站的页面数据 下载到自己的浏览器里运行
修改代码 做调试 (与源码无关)
2开发工具
vscode 免费开发工具 微软的开发工具
轻量级开发工具 第三方插件市场火热 可以根据自己的需求定制
安装过程 无脑一直下一步 (安装目录尽量不要改 改的话 目录不要带中文)
配置插件
自动保存要开启
运行html
3html语法和标签
html中 使用标签 <英文>
不同的标签有不同的显示效果
属性 用来描述标签的附加信息
<标签 属性="属性值"> 不同的标签有不同的属性和属性值
两类标签
单标签(自结束标签) <标签 /> 有独立的功能 不需要嵌套使用
双标签 <标签 >标签体</标签> 与层次结构有关
使用时 要注意标签是单还是双
4html常用标签
标签显示方式
html中 独立成行的元素 叫块元素 block
从左到右排列 叫行内元素(内联元素) inline标签嵌套使用 标签中包含标签
两个单身狗4.1排版标签
标题标签
h1-h6 加粗 行间距 独占一行
换行看标签
br
段落标签
p
块标签
div
分割线
hr
行内元素
span
加粗标签
strong
斜体
em
下划线
u Document
静夜思--李白
窗前明月光
地上鞋一双
一个单身狗
脱的精光光
窗前明月光
地上鞋一双
一个单身狗
脱的精光光
窗前明月光
地上鞋一双
一个单身狗
脱的精光光
两个单身狗
4.2列表标签
Document
月饼礼盒设计费1000万？胖东来回应新
特朗普对俄“态度突变” 原因披露
净网：2人非法破解无人机系统被查处
老人去世留8套房 给非亲生女儿最多热
俞孔坚坠机身亡 学生发声缅怀
月饼礼盒设计费1000万？胖东来回应新
特朗普对俄“态度突变” 原因披露
净网：2人非法破解无人机系统被查处
老人去世留8套房 给非亲生女儿最多热
俞孔坚坠机身亡 学生发声缅怀
标题
内容1
内容2
震惊 80岁老汉竟然钻入儿媳妇房间
给孙子拿尿布
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字符超链接示例:
Document
超链接
超链接
看川普4.4锚点
锚点 a标签可以控制在当前页面位置跳转
href="#" 到顶部
href="###" 占位用 不跳转
href="#id值" 跳到制定的元素
Document
新闻
最新消息
天气信息
星座运势
回到顶部 回到天气4.5图片标签
图片标签
src 可以用的路径方式
1.相对路径
2.相对根路径
3.绝对路径
title 图片说明浮动窗
alt 图片显示不出来的说明
height 高度
width 宽度Document
图片与a标签的组合使用 美化a标签
用了百度的图片 点击之后跳转到百度首页
单标签 行内元素
4.6表格标签
table 表格
--border="1" 边框
tr 行
td 单元格
--align="center" 对齐方式
--colspan 跨列
--rowspan 跨行
th 列头 (自带加粗居中)
caption 表名
thead 头部
tbody 身体
tfoot 尾部表格示例
Document
表格测试
用户信息表
姓名
年龄
手机号
住址
小明
18
1333333333
凤阳大街18号
小光
19111111111111111111111
155555555
联系我们:223333223334.7表单标签
提供输入框 选择框 让用户填入数据
统一提交给服务端
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
注册4.8常用表单元素(配合表单使用)
输入类
maxlength="5" 最大长度
value="aaa" 默认值
placeholder="请输入用户名" 提示信息
readonly 只读
disabled 禁用
-->
maxlength="5" 最大长度
value="aaa" 默认值
placeholder="请输入用户名" 提示信息
readonly 只读
disabled 禁用
-->选择类
男
name="gender" 分组
value="1" 选项的值
checked 默认选中
-->
体育
name="hobby" 分组
value="1" 选项的值
checked 默认选中
-->
-----请选择-----
中国
美国
泰国
越南
name使用在select标签上
option 选项标签
value="1" 选项值
selected 默认选中
disabled 禁用
-->多行文本
rows="5" 默认行数
cols="50" 默认列数示例
Document
maxlength="5" 最大长度
value="aaa" 默认值
placeholder="请输入用户名" 提示信息
readonly 只读
disabled 禁用
-->
maxlength="5" 最大长度
value="aaa" 默认值
placeholder="请输入用户名" 提示信息
readonly 只读
disabled 禁用
-->
男
name="gender" 分组
value="1" 选项的值
checked 默认选中
-->
体育
name="hobby" 分组
value="1" 选项的值
checked 默认选中
-->
-----请选择-----
中国
美国
泰国
越南
name使用在select标签上
option 选项标签
value="1" 选项值
selected 默认选中
disabled 禁用
-->
rows="5" 默认行数
cols="50" 默认列数
-->
用户名:
密码:
性别:
男
女
女装大佬
爱好:
体育
军事
动漫
国籍:
-----请选择-----
中国
美国
泰国
越南
备注:
其他:4.9音画标签
Document
Your browser does not support HTML video.4.10网页图标
Document
浙公网安备 33010602011771号