文章目录
- 1 前端
- 2 HTML
-
-
- 2.1 历史
- 2.2Html标签：主体是body
- 2.3 body标签
-
-
- 2.3.1 Hr：横线标签，单标签
- 2.3.2 Br：换行，单标签
- 2.3.3 hn：标题标签h1 - h6，单标签
- 2.3.4 div：对一个页面进行分区/节，双标签（最常用）
- 2.3.5 p：段落标签：分区或分节
- 2.3.6 a：超链接标签
- 2.3.7 补充url：
- 2.3.8 Textarea：多文本
- 2.3.9 input：输入框，单标签
- 2.3.10 补充：网络请求（一个网页的产生）
- 2.3.11 Select：下拉选，成套标签，option
- 2.3.12 ol和ul：有序和无序列表，成套标签
- 2.3.13 Table：表格，成套标签
- 2.3.14 img：
- 2.3.111（没用）
- 2.3.15 补充相对路径和绝对路径
- 2.3.16 form：用来和服务器交互数据的
-
-
1 前端
1.1 要求
要求：
1、上课能听懂
目的：
前端有助于理解：前后端交互；
防止被坑（防前端坑、防面试坑）； 了解前端
能稍微写一些前端页面（期望）
2、一个星期 好好学
A.给你一个框架，给你一些页面，可以抄一些新页面出来
B.能看懂（HTML CSS JS 部分VUE）
C.写一些Vue页面
1.2 前端问题
前端问题：
1、java
Spring几乎统一了java开发
java学习曲线，比较平缓，比较“重”的语言
C++比较接近底层
2、通常的编程语言，应该具有哪些东西？
A变量定义
B运算符
C分支语句
学习过程：
java se
数据库 + 集合类
前端
数据库 + EE
Spring
衍生框架
3、java和前端的区别
java平缓，进阶
前端不平缓，10年不到
80%的程序员在争吵？ 知识：多、乱
基础（前端的数理化）：HTML CSS JS
前端的壁垒在哪里？（门槛在哪（低），天花板在哪（广，大前端））
你谈什么壁垒！你都被小程序打到家门口了
4、作业
问：知道就是知道，不知道就是不知道（没有逻辑问题）
前端（对于我们）：不难，难受
完全不知道怎么写
知道怎么写，写不出来
写出来了，和你想的不一样
和你想的一样，不知道为啥
后端5分钟，前端搞一天
调
2 HTML
2.1 历史
概念
HTML 超文本标记语言
Html是一个语言
Html是一个文本语言
Html是一个标记（标签）描述的文本语言
是一个以html为后缀的文本
是一个文本，也是一个网页，该文本可以用浏览器打开（.html为后缀的文本，用浏览器打开的时候，里面内容会被浏览器解析）
超文本：包含文本字体、图片、链接，甚至音乐，程序等元素的文本
标准结构
- 标签是成对出现的，有开始有结束（不是绝对的）
- 整个.html文档的内容由标签包裹
- 一个html文档，分为两部分：头，身体
Vscode（前端使用的最多：历史渊源）
WebStorm（最好用的，类似IDEA）
Sublime（轻量级）
Hbulider（国产）
IDEA（我们用）
IDEA：jsp（前端技术）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
Html5：html的第五个版本
Html：w3c维护 html（标准化组织）
只有草案（建议），没有文档
前端：运行在浏览器
浏览器大战：
网景 vs IE（胜）
欧朋 + 火狐 vs IE（胜）
谷歌 vs IE（败）
2.2Html标签：主体是body
学习html，实际上就是学习html中的标签
标签分为两部分
Head部分：用来构建这个网页一些基础信息（显示title：淘宝网，淘，我喜欢！）
Body部分：显式这个网页
Head：遇到就讲，现在前端是“组件化天下”，Head越来越不重要。
用来描述资源的格式，怎么用来描述资源的格式？
标签的包含和嵌套，标签本身是有含义的
我是黑体，绿色，尺寸为15
2.2.1 body标签的分类
学习完css的盒子模型之后来学习
2.3 body标签
Html被w3c定义了很多标签，但是这些标签，常用（当下时代）10-25%
css出现（html 论文————> w3c疯狂加标签/属性）
<hr>
<br>
<h1>-<h6>
<div>
<>
<>
<>
<>
<>
html
css难入门，难精通
js易入门，难精通
2.3.1 Hr：横线标签，单标签
属性:除非不可替代，否则都是使用css
noshade：是否有阴影
size
width
align：对齐方式
自结束如<hr />：xhtml（另外一种语言，用来取代html，夭折）的产物
能显示 != 正确
2.3.2 Br：换行，单标签
连续的换行和空格，一般都会解析成一个空格显式
2.3.3 hn：标题标签h1 - h6，单标签
h2-h6可以在一个html文档上出现多次
h1：只能出现一次
h1包裹的内容也表示关键字
2.3.4 div：对一个页面进行分区/节，双标签（最常用）
<body>
<div class="div1">
div1
</div>
<div class="div2">
div1
</div>
<div class="div3">
div1
</div>
<div class="div4">
<div class="div4-s1">div4-s1</div>
<div class="div4-s2">div4-s2</div>
<div class="div4-s3">div4-s3</div>
</div>
<div class="div5">
div1
</div>
</body>
2.3.5 p：段落标签：分区或分节
段落自带边距（唯一区别于div的地方）
2.3.6 a：超链接标签
<a href="https://www.baidu.com" target="_blank">baidu</a>
<a href="https://www.baidu.com" target="_self">baidu</a>
<a href="" target="_blank">baidu</a>
css不可替代的属性
href：指向要新打开的地址（是个url）
target：表示打开新页面的方式
_black：在新窗口打开
_self：它使目标文档显示在超链接所在框架或者窗口中
超链接属性target的value值时默认是_self
_parent:在父窗口打开
_top:在顶级窗口打开
同组值:通过单击一个窗口中的不同链接控制另一窗口内容变化 ; 浏览器会找与target值相符的框架或者窗口中的文档，
有则在其中显示文档。如果不存在，浏览器打开一个新窗口
<iframe>: 导入一个内联框架, (在一个页面中, 引入一个新页面)
<iframe src="./09_a3.html" width="1000px" height="500px"></iframe>
2.3.7 补充url：
第一次强调掌握
url分为三大部分，四小部分
三部分：协议、（IP地址 + 端口） or 域名 服务器内部路径（虚拟路径）
三部分：协议、（IP地址 + 端口） or 域名 服务器内部路径（虚拟路径）+ 参数
http：没有带端口，默认找80
https：没有带端口，默认找443
DNS解析
2.3.8 Textarea：多文本
属性
Cols列
Rows行
Maxlength最大
Placeholder提示：有提示信息，保证标签紧闭合
Readonly：只读
他是一个表单元素（无限放大）（只有3个表单元素）
表单元素都默认有value值
2.3.9 input：输入框，单标签
Type: 属性
text:默认文本
password:密码
button:按钮
hidden:隐藏输入框
radio:单选框: 单选框, 通过name属性标记同一组
checkbox:可多选框
reset:定义重置按钮
submit:提交
2.3.10 补充：网络请求（一个网页的产生）
直接打开和发起网络请求的区别
属性
显示对应的代码
2.3.11 Select：下拉选，成套标签，option
<!--option:selected(selected="selected"选中状态)-->
<!--select :multiple(multiple =“multiple“ 允许多选)-->
<!--select :size(size =“4”下拉可见数4)-->
<select multiple="multiple" size="2">
<option>学习</option>
<option selected="selected">睡觉</option>
<option>扣手机</option>
</select>
<hr>
<select>
<option value="1">学习</option>
<option value="2">睡觉</option>
<option value="3">扣手机</option>
</select>
2.3.12 ol和ul：有序和无序列表，成套标签
不需要记，没人用
2.3.13 Table：表格，成套标签
所谓成套：table里面就是tr，tr里面就是td
固定搭配，其他同理
Tr：表格中的一行
Td：代表一行中的一个单元格
Table属性
border
bgcolor
cellpadding 元素内容到边框的距离
cellspacing 单元格之间的距离
Tr属性
bgcolor 背景色
valign
Td属性
colspan 跨列
rowspan 跨行
2.3.14 img：
alt：显示错误的时候的提示信息
src：必须有，指向地址
浏览器找idea，idea返回html文件，遇到img标签，发送图片请求
分析几次网络请求：2次。为什么，网络请求才可以获取图片。
2.3.111（没用）
th：就是用来取代第一行的td，作为表头
2.3.15 补充相对路径和绝对路径
前端的两种路径
前端也有相对路径：同级、父级、默认是
绝对路径：就是一个url
安全性问题：（自己的网站还是钓鱼网站）不允许加载本地资源
2.3.16 form：用来和服务器交互数据的
见文件17_form
3个表单元素：input、textarea（双标签）、select（搭配option）
只是写法不同
wd=123的key-value拼接作为参数，形成url
重置、提交：只能结合表单元素使用
reset
submit
method：方式（不仅仅有get和post），http
get和post是最常用的请求方式
get请求一般是把参数拼接到url之后
正文中
method="get"
method="post"
重点是补充的内容：因为涉及后端（和我们相关）