HTML第一讲

HTML标记区分

HTML即超文本标记语言（HtyperText Markup Language），其作用就是将编辑的内容在屏幕上显示。文件的后缀为.HTML。

在HTML中成对出现的叫做双标记（譬如：<p></p>,<a></a>等等；其中<p>称为开始标记，</p>称为结束标记），而有些标记单独出现，譬如（<br />,<hr />），等这些称为单标记

（而在网页中单标记比较少）

CSS

CSS（Cascading Style Sheets），即层叠样式表。其作用就是给网页的显示增加色彩的效果，美化网页。文件的后缀为.CSS。

JavaScript

JavaScript又称为脚本。为网页添加动态效果。原生的JavaScript现在很少人在用，大多数人现在使用的是jQuery。文件的后缀为.JS或者.JQ

一个HTML该怎么写

首先在head中定义样式，或者脚本。title 表示显示的网页名字。body 又称为主体部分，显示在网页中的内容都在body中编写。

下面是代码：第一个网页hello word

1 <!doctype html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
5 <title>注册</title>
6 </head>
7 <body>
8      <p>hello word</p>
9 </body>

定义CSS样式

CSS样式的定义规则有三种

1.内联CSS样式

格式：

<标记名 style=" ;"></标记名> 其中多个样式使用；分隔开

　　内联式顾名思义就是在标记名内部使用。下面举例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p style="font-size: 18pt;color:#FF0000;">hello word</p>
    <p style="font-size: 18pt;color:#00FF00;">hello word</p>
    <p style="font-size: 18pt;color:#0000FF;">hello word</p>
</body>
</html>

2.内嵌CSS样式

格式

内联样式要在head 标记内部添加。与上一种方式相比，此方法可以简化代码。以减少代码量，通过比较不难发现如果同时定义的内联式要写三遍，而下列方式只需要修改特定格式。

下面举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p{
            font-size: 18pt;
            color:#FF0000;
        }
        .p1{
            color:#00FF00;
        }
        #p2{
            color: #0000FF;
        }
    </style>
</head>
<body>
    <p>hello word</p>
    <p class="p1">hello word</p>
    <p id="p2">hello word</p>
</body>
</html>

3.引用外部独立的.CSS样式文件

格式：

此定义方式需要在head中定义一个外部的CSS文件，你需要先定义好外部CSS样式表，然后通过link标记引用进来。与上面的方式相比，如果定义的样式过多会显得头部定义比较冗余，通过引用外部的样式表减少冗余性。

下面举例：

CSS文件中代码

 1 p{
 2     font-size: 18pt;
 3     color:#FF0000;
 4 }
 5 .p1{
 6     color:#00FF00;
 7 }
 8 #p2{
 9     color: #0000FF;
10 }

HTML中的代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" type="text/css" href="ceshi.css" />
 7 
 8 </head>
 9 <body>
10     <p >hello word</p>
11     <p class="p1">hello word</p>
12     <p id="p2">hello word</p>
13 </body>
14 </html>

引用外部样式还有第二种方法

在style开头使用@import引用外部样式表（样式代码就是上面的在这就不写了）

下面是案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        @import "ceshi.css";
    </style>

</head>
<body>
    <p >hello word</p>
    <p class="p1">hello word</p>
    <p id="p2">hello word</p>
</body>
</html>