一、windows操作系统相关(了解)
1.1 window界面
1.2显示文件的扩展名和详细信息
win8,win10下
在任意文件夹下
点选详细信息和勾选文件扩展名
win7下
任意文件夹下
1.3 快捷操作
Ctrl+C:复制
Ctrl+V:粘贴
Ctrl+X:剪切
Ctrl+S:保存
Ctrl+A:全选
Ctrl+Z:撤销上一个操作
Ctrl+Y:还原上一个操作
win+E:打开资源管理器
Alt+tab:切换程序(注意整个操作过程alt常按)
Win+D(鼠标点击屏幕的右下角):切换到桌面
Win+R:快速运行,打开软件,cmd命令行等
calc:运行计算器
mspaint:运行画图工具
notepad:运行记事本
。。。。。
Win+L:锁屏。
F5:刷新
Alt +f4:退出程序
其它:
Win+数字键:打开/显示超级任务栏第N个图标代表的程序
Win+方向键:最大化、还原/最小化窗口
Ctrl+Alt+Del:显示以下选项:锁定该计算机、切换用户、注销、更改密码和启动任务管理器
CTRL+SHIFT+ESC:打开任务管理器
二 课程目标及课程介绍
1 课程的目标
如何制作网页,达到升级就业班的水准
2 认识网页
网页上有什么:
文本、图片、输入框、按钮、视频、音频。。。。
3 基础班主要内容
HTML 骨架 负责页面的结构
CSS 衣服 负责美化页面
JavaScript 动作 负责让网页更加的生动
三 HTML
1 什么是html
超文本标记语言
hyper text markup language
超文本: 可以比文本做更多的事情
标记: 使用符号来声明一些意义(HTML标记)
语言: 交流沟通用的工具
是我们和浏览器沟通交流的工具,使用特殊标记来声明一些意义的
是使用特殊标记来和浏览器交流沟通的语言
2 html的页面结构
<!DOCTYPE html> 用来声明文档类型 (document)
<html> 用来声明网页结构的开始和结束
<head> 网页的头部
<title></title>
</head>
<body></body> 网页的主体部分,网页上看见的所有内容都是在body里
</html>
3 开发者工具查看页面结构
1 在页面上右键
2 选择检查
4 第一个简单的页面
1 右键新建文件(文本文件)
2 修改文件名和后缀名(.html)
3 书写页面结构
4 保存
四 HTML标签的学习
标签 = 标记 = 元素
1 标题标签(header)
代码:
1 <h1></h1>
特点:
h1 - h6,没有h7
可以将文字加粗,改变字体的大小,字体大小从h1到h6,依次变小
独自占据一整行
语义:
让文字成为标题
2 字体标签(font)
2 <font color="red" size="2" face="microsoft yahei"></font>
作用:
改变文本的大小、颜色、字体
通过color 属性改变文本的颜色,通过size属性改变文本的大小、face属性改变文本的字体
size要求从1-7
3 标签中属性语法
属性 = 标签的特征
1 一定要写在开始标签里面
2 使用方式: 属性名="属性值"
3 多个属性同时存在的时候,要使用空格隔开
4 水平线(horizontal rule)
标签:
3 <hr />
作用:
在浏览器上画一条横线,默认是和浏览器一样宽
标签的分类:
单标签:
不是由一对开始和结束标记形成
比如:水平线标签
双标签:
由一对开始和结束标记形成
比如:h1,font
5 段落标签(paragraph)
标签:
4 <p></p>
作用:
让一段文本成为段落,这个标签会独自占据一行,还会跟其他内容有上下间距
语义:
段落
6 换行标签(break)
标签:
5 <br />
作用:
让内容换行
7 strong、ins、em、del和b、u、i、s标签
标签 | 作用 | 用法 |
strong | 给文本加粗 | <strong></strong> |
em | 把文本变成斜体 | <em></em> |
ins | 下划线 | <ins></ins> |
del | 删除线 | <del></del> |
8 开发工具的介绍及使用
8.1 主流开发工具
sublime 轻量级的 插件非常丰富
webstrom 重量级 插件相对少
Dreamweaver 美工用的比较多,偏向于设计方向
8.2 sublime的使用
1 新建文件 Ctrl+N(文件-》新建文件)
2 打开文件 文件-》打开文件
3 打开文件夹 文件-》打开文件夹
9 图片标签(image)
标签:
6 <img src="图片的位置" />
作用:
在浏览器中放置一张图片
相关属性:
alt 当图片记载异常的时候显示的文字说明
title 当鼠标停留在标签上时提示的文字
10 路径问题
路径:某一个文件存储在计算机当中的位置
10.1 绝对路径
从盘符开始,到达目标文件所经过的所有文件夹
盘符+文件夹+文件名+后缀名
缺点:
可移植性很差
7 <img src="F:\1028 广州前端5期\1029 HTML基础第一天\04 - 源代码\5.png" />
10.2 相对路径
从一个文件到另一文件所经过的所有的文件夹
三种情况
a) 图片和文件在同一级目录
8 <img src="5.png" />
b) 图片在页面的下一级目录
9 <img src="图片/5.png" />
c) 图片在页面的上一级 目录
10 <img src="../1.gif" />
11 超链接标签(anchor)
代码:
11 <a href="要跳转的页面的路径"></a>
作用:
a ) 可以跳转到别的页面
通过href属性指定要跳转的页面的路径,如果要跳转的别人的网站,要加上:http://
相关属性:
target 用于指定跳转的方式
_blank 在一个新的空白的页面打开要跳转的网页
_self 在当前页面打开要跳转的网页
b) 在页面上定位元素
12 <!-- 1 必须有一个在顶部的标签,这个标签有个id属性 -->
13 <p id="target">顶部</p>
14 <!-- 2 有一个a标签,a标签的herf属性指向刚才顶部id -->
15 <a href="#target">回到顶部</a>
c) 用于下载文件(强烈建议不要使用)
16 <a href="5.zip">下载图片</a>
注意:
使用a标签下载的时候,如果浏览器认识这个文件,会直接打开
如果浏览器不认识这个文件,直接下载。
12 base标签
base标签用于统一设置页面上所有a标签的跳转方式,取决于target属性
17 <base target="_blank">
要求:
base标签必须写在head里面
a标签没有设置自己的跳转方式
13 有序列表(ordered list)
用法:
18 <ol>
19 <li>北京</li>
20 <li>上海</li>
21 <li>广州</li>
22 <li>深圳</li>
23 </ol>
语义:
有序的列表
14 无序列表(unordered list)
代码:
24 <ul>
25 <li>内容</li>
26 <li>内容</li>
27 <li>内容</li>
28 <li>内容</li>
29 </ul>
语义:没有顺序的列表
15 自定义列表(definition list)
30 <dl>
31 <dt>小标题</dt>
32 <dd>列表项</dd>
33 <dd>列表项</dd>
34 <dd>列表项</dd>
35 <dt>小标题</dt>
36 <dd>列表项</dd>
37 <dd>列表项</dd>
38 <dd>列表项</dd>
39 </dl>
自定义列表:
1 有小标题和列表项之分,列表项跟小标题是从属关系
2 小标题和列表项之间存在缩进
五、浏览器与服务器(了解)
5.1 什么是浏览器
浏览器是指可以显示网页服务器或者文件系统的HTML文件内容,并让用户与这些文件交互的一种软件。
分解:
1 浏览器是软件
2 可以显示HTML文件的内容
3 可以让用户与之交互
5.2 主流浏览器
5.3 浏览器内核
内核(Rendering Engine):可大概译为“渲染引擎”,不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释(如标准通用标记语言下的一个应用HTML、JavaScript)并渲染(显示)网页。
内核的分类:
Trident[ˈtraɪdn:t]:ie , 猎豹安全浏览器,360极速浏览器,百度浏览器...
Gecko[ˈgekoʊ]:Firefox
Webkit[webkit]:Safari
Blink:Chrome,Opera
不同的内核在渲染同一内容的时候会有差别。
浏览器内核渲染页面是从上到下依次渲染。
5.4 什么是服务器
是提供计算服务的设备,具有响应服务请求,并进行处理的能力,因此一般来说服务器应具备承担服务并且保障服务的能力。
分解:
其实就是配置比较高的电脑
可以被别的电脑访问
5.5 浏览器与服务器的交互过程