javaweb（基础一）
Web
web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构
贝尔实验室:蒂姆·伯纳斯·李
1. 产品的开发流程
全栈开发工程师 = 前端开发 + 后端开发 + 运维
2. 浏览器大战
2.1 什么是浏览器?
html css js的解析工具
2.2 浏览器大战?
网景导航者浏览器(网景): 收费===>火狐浏览器
微软(IE浏览器): 免费
谷歌(chrome浏览器): 开源 免费
ECMA(欧洲计算机制作协会):ECMA script===>java script
3. 网页的基本组成
3.1 网页文件
.htm或者.html结尾
3.2 网页的基本组成
- 网页的内容(html)
- 网页样式(css)
- 网页的交互(javascript)
4. 第一个网页的编写
4.1 新建html文件
4.2 使用编辑器打开文件
4.3 使用浏览器打开网页文件查看效果
5. 什么是html?
html(HyperText Mark-up Language): 超文本标记语言
超文本标记语言或超文本连接标示语言，由Tim Berners-Lee发明，是构成网页文档的主要语言
6. W3C
World Wide Web Consortium，万维网联盟
-
由蒂姆·伯纳斯-李于1994年10月在麻省理工学院（MIT）计算机科学实验室成立
-
是Web技术领域最具权威和影响力的国际中立性技术标准机构
-
为Web技术的互相兼容，互联网技术的发展和应用起到了基础性和根本性的支撑作用
7. html的发展
html4—>xhtml—>html5
8. html编写工具
- 文本编辑器
- vscode(开源 免费)
- 记事本
- DW(收费)
- HbuilderX(免费)
- eclipse
- WebStorm(收费)
- …
9. 标签
单标签:<标签名称/>
双标签:<标签名称> 内容
标签的的属性: <标签名称 属性名称 = '属性值' 属性名称 = "属性值">
10. html的结构
html是超文本标记语言: 通过标签来进行标记
<html>
<head>
<title>第一个标准网页title>
head>
<body>
hello uplooking
body>
html>
11. html中的注释
<!-- 网页的声明部分 以下声明为html5的声明 -->
12. html中的常用标签
常用标签（20）
-
font 文字
-
img 图片
-
a 超链接
-
br 换行
-
hr 分割线
-
p 段落
-
h1-h6 标题
-
ul 无序列表
- li
-
ol 有序列表
- li
-
table 表格
- thead
- tr
- th
- tr
- tbody
- tr
- td
- tr
- thead
-
form 表单
- label
- input
- text 文本
- password 密码
- submit 提交
- reset 重置
- button 按钮
- file 文件
- date 日期
- email 邮箱
- hidden 隐藏
- color 颜色
-
fileset 文字字体中间
- legend
-
div
-
span 行内空间
-
文字
- i 斜体
- u 下划线
- del 删除线
- b 加粗
-
audio 音频
-
video 视频
12.1 标题标签
<h1>h1h1h1hh1111</h1>
<h2>h2h2hh2h2</h2>
<h3>h3h3h3h3h3</h3>
<h4>h4h4h4h4h</h4>
<h5>h5h5h5h5h5</h5>
<h6>h6h6h6h6h6h</h6>
12.2 段落标签
<p>段落内容</p>
12.3 换行标签
<br>
12.4 加粗标签(了解)
<strong></strong>
12.5 斜体标签(html中最轻量级的标签)
<i>java大数据职业教育</i>
12.6 水平线标签
<hr/>
12.7 列表
有序列表
<ol type="1">
<li>javali>
<li>c++li>
<li>scalali>
ol>
无序列表
<ul type="circle">
<li>javali>
<li>c++li>
<li>scalali>
ul>
自定义列表
<dl>
<dt>dt1dt>
<dd>dd1dd>
<dt>dt2dt>
<dd>dd2dd>
<dt>dt3dt>
<dd>dd3dd>
dl>
12.8 超链接
<a href="http://www.baidu.com">你点我呀!a>
12.9 图片标签
<img src="ym1.jpg" alt="这是蜜蜜" title="这是杨咪咪"/>
常见的a与img的搭配使用
<a href="https://www.baidu.com">
<img src="ym.jpg" alt="这是蜜蜜" title="这是杨咪咪"/>
a>
12.10 字符实体
12.11 表格标签
<table border="1px" width="500px" cellspacing="0px" cellpadding="20px" >
<tr>
<td>1td>
<td>2td>
<td>3td>
tr>
<tr>
<td>1td>
<td>2td>
<td>3td>
tr>
<tr>
<td>1td>
<td>2td>
<td>3td>
tr>
<tr>
<td>1td>
<td>2td>
<td>3td>
tr>
table>
带表头和主体的的表格
<thead>thead>: 表头
<tbody>tbody>:表格的内容部分
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签title>
head>
<body>
<table align="center" border="1px" width="800px" cellspacing="0px" cellpadding="20px">
<thead align="center">
<tr>
<td>1td>
<td>2td>
<td>3td>
tr>
thead>
<tbody align="right">
<tr >
<td>1td>
<td>2td>
<td>3td>
tr>
<tr>
<td>1td>
<td>2td>
<td>3td>
tr>
<tr>
<td>1td>
<td>2td>
<td>3td>
tr>
<tr>
<td>1td>
<td>2td>
<td>3td>
tr>
tbody>
table>
body>
html>
12.12 合并单元格
colspan: 列合并
rowspan: 行合并
12.13 课程表制作
<html lang="en">
<head>
<meta charset="UTF-8">
<title>课程表title>
head>
<body>
<table border="1px" cellspacing="0px" cellpadding="20px" align="center" width="800px">
<thead>
<tr>
<td> td>
<td>星期一td>
<td>星期二td>
<td>星期三td>
<td>星期四td>
<td>星期五td>
tr>
thead>
<tbody>
<tr>
<td rowspan="2">上午td>
<td>Java基础td>
<td>C语言td>
<td>C++基础td>
<td>Html网页设计td>
<td>go语言td>
tr>
<tr>
<td>Java基础td>
<td>C语言td>
<td>C++基础td>
<td>Html网页设计td>
<td>go语言td>
tr>
<tr>
<td rowspan="2">下午td>
<td>Java基础td>
<td>C语言td>
<td>C++基础td>
<td>Html网页设计td>
<td>go语言td>
tr>
<tr>
<td>Java基础td>
<td>C语言td>
<td>C++基础td>
<td>Html网页设计td>
<td>go语言td>
tr>
tbody>
table>
body>
html>
12.14 span标签
uplooking java大数据开发讲师是<span>贾旺旺span>
12.15 html开发神器
emment表达式
>: 子
[属性名称=属性值]
():分组
()*n:生成多少个
+:同级
12.16表单标签
表单标签可以接收用户的输入和选择，将数据提交到服务器处理，是服务器和客户端交互的主要手段
表单元素可以单独使用,也可以有标签组合
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<form>
<input type="text" placeholder="请输入用户名">
<input type="email">
请选择爱好:
<span>javaspan><input type="checkbox">
<span>c++span> <input type="checkbox">
<input type="file">
<hr>
<input type="date">
<hr>
<input type="number">
<hr>
<input type="password">
<hr>
<input type="tel">
<hr>
<input type="button" value="你点我呀">
性别: 男<input type="radio" name="sex"> 女<input name="sex" type="radio">
form>
body>
html>
<select>
<option value="" selected>java大数据option>
<option value="">python自动化option>
select>
<textarea>textarea>
<input type="text" placeholder="请输入用户名" readonly >
<input type="text" placeholder="请输入用户名" disabled >
12.17 div标签
div在html中本身是没有意义的,div就是为了css联合使用来进行网页布局的;
12.18 html中的框架标签
框架可以在一个网页中直接引用其他网页
- frameset
- iframe
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7o1WmX25-1597822437093)(upload/image-20200730114543262.png)]
上面 chrome浏览器已经不支持frameset了;
9.1 iframe
<iframe src="https://www.baidu.com" width="400px" height="200px"
frameborder="none" scrolling="no">
iframe>
12.19 html5语义化标签
语义化标签:对标签做到 见名知意,有利于搜索引擎的优化;
12.19.1 音频视频标签
<audio src="a.mp3" controls></audio>
<video src="01-test.mp4" controls ></video>
12.19.2头部尾部标签
<header>
网站头
header>
<footer>
网站尾部
footer>
12.19.3 区域标签
<section>section>
12.19.4 导航标签
<nav>nav>