[关闭]
@artman328 2020-07-28T11:18:10.000000Z 字数 8325 阅读 1424

世界技能大赛 Web 技术项目集训资料

WSC 世界技能大赛 Web技术

一、世界技能大赛 Web 技术项目介绍

1、Internet 和 Web

Internet
互联网，强调基于硬件设备设施的网络互联，主要指物理网络本身。
Web
信息网络，强调网络上的信息互联，主要通过链接将全球信息互联。如点击一个网站上的链接会转到其它网站……

2、Web应用

基于 HTTP/HTTPS 协议的“请求-响应（Request/Response）”模型的应用程序。典型的如网站、手机APP等。它由以下几个部分构成。

(1) 客户端（如：浏览器，基于HTTP协议的其它应用程序等）

客户端程序是那些在计算机或移动设备上与人直接交互的应用程序，如：浏览器、基于 HTTP 协议的其它应用程序等。这些应用程序接受用户输入，将用户的请求（Request）发送到服务器端。
最常用的客户端是各种浏览器。现代浏览器都内置了一个计算机语言编程平台——JavaScript，它包括了一个语言解释器（用于解释并执行程序指令）和常用的程序库（一些通用功能函数和对象）。在这个平台上编程，浏览器就可以和用户直接互动（如用户输入的数据验证，拖拽操作，互动特效等），必要时才将请求发往服务器。在这个平台上的编程叫客户端编程。

(2) WEB 服务器（如：Apache,IIS等）

Web 服务器程序是接受来自客户端请求（Request）并给出响应（Response）的应用程序。Web服务器的主要任务是根据请求将服务器上的各种资源发送给客户端。这些资源包括各种文件，如：网页、图片、音乐、视频等。
在服务器上，根据预定规则，服务器会将一些请求的特定资源（一般为程序文件）再发送给特定的程序解释器进行处理，在处理过程中可能会和数据库服务器进行交互以便对数据库中的数据进行增、删、改、查等操作。程序解释器处理完后将结果交给 Web 服务器，Web 服务器再将其发往客户端。

(3) 数据库服务器（如：MySQL、SQL Server等）

数据库服务器用以存储WEB应用的数据。

3、世界技能大赛 Web 技术项目

世界技能大赛的 Web 技术项目涉及Web应用设计与开发的各个方面，主要内容有：

（1）UI 设计

UI（User Interface，用户界面）设计，主要考查选手根据企业文化、网站内容、目标受众等使用图形图像工具对用户界面（网页、移动APP界面等）进行设计的能力。
未来就业方向：UI设计、广告设计

（2）UI布局

主要考查选手使用 HTML/CSS/JavaScript 对设计好的UI进行实现的能力。
未来就业方向：UI实现

（3）前端开发

主要考查选手使用前端框架开发AJAX应用的能力。
未来就业方向：前端开发

（4）后端开发

主要考查选手使用 PHP WEB 框架开发 WEB 应用以及 API 的能力（含数据库的设计和使用能力）。
未来就业方向：后端开发

（5）内容管理系统（Content Management System, CMS）

主要考查选手对业界著名的内容管理系统进行使用、主题开发、插件开发的能力。

* 第45届世界技能大赛还包含了增强现实（Augment Reality, AR)应用的制作能力。

二、WEB 应用的运作过程

WEB 应用的运作过程可以下图来说明。

Created with Raphaël 2.1.2用户用户浏览器浏览器WEB服务器WEB服务器文件系统文件系统程序解释器程序解释器数据库服务器数据库服务器输入网址 或 点击链接 或 提交表单请求一般资源特定资源增、删、改、查数据结果业务处理结果资源响应得到结果

在web应用程序中，浏览器和服务器之间是通过 HTTP/HTTPS 协议来交互的。

HTTP 协议，称为超文本传输协议，HTTPS 协议，称为安全的 HTTP 协议。超文本传输协议定义了客户端与服务器端通信的规范。HTTP 是一种无状态协议，意思是服务器端在接受请求并给出响应的过程中，并没有记住客户端任何信息的规范和机制，客户端的每一次访问，对服务器端来说，客户端都是陌生的。

1、请求（Request）

请求由请求的资源地址（URL) 和请求数据段（请求头和请求体）构成。

（1）URL

客户端向服务器端发出请求，是基于 URL 进行的，URL(Universal Resource Locator) 叫做统一资源定位器。

URL 的基本形式是：

http://域名（或 IP 地址）:端口/到资源/的具体/路径/资源名
如：
http://www.mysite.com:80/products/images/computer.jpg
http
表明请求是以 http 协议发出的，要求对方也以 http 协议进行响应。
域名
在网络中的计算机是以 ip 地址作为唯一标识的。ip 是诸如： 123.156.210.87 的数字串，不便于记忆。域名与 ip 地址一一对应，便于人们记忆。

浏览器是以 IP 地址的形式发出请求的。人们输入的域名首先被浏览器发送到远程DNS(Domain Name Server)域名服务器，从那里得到对应的 IP 地址，再通过这个地址发出请求。事实上，系统在真正向 DNS 发出查询前，先会向操作系统中的一个特殊配置文件进行查询，如果查询到了对应的 IP ，就不再向 DNS 发出请求了。在 Windows 系统中，这个文件是 C:\Windows\System32\drivers\etc\hosts。在 Linux 和 Unix 系统中，这个文件是 /etc/hosts。
这个文件以如下形式定义了 IP 与 域名的对应关系：
ip            域名
如：
127.0.0.1             www.mysite.com
127.0.0.1             www.example.net
134.179.210.2      www.domywork.org

端口
一台计算机中一般有若干个程序正在与外界通信，从外界来的数据属于哪个程序的？为了区分数据的归属，每个程序在操作系统里都注册了一个号码，用于标明自己的通信身份。这个号码就叫端口号（形象比喻好像一台计算机上为每个程序开了一个通信端口）。从外界来的数据都有识别号，标明自己属于哪个程序，操作系统根据这个识别号将数据传递给同一编号的应用程序。Web服务器的 HTTP 协议的默认端口号是 80，HTTPS 协议的默认端口号为 443。
资源路径
Web服务器上的文件系统的一部分被作为一般资源的存储区域，这个区域从哪个文件夹（目录）开始，这个目录就叫 文档根 DocumentRoot。从文档根到请求的具体资源文件的路径，就是资源路径。例如：
如果把 D:\www\public 定为文档根，服务器域名是 www.mysite.com, 端口号是 8080，以 http 协议请求：
http://www.mysite.com:8080/products/images/computer.jpg
资源的 路径就是： /products/images/
资源在文件系统中的具体位置是：D:\www\public\products\images\
资源名
就是具体的资源文件名。

（2）请求数据

请求数据段是请求的描述（请求头）和数据（请求体）的集合。
在请求描述中，最关键的是请求的行为。
请求的基本行为有 GET(获取)、POST(粘贴)、PUT（放置）、DELETE（删除）等。最为常用的是前面两者。

GET
主要目的是获取。可以携带请求的参数。如：
http://www.mysite.com:8080/user.html?first_name=Billy&last_name=Josh&actived=1
以上请求了文档根路径下的user.html资源，并向服务器传递了三对参数：first_name=Billy, last_name=Josh, actived=1。
POST
主要目的是上传数据，主要用于表单数据的提交。其提交的数据并不附着在 URL 后面，而是在请求体里（不可见）。

2、响应（Response）

响应由服务器给出。响应由响应头和响应数据构成。响应头用于描述响应。在响应头中，有关于响应的状态码。常用状态码是：

200
成功的请求​
403
禁止访问
404
请求的资源不存在
500
服务器内部错误

如果请求得到正常响应，响应数据就是具体的资源。

三、HTML

HTML
Hypertext Markup Language，超文本标记语言，用于确定网页内容结构。

1、HTML标签

HTML文档用标签表示内容结构。标签格式如下：

  1. <开始标签 属性1="值1-1 值1-2 ..." 属性2="值2-1 值2-2 ..." ...>内容</结束标签>

对于没有内容的标签，可写为：

  1. <开始标签 属性1="值1-1 值1-2 ..." 属性2="值2-1 值2-2 ..." ... />
常用属性
id
用于唯一地确定某个标签（不能有重复）。
class
用于确定一组标签，可有空格分隔的多值。

2、HTML网页文档结构

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <!-- 头部内容，用于描述和定义文档 -->
  5.     </head>
  6.     <body>
  7.         <!-- 体部内容，用于展现网页内容 -->
  8.     </body>
  9. </html>

3、头部常用标签

（1）页面编码

  1. <meta charset="编码名称" />

（2）通用元数据

  1. <meat name="名称" content="值" />

（3）页面窗口标题

  1. <title>标题</title>

（4）链接外部文件

  1. <link href="文件URL" rel="关系" type="类型" media="媒体" ... />

（5）链接外部程序文件

  1. <script src="文件URL"></script>

（6）内部CSS

  1. <style>
  2.     ...
  3. </style>

（7）内部程序

  1. <script>
  2.     ...
  3. </script>

4、体部常用标签

(1) 标题 (h1~h6)

h: headline (标题行)

  1. <h1>这是一级标题</h1>

(2) 段落 (p)

p: paragraph （段落）

  1. <p>
  2. 这是段落1。
  3. </p>
  4. <p>这是段落2。</p><p>这是段落3。</p>

这是段落1。

这是段落2。

这是段落3。

(3) 局部文字

span (跨度)

  1. 世界上最高的山峰是<span style="color:red;">珠穆朗玛峰</span>，这我是知道的。

世界上最高的山峰是珠穆朗玛峰，这我是知道的。

(4) 列表

ul: unordered list (无序列表)
ol: ordered list （有序列表）
li: list item （列表项）

  1. <ul>
  2.     <li>列表项 1</li>
  3.     <li>列表项 2</li>
  4.     <li>列表项 3</li>
  5. </ul>
  1. <ol>
  2.     <li>列表项 1</li>
  3.     <li>列表项 2</li>
  4.     <li>列表项 3</li>
  5. </ol>
  1. 列表项 1
  2. 列表项 2
  3. 列表项 3

(5) 表格

table: 表格
thead: table head, 表头
tbody: table body, 表体
tr: table row, 表格行
th: table head cell, 表头单元格
td: table data cell, 表格数据单元格

  1. <table>
  2.     <thead>
  3.         <tr>
  4.             <th>序号</th>
  5.             <th>姓名</th>
  6.             <th>性别</th>
  7.             <th>出生日期</th>
  8.             <th>部门</th>
  9.         </tr>
  10.     <thead>
  11.     <tbody>
  12.         <tr>
  13.             <td>1</td>
  14.             <td>李明</td>
  15.             <td>男</td>
  16.             <td>1987-08-20</td>
  17.             <td>人事</td>
  18.         </tr>
  19.         <tr>
  20.             <td>2</td>
  21.             <td>张小敏</td>
  22.             <td>女</td>
  23.             <td>1989-12-10</td>
  24.             <td>公关</td>
  25.         </tr>
  26.         <tr>
  27.             <td>3</td>
  28.             <td>周娜</td>
  29.             <td>女</td>
  30.             <td>1990-02-10</td>
  31.             <td>公关</td>
  32.         </tr>
  33.     </tbody>
  34. </table>
序号 姓名 性别 出生日期 部门
1 李明 男 1987-08-20 人事
2 张小敏 女 1989-12-10 公关
3 周娜 女 1990-02-10 公关

(6) 表单

form: 表单

  1. <form action="/add-contact.php" method="post">
  2.     标签和输入域
  3. </form>

(7) 标签

label: 标签

  1. <label for="">文字内容</label>

(8) 文本输入

input: 输入

  1. <input type="text" id="name" name="name" value="" />

(9) 密码输入

password: 密码

  1. <input type="passowrd" id="password" name="password" value=""/>

(10) 下拉框（单选）

  1. <select id="book" name="book">
  2.     <option value="1">Java 面向对象程序设计</option>
  3.     <option value="1">关系数据库基础</option>
  4.     <option value="1">Git 应用基础</option>
  5.     <option value="1">Linux 操作系统基础</option>
  6.     <option value="1">Laravel 框加编程</option>
  7. </select>

(11) 下拉框（多选）

  1. <select id="book" name="book" multiple>
  2.     <option value="1">Java 面向对象程序设计</option>
  3.     <option value="1">关系数据库基础</option>
  4.     <option value="1">Git 应用基础</option>
  5.     <option value="1">Linux 操作系统基础</option>
  6.     <option value="1">Laravel 框加编程</option>
  7. </select>

(12) 单选钮

  1. <input type="radio" name="gender" value="M" /> 男
  2. <input type="radio" name="gender" value="F" /> 女

(13) 多选框

  1. <input type="checkbox" name="hobbie" value="运动"> 运动
  2. <input type="checkbox" name="hobbie" value="阅读"> 阅读
  3. <input type="checkbox" name="hobbie" value="看电影"> 看电影
  4. <input type="checkbox" name="hobbie" value="听音乐"> 听音乐

(14) 日期输入

  1. 出生日期：<input type="date" value="" />

(15) 数值输入

  1. 数量：<input type="number" name="quantity">

(16) 选择文件

  1. <input type="file" name="uplaod_file" />

(17) 通用容器标签

div: division, 部分，区域

  1. <div class="important">
  2.     <h2>Hello</h2>
  3.     <p>...</p>
  4. </div>

(18) 图像

  1. <img src="/img/avatar.jpg" alt="avatar" />

(19) 链接

  1. <a href="链接地址">内容</a>

(20) 按钮

  1. <button>文字内容</button>

四、CSS

CSS
Cascade Style Sheet，层叠样式表，用于确定网页内容的布局和风格。

1、样式定义格式

  1. 选择器 {属性1: 值1; 属性2: 值2; ...}

为便于阅读，通常写成：

  1. 选择器 {
  2.     属性1: 值1; 
  3.     属性2: 值2; 
  4.     ...
  5. }

其中，选择器用于指定选择的标签（或标签集合），值可以是单值或空格分隔的多值。
CSS选择器格式
（a）基本选择器语法

选择器 类型 功能描述
* 通配选择器 选择文档中所有HTML元素
E 元素选择器 选择指定类型的HTML元素
#id ID选择器 选择指定ID属性值为“id”的任意类型元素
.class 类选择器 选择指定class属性值为“class”的任意类型的任意多个元素
selector1,selectorN 群组选择器 将每一个选择器匹配的元素集合并

(b) 层次选择器语法

选择器 类型 功能描述
E F 后代选择器（包含选择器） 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F 子选择器 选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素
E+F 相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面
E~F 通用选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

(c) 动态伪类选择器语法

选择器 类型 功能描述
E:link 链接伪类选择器 选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E:visited 链接伪类选择器 选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E:active 用户行为选择器 选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
E:hover 用户行为选择器 选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
E:focus 用户行为选择器 选择匹配的E元素，而且匹配元素获取焦点

(d) 目标伪类选择器

选择器 功能描述
E:target 选择匹配E的所有元素，且匹配元素被相关URL指向

(e) UI元素状态伪类选择器语法

选择器 类型 功能描述
E:checked 选中状态伪类选择器 匹配选中的复选按钮或者单选按钮表单元素
E:enabled 启用状态伪类选择器 匹配所有启用的表单元素
E:disabled 不可用状态伪类选择器 匹配所有禁用的表单元素

(f) 结构伪类选择器使用语法

选择器 功能描述
E:first-child 作为父元素的第一个子元素的元素E。与E:nth-child(1)等同
E:last-child 作为父元素的最后一个子元素的元素E。
E:root 选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同
E F:nth-child(n) 选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0.
E F:nth-last-child(n) 选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同
E:nth-of-type(n) 选择父元素内具有指定类型的第n个E元素
E:nth-last-of-type(n) 选择父元素内具有指定类型的倒数第n个E元素
E:first-of-type 选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同
E:last-of-type 选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同
E:only-child 选择父元素只包含一个子元素，且该子元素匹配E元素
E:only-of-type 选择父元素只包含一个同类型子元素，且该子元素匹配E元素
E:empty 选择没有子元素的元素，而且该元素也不包含任何文本节点

注1：“ul>li:nth-child(3)”表达的并不是一定选择列表ul元素中的第3个子元素li，仅有列表ul中第3个li元素前不存在其他的元素，命题才有意义，否则不会改变列表第3个li元素的样式。

注2：:nth-child(n) 中参数只能是n，不可以用其他字母代替。

注3：:nth-child(odd) 选择的是奇数项，而使用:nth-last-child(odd) 选择的却是偶数项

(g) 否定伪类选择器

选择器 功能描述
E:not(F) 匹配所有除元素F外的E元素

(h) 属性选择器语法

选择器 功能描述
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute =value]
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。

注：例<div class="links item"></div>其中a[class="links"]{……} 是找不到匹配元素，只有a[class="links item"]{……}才匹配

2、display 属性

3、position 属性

4、盒子模型相关属性

(1) width

(2) height

(3) margin

(4) padding

(5) border

(6) box-sizing

5、字体字号属性

6、色彩相关属性

五、JavaScript

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注