HTML、CSS、JavaScript基础(简略版)

#第六届英特尔杯全国大学生软件创新大赛博客征集#

HTMLCSSJavaScript基础

文章目标


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

 HTML基础


   <html>
<body>
<h1>这是 Heading</h1>
<p>这是 paragraph.</p>
</body>
</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规则有选择器和声明组成)

 

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

 (多重声明)

 

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

 (选择器的分组,选择器便可以分享相同的声明)

 

body  {
     font-family: Verdana, sans-serif;
     }
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }
p  {
     font-family: Times, "Times New Roman", serif;
     }

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

 

li strong {
    font-style: italic;
    font-weight: normal;
  }

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

 

#red {color:red;}
#green {color:green;}

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

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

 

.center {text-align: center}

<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

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

 

[title]
{color:red;
}

CSS的创建
   外部样式表

 

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

   内部样式表

 

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

   内联样式(慎用)

 

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

Javascript基础


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

 

<!DOCTYPE html>
<html>
<body>
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
</script>
</body>
</html>
 

<body> 中的 JavaScript

 

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
 

<head> 中的 JavaScript 函数)

  


<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</body>
</html>

 

<body> 中的 JavaScript 函数)

 

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

(外部的 JavaScript

 


作者


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

  

Per informazioni più dettagliate sulle ottimizzazioni basate su compilatore, vedere il nostro Avviso sull'ottimizzazione.
Contrassegni: