Web应用基础

CSS

CSS介绍

  • CSS 指层叠样式表（Cascading Style Sheets）
  • 与HTML相辅相成，实现网页的排版布局与样式美化

CSS使用

根据CSS在页面中呈现的方式不同，有以下三种使用方式

  • 内联
  • 内嵌
  • 外链

CSS内联

内联(行内)样式

  • 任意的标签都有style属性,用于某个元素的样式设置
1
<标签名 style=“样式声明”>
  • 样式声明：由CSS属性和值组成
1
style="属性:值;属性:值;"
  • 内联（行内）样式案例
1
2
3
4
5
6
<body>
    <!-- 样式全部使用style实现 -->
    <h1 style="background-color: black;color: gold;text-align: center;">
        CSS基本概念
    </h1>
</body>

CSS内嵌

通过style标签，在HTML文档中嵌入CSS样式代码

  • 实现样式与内容的分离

  • 多个不同标签重用样式

  • 方便统一修改

  • 内嵌样式案例

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
    <style>
        h1{
            background-color: black;
            color: gold;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>CSS基本概念1</h1>
    <h1>CSS基本概念2</h1>
</body>

CSS外链

多个不同的页面重用样式，可以采用外链样式

  • 创建外部样式表文件，后缀使用.css
1
2
3
4
5
6
/* 外部样式文件 */
h1{
    background-color: black;
    color: gold;
    text-align: center;
}
  • 在HTML页面中使用link标签引入外部样式表，格式如下
1
2
<!-- 外部链接方式 -->
<link rel="stylesheet" href="css/h1.css">

JavaScript

JavaScript简介

  • 诞生于1995年，早期主要用于处理用户的输入验证
  • 嵌入到HTML页面中，实现页面的特性和行为
  • 是一种解释性编程语言，基于浏览器解释执行
  • 发明者是布兰登·艾克

JavaScript组成

一个完整的JavaScript实现由下列三个不同的部分组成

  • ECMAScript，提供核心语言功能
  • 文档对象模型（DOM），提供访问和操作文档内容的方法和接口
  • 浏览器对象模型（BOM），提供与浏览器交互的方法和接口

JavaScript使用方式

将JavaScript嵌入页面的三种方式

  • 元素绑定事件
  • 文档内嵌
  • 外部链接

元素绑定事件

  • 事件:指用户的行为
  • 事件处理:元素监听事件，并在事件发生后自动执行事件的过程
  • 绑定:将事件名称以标签属性的方式绑定到元素上执行事件处理
1
<button onclick="console.log('hello world')">click me</button>

文档内嵌

  • 传统的做法，所有的