1.前端开发基础视频:操作系统通用快捷键操作(win快捷键)
1.1
Win+D:快速显示桌面
Win+L:快速锁定计算机
Win+E:快速打开资源管理器
Ctrl+Shift+ESC:打开任务管理器
1.2前端开发基础视频:操作系统通用快捷键操作(编辑快捷键)
Alt+F4:关闭当前活动项目或退出活动程序
Alt+Tab:在打开的项目中进行切换
Ctrl+F4:关闭活动文档(在程序中能够让你同时打开多个文档)
F2:重命名选定的项目
2认识大前端
2.1 解决用户体验
2.2 web(网页) 移动端
2.3学习态度很重要,多做练习
3认识网页
3.1 网页的组成
文字,图片,按钮,输入框,视频。。。元素组成。
3.2 Web标准
W3c(万维网联盟)
☞结构标准 html
☞表现标准 Css
☞行为标准 js
3.4 浏览器与服务器之间的那点事((✿◡‿◡))
http协议 请求报文
浏览器---------------------------->服务器
<-----------------------------
响应报文
http:浏览器与服务器之间传输的一种规范
https:加密处理
Url地址:
url协议:平时我们写的网址就是url地址
url协议:规定url地址的格式
协议规定格式:scheme://host.domain:port/path/filename
scheme:定义因特网服务的类型。常见的就是http
host:定义域主机(http的默认主机是www)
domain:定义因特网域名 比如:w3school.com.cn
port:定义端口号(网页默认端口:80)
path:网页所在服务器上的路径
filename:文件名称
4 认识html
4.1概念
Hyper text markup language(超文本标记语言)
超文本:能够实现网页跳转的文本(超链接)
标记:html中的标签
4.2html
<!DOCTYPE html>
<html lang="en">
<!-- 根标签 -->
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<!-- 根标签 -->
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<span style="font-size:18px;"><!DOCTYPE html> 文档类型</span>
<span style="font-size:18px;"> <head></head> html文档头部分</span>
<span style="font-size:18px;"> <title></title> 网页的标题</span>
<span style="font-size:18px;"> <body></body> html结构的主体部分</span>
html:后缀名决定文件的打开方式。
4.3 标签的分类
☞单标签:只有开始标签没有结束标签。
<span style="font-size:18px;">例如:<!DOCTYPE html></span>
☞双标签:又开始标签和结束标签。
<span style="font-size:18px;">例如:<body></body></span>
4.4标签关系分类
☞并列关系(兄弟)
<span style="font-size:18px;"> <head></head>
<body></body></span>
☞嵌套关系(包含)
<span style="font-size:18px;"><head>
<title></title>
</head></span>
4.5sublime快捷键使用:
sublime快捷键使用:
http://blog.csdn.net/moyan_min/article/details/11530751
5html标签介绍
5.1单标签
☞文本换行标签
<span style="font-size:18px;"><br></span>
☞横线标签
<span style="font-size:18px;"><hr></span>
5.2双标签
☞段落标签
<span style="font-size:18px;"><p>
这是一行文字
</p>
<p>
这是一行文字
</p></span>
☞标题标签
注意:标题标签只能 取数字1--6
<span style="font-size:18px;"><h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<h4>这是一个标题</h4>
<h5>这是一个标题</h5>
<h6>这是一个标题</h6></span>
☞文本标签
<span style="font-size:18px;"><font></font>
<font color="pink" size="10">优美的文字</font>
</body></span>
☞文本格式化标签
<span style="font-size:18px;">文字加粗显示:<strong></strong> <b></b>
<strong>
该减肥啦!!!
</strong></span>
☞文字斜体<span style="font-size:18px;"><em></em> <i></i></span>
☞文字删除线
<span style="font-size:18px;"><del>删除线标签</del>
<s>删除线标签</s></span>
☞文字下横线标签
<span style="font-size:18px;"><ins>文字下横线</ins>
<u>文字下横线</u></span>
5.3图片标签(img)
<span style="font-size:18px;"><img></span>
属性:src:设置显示图片(图片名称或者图片路径)title:用来设置鼠标放到图片上显示的文字
<span style="font-size:18px;"> <img src="1.png" title="这是老郭"></span>
alt:当图盘无法正常显示的时候,对图片的描述
width: 用来设置图片宽度
height: 用来设置图片高度
<span style="font-size:18px;"> <img src="1.png" title="老郭" alt="这是老郭" width="100" height="100"></span>
5.4图片路径
5.4.1相对路径(重点)
5.4.2绝对路径
凡是带有磁盘路径的或者网站地址的都是绝对路径
例如:D:\a\1.png www.baidu.con/imags/1.png
5.5超链接
<span style="font-size:18px;"><span style="font-size:18px;"><a href="http://www.baidu.com">百度</a>
<a href="chun.html">春天</a>
</span><pre name="code" class="html"><span style="font-size:18px;"><a href="xia.html">夏天</a></span></span>
属性:title:当鼠标放到超链接上显示的文字
target="_self" 默认值 网页在当前页面中打开
target="_blank" 网页在新窗口中打开
<span style="font-size:18px;"><head>
<base target="_blank"></base>
</head></span>
5.7锚链接介绍(a)
☞任何一个表情设置id属性,并取值
<span style="font-size:18px;"><span style="font-size:18px;"><p id="db">你好</p></span></span>
☞给a标签设置href属性 "#id名称"
<span style="font-size:18px;"><span style="font-size:18px;"> <a href="#db">返回顶部</a></span></span>
文字和图片都可以设置超链接
5.8简单的下载功能
a标签中通过给href属性设置一个压缩文件,即可实现下载功能。
5.9超链接不跳转到任何页面
<span style="font-size:18px;"><span style="font-size:18px;"><a href="#"></a></span></span>
5.10html特殊字符
空格符:
< 小于号 <
> 大于号 > ......
6列表
6.1无序列表(ul)
<span style="font-size:18px;"><span style="font-size:18px;"> <ul>
<li></li> <!-- 列表项 -->
<li></li>
<li></li>
.......
<li></li>
</ul></span></span>
<span style="font-size:18px;"><span style="font-size:18px;">例子:<ul type="square">
<li>苹果</li> <!-- 列表项 -->
<li>苹果</li>
<li>苹果</li>
<li>苹果</li>
</ul>
<span style="color:#3333FF;">属性介绍:type="square" 小方块显示
type="circle" 小圆圈</span></span></span>
6.2有序列表(ol)
<span style="font-size:18px;"><span style="font-size:18px;"> <ol>
<li></li>
<li></li>
<li></li>
</ol>
type属性:A,a, i(小写的罗马数字) I(大写的罗马数字)
start="3" li前面的显示从第几个开始
把大象放冰箱分几步?
<ol type="a" start="3">
<li>打开冰箱门</li>
<li>把大象放进去</li>
<li>把冰箱门关上</li>
</ol>
</span></span>
6.3自定义列表(dl)
<span style="font-size:18px;"><span style="font-size:18px;"> <dl>
<dt></dt> 小标题
<dd></dd> 列表项
<dd></dd>
<dd></dd>
</dl>
例子:<dl>
<!--小标题 -->
<dt>了解我们</dt>
<dd>人才招聘</dd>
<dd>关于我们</dd>
<dd>新闻中心</dd>
<dd>公益社区</dd>
<dd>移动客户端</dd>
</dl>
</span></span>
7补充
放置背景音乐
<span style="font-size:18px;"><span style="font-size:18px;"><embed src="1.mp3" hidden="ture"></span></span>
文字滚动
<span style="font-size:18px;"><span style="font-size:18px;"><marquee behavior="slide" direction="up" width="400" height="400" bgcolor="blue">
跑起来
</marquee></span></span>
页面自动滚动效果:<marquee>...</marquee>
中间的内容可以为:文字,图片,也可以是由程序生成的文字或图片
属性:height 设置高度 width 设置宽度 bgcolor 设置背景颜色
behavior:设置滚动的方式
alternate:表示在两端之间来回滚动
scroll:表示由一端滚动到另一端,会重复
slide:表示由一端滚动到另一端,不会重复
direction:设置滚动的方向
down:向下滚动 left:向左滚动 right:向右滚动 up:向上滚动
loop:设置滚动次数 -1 一直滚下去
页面背景音乐:<enbed/>
属性:src 设置音乐路径
hidden:隐藏播放按钮 true 隐藏 false 显示