您的位置：首页 > Web前端 > CSS

前端学习 HTML、CSS、JS基础

2016-04-07 08:01 771 查看

前言：

在这里整理一点点前端知识，为之后系统学习前端打点基础。

HTML基础：

网页的分类：

静态网页

动态网页

交互式网页

HTML简介：

用来描述网页的一种语言。

超文本标签语言。Hyper Text Markup Language

不是一种编程语言，而是一种标记语言 (markup language)

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

基本格式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="xxx">
<meta name="description" content="xxx">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Hello HTML</title>

<link rel="stylesheet" type="text/css" href="theme.css" />
<script src="myScript.js"></script>

</head>

<body>
Hello HTML.
</body>

</html>

<!DOCTYPE html>

必须首行定格

<title>

为文档标题

<meta charset="utf-8">

文档解码格式

<meta name="keywords" content="xxx">

和

<meta name="description" content="xxx">

提供给搜索引擎使用

<meta name="viewport" content="width=device-width, initial-scale=1.0">

移动端浏览器宽高缩放

<link>

标签可以引入 favicon 和样式表 CSS 文件

<script>

标签可以引入外部js文件

HTML标签总结

HTML 参考手册

上标： O3

下标：H2

HTML字符实体

HTML 字符实体

小于号 <

大于号 >

空格

CSS基础：

CSS: 层叠样式表(Cascading Style Sheets)。将网页内容和显示样式进行分离，方便维护。

概述：

- 样式定义如何显示 HTML 元素

- 样式通常存储在样式表中

- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

- 外部样式表可以极大提高工作效率

- 外部样式表通常存储在 CSS 文件中

- 多个样式定义可层叠为一

CSS语法：

1. CSS基础语法：

selector {declaration1; declaration2; ... declarationN}

选择器 {至少一条声明;}

图示：

2. 层叠次序：

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

1. 浏览器缺省设置

2. 外部样式表

3. 内部样式表（位于标签内部）

4. 内联样式（在 HTML 元素内部）

// 外部样式表
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

// 内部样式表
<head>
<style type="text/css">
p {
margin: 10px;
}
</style>
</head>

// 内嵌样式(可在动态效果中同 JavaScript 一同使用)
<p style="color: red">Sample Text</p>

CSS选择器

具体在：选择器

基本选择器

元素选择器 elementname

类选择器 .classname

ID选择器 #idname

通配选择器 * ns|* |

属性选择器 [attr=value]

组合选择器

分组选择器（在w3c上有）

相邻兄弟选择器 A + B

通用兄弟选择器 A ~ B

子选择器 A > B

后代选择器 A B

伪元素

伪类

JS基础：

JavaScript 是脚本语言，解释型语言。

HTML 中的脚本必须位于

<script>

与

</script>

标签之间。

脚本可被放置在 HTML 页面的

<body>

和

<head>

部分中。

<script>

和

</script>

会告诉 JavaScript 在何处开始和结束。

JavaScript 对大小写敏感

引入方式：

<script type="text/javascript" src="learn.js"></script>//外联文件

<script>//内嵌代码
alert("hello,js");
</script>

js消息框：

警告框

alert("文本")

警告框经常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作。

确认框

confirm("文本")

确认框用于使用户可以验证或者接受某些信息。

当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。

如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。

提示框

prompt("文本","默认值")

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

JS函数：

//使用function定义函数
function functionname(param1,param2,...,paramX)
{
这里是要执行的代码
//return;可以有返回值，不需要写返回值类型
}

JS函数中参数，不能用

var

标识

JS函数不能重载，即函数名不能相同

JS对象

JS对象参考手册

1. Global对象：

Global对象不直接使用，不能用

new

创建。在Script引擎被初始化时创建，即它的方法和属性可被直接调用。

2.Math对象：

无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。直接在JS中通过Math.PI这样使用。不需要使用

new

创建。

3.Date对象

var myDate=new Date() //创建Date对象,Date 对象会自动把当前日期和时间保存为其初始值。

4.String对象

var s1 = new String();
var s2 = new String("hello");
s3 = "hello";

alert(s2 == s3);//使用 == 判断字符串内容是否相同

5.Array对象

new Array();
new Array(size);
new Array(element0, element1, ..., elementn);

6.JS正则表达式

w3c 正则表达式

对象模型

DOM：Document Object Model，文档对象模型，被构造为对象的树，把标记型文档封装成对象，并且把标签也封装成对象，方便操作。

DOM 事件

DHTML 是一种使 HTML 页面具有动态特性的艺术，意味着 html + css + dom + js。

BOM：Browser Object Model，浏览器对象模型，使 JavaScript 有能力与浏览器“对话”。

结语：

此篇文章重新整理后和 Atom配置这篇文章连起来，算是对前端的基础中的基础了解点了，也是有点眉目了。之后会系统的学习前端知识，往深入里学。笔记也会越做越多。

参考：

w3c

MDN

文档：

chm版本离线参考手册

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航