学习方向：
HTML + CSS + JS(DOM);
互联网产生三要素：
1）URL （统一资源定位符）:指示资源所在位置。
2）HTTP（超文本传输协议）: 以什么方式去获取资源。
3）HTML（超文本标记语言）：获取资源的格式（本质：用来承载和描述资源）。
HTTP是应用层协议而TCP,UDP是底层协议。
1概述
1.1什么是前端
一个浏览器页面就是前端
Javase : java的基础语法
数据结构 : 研究数据逻辑
前端 : 页面显示(一个网页)
数据库 : 存储数据
Javaee : java的服务器开发.
Spring以及spring一些衍生框架: 简化javaee服务器开发
分布式 :
轮子 :
1.2前端
前端: 技术很多.
学习方式: 内容太多. 记笔记.
难不难: 不难, 难以接受(站在一个新的语言的角度: 思路转化要快)
Html css js dom vue(前端框架)
底层交互细节
更多的关注: 交互, 数据传递, 静动态资源
后端: 性能
前端: 没有性能
基础的重要内容: 方向性的.
作业: 都会讲 (都非常简单)
完全没有思路: 正常
有思路, 不会写: 正常
会写, 总写不对: 太正常
思路错了
1.3目标
1)能写一些简单的页面
2)能看懂Vue代码
3)如果,实在想改一改项目的前端, 可以在资料的帮助下改一下
2HTML
Html CSS JS(DOM)
前端基础
2.1HTML
什么时候产生的?
它是用来干什么的?
互联网产生: 三要素
1)URL: 指示资源所在的位置
2)HTTP: 以什么方式去获取资源
3)HTML: 获取资源的格式(本质: 从来承载和描述资源)
2.2Html概念
前端: 网页
Html - 人的骨架
Css - 皮肤和血肉
Js - 思想逻辑
网页-- 人
HTML(hyper text markup language)超文本标记语言
超文本标记语言: 首先是个语言(类语言, 泛语言),
标准语言: 变量的定义, 分支结构, 循环结构
超文本标记语言: 是个文本语言(这个语言是依赖于文本而存在的)
是一个以.html为后缀的文本
是一个文本,也是一个网页;该文本可以用浏览器打开(浏览器会解释这个.html文本上的前端代码最终显示)
“超文本”--------包含文本字体,图片、链接，甚至音乐、程序等元素的文本
超文本标记语言: 是一个用 标签描述 的 超文本 语言
HTML 是一个使用“标签”来描述网页的文本 (标签在html文本中有实际意义)
标签: <元素名> </元素名> (一般标签有开始和结束)
123
20
18
HTML: 获取资源的格式(本质: 从来承载和描述资源)
怎么承载和描述资源: 用标签承载和描述
2.2.1Html的标准结构
1) 是由标签描述的文本, 标签成对出现(有开始和结束: 不是绝对)
2) (一个.html文档-----到浏览器解释它----生成一个页面: 一个.html文档就对应一个页面)
一个.html文档分为两部分,
一个网页分为两部分,
(1)头部份:
(2)身体部分: 页面在浏览器上所看到内容(除了title部分), 都是由body部分实现的
3) 整体这个文档由<html>标签包裹
2.2.2标签(body)
我们研究html-- 研究它进行资源承载的作用
它用什么来承载资源— 标签描述的方式承载资源
研究html----研究html中的标签
-
< textarea > < select >
-
--
-
< table >-------- < form >
< textarea > < select >
-
--
- < table >-------- < form >
2.2.2.1Body标签的分类
行: 父元素的一边到另一边, 高度: 由子元素填充
Body: 表示页面的整体显示区域
2.2.2.1.1行级标签
在页面上行级标签, 在行内顺序排列
2.2.2.1.2块级标签
独占一行
2.2.2.1.3行内块
本质上是个行级标签, 但是具有一些块级标签的作用
2.2.2.2Idea使用
2.2.2.3Hr
标签在 HTML 页面中创建一条水平线(横线) 这条横线是双线。
标签没有结束标签。是个单标签
标签属性
noshade:颜色是否有阴影(纯色)
size:高度( 厚度,不同于height,不带单位时–默认px )
width:宽度(不带单位时–默认px)
align:对其方式
2.2.2.4Br
: 换行符
可插入一个简单的换行符。
标签是单标签（意味着它没有结束标签，因此这是错误的：
）
标签只是简单地开始新的一行
2.2.2.5Hn
标题标签
…
-
标签可定义标题。
定义最大的标题。
定义最小的标题。 属性align Left:左对齐内容（默认值） Center:右对齐内容 Right:居中对齐内容
在一个html文档中, h1标签只能出现一次, h2-h6可以出现多次
h1: 可以作为页面的关键字标识
2.2.2.6Div
2.2.2.7A
超链接标签: 在一个页面中可以通过超链接请求另一个页面
标签定义超链接，用于从一张页面链接到另一张页面。
元素最重要的属性是 href 属性，它指示链接的目标URL
baidu
属性
Target
超链接属性target的value值时默认是_self
_blank:在新窗口打开
_parent:在父窗口打开
_self:它使目标文档显示在超链接所在框架或者窗口中
_top:在顶级窗口打开
同组值:通过单击一个窗口中的不同链接控制另一窗口内容变化 ; 浏览器会找与target值相符的框架或者窗口中的文档，有则在其中显示文档。如果不存在，浏览器打开一个新窗口
2.2.2.8P
段落标签
标签定义段落。
元素会自动在其前后创建一些空白(边距)。浏览器会自动添加这些空间，您也可以在样式表中规定。
2.2.2.9Img
: 图片标签
属性
Width
Height
单位 px, %
eg:
2.2.2.10Input
标签用于搜集用户信息。
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
Type:
text:默认文本
password:密码
button:按钮
hidden:隐藏输入框
radio:单选框
reset:定义重置按钮。
submit:提交
2.2.2.11Textarea
多文本
标签定义多行的文本输入控件。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸
属性
Cols:列
Rows:行
Maxlength:最大
Placeholder:提示
readonly :只读
2.2.2.12Select
选择下拉框, 是一个成套的标签
属性
option:selected(selected="selected"选中状态)
select :multiple(multiple =“multiple“ 允许多选)
select :size(size =“4”下拉可见数4)
2.2.2.13Ol ul
- 标签定义有序列表(有序:数字,字母) 属性: Type:规定在列表中使用的标记类型(1,A,a,I,i)。 Start:规定有序列表的起始值 Reversed:规定列表顺序为降序。(9,8,7...)
Type:
disc:默认值。实心圆。
circle :空心圆。
square :实心方块。
2.2.2.14Table
表格
| 标签使用 主要属性 Bgcolor Border Cellpadding:规定单元边沿与其内容之间的空白。 Cellspacing:规定单元格之间的空白。 |
|---|
2.2.2.15Form表单
用来在页面内部, 调用浏览器发起一个后台请求, 并且通常会携带一些参数
<!--<textarea name="wd" value="123">-->
<!--</textarea>-->
<input name="wd" value="123">
<textarea></textarea>
<input type="reset">
<input type="submit">
630
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
