了解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的后台分析情况。