您现在的位置是：首页 > 前端

当前栏目

C站能力认证任务关卡1-3 Web基础

认证基础 Web 任务能力

2023-09-11 14:22:44 时间

了解HTML, CSS, Javascript的技术应用

参考内容：w3 school (http://www.sz-seo.org/w3cschool/html/index.html)

菜鸟教程 (https://www.runoob.com/html/html-tutorial.html)

根据任务内容简单介绍下相关内容:

1. HTML

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

常见的一些标签：

<html></html>
<head></head>
<body></body>
<h1></h1> //HTML标题
<p></p> //HTML段落
<a href=“http://www.csdn.net”>CSDN</a> //HTML链接
<img src=“logo.jpg” alt=“CSDN”> //HTML图像

HTML元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
HTML 元素以开始标签起始, 以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性
大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）
HTML 文档由嵌套的 HTML 元素构成

HTML属性

HTML 标签可以拥有属性，属性提供了有关 HTML 元素的更多的信息
属性总是以名称/值对的形式出现，比如：name=“value”
属性总是在 HTML 元素的开始标签中规定。

HTML样式

HTML 的 style 属性提供了一种改变所有 HTML 元素的样式的通用方法
例如：<p style="color:red">CSDN</p>

HTML表格

表格由 <table> 标签来定义
每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）
字母 td 指表格数据（table data），即数据单元格的内容
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

HTML列表

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记
无序列表始于 <ul> 标签，每个列表项始于 <li>

<ul>
  <li>Home</li>
  <li>News</li>
</ul>

输出结果如下：

有序列表

有序列表也是一列项目，列表项目使用数字进行标记
有序列表始于 <ol> 标签，每个列表项始于 <li> 标签

<ol>
  <li>China</li>
  <li>Japan</li>
</ol>

输出结果如下：

定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合
自定义列表以 <dl> 标签开始，每个自定义列表项以 <dt> 开始，每个自定义列表项的定义以 <dd> 开始

HTML块元素

HTML <div> 元素是块级元素，它是可用于组合其他HTML元素的容器
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性
HTML <span> 元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

2. CSS

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明
选择器通常是您需要改变样式的 HTML 元素
每条声明由一个属性和一个值组成
属性（property）是您希望设置的样式属性（style attribute），每个属性有一个值。属性和值被冒号分开

h1 {
  color:red;
  font-size:14px;
  }

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
id 选择器以 “#” 来定义
下面的两个 id 选择器，第一个可以定义元素的颜色为蓝色，第二个定义元素的颜色为黄色：

#blue {color:blue;}
#yellow {color:yellow;}

下面的 HTML 代码中，id 属性为 blue 的 p 元素显示为蓝色，而 id 属性为 yellow 的 p 元素显示为黄色

<p id="blue">这个段落是蓝色。</p>
<p id="yellow">这个段落是黄色。</p>

类选择器

在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}

在上面的例子中，所有拥有 center 类的 HTML 元素均为居中
在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 “.center” 选择器中的规则

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素

* {
  text-align: center;
  color: blue;
  }

3. Javascript

JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言
JavaScript 是可插入 HTML 页面的编程代码
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行

Javascript用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间
脚本可被放置在 HTML 页面的 <body> 和 </head> 部分中

JavaScript 函数和事件

通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时
如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数
您可以在 HTML 文档中放入不限数量的脚本
脚本可位于 HTML 的或部分中，或者同时存在于两个部分中
通常的做法是把函数放入部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容

外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码
外部 JavaScript 文件的文件扩展名是 .js
如需使用外部文件，请在 <script> 标签的 “src” 属性中设置该 .js 文件

JavaScript 函数

JavaScript 使用关键字 function 定义函数
函数可以通过声明定义，也可以是一个表达式

以上简单介绍了HTML, CSS, Javascript的一些概念，具体使用请参考网络内容学习，下面任务过程中会针对使用到的内容解释。

任务一

在开源富文本编辑器(https://summernote.org)中实现以下效果：

在这里插入图片描述

1. 实现红色文字

根据HTML段落标签 <p> </p> 和style样式，编写代码如下：

<p style="color: red">CSDN能力认证中心</p>

效果如下：

在这里插入图片描述

2. 实现表格

根据HTML表格标签 <table> </table> <tr> </tr> <td> </td> 和style样式，编写代码如下：

<p style="color: red">CSDN能力认证中心</p>
<table style="width: 200px">                           /*width属性控制表格宽度*/
  <tbody>
    <tr style="background-color: lightgray">           /*background-color属性控制表格背景颜色*/
      <td style="border: 1px solid">C1</td>            /*border属性控制表格边距、形态和颜色*/
      <td style="border: 1px solid">见习工程师认证</td>
    </tr>
    <tr>
      <td style="border: 1px solid">C4</td>
      <td style="border: 1px solid">专项工程师认证</td>
    </tr>
    <tr style="background-color: lightgray">
      <td style="border: 1px solid">C5</td>
      <td style="border: 1px solid">全栈工程师认证</td>
    </tr>
  </tbody>
</table>

效果如下：

在这里插入图片描述

3. 实现交互按钮

根据Javascript按钮标签和函数功能，编写代码如下：

<p style="color: red">CSDN能力认证中心</p>
<table style="width: 200px">                           /*width属性控制表格宽度*/
  <tbody>
    <tr style="background-color: lightgray">           /*background-color属性控制表格背景颜色*/
      <td style="border: 1px solid">C1</td>            /*border属性控制表格边距、形态和颜色*/
      <td style="border: 1px solid">见习工程师认证</td>
    </tr>
    <tr>
      <td style="border: 1px solid">C4</td>
      <td style="border: 1px solid">专项工程师认证</td>
    </tr>
    <tr style="background-color: lightgray">
      <td style="border: 1px solid">C5</td>
      <td style="border: 1px solid">全栈工程师认证</td>
    </tr>
  </tbody>
</table>
<br>
<button type="button" onclick="myFunction()">我要考试</button> /*按钮标签，包含onclick点击属性*/

/*脚本函数实现弹窗功能*/
<script>
  function myFunction(){
    alert("我要考试！");
  }
</script>

效果如下：

在这里插入图片描述

其中表格的样式可以通过内部样式表来设定，如下：

<style>                              /*这里是内部样式表设定*/
table, tr, td {
    border-collapse: collapse;
    border: 1px solid;
}

table {
    width: 200px;
}

.line {
    background-color: lightgray;
}
</style>
<p style="color: red">CSDN能力认证中心</p>
<table>
  <tbody>
    <tr class="line">                /*这里调用样式表的line类*/
      <td>C1</td>
      <td>见习工程师认证</td>
    </tr>
    <tr>
      <td>C4</td>
      <td>专项工程师认证</td>
    </tr>
    <tr class="line">
      <td>C5</td>
      <td>全栈工程师认证</td>
    </tr>
  </tbody>
</table>
<br>
<button type="button" onclick="myFunction()">我要考试</button> /*按钮标签，包含onclick点击属性*/

/*脚本函数实现弹窗功能*/
<script>
  function myFunction(){
    alert("我要考试！");
  }
</script>

拓展任务

完成下图的CSS盒子模型布局

在这里插入图片描述

首先，先确定盒子模型内的所有颜色rgb编码，这里借助PS取色器。

在这里插入图片描述

得到各个颜色rgb编码如下：

盒子	RGB编码
外部盒子背景	252, 221, 156
外部盒子边距	170, 170, 168
内部盒子1, 2, 3, 4, 5, 6背景	197, 208, 142
内部盒子1, 2, 3, 4, 5, 6边距	170, 170, 168
内部盒子7, 8背景	243, 163, 100
内部盒子7, 8边距	243, 163, 100
内部盒子9背景	248, 204, 157
内部盒子9边距	248, 204, 157

使用webstorm建立一个css文件和一个html文件，分别命名为style.css和index.html。

在index.html文件中的 <head> </head> 标签中加入一行引用style.css样式表的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css" />   /*引用style.css外部样式表*/
    <title>Index</title>
</head>

<body>

</body>
</html>

开始在样式表中设置外部盒子模型，分辨率设置1600:900，根据盒子模型定义，实际占宽和占高分别为1600和900，content的width和height就要分别减去外边距(margin)2，边距(border)2，内边距(padding)*2。

@charset "utf-8";
/* CSS Document */

/*外盒设定宽高为1600：900，所以content的宽高为分别减去2倍border，2倍padding，2倍margin*/
.body {
  width: 1520px;
  height: 820px;
  background-color: rgb(252, 221, 156);
  border: 10px solid rgb(170, 170, 168);
  padding: 10px; /*要求边距为20px，由于body盒子内部还有嵌套的盒子，margin设定为10px，所以相加为20px*/
  margin: 20px;
  font-size: 36px;
  font-family: sans-serif;
  color: white;
  text-align: center;    /*盒子内文本设定为水平居中*/
}

在index中加入块元素div，类选择器选择.body类。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css" />
    <title>Index</title>
</head>

<body>
<div class="body">
</div>
</body>
</html>

在chrome中预览效果：

在这里插入图片描述

在样式表中设置内部盒子1和2的模型，content的width和height都是减去四周的margin，border和padding后得出的。

/*内盒1设定宽高为506：205，实际占宽是根据body-width均分3份得出，实际占高是根据body-height均分4份得出*/
.inner1 {
  width: 464px;
  height: 163px;
  background-color: rgb(197, 208, 142);
  border: 1px solid rgb(170, 170, 168);
  padding: 10px;
  margin: 10px;
  margin-bottom: 20px;     /*由于两个内盒并列会出现外边距合并的情况，所以此处加入小属性层叠覆盖大属性，
                           设定下部外边距为20px，防止与内盒2合并外边距*/
  line-height: 163px;      /*此处设置的是盒子内文本的垂直居中，只需line-height设定与content-height
                           一致即可*/
}

/*内盒2设定宽高为506：615，实际占宽等同内盒1，实际占高是body-height减去内盒1实际占高*/
.inner2 {
  width: 464px;
  height: 573px;
  background-color: rgb(197, 208, 142);
  border: 1px solid rgb(170, 170, 168);
  padding:10px;
  margin: 10px;
  line-height: 573px;
}

在index.html中加入内部盒子1和2的块元素，注意内部盒子1，2，3，4，5，6，7，8，9都是全部嵌套在外部盒子中的，所以代码也是嵌套在body内。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css" />
    <title>Index</title>
</head>

<body>
<div class="body">
    <div class="inner1">1</div>
    <div class="inner2">2</div>
</div>
</body>
</html>

预览效果如下：

在这里插入图片描述

设置内部盒子3的模型，这里注意加入了位置属性，设置为可移动，方便自由布局，同时还加入了margin-bottom，这个是由于相同的盒子并列时会出现外边距合并的状况，所以特别用一个小属性覆盖掉大属性，保证边距为20px。

/*内盒3设定宽高为1014：307，实际占宽是body-width减去内盒1的实际占宽，
实际占高是内盒1的实际占高加上内盒1的实际占高的一半*/
.inner3 {
  width: 972px;
  height: 265px;
  position: relative;       /*此处内盒设定为可以移动*/
  left: 506px;              /*距离左边距是根据内盒1的实际占宽得出*/
  top: -810px;              /*由于内盒是默认纵向排列，根据上面右移后，
                             距离顶部为body-height减去边距10px*/
  background-color: rgb(197, 208, 142);
  border: 1px solid rgb(170, 170, 168);
  padding: 10px;
  margin: 10px;
  margin-bottom: 20px;      /*由于两个内盒并列会出现外边距合并的情况，所以此处加入小属性层叠覆盖大属性，
                             设定下部外边距为20px，防止与内盒4和5合并外边距*/
  line-height: 265px;
}

在index.html加入内部盒子3的块元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css" />
    <title>Index</title>
</head>

<body>
<div class="body">
    <div class="inner1">1</div>
    <div class="inner2">2</div>
    <div class="inner3">3</div>
</div>
</body>
</html>

预览效果如下：

在这里插入图片描述

设置内部盒子4，5，6的模型，同之前的步骤。

/*内盒4设定宽高为507：513，实际占宽根据内盒3的实际占宽的一半得出，实际占高是body-width减去内盒3的实际占高*/
.inner4 {
  width: 465px;
  height: 471px;
  position: relative;
  left: 506px;
  top: -810px;
  background-color: rgb(197, 208, 142);
  border: 1px solid rgb(170, 170, 168);
  padding: 10px;
  margin: 10px;
  line-height: 471px;
}

/*内盒5设定宽高为507：256，实际占宽与内盒4一致，实际占高是内盒4的实际占高的一半*/
.inner5 {
  width: 465px;
  height: 214px;
  position: relative;
  left: 1013px;        /*根据内盒2和内盒4的实际占宽得出*/
  top: -1313px;        /*根据内盒4的top加上内盒4的实际占高，再减去外边距10px得出*/
  background-color: rgb(197, 208, 142);
  border: 1px solid rgb(170, 170, 168);
  padding: 10px;
  margin: 10px;
  margin-bottom: 20px;
  line-height: 214px;
}

/*内盒6设定宽高为507：257， 实际占宽与内盒5一致，实际占高是内盒4的实际占高减去内盒5的实际占高*/
.inner6 {
  width: 465px;
  height: 215px;
  position: relative;
  left: 1013px;
  top: -1313px;
  background-color: rgb(197, 208, 142);
  border: 1px solid rgb(170, 170, 168);
  padding: 10px;
  margin: 10px;
  line-height: 215px;
}

在index.html中加入内部盒子4，5，6的块元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css" />
    <title>Index</title>
</head>

<body>
<div class="body">
    <div class="inner1">1</div>
    <div class="inner2">2</div>
    <div class="inner3">3</div>
    <div class="inner4">4</div>
    <div class="inner5">5</div>
    <div class="inner6">6</div>
</div>
</body>
</html>

预览效果如下：

在这里插入图片描述

设置内部盒子7，8，9的模型。

/*内盒7，8，9的宽高设定为307：230*/
.inner7 {
  width: 267px;
  height: 190px;
  position: relative;
  left: 526px;         /*根据内盒3的左边距离加上左外边距10px得出*/
  top: -2083px;        /*根据内盒6的top加上一定数值得出*/
  background-color: rgb(243, 163, 100);
  border: 1px solid rgb(243, 163, 100);
  padding: 10px;
  margin: 10px;
  line-height: 190px;
}

.inner8 {
  width: 267px;
  height: 190px;
  position: relative;
  left: 1192px;        /*根据内盒3实际占宽减去内盒8实际占宽，再加上内盒1实际占宽，减去外边距、内边距和border之和21px得出，距离右边距20px*/
  top: -2500px;
  background-color: rgb(243, 163, 100);
  border: 1px solid rgb(243, 163, 100);
  padding: 10px;
  margin: 10px;
  line-height: 190px;
}

.inner9 {
  width: 267px;
  height: 190px;
  position: relative;
  left: 506px;         /*由于内盒9嵌套与内盒2，所以左边距离等同内盒4的*/
  top: -80px;
  background-color: rgb(248, 204, 157);
  border: 1px solid rgb(248, 204, 157);
  padding: 10px;
  margin: 10px;
  line-height: 190px;
}

在index.html中加入内部盒子7，8，9的块元素。注意盒子9是嵌套在盒子2的内部，这样才能实现盒子9掩藏在盒子4下面，同时，top和left属性要调整，index.html文件全部完成。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css" />
    <title>Index</title>
</head>

<body>
<div class="body">
    <div class="inner1">1</div>
    <div class="inner2">2
        <div class="inner9">9</div>
    </div>
    <div class="inner3">3</div>
    <div class="inner4">4</div>
    <div class="inner5">5</div>
    <div class="inner6">6</div>
    <div class="inner7">7</div>
    <div class="inner8">8</div>
</div>
</body>
</html>

附上完整的style.css文件

@charset "utf-8";
/* CSS Document */

/*外盒设定宽高为1600：900，所以content的宽高为分别减去2倍border，2倍padding，2倍margin*/
.body {
  width: 1520px;
  height: 820px;
  background-color: rgb(252, 221, 156);
  border: 10px solid rgb(170, 170, 168);
  padding: 10px;                          /*要求边距为20px，由于body盒子内部还有嵌套的盒子，margin设定为10px，所以相加为20px*/
  margin: 20px;
  font-size: 36px;
  font-family: sans-serif;
  color: white;
  text-align: center;                     /*盒子内文本设定为水平居中*/
}

/*内盒1设定宽高为506：205，实际占宽是根据body-width均分3份得出，实际占高是根据body-height均分4份得出*/
.inner1 {
  width: 464px;
  height: 163px;
  background-color: rgb(197, 208, 142);
  border: 1px solid rgb(170, 170, 168);
  padding: 10px;
  margin: 10px;
  margin-bottom: 20px;     /*由于两个内盒并列会出现外边距合并的情况，所以此处加入小属性层叠覆盖大属性，设定下部外边距为20px，防止与内盒2合并外边距*/
  line-height: 163px;      /*此处设置的是盒子内文本的垂直居中，只需line-height设定与content height一致即可*/
}

/*内盒2设定宽高为506：615，实际占宽等同内盒1，实际占高是body-height减去内盒1实际占高*/
.inner2 {
  width: 464px;
  height: 573px;
  background-color: rgb(197, 208, 142);
  border: 1px solid rgb(170, 170, 168);
  padding:10px;
  margin: 10px;
  line-height: 573px;
}

/*内盒3设定宽高为1014：307，实际占宽是body-width减去内盒1的实际占宽，实际占高是内盒1的实际占高加上内盒1的实际占高的一半*/
.inner3 {
  width: 972px;
  height: 265px;
  position: relative;       /*此处内盒设定为可以移动*/
  left: 506px;              /*距离左边距是根据内盒1的实际占宽得出*/
  top: -810px;              /*由于内盒是默认纵向排列，根据上面右移后，距离顶部为body-height减去边距10px*/
  background-color: rgb(197, 208, 142);
  border: 1px solid rgb(170, 170, 168);
  padding: 10px;
  margin: 10px;
  margin-bottom: 20px;      /*由于两个内盒并列会出现外边距合并的情况，所以此处加入小属性层叠覆盖大属性，设定下部外边距为20px，防止与内盒4和5合并外边距*/
  line-height: 265px;
}

/*内盒4设定宽高为507：513，实际占宽根据内盒3的实际占宽的一半得出，实际占高是body-width减去内盒3的实际占高*/
.inner4 {
  width: 465px;
  height: 471px;
  position: relative;
  left: 506px;
  top: -810px;
  background-color: rgb(197, 208, 142);
  border: 1px solid rgb(170, 170, 168);
  padding: 10px;
  margin: 10px;
  line-height: 471px;
}

/*内盒5设定宽高为507：256，实际占宽与内盒4一致，实际占高是内盒4的实际占高的一半*/
.inner5 {
  width: 465px;
  height: 214px;
  position: relative;
  left: 1013px;        /*根据内盒2和内盒4的实际占宽得出*/
  top: -1313px;        /*根据内盒4的top加上内盒4的实际占高，再减去外边距10px得出*/
  background-color: rgb(197, 208, 142);
  border: 1px solid rgb(170, 170, 168);
  padding: 10px;
  margin: 10px;
  margin-bottom: 20px;
  line-height: 214px;
}

/*内盒6设定宽高为507：257， 实际占宽与内盒5一致，实际占高是内盒4的实际占高减去内盒5的实际占高*/
.inner6 {
  width: 465px;
  height: 215px;
  position: relative;
  left: 1013px;
  top: -1313px;
  background-color: rgb(197, 208, 142);
  border: 1px solid rgb(170, 170, 168);
  padding: 10px;
  margin: 10px;
  line-height: 215px;
}

/*内盒7，8，9的宽高设定为307：230*/
.inner7 {
  width: 267px;
  height: 190px;
  position: relative;
  left: 526px;         /*根据内盒3的左边距离加上左外边距10px得出*/
  top: -2083px;        /*根据内盒6的top加上一定数值得出*/
  background-color: rgb(243, 163, 100);
  border: 1px solid rgb(243, 163, 100);
  padding: 10px;
  margin: 10px;
  line-height: 190px;
}

.inner8 {
  width: 267px;
  height: 190px;
  position: relative;
  left: 1192px;        /*根据内盒3实际占宽减去内盒8实际占宽，再加上内盒1实际占宽，减去外边距、内边距和border之和21px得出，距离右边距20px*/
  top: -2500px;
  background-color: rgb(243, 163, 100);
  border: 1px solid rgb(243, 163, 100);
  padding: 10px;
  margin: 10px;
  line-height: 190px;
}

.inner9 {
  width: 267px;
  height: 190px;
  position: relative;
  left: 506px;         /*由于内盒9嵌套与内盒2，所以左边距离等同内盒4的*/
  top: -80px;
  background-color: rgb(248, 204, 157);
  border: 1px solid rgb(248, 204, 157);
  padding: 10px;
  margin: 10px;
  line-height: 190px;
}

预览效果如下：（超出浏览器不显示）

在这里插入图片描述

题外：几种学习html+css+javascript的个人方式

1. 通过模板之家等网站下载一些简单的网站模板，在window下，利用IIS搭建本地环境，运行网站，通过分析或修改网站的文件，实现个人建立一个简单的网站。通过网站文件我们可以了解到网站文件的一些基本框架，比如以下模板站：

在这里插入图片描述

目前主流网站为了适应PC端，移动端，平板设备的访问，都已经采用了响应式设计，在屏幕尺寸不同的情况下，仍然能有效的展示网站内容。以上网站的文件内容如下：

在这里插入图片描述

首页一般都是以index.html文件为主，这个页面也是所有网站的入口

css文件夹，包含网页的各种样式表

fonts字体文件夹，用于设定网站文字

img文件夹，里面包含网站所有用到的图片

js文件夹，包含网站所有涉及的Javascript内容

除此之外，一般还有除首页外的其他页面，404页面等

为了便于客户管理网站，如上传产品信息，上传文章等等，一般会在网站文件内制作一个管理后台文件夹，通过后台对前台网站进行维护，使网站管理更直观简便。

2. 利用大型平台的Saas模板建站，在疫情期间创建公司下属的医疗耗材网站便是利用百度的AIPage搭建，通过对PC端和手机端的前端设计来进行调整网页，这种方式操作方便，上手较快，通过搭积木的方式建站，比写代码更直观。缺点是模板固定，选择有限，个性化偏弱，同时后台的一些设定不够灵活，比如独立部署必须使用百度的服务，需要三方网站插入追踪代码比较麻烦。

在这里插入图片描述

后台仪表板基本覆盖所需的模块

在这里插入图片描述

在设计后台，可以看到能够设计PC端，手机端和小程序，同时包含了SEO的一些设置模块

在这里插入图片描述

3. 利用小飞兔等抓取整站工具对网站进行抓取，或者直接用chrome检查网站元素查看网站代码，然后分析和学习设计内容。

在这里插入图片描述

除了以上内容外，我们还需要明白，建站的目的是为了让人访问，让更多的人了解到这个网站，并获取到所需的信息，这就涉及到网站的推广，吸引流量，这些跟搜索引擎相关，涉及到SEO和SEM这两个概念。

1. SEO（Search Engine Optimization）搜索引擎优化

是一种通过分析搜索引擎的排名规律，了解各种搜索引擎怎样进行搜索、怎样抓取互联网页面、怎样确定特定关键词的搜索结果排名的技术。搜索引擎采用易于被搜索引用的手段，对网站进行有针对性的优化，提高网站在搜索引擎中的自然排名，吸引更多的用户访问网站，提高网站的访问量，提高网站的销售能力和宣传能力，从而提升网站的品牌效应。

网站优化的基础部分，涉及到网站代码中的一些标签内容，如 <meta>, <title> </title>, 其中的content和description要根据搜索引擎上的相关热度，专业度，搜索频率来进行编写，优化和调整。还有关键词的设置，内链外链等等。

2. SEM（Search Engine Marketing）搜索引擎营销

这里的SEM涉及范围很广，我们简单说下其中的点击付费推广，这种方式在完成网站的基础SEO设置后，可以通过服务商来进行网站的广告付费推广，通过广告的形式把网站推向某个关键词结果的前几页，使感兴趣的用户发现并点击进入网站。

所以，网站的基础SEO设置很重要，首先你的网站一定是内容丰富，包含了用户所需的相关信息，以及用户习惯搜索的关键词，页面设计让人舒服，跳转其他页面的链接很方便，网站访问打开速度要快，这些是提升你网站在搜索引擎权重的基础。

当今，各种搜索引擎的发展已经越来越成熟，算法的优化越来越贴近以用户为主的服务理念，同时有效打击了黑帽SEO各种违规和走捷径的方式，使我们回归到以网站内容质量为重心，以用户为中心的方式，真正打造一个高品质的网站。

以下是公司网站在Google Adwards的后台推广情况，还有分析工具Google Analytics的后台分析情况。

在这里插入图片描述

猜你喜欢

Unity3D脚本中文系列教程(二)
Atitit.每周末总结于每周一计划日程表流程表 v8
android:keytool生成应用签名证书(java 15)
[Android Pro] AIDL进程间传递自定义类型参数
负载均衡
配电系统的线性三相潮流研究【IEEE123节点】（Matlab代码实现）
程序员小灰-算法集锦漫画算法
VS2019 错误 LNK2019：无法解析的外部的符号 _sscanf和_vsprintf（亲测可用）
【第3版emWin教程】第35章 emWin6.x的AppWizard中文实现方法
NC32 求平方根
ASP.NET Web——GridView完整增删改查示例(全篇幅包含sql脚本)大二结业考试必备技能
R语言学习笔记之<在Linux上遇到的问题集锦>
ES 相似度算法设置（续）
Kubernetes Static Pod (静态Pod)
Leetcode 937. 重新排列日志文件(不容易,一次性过)
[Sass] Level 3: Mixin -- Ex

相关主题

redis 认证密码
AAA认证
shiro认证
考试认证
su 认证失败
单向认证
8.13数据库认证
14.23权限认证

当前栏目

C站能力认证任务关卡1-3 Web基础

了解HTML, CSS, Javascript的技术应用

参考内容：w3 school (http://www.sz-seo.org/w3cschool/html/index.html)

菜鸟教程 (https://www.runoob.com/html/html-tutorial.html)

根据任务内容简单介绍下相关内容:

1. HTML

HTML 是用来描述网页的一种语言。

常见的一些标签：

HTML元素

HTML属性

HTML样式

HTML表格

HTML列表

无序列表

有序列表

定义列表

HTML块元素

2. CSS

CSS语法

id选择器

类选择器

通用选择器

3. Javascript

Javascript用法

JavaScript 函数和事件

外部的 JavaScript

JavaScript 函数

以上简单介绍了HTML, CSS, Javascript的一些概念，具体使用请参考网络内容学习，下面任务过程中会针对使用到的内容解释。

任务一

在开源富文本编辑器(https://summernote.org)中实现以下效果：

1. 实现红色文字

根据HTML段落标签 <p> </p> 和style样式，编写代码如下：

效果如下：

2. 实现表格

根据HTML表格标签 <table> </table> <tr> </tr> <td> </td> 和style样式，编写代码如下：

效果如下：

3. 实现交互按钮

根据Javascript按钮标签和函数功能，编写代码如下：

效果如下：

其中表格的样式可以通过内部样式表来设定，如下：

拓展任务

完成下图的CSS盒子模型布局

首先，先确定盒子模型内的所有颜色rgb编码，这里借助PS取色器。

得到各个颜色rgb编码如下：

使用webstorm建立一个css文件和一个html文件，分别命名为style.css和index.html。

在index.html文件中的 <head> </head> 标签中加入一行引用style.css样式表的代码：

开始在样式表中设置外部盒子模型，分辨率设置1600:900，根据盒子模型定义，实际占宽和占高分别为1600和900，content的width和height就要分别减去外边距(margin)*2，边距(border)*2，内边距(padding)*2。

在index中加入块元素div，类选择器选择.body类。

在chrome中预览效果：

在样式表中设置内部盒子1和2的模型，content的width和height都是减去四周的margin，border和padding后得出的。

在index.html中加入内部盒子1和2的块元素，注意内部盒子1，2，3，4，5，6，7，8，9都是全部嵌套在外部盒子中的，所以代码也是嵌套在body内。

预览效果如下：

设置内部盒子3的模型，这里注意加入了位置属性，设置为可移动，方便自由布局，同时还加入了margin-bottom，这个是由于相同的盒子并列时会出现外边距合并的状况，所以特别用一个小属性覆盖掉大属性，保证边距为20px。

在index.html加入内部盒子3的块元素。

预览效果如下：

设置内部盒子4，5，6的模型，同之前的步骤。

在index.html中加入内部盒子4，5，6的块元素。

预览效果如下：

设置内部盒子7，8，9的模型。

在index.html中加入内部盒子7，8，9的块元素。注意盒子9是嵌套在盒子2的内部，这样才能实现盒子9掩藏在盒子4下面，同时，top和left属性要调整，index.html文件全部完成。

附上完整的style.css文件

预览效果如下：（超出浏览器不显示）

题外：几种学习html+css+javascript的个人方式

目前主流网站为了适应PC端，移动端，平板设备的访问，都已经采用了响应式设计，在屏幕尺寸不同的情况下，仍然能有效的展示网站内容。以上网站的文件内容如下：

首页一般都是以index.html文件为主，这个页面也是所有网站的入口

css文件夹，包含网页的各种样式表

fonts字体文件夹，用于设定网站文字

img文件夹，里面包含网站所有用到的图片

js文件夹，包含网站所有涉及的Javascript内容

除此之外，一般还有除首页外的其他页面，404页面等

为了便于客户管理网站，如上传产品信息，上传文章等等，一般会在网站文件内制作一个管理后台文件夹，通过后台对前台网站进行维护，使网站管理更直观简便。

后台仪表板基本覆盖所需的模块

在设计后台，可以看到能够设计PC端，手机端和小程序，同时包含了SEO的一些设置模块

3. 利用小飞兔等抓取整站工具对网站进行抓取，或者直接用chrome检查网站元素查看网站代码，然后分析和学习设计内容。

除了以上内容外，我们还需要明白，建站的目的是为了让人访问，让更多的人了解到这个网站，并获取到所需的信息，这就涉及到网站的推广，吸引流量，这些跟搜索引擎相关，涉及到SEO和SEM这两个概念。

1. SEO（Search Engine Optimization）搜索引擎优化

网站优化的基础部分，涉及到网站代码中的一些标签内容，如 <meta>, <title> </title>, 其中的content和description要根据搜索引擎上的相关热度，专业度，搜索频率来进行编写，优化和调整。还有关键词的设置，内链外链等等。

2. SEM（Search Engine Marketing）搜索引擎营销

以下是公司网站在Google Adwards的后台推广情况，还有分析工具Google Analytics的后台分析情况。

开始在样式表中设置外部盒子模型，分辨率设置1600:900，根据盒子模型定义，实际占宽和占高分别为1600和900，content的width和height就要分别减去外边距(margin)2，边距(border)2，内边距(padding)*2。