Day1
前端三剑客
HTML,CSS,JavaScript\
HTML的概念
Hyper Text Markup Language: 超文本标记语言
他可以针对字体/图像/视频/音频...
设置字体大小/类型/标记颜色等等完成一些渲染!
HTML的标准结构
<html>
<head>
<meta 页面编码格式="utf-8">
<title>页面的窗口标题</title>
</head>
<body>
<body>
</html>Day2
常用的文本标签
h1-h6的标题标签:从大到小
<p>
段落标签 (前后端会插入空行)
</p>
<hr/> 水平线标签 作用:分割内容
<br/>换行标签
<marquee behivour="滚动方式" scallammount="滚动速度(设置正整数值)" bgcolor="背景色" direction="滚动方向">滚动标签</marquee>
<font color="字体颜色" size="(1-7的值)">字体标签</font>
<sup>上标</sup> (作用:网站首页中指定xxx公司版权所有的信息)
特殊的转义字符 : © ----> © 版权所有
® ----> ® 注册商标
---->代表 一个空格
 ----->代表两个空格
<sub>下标</sub>
<pre>原样输出</pre> 按照规定的格式将pre中内容原封不动的展示浏览器中
列表标签 --- 网页中导航栏使用居多(垂直导航栏)
<!--无序列表 ul标签和li标签组成的
ul默认的属性 type="disc" 指定li标签在浏览器中展示的列表项的标记 (小黑圆圈)
-->
学生管理系统
<ul>
<li>添加学生</li>
<li>查询学生</li>
<li>修改学生</li>
<li>删除学生</li>
</ul>
<!--有序列表 ol和li-->
<ol type="1">
<li>添加学生</li>
<li>查询学生</li>
<li>修改学生</li>
<li>删除学生</li>
</ol>
<!--定义列表
dl dt dd
-->
<dl>
<dl>
<dt>管理员</dt>
<!--dd列表项-->
<dd>admin</dd>
<dd>高圆圆</dd>
<dd>张三</dd>
</dl> 表单标签中 method属性="get/post" get和post区别
1)是否提交在地址栏上
get方式将数据提交到地址栏上的, action提交的地址url?key1=value1&key2=value2....(浏览器默认get提交)
post提交方式,不会将数据提交到地址栏上,在浏览器(F12--进入调试器)--->"网络"里面的负载 可以看到表单提交的数据 (post提交针对中文会出现乱码!)
2)是否适合私密数据提交
get提交方式,相对post来说不安全,地址栏是可以直接看到明文的敏感数据
post提交方式,相对get来说安全,隐私数据可以看到的
get/post提交的数据(密码等等)----加密的! md5加密(信息摘要算法)
"123456" + 加盐 "qianfeng" 保证不会被破解
3)提交数据大小是否有限制
get提交方式,在地址栏上提交数据,提交数据大小有限制!
post提交方式,是在浏览器中 网络中的请求头后面的负载里面可以直接不断去提交数据,没有大小限制Day3
超链接标签的两种用法方式
两种用法
1)普通前端页面跳转 <a href="指定另一个资源文件" target="_blank/_self">超链接的名称</a>
2)锚链接
在同一个页面下
a)打锚点,创建跳转标记
<a name="锚点名称"></a>
b)创建跳转链接
<a href="#锚点名称">跳转链接的名称</a>
在不同页面中
a)在另一个页面的某个位置,打锚点
<a name="锚点名称"></a>
b)在当前页面中创建跳转链接
<a href="链接到另一个html地址#锚点名称">跳转链接的名称</a>
前端跳转:最常用的超链接 a标签
前端javascript 简称"js" 通过按钮设置点击---->触发点击函数---> js里面逻辑代码 table标签中常用的属性
table属性
border:表格边框线
width:表格宽度
height:高度
align:对齐方式
bgcolor:表格背景色
cellspacing:设置边框和单元格之间的空隙
...框架标签的概念
CSS使用方式
CSS:层叠样式表 Cascading Style Sheet
html:设计页面结构,通过CSS给页面添加修饰效果
给标签添加样式使用方式
方式1:行内样式
每一个html标签都有属性 style(样式)
style="样式属性名称1:样式值1;样式属性名称2:样式值2;...."
样式属性名称:需要掌握一些常用样式属性
弊端:一次只能控制一个标签,代码量大,不太适合!
应用场景:局部位置某个标签需要设置,完全用行内样式
方式2:
内联样式(css内部方式)
在head标签体中书写style标签
常用标签名称{
样式属性名称1:值1;
样式属性名称2:值2;
...
}
弊端：html标签和css代码混合使用，不利于后期项目维护
方式3：
前端工程师他们使用第三种!
外联方式(CSS外部样式)
1)需要在css文件夹中新建一个后缀名是.css的文件
2)使用CSS选择器{
样式属性名称1:值1;
样式属性名称2:值2;
...
}
3)在当前页面导入css文件
在head标签体中
rel="stylesheet":固定格式 必须写,"关联样式库中样式"
<link href="css/xxx.css" rel="stylesheet" />CSS基本选择器分类
css基本选择器分类:
标签名称选择器
标签名称{
样式名称1:值1;
样式名称2:值2;
...
}
class(类)选择器
在同一个html页面中,所有的标签中可以
指定同名class="class属性值"
.class属性值{
样式名称1:值1;
样式名称2:值2;
...
}
类选择器 优先级高于 标签名称选择器
id选择器
在标签中指定id属性="id值"(不能以数字开头,字母开头)
id属性值在同一个html页面中,必须是 "唯一的",可以解决浏览器的兼容性!
#id属性值{
样式名称1:值1;
样式名称2:值2;
...
}
优先级
结论:id选择器 > class类选择器 > 标签名称选择器
其他选择器:
子元素选择器
选择器1 选择器2{ 选择器2选中的标签是选择器1选中标签的子标签
样式名称:值;
...
}
并集选择器(组合选择器)
选择器1,选择器2,选择器3....{
样式属性名称:值;
...
}CSS伪类选择器
描述任意标签的一种状态
四个状态
link:鼠标没有访问过这个元素(标签)的状态
hover:鼠标经过这个元素的状态
active:鼠标激活状态(点击并且没有松开的状态)
visited:鼠标已经访问过这个元素的状态
在样式书写格式
选择器名称(标签名称/class/id):状态名称{
样式名称:值;
...
...
}
注意名称:状态名称不区分大小写 举例: Link link LINK
a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！
a:active 必须在 CSS 定义中的 a:hover 之后才能生效！
伪类名称对大小写不敏感。
hover状态使用最多的!CSS背景样式属性
css背景属性
background-color:背景颜色 (颜色名称/#ff0000十进制数据)
background-image:url(图片地址)
background-repeat:设置图像是否重复以及如何重复
默认值:repeat( 图片尺寸达不到当前屏幕分辨率--x轴/y轴都重复)
repeat-x:x轴重复
repeat-y:y轴重复
no-repeat:不重复
background-attachment:背景附着: 设置fixed 固定,(背景图像)不会随着页面滚动而滚动
background-position:设置背景图像的起始位置
默认值 top left
center center
bottom right
CSS背景简写属性 :背景的简写属性:可以声明一个样式将上面的所有样式加入
background:background-color background-image background-repeat backgound-position;Day4
CSS的框模型(盒子模型)
"万物皆盒子" 前端世界中 ----------> div+css进行层级布局
div:将任何标签使用div包裹起来,通过id/class/标签名称选择器,控制器样式
块级元素:
div 占一行标签
h1-h6 占一行内容
行级元素:
<br/> <span>
将html页面中任何标签 看成一个"盒子"
盒子
容量:width/height
厚度: 边框 border
内边距:padding
外边距:marginDay5
6个常见的CSS样式属性
CSS常见样式属性
文本对齐方式:text-align:left/center/right;
文本装饰:text-decoration:none/underline/line-through/overline
文本样式:color:颜色值;
字体大小:font-size:像素值px;
字体粗细:font-weight:blod; 适当加粗
字体格式:font-family:"字体库中的格式 楷体/黑体..."
字体中字符间距:letter-spacing:像素大小
背景样式属性:
背景颜色:background-color:颜色值;
背景图像:background-image:url(图像地址);
背景是否重复:background-repeat: no-repeat/repeat/repeat-x/repeat-y;
背景图像的起始位置:background-position:图像的位置 图像在浏览器中显示的位置
top left
center center
bottom right
边框样式:
边框的简写属性:
border:border-wdith border-style border-color ;
border:1px solid black;
列表样式--给ul无序列表/ol有序列表
list-tyle-type:none;去掉前面的标记
list-style-image:自己给列表项li前面自定义图像
url(图像地址) ;div标签和span标签有什么区别
div属于块级元素
占一行空间,多个div自动换行
span属于行级元素
仅仅是自己标签元素本身,不会换行
span标签应用场景使用计算机进行文件(人机交互)操作---两种方式
图形界面化方式(简单直观,易于上手)
命令行方式:
windows系统(不区分大小写)/Linux系统(完全区分大小写)/MAC系统
都需要一些常用命令
windows系统进入dos窗口输入指令
进入dos窗口方式:
1)计算机---开始菜单--->输入cmd---->命令行提示符----右键---管理身份运行
2)windows键+r键---->输入cmd---->打开dos窗口 (推荐)计算机中常用dos命令
1)盘符切换 输入盘符号(不区分大小写):
C:\Users\Administrator>d:
D:\>
2)进入到指定目录(文件夹)中 cd 指定的文件夹名称 cd(change Directory)
D:\>cd ee_2302
D:\EE_2302>
3)回退上一级目录 cd..
D:\EE_2302>cd..
D:\>
4)cd 进入多级目录 cd 路径
D:\>cd D:\EE_2302\jc_day5\code
D:\EE_2302\jc_day5\code>
5)直接从多级目录回退根目录中 cd\
D:\EE_2302\jc_day5\code>cd\
D:\>
6)dos窗口执行过的命令比较多,清除屏幕指令 cls (clear screen) Linux系统中:clear指令
7)指定目录中创建子文件夹: md 文件夹的名称 md(make directory)
D:\EE_2302\jc_day5\code>md aaa
D:\EE_2302\jc_day5\code>
8)在文件夹中创建文文件: copy con 文件名称(带后缀) ---回车一下
输入你文件内容--->ctrl+z 文件输入完毕---->回车一下-->创建完毕
D:\EE_2302\jc_day5\code\aaa>copy con a.txt
hello,dos命令^Z
已复制 1 个文件。
D:\EE_2302\jc_day5\code\aaa>
9)删除指定的文件 del 文件的名称
D:\EE_2302\jc_day5\code\aaa>del hello.java
D:\EE_2302\jc_day5\code\aaa>
10)批量删除 del *.后缀名
举例: del *.txt 将后缀名 .txt文件全部删除
D:\EE_2302\jc_day5\code\aaa>del *.txt
D:\EE_2302\jc_day5\code\aaa>
11)删除目录(文件夹) rd 目录(文件夹)名称 rd(remove directory)
本身特点:只能删除空目录
D:\EE_2302\jc_day5\code>rd aaa
D:\EE_2302\jc_day5\code>rd a (a文件夹里面有内容,不能直接删除)
目录不是空的。
12)删除带内容的目录(文件夹)的扩展指令 rd /s 文件夹名称 :询问是否删除带内容的这个目录
D:\EE_2302\jc_day5\code>rd /s a
a, 是否确认(Y/N)? y
D:\EE_2302\jc_day5\code>
13)暴力删除带内容的目录(文件夹) rd /s /q 文件夹名称:暴力删除(不询问直接干掉)
D:\EE_2302\jc_day5\code>rd /s /q hello
D:\EE_2302\jc_day5\code>
14)罗列指定目录下面的所有文件以及文件夹的详细信息: dir
D:\EE_2302\jc_day5\code>dir
驱动器 D 中的卷是 develop
卷的序列号是 BA64-B834
D:\EE_2302\jc_day5\code>dir
驱动器 D 中的卷是 develop
卷的序列号是 BA64-B834
D:\EE_2302\jc_day5\code 的目录
2023/02/17 11:23 <DIR> .
2023/02/17 11:23 <DIR> ..
2023/02/17 11:23 0 a.txt
2023/02/17 09:45 <DIR> CSS_02
1 个文件 0 字节
3 个目录 58,489,696,256 可用字节
D:\EE_2302\jc_day5\code>
15)系统相关的指令:ipconfig 查看本机ip地址
ping ip地址:查看本机和这台机器之间是否建立通信
C:\Users\Administrator>ping 10.35.165.40
正在 Ping 10.35.165.40 具有 32 字节的数据:
来自 10.35.165.40 的回复: 字节=32 时间=1ms TTL=128
来自 10.35.165.40 的回复: 字节=32 时间<1ms TTL=128
来自 10.35.165.40 的回复: 字节=32 时间<1ms TTL=128
来自 10.35.165.40 的回复: 字节=32 时间=1ms TTL=128
10.35.165.40 的 Ping 统计信息:
数据包: 已发送 = 4，已接收 = 4，丢失 = 0 (0% 丢失)，
往返行程的估计时间(以毫秒为单位):
最短 = 0ms，最长 = 1ms，平均 = 0ms
cd 用的比较频繁 (进入指定目录或者多级目录)
扫一扫
1243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
