软件工程-进阶课程与技术-前端开发_前端开发基础：HTMLCSSJavaScript.docx

PAGE1

PAGE1

前端开发基础概览

1HTML基础

HTML，即HyperTextMarkupLanguage，是用于创建网页的标准标记语言。它通过定义文档的结构和内容，使得网页能够被浏览器正确解析和展示。HTML文档由一系列的元素组成，每个元素都有特定的标签来表示。

1.1示例：创建一个简单的HTML页面

!DOCTYPEhtml

htmllang=zh

head

metacharset=UTF-8

title我的第一个HTML页面/title

/head

body

h1欢迎来到我的网站/h1

p这是一个简单的HTML页面示例。/p

ahref=访问示例网站/a

/body

/html

!DOCTYPEhtml声明文档类型为HTML5。

htmllang=zh标签定义了文档的根元素，并指定了语言为中文。

head包含了文档的元数据，如字符集和标题。

body包含了页面的所有可见内容。

h1和p分别用于定义标题和段落。

ahref=创建了一个链接到外部网站的超链接。

2CSS基础

CSS，即CascadingStyleSheets，用于描述HTML文档的外观和格式。它允许开发者控制页面的布局、颜色、字体等样式，使得网页设计更加灵活和美观。

2.1示例：为HTML页面添加样式

!DOCTYPEhtml

htmllang=zh

head

metacharset=UTF-8

title我的第一个CSS样式页面/title

style

/*设置body的背景颜色和字体*/

body{

background-color:lightblue;

font-family:Arial,sans-serif;

}

/*设置标题的样式*/

h1{

color:white;

text-align:center;

}

/*设置段落的样式*/

p{

font-size:20px;

color:blue;

}

/style

/head

body

h1欢迎来到我的网站/h1

p这是一个使用CSS样式的HTML页面示例。/p

/body

/html

style标签内包含了CSS样式规则。

body、h1和p的样式分别被定义，包括背景颜色、字体、颜色和对齐方式。

3JavaScript基础

JavaScript是一种广泛使用的脚本语言，用于实现网页的交互性。它能够操作HTML和CSS，响应用户事件，执行异步通信，以及创建动态内容。

3.1示例：使用JavaScript改变HTML内容

!DOCTYPEhtml

htmllang=zh

head

metacharset=UTF-8

titleJavaScript示例/title

/head

body

h1id=title欢迎来到我的网站/h1

buttononclick=changeTitle()点击改变标题/button

script

//定义一个函数，用于改变标题的文本

functionchangeTitle(){

vartitle=document.getElementById(title);

title.innerHTML=标题已改变！;

}

/script

/body

/html

id=title为h1元素分配了一个ID，以便JavaScript可以引用它。

buttononclick=changeTitle()创建了一个按钮，当点击时会调用changeTitle函数。

document.getElementById(title)通过ID获取HTML元素。

innerHTML属性用于改变元素的HTML内容。

3.2示例：使用JavaScript控制CSS样式

!DOCTYPEhtml

htmllang=zh

head

metacharset=UTF-8

titleJavaScript控制CSS示例/title

style

#changeable{

color:bl