Web前端基础复习(HTML,CSS,JavaScript)
Web前端基础复习
2020/2/24 周一（网络授课第一天）
吉首大学软件学院
2017级3班 陈锋
一．HTML 这里表示段落
定义
HTML称为超文本标记语言（HyperText Markup Language），是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
特点
超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：简易性，可扩展性，平台无关性，通用性。
文字与图像
1、 设置文字字体、大小与颜色
语法：文字
2、 设置正文的标题
语法：
3、 设置段落
语法：
表单
1、 创建表单
语法：
2、 文本框和密码框
-
文本框： -
密码框：
框架
1、 框架基本语法
2、 框架分栏
2) 垂直分栏
- 水平分栏
二．CSS
定义
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
原理
CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。
样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式单。
名称CSS中的“层叠（cascading）”表示样式单规则应用于HTML文档元素的方式。具体地说，CSS样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。
选择器
三大选择器：基本选择器，组合选择器，属性选择器。
ID和类选择器：
如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
以下的样式规则应用于元素属性 id=“para1”:
#para1
{
text-align:center;
color: red;
}
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中：
.center {text-align:center;}
背景
1、背景色
background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
例：这条规则把元素的背景设置为灰色：p {background-color: gray;}
2、背景图像
background-image 属性为元素设置背景图像。background-image 属性的默认值是 none，表示背景上没有放置任何图像。
例：如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：
body {background-image: url(/i/eg_bg_04.gif);}
3、背景重复
background-repeat属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。默认地，背景图像将从一个元素的左上角开始。
例：
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
文本
1、文本装饰
text-decoration 属性，这是一个很有意思的属性，它提供了很多非常有趣的行为。
text-decoration 有 5 个值：none 、underline、overline 、line-through、blink。
不出所料，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。
a {text-decoration: none;}
2、 font 属性
解释：简写属性在一个声明中设置所有字体属性。
可以按顺序设置如下属性：
u font-style
u font-variant
u font-weight
u font-size/line-height
u font-family
3、 font-style 属性
定义：font-style 属性定义字体的风格
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。
实例：
h1 {font-size:250%;}
列表
1、设置所有的列表属性
定义：list-style 简写属性在一个声明中设置所有的列表属性。
可能值：
list-style-type 设置列表项标记的类型。参阅：list-style-type 中可能的值。
list-style-position 设置在何处放置列表项标记。参阅：list-style-position中可能的值。
list-style-image 使用图像来替换列表项的标记。参阅：list-style-image中可能的值。
inherit 规定应该从父元素继承 list-style 属性的值。
实例：
ul{
list-style:square inside url('/i/arrow.gif');
}
三．JavaScript
简介
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
特点
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
1.是一种解释性脚本语言（代码不进行预编译）
2.主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
3.可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
4.跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
5.Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。
基本语法
定义变量统一用var关键字
语法：var 变量名称=变量值
标示符：由字母数字下划线构成 不能以数字开头 不能是关键字 严格区分大小写
数据类型：
数值型：number
字符串：string
布尔型：boolean
特殊数据类型：undefined 空的 未定义的 未赋值的
空值：null
函数
关键字：function
语法：
function 函数名称([参数])
{
函数体
}
无参数无返回值
function f()
{
…………..
}
无参数有返回值
function f()
{
return ‘XXX;
}
有参数无返回值
function f(参数名称){ 函数体 }
有参数有返回值
function f(参数名称)
{
return 返回值;
}
在函数中，当局部变量名称与全局变量冲突时 函数体内选用的是局部变量
未完待续~~~