HTML、CSS、JavaScript基础（简略版）

wangwang · 发表于 2013-4-23 14:44:44

文章目标

￤从整体上并快速了解HTML、CSS和JavaScript（动手写过两三个项目以后就会熟练的）。￤给零基础学习HTML5的童鞋们打下补丁。￤能看懂基本网页已经算不错了。 HTML基础

1

<html>

2

<body>

3	<h1>这是 Heading</h1>

4	<p>这是 paragraph.</p>

5

</body>

6

</html>

￤HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页

￤HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词，比如 <html> HTML 标签通常是成对出现的，比如 <b> 和 </b> 标签对中的第一个标签是开始标签，第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签空标签<br />￤HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。 HTML 元素以开始标签起始 HTML 元素以结束标签终止元素的内容是开始标签与结束标签之间的内容某些 HTML 元素具有空内容（empty content）空元素在开始标签中进行关闭（以开始标签的结束而结束）大多数 HTML 元素可拥有属性￤HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name="value"。属性总是在 HTML 元素的开始标签中规定。CSS基础

￤基础语法

（CSS规则有选择器和声明组成）

1

body {

2	color: #000;

3	background: #fff;

4	margin: 0;

5	padding: 0;

6	font-family: Georgia, Palatino, serif;

7

}

（多重声明）

1	h1,h2,h3,h4,h5,h6 {

2	color: green;

3

}

（选择器的分组，选择器便可以分享相同的声明）

1

body {

2	font-family: Verdana, sans-serif;

3

}

4	td, ul, ol, ul, li, dl, dt, dd {

5	font-family: Verdana, sans-serif;

6

}

7

p {

8	font-family: Times, "Times New Roman", serif;

9

}

（继承与摆脱继承）￤派生选择器通过依据元素在其位置的上下文关系来定义样式

1	li strong {

2	font-style: italic;

3	font-weight: normal;

4

}

￤id选择器为标有特定 id 的 HTML 元素指定特定的样式，以 "#" 来定义。

1	#red {color:red;}

2	#green {color:green;}

1	<p id="red">这个段落是红色。</p>

2	<p id="green">这个段落是绿色。</p>

￤类选择器类选择器以一个点号显示

1	.center {text-align: center}

1	<h1 class="center">

2	This heading will be center-aligned

3

</h1>

4	<p class="center">

5	This paragraph will also be center-aligned.

6

</p>

￤属性选择器对带有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

1

[title]

2	{color:red;

3

}

￤CSS的创建外部样式表

1

<head>

2	<link rel="stylesheet" type="text/css" href="mystyle.css" />

3

</head>

内部样式表

1

<head>

2	<style type="text/css">

3	hr {color: sienna;}

4	p {margin-left: 20px;}

5	body {background-image: url("images/back40.gif");}

6

</style>

7

</head>

内联样式（慎用）

1	<p style="color: sienna; margin-left: 20px">

2	This is a paragraph

3

</p>

Javascript基础

￤介绍 JavaScript 是属于网络的脚本语言！ JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。 JavaScript 是因特网上最流行的脚本语言。 HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

01	<!DOCTYPE html>

02

<html>

03

<body>

04

05	document.write("<h1>This is a heading</h1>");

06	document.write("<p>This is a paragraph</p>");

07

</script>

08

</body>

09

</html>

10

（<body> 中的 JavaScript）

01	<!DOCTYPE html>

02

<html>

03

<head>

04

05	function myFunction()

06

{

07	document.getElementById("demo").innerHTML="My First JavaScript Function";

08

}

09

</script>

10

</head>

11

<body>

12	<h1>My Web Page</h1>

13	<p id="demo">A Paragraph</p>

14	<button type="button" onclick="myFunction()">Try it</button>

15

</body>

16

</html>

17

（<head> 中的 JavaScript 函数）

01	<!DOCTYPE html>

02

<html>

03

<body>

04	<h1>My Web Page</h1>

05	<p id="demo">A Paragraph</p>

06	<button type="button" onclick="myFunction()">Try it</button>

07

08	function myFunction()

09

{

10	document.getElementById("demo").innerHTML="My First JavaScript Function";

11

}

12

</script>

13

</body>

14

</html>

15

16

（<body> 中的 JavaScript 函数）

1	<!DOCTYPE html>

2

<html>

3

<body>

4	<script src="myScript.js"></script>

5

</body>

6

</html>

（外部的 JavaScript）

作者

￤学校：北京航天航空大学￤姓名：彭伟￤E-mail：786800158@qq.com￤新浪微博：Way-彭伟 http://weibo.com/pengway￤微信号：w786800158