版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
Web应用开发与安全防护第一篇
前端开发基础概述HTML基础CSS基础JavaScript基础1.1概述1.1.1认识WWW架构1.网页：基本文档2.网站：网页的集合3.浏览器：访问网站的工具1.1概述1.1.2
网页的组成1.HTML（超文本标记语言）：网页的骨架2.CSS（层叠样式表）：控制网页外观和布局3.JavaScript：实现网页的动态效果和交互概述HTML基础CSS基础JavaScript基础1.2HTML基础1.2.4HTML文件结构【index.html】<!DOCTYPE
html><html><head><meta
charset="UTF-8"><title>我的网页</title><link
rel="stylesheet"
href="styles.css"></head><body><h1>欢迎来到我的网页</h1><p>这是一个示例段落。</p><a
href="">访问示例网站</a></body></html>1.2HTML基础1.2.5文本段落
1.
段落标签：<p>这是一个段落。</p>
2.
标题标签：<h1>一级标题</h1>、<h2>二级标题</h2>
3.
换行标签：这是一行文本。<br>这是下一行文本。
4.
水平线标签：<hr>
5.
预格式化文本标签：<pre>这是预格式化的文本。
保留空格和换行。</pre>
6.
块级引用标签：<blockquote>这是引用的段落。</blockquote>
7.
地址标签：<address>作者：张三<br>邮箱：zhang@163.com</address>1.2HTML基础1.2.6对文本的强调
1.
加粗标签：<b>这是加粗的文本</b>或<strong>这是重要的文本</strong>
2.
斜体标签：<i>这是斜体的文本</i>或<em>这是强调的文本</em>
3.
下划线标签：<u>这是下划线的文本</u>
4.
删除线标签：<s>这是已删除的文本</s>或<del>这是不再适用的文本</del>
5.
高亮标签：<mark>这是高亮显示的文本</mark>1.2HTML基础1.2.7多媒体与超链接多媒体
1.
图像：<img
src="image.jpg"
alt="描述性文本"
width="500"
height="300">
2.
音频：<audio
controls>
<source
src="audio.mp3"
type="audio/mpeg">
您的浏览器不支持
audio
元素。
</audio>
3.
视频：<video
width="640"
height="360"
controls>
<source
src="video.mp4"
type="video/mp4">
您的浏览器不支持
video
元素。
</video>1.2HTML基础1.2.7多媒体与超链接超链接
1.
基本超链接：<a
href="">访问示例网站</a>
2.
锚点链接：<a
href="#section2">跳转到第二节</a>
...
<h2
id="section2">第二节标题</h2>
3.
电子邮件链接：<a
href="mailto:example@">发送邮件</a>
4.
电话链接：<a
href="tel:+1234567890">拨打电话</a>1.2HTML基础1.2.8列表与表格列表
1.
无序列表：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
2.
有序列表：<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li></ol>
3.
定义列表：
<dl>
<dt>术语1</dt>
<dd>描述1</dd>
<dt>术语2</dt>
<dd>描述2</dd></dl>1.2HTML基础1.2.8列表与表格表格1.基本表格结构<table>
<tr>
<th>列标题1</th>
<th>列标题2</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>1.2HTML基础1.2.8列表与表格表格2.表格属性3.表格标题与摘要
<table
border="1"
cellpadding="10"
cellspacing="5">
<!--
表格内容
-->
</table><table>
<caption>表格标题</caption>
<summary>表格摘要信息</summary>
<!--
表格内容
--></table>1.2HTML基础1.2.8列表与表格表格4.表格分组<table>
<thead>
<tr>
<th>列标题1</th>
<th>列标题2</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td
colspan="2">表尾信息</td>
</tr>
</tfoot></table>1.2HTML基础1.2.9表单与内嵌式网页表单（Form）：收集用户输入数据<form
action="/submit"
method="post">
<label
for="username">用户名:</label>
<input
type="text"
id="username"
name="username">
<label
for="password">密码:</label>
<input
type="password"
id="password"
name="password">
<input
type="submit"
value="提交"></form>1.2HTML基础1.2.9表单与内嵌式网页内嵌式网页（Iframe）结合使用<iframe
src=""
width="600"
height="400"></iframe><form
action="/submit"
method="post">
<label
for="username">用户名:</label>
<input
type="text"
id="username"
name="username">
<label
for="embedded-content">嵌入内容:</label>
<iframe
src="/embedded-form"
width="600"
height="400"></iframe>
<input
type="submit"
value="提交"></form>概述HTML基础CSS基础JavaScript基础1.3CSS基础1.3.1在网页中加入CSS样式1.内联样式
2.内部样式表<p
style="color:
red;
font-size:
16px;">这是一个带有内联样式的段落。</p><head>
<style>
body
{
background-color:
#f0f0f0;
}
p
{
color:
blue;
font-size:
18px;
}
</style></head>1.3CSS基础1.3.1在网页中加入CSS样式3.外部样式表
<!--
在HTML文档的<head>部分
-->
<head>
<link
rel="stylesheet"
type="text/css"
href="styles.css">
</head>
<!--
在styles.css文件中
-->
body
{
background-color:
#f0f0f0;
}
p
{
color:
blue;
font-size:
18px;
}1.3CSS基础1.3.1在网页中加入CSS样式4.使用CSS框架
<!--
引入Bootstrap
CSS框架
-->
<link
rel="stylesheet"
href="/bootstrap/4.5.2/css/bootstrap.min.css">
<!--
使用Bootstrap的样式类
-->
<div
class="container">
<p
class="text-center">这是一个使用Bootstrap样式的段落。</p>
</div>1.3CSS基础1.3.2规则的组成1.选择器：2.声明块：p、.myClass、#myId、[type="text"]、:hoverp
{
color:
blue;
font-size:
16px;}1.3CSS基础1.3.3文字效果
1.
颜色：
p
{color:
red;}
2.
字体大小：p
{font-size:
16px;}
3.
字体家族：
p
{font-family:
Arial,
sans-serif;}
4.
字体加粗：
p
{font-weight:
bold;}
5.
字体样式：
p
{font-style:
italic;}
6.
文本对齐：
p
{text-align:
center;}
7.
文本装饰：
a
{text-decoration:
none;}
8.
文本阴影：
p
{text-shadow:
2px
2px
5px
rgba(0,
0,
0,
0.3);}
9.
文字间距：
p
{letter-spacing:
2px;}
10.
行高：
p
{line-height:
1.5;}1.3CSS基础1.3.4背景效果1.
背景颜色:body
{background-color:
#f0f0f0;}2.
背景图像:body
{background-image:
url('background.jpg');}3.
背景重复:body
{background-repeat:
no-repeat;}4.
背景位置:body
{background-position:
center
center;}5.
背景大小:body
{background-size:
cover;}6.
背景附着:body
{background-attachment:
fixed;}
7.
背景简写:body
{background:
#f0f0f0
url('background.jpg')
no-repeat
center
center
/
cover
fixed;}
1.3CSS基础1.3.5
设计边框与列表样式边框样式
1.
边框宽度：.element
{border-width:
2px;}
2.
边框样式：.element
{border-style:
solid;}
3.
边框颜色：.element
{border-color:
#333;}列表样式
1.
列表标记类型：ul
{list-style-type:
square;}
2.
列表标记图像：ul
{list-style-image:
url('marker.png');}
3.
列表标记位置：ul
{list-style-position:
outside;}
4.
列表样式简写：ul
{list-style:
square
url('marker.png')
outside;}1.3CSS基础1.3.6
设计版面与特效版面设计：1.布局模型Flexbox：
.container
{
display:
flex;
justify-content:
space-between;
/*
水平分布
*/
align-items:
center;
/*
垂直居中
*/
}Grid：
.grid-container
{
display:
grid;
grid-template-columns:
repeat(3,
1fr);
/*
三列等宽布局
*/
grid-template-rows:
auto;
}1.3CSS基础3.6使用CSS设计版面与特效版面设计：2.定位相对定位：
.element
{
position:
relative;
top:
10px;
/*
向下偏移10px
*/
left:
20px;
/*
向右偏移20px
*/
}绝对定位：
.parent
{
position:
relative;
}
.child
{
position:
absolute;
top:
0;
right:
0;
}1.3CSS基础1.3.6
设计版面与特效版面设计：3.浮动与清除浮动浮动：
.float-left
{
float:
left;
}清除浮动：
.clear
{
clear:
both;
}1.3CSS基础3.6使用CSS设计版面与特效特效设计:1.过渡
.element
{
transition:
background-color
0.5s
ease;
}
.element:hover
{
background-color:
#f00;
}1.3CSS基础1.3.6
设计版面与特效特效设计：2.变换
.element
{
transform:
rotate(45deg);
/*
旋转45度
*/
}1.3CSS基础1.3.6
设计版面与特效特效设计：3.动画
@keyframes
example
{
0%
{background-color:
red;
left:
0px;
top:
0px;}
25%
{background-color:
yellow;
left:
200px;
top:
0px;}
50%
{background-color:
blue;
left:
200px;
top:
200px;}
75%
{background-color:
green;
left:
0px;
top:
200px;}
100%
{background-color:
red;
left:
0px;
top:
0px;}
}
.element
{
animation-name:
example;
animation-duration:
4s;
animation-timing-function:
linear;
animation-iteration-count:
infinite;
}1.3CSS基础1.3.6
设计版面与特效特效设计：4.阴影与渐变阴影：
.element
{
box-shadow:
10px
10px
5px
rgba(0,
0,
0,
0.3);
}渐变：
.gradient-background
{
background:
linear-gradient(to
right,
red,
yellow);
}1.3CSS基础1.3.7
创建示例【CSS.html】<!DOCTYPE
html><html
lang="en"><head>
<meta
charset="UTF-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>CSS
Special
Effect
Button</title>
<style>
.special-button
{
background-color:
#4CAF50;
/*
绿色背景
*/
border:
none;
/*
无边框
*/
color:
white;
/*
白色文字
*/
padding:
15px
32px;
/*
内边距
*/
text-align:
center;
/*
文字居中
*/
text-decoration:
none;
/*
无下划线
*/
display:
inline-block;
/*
行内块级元素
*/
font-size:
16px;
/*
字体大小
*/
margin:
4px
2px;
/*
外边距
*/
cursor:
pointer;
/*
鼠标悬停时显示指针
*/
border-radius:
12px;
/*
圆角边框
*/
transition:
background-color
0.3s;
/*
背景颜色过渡效果
*/
}
.special-button:hover
{
background-color:
#45a049;
/*
鼠标悬停时背景颜色变深
*/
}
.special-button:active
{
background-color:
#45a049;
/*
点击时背景颜色变深
*/
box-shadow:
0
5px
#666;
/*
点击时产生阴影
*/
transform:
translateY(4px);
/*
点击时按钮下移
*/
}
</style></head><body><button
class="special-button">点击我</button></body></html>概述HTML基础CSS基础JavaScript基础1.4JavaScript基础1.4.1认识JavaScript1.基本特性动态类型面向对象事件驱动2.主要用途网页开发服务器端开发：Nodes.js移动应用开发：ReactNative、Cordova1.4JavaScript基础1.4.1认识JavaScript3.语法特点简洁明了灵活多变异步处理4.生态系统丰富的库和框架：jQuery、React、Vue、Angular社区支持5.学习建议基础语法DOM操作异步编程实践项目1.4JavaScript基础1.4.2在网页中加入JavaScript程序
1.
编写JavaScript代码：script.js
2.
在HTML文件中引用JavaScript文件:<script
src="path/to/your/script.js"></script>
3.
直接在HTML文件中编写JavaScript代码：<script>console.log("Hello,
World!");</script>
4.
注意执行时机：window.onload事件或DOMContentLoaded事件
5.
调试和测试：F121.4JavaScript基础1.4.3改变网页内容1.
修改文本内容：document.getElementById("myElement").innerHTML
=
"新的内容";document.getElementById("myElement").textContent
=
"新的内容";
2.
修改HTML结构：document.getElementById("myDiv").innerHTML
=
"<p>这是一个新的段落。</p>";
3.
修改样式：document.getElementById("myElement").style.color
=
"red";
document.getElementById("myElement").style.fontSize
=
"20px";1.4JavaScript基础1.4.3改变网页内容4.
添加或删除元素：
//
创建一个新的元素
var
newElement
=
document.createElement("div");
newElement.textContent
=
"我是一个新元素";
//
将新元素添加到现有元素中
document.getElementById("myContainer").appendChild(newElement);
//
删除一个元素
var
elementToRemove
=
document.getElementById("elementToRemove");
elementToRemove.parentNode.removeChild(elementToRemove);5.
响应用户事件：document.getElementById("myButton").addEventListener("click",
function()
{
document.getElementById("myText").textContent
=
"按钮被点击了！";
});1.4JavaScript基础1.4.4DOM与事件处理DOM对象模型1.主要特点文档树节点类型遍历和修改2.常用操作获取元素：document.getElementByIddocument.getElementsByClassNamedocument.getElementsByTagNam修改内容：innerHTML、textContent修改样式：style属性或classList方法添加、删除元素：createElement、appendChild、removeChild1.4JavaScript基础1.4.4DOM与事件处理事件处理1.主要事件类型鼠标事件：如click（点击）、mouseover（鼠标悬停）、mouseout（鼠标移出）等键盘事件：如keydown（按键按下）、keyup（按键释放）等表单事件：如submit（表单提交）、change（输入值改变）等2.事件处理步骤（1）选择元素；（2）添加事件监听器（addEventListener）；（3）定义回调函数。3.示例代码：//
选择元素var
button
=
document.getElementById("myButton");
//
添加点击事件监听器button.addEventListener("click",
function()
{
alert("按钮被点击了！");});1.4JavaScript基础1.4.5操作示例示例1：获取元素并修改其内容【1.4.5.示例1.html】示例2：设置元素属性【1.4.5.示例2.html】示例3：修改元素样式【1.4.5.示例3.html】示例4：处理事件【1.4.5.示例4.html】1.4JavaScript基础1.4.6控制浏览器1.
打开新窗口或标签页：window.open('',
'_blank');
2.
关闭当前窗口：window.close();
3.
调整窗口大小：window.resizeTo(800,
600);
4.
滚动页面：window.scrollTo(0,
100);
5.
设置或获取窗口的定时器：
//
设置一个定时器，在3秒后执行指定的函数
var
timer
=
window.setTimeout(function()
{
alert('3秒已过！');
},
3000);
//
清除定时器
window.clearTimeout(timer);1.4JavaScript基础1.4.6控制浏览器
6.
控制浏览器历史记录：
//
加载历史记录中的上一个页面
window.history.back();
//
加载历史记录中的下一个页面
window.history.forward();
//
加载特定的URL到浏览器历史记录中
window.history.pushState({page:
1},
"Title
1",
"?page=1");
7.
获取窗口信息：
var
width
=
window.innerWidth;
var
height
=
window.innerHeight;
console.log('窗口宽度:',
width,
'像素');
console.log('窗口高度:',
height,
'像素');1.4JavaScript基础1.4.6控制浏览器
8.
创建对话框：
//
显示一个警告框
window.alert('这是一个警告框！');
//
显示一个确认框，并获取用户的选择
var
userConfirmed
=
window.confirm('你确定要继续吗？');
if
(userConfirmed)
{
console.log('用户点击了“确定”');
}
else
{
console.log('用户点击了“取消”');
}
//
显示一个输入框，并获取用户输入的值
var
userInput
=
mpt('请输入你的名字：');
console.log('用户输入了：',
userInput);1.4JavaScript基础1.4.7JavaScript语法1.
变量声明：
var
name
=
"Alice";
let
age
=
25;
const
PI
=
3.14;2.
数据类型：
let
str
=
"Hello,
World!";
let
num
=
42;
let
bool
=
true;
let
obj
=
{name:
"Bob",
age:
30};
let
arr
=
[1,
2,
3,
4,
5];3.
运算符：
let
sum
=
5
+
3;
//
算术运算符
let
count
=
0;
count
+=
1;
//
赋值运算符
let
isEqual
=
(5
>
3);
//
比较运算符
let
isTrue
=
(true
&&
false);
//
逻辑运算符1.4JavaScript基础1.4.7JavaScript语法4.
条件语句：
let
score
=
85;
if
(score
>=
60)
{
console.log("及格");
}
else
{
console.log("不及格");
}switch
(day)
{
case
'Monday':
console.log('今天是星期一');
break;
case
'Tuesday':
console.log('今天是星期二');
break;
default:
console.log('今天是其他日子');
}1.4JavaScript基础4.7JavaScript语法5.
循环语句：
for
(let
i
=
0;
i
<
5;
i++)
{
console.log(i);
}
let
j
=
0;
while
(j
<
5)
{
console.log(j);
j++;
}
let
k
=
0;
do
{
console.log(k);
k++;
}
while
(k
<
5);1.4JavaScript基础1.4.7JavaScript语法6.
函数：
function
greet(name)
{
console.log("Hello,
"
+
name
+
"!");
}
const
add
=
(a,
b)
=>
a
+
b;7.
对象字面量：
let
person
=
{
name:
"John",
age:
30,
greet:
function()
{
console.log("Hello,
my
name
is
"
+
);
}
};1.4JavaScript基础1.4.7JavaScript语法8.
数组：let
fruits
=
["Apple",
"Banana",
"Cherry"];9.
模板字符串（ES6+）：
let
name
=
"Alice";
let
greeting
=
`Hello,
${name}!`;10.
解构赋值（ES6+）：
let
arr
=
[1,
2,
3];
let
[a,
b,
c]
=
arr;
//
a
=
1,
b
=
2,
c
=
3
let
obj
=
{name:
"Bob",
age:
30};
let
{name,
age}
=
obj;
//
name
=
"Bob",
age
=
301.4JavaScript基础1.4.8常见DOM事件1.
鼠标事件：点击事件（click）：document.getElementById('myButton').addEventListener('click',
function()
{
alert('Button
clicked!');
});鼠标移入事件（mouseover）：document.getElementById('myDiv').addEventListener('mouseover',
function()
{
this.style.backgroundColor
=
'yellow';
});鼠标移出事件（mouseout）：document.getElementById('myDiv').addEventListener('mouseout',
function()
{
this.style.backgroundColor
=
'';
});1.4JavaScript基础1.4.8常见DOM事件2.
键盘事件：按键按下事件（keydown）：document.addEventListener('keydown',
function(event)
{
if
(event.key
===
'Enter')
{
alert('Enter
key
pressed!');
}
});按键抬起事件（keyup）：document.getElementById('myInpu
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 煤炭安全科工作制度
- 江西省林长制工作制度
- 绿化管理公司工作制度
- 网络安全运行工作制度
- 老年公寓护工工作制度
- 考核工作人员工作制度
- 职工十项实事工作制度
- 肢残协会工作制度汇编
- 脱贫攻坚督导工作制度
- 自查排查核查工作制度
- 2026年全国两会应知应会知识竞赛测试题库及答案
- 2026哈尔滨工业大学郑州高等研究院招聘1人考试参考试题及答案解析
- 探秘“转化链”：基于真实情境的初中科学物质推断项目式学习设计
- 护理三基三严考试题库及答案大全
- 生成式人工智能在初中历史课堂互动教学中的实践与反思教学研究课题报告
- 2026年1月浙江省高考首考英语试卷真题完整版（含答案+听力）
- 《华南地区长效型花境管养技术规程》
- 2024+EACTS+指南：成人心脏手术围手术期用药
- 2026年陕西国防工业职业技术学院单招职业技能考试题库附答案解析
- 2025年新《治安管理处罚法》知识考试题库及答案
- 外墙施工方案范文(3篇)
评论
0/150
提交评论