第一阶段：web前端开发基础环境配置1

来源：互联网发布：python写登录接口编辑：程序博客网时间：2024/05/16 13:57

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>

<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 显示

0 0