企业官网建设流程全解析

1.HTML

HTML（HyperText Markup Language，超文本标记语言）是用于创建网页结构与内容的标准标记语言，是前端开发的核心基础（“网页骨架”），通过带有尖角号的标签对文本进行标记，从而实现网页的结构。

（图 HTML实例）

1.1 HTML基本语法

• 标签语法：

<标签名 属性名="属性值" 属性名="属性值"></标签名>

<标签名 属性名="属性值" />

• 属性语法

属性名="属性值"

（图 HTML基本语法）

1.2 HTML常用标签

• 超链接标签

<a href="链接">内容</a>

（图 超链接标签）

• 图片标签

<img src="图片源" >

（图 图片标签）

• form表单和input标签

<form action="表单提交的目标地址" method="提交方式">

<input type="类型" name="名称" value="值">

</form>

（图 form表单和input标签）

2.CSS

CSS（层叠样式表）

CSS = 给 HTML 化妆、排版、布局

（图 CSS实例）

• CSS 元素选择器

元素选择器根据元素名称来选择 HTML 元素。

（图 元素选择器）

• CSS id 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

（图 id选择器）

• CSS 类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

（图 类选择器）

3.JavaScript

JS = 给网页加 “动作和逻辑”

<script>

js语句

</script>

3.1对象

对象，就是把一组相关的数据和功能打包在一起的 “容器”，是 JavaScript 里最常用、最重要的数据类型。

对象里的两个东西：

① 属性（特征）

描述 “它是什么样的”

• name

• age

• color

• price

② 方法（行为 / 功能）

描述 “它能做什么”

• study()

• run()

• eat()

• play()

（图 js对象）

3.2 XSS

XSS = Cross-Site Scripting 跨站脚本攻击

简单说：黑客往网页里注入恶意 JavaScript 代码，让浏览器执行，从而偷数据、搞破坏。

网站没有过滤用户输入，你把一段 JS 代码当成 “名字 / 评论 / 内容” 提交，网站直接把它当成 HTML/JS 渲染出来，代码就执行了。

简单一例：

靶场：phpstudy中的xss-labs-master

题目界面：

查看源代码：

（图 源代码）

从源代码可以看出，用户在输入框输入内容并搜索之后，<input name=keyword value="">标签将value属性值（输入的内容），传给了form表单中的action属性值（action=level2.php),level2.php将内容与h2标签对中的内容合并，回显在前端页面。

因为该搭建靶场未对输出的内容进行校验，那么，我们可以将<input name=keyword value="">标签中value=""的前引号和input标签进行闭合，然后插入js恶意脚本，让该脚本脱离input标签，完成js恶意脚本执行。

(图 原理)

(图 成功)

（本文大部分参考教程网站w3cschool：https://www.w3ccoo.com/）

（本文所讲XSS原理在个人搭建靶场进行，若要复现，请自行搭建靶场测试，请勿对真实网站进行测试，遵守网络安全法规）