HTML基础

HTML简介

HTML（Hyper Text Markup Language）超文本标记语言。HTML文档也被称为网页

web浏览器读取HTML文档，并以网页的形式显示出它们。浏览器不会显示HTML标签，而是使用标签来解释页面的内容。

一个简单的HTML网页如下：

<html>
    <body>
        <h1>这个是标题</h1>
        <p>这是段落</p>
    </body>
</html>

页面显示效果如下：

元素：开始标签到结束标签之间的所有代码，元素可以嵌套
属性：在开始标签中定义，名称/值对的形式，比如：name="value"
当浏览器显示页面时，会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格

常用标签

<!DOCTYPE html> 声明文档类型
<html> 与 </html> 之间的文本描述网页
<head> 与 </head> 之间的文本是头部元素的容器
<title> 与 </title> 之间的文本是网页的标题
<base> 与 </base> 之间的文本是所有链接的默认地址或默认目标
<link> 与 </link> 之间的文本定义文档与外部资源之间的关系，最常用于连接样式表
<style> 与 </style> 之间的文本定义样式信息
<meta> 与 </meta> 之间的文本提供元数据，如页面描述、关键词、文档的作者、最后修改时间等（不显示在页面上，对机器可读）
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为一级标题（大）
<h2> 与 </h2> 之间的文本被显示为二级标题
...
<h6> 与 </h6> 之间的文本被显示为六级标题（小）
<p> 与 </p> 之间的文本被显示为段落
<a> 与 </a> 之间的文本被显示为链接
<img > 与 <img/> 之间的文本被显示为图像
<hr /> 显示一条水平线
注释不在网页中显示
<br /> 换行
<p style="" > </p> stype属性可以定义样式
<table> 与 </table> 之间的文本被显示为表格
<tr /> 行
<td /> 列
<ul> 与 </ul> 之间的文本被显示为无序列表
<ol> 与 </ol> 之间的文本被显示为有序列表
<li> 与 </li> 之间的文本被显示为列表项
div元素：用于组合其他元素的容器，常用于文档布局。（块级元素，浏览器会在其前后显示换行）
span元素：用于文本的容器。（内联元素，不换行）
class属性：使能够为元素的类定义css样式，例如：设置div元素的类，能够为相同的div元素设置相同的类（样式）
<iframe> 与 </iframe> 之间的文本被显示为内联框架（内嵌网页）

下面分别介绍：

头

head元素是所有头部元素的容器，指示浏览器在何处可以找到样式表，提供原信息等，以下标签可以被添加到head中：<title><base><link><meta><script><style>

一个简单的头如下：

 1 <!DOCTYPE html>  <!-- 声明文档类型为html -->
 2 <html>
 3     <head>
 4         <title>网页的标题</title>
 5         <base href="http://www.baidu.com/">
 6         <base target="_blank"/>
 7         <link href="123.css" />
 8         <style type="text/css">
 9             #header {
10             background-color:black;
11             color:white;
12             text-align:center;
13             padding:5px;
14             }
15         </style>
16         <meta name="keywords" content="HTML, CSS, XML" />
17     </head>
18     
19     <body>
20         <a href="/s?wd=f&rsv_spt=1&rsv_iqid=0x997e4eb4000a838c&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=88093251_56_hao_pg&rsv_enter=0&rsv_dl=tb&rsv_sug3=3&rsv_sug1=2&rsv_sug7=100&inputT=1586&rsv_sug4=1761">fd<a />
21     </body>
22 </html>

标题、段落、链接、图像、水平线、注释、换行、样式、表格、列表

下面做一个简单的例子，分别实现这些元素

 1 <html>
 2 <body>
 3 
 4     <h1> 标题1 </h1>
 5     <h2> 标题2 </h2>
 6     <h6> 标题6 </h6>
 7 
 8     <p> 段落1 </p>
 9     <p> 段落2 </p>
10     <p> 段落3 </p>
11 
12     <a href="http://www.baidu.com">链接到百度</a>
13     <a href="http://www.baidu.com" target="_blank"> 在新窗口中打开百度链接 </a>   <!-- 属性target，在新窗口打开链接-->
14 
15     <img src="D:zhangyangHTMLdownload.jpg" width='204' height='260'> <img/>  <!-- 图片img -->
16 
17     <hr />  <!-- 水平线hr -->
18 
19     <!-- 注释 -->
20 
21     <p> this <br /> is <br /> a <br /> dog <br />    <!-- 换行br -->
22 
23     <p style="background-color:orange">段落样式(背景色)</p>   <!-- 样式style -->
24     <p style="font-family:arial; color:red; font-size:30px"> 段落样式(字体颜色大小) </p>
25     <p style="text-align:center">段落样式(对齐方式)</p>
26 
27     <table border="1">  <!-- 表格table --> <!-- 边框属性border，1:有边框 -->
28         <tr>   
29             <th>Heading</th>
30         </tr>
31         <tr>                            <!-- 行tr -->
32             <td>row 1,cell 1</td>       <!-- 列td -->
33             <td>row 1,cell 2</td>
34         </tr>
35         <tr>
36             <td>row 2,cell 1</td>
37             <td>row 3,cell 2</td>
38         </tr>
39     </table>
40 
41     <ul>         <!-- 无序列表 -->
42         <li>苹果</li>   <!-- 列表项 -->
43         <li>橘子</li>
44     </ul>
45 
46     <ol>         <!-- 有序列表 -->
47         <li>apple</li>
48         <li>orange</li>
49     </ol>
50 
51 
52     <iframe src="4325.html" height="200"></iframe>  <!-- 内嵌网页(4325.html是只包含一个百度链接的网页) -->
53     <iframe src="http://www.baidu.com" width="1400"  height="200" frameborder="0"></iframe>  <!-- 内嵌网页 --><!-- 设置宽高、移除边框 -->
54 
55     
56 </body>
57 </html>

网页效果如下：

div元素

用于组合其他元素的容器，常用于文档布局。（块级元素，浏览器会在其前后显示换行）

一个例子如下：

 1 <style>
 2 #header {
 3     background-color:black;
 4     color:white;
 5     text-align:center;
 6     padding:5px;
 7 }
 8 #nav {
 9     line-height:30px;
10     background-color:#eeeeee;
11     height:300px;
12     width:100px;
13     float:left;
14     padding:5px; 
15 }
16 #section {
17     width:350px;
18     float:left;
19     padding:10px; 
20 }
21 #footer1 {
22     background-color:black;
23     color:white;
24     clear:both;
25     text-align:center;
26     padding:5px; 
27 }
28 </style>
29 
30 <body>
31     <div id="header">           <!-- div元素 -->
32         <h1>City Gallery</h1>
33     </div>
34  
35     <div id="nav">              <!-- div元素 -->
36         London<br>
37         Paris<br>
38         Tokyo<br>
39     </div>
40 
41     <div id="section">          <!-- div元素 -->
42         <h1>London</h1>
43     <p>
44         London is the capital city of England. It is the most populous city in the United Kingdom,
45         with a metropolitan area of over 13 million inhabitants.
46     </p>
47     <p>
48         Standing on the River Thames, London has been a major settlement for two millennia,
49         its history going back to its founding by the Romans, who named it Londinium.
50     </p>
51     </div>
52 
53     <div id="footer1">         <!-- div元素 -->
54         Copyright W3School.com.cn
55     </div>
56 
57 </body>

页面效果如下：

calss属性

使用div对元素进行分类（设置类），使我们能够为元素的类定义css样式。

为相同的类设置相同的样式，或为不同的类设置不同的样式

一个简单的例子（3个div都是cities类，共用一个cities样式）：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>   <!-- cities类的样式 -->
 5 .cities {
 6     background-color:black;
 7     color:white;
 8     margin:20px;
 9     padding:20px;
10 } 
11 </style>
12 </head>
13 
14 <body>
15 
16 <div class="cities">    <!-- cities类 -->
17 <h2>London</h2>
18 <p>London is the capital city of England. 
19 It is the most populous city in the United Kingdom, 
20 with a metropolitan area of over 13 million inhabitants.</p>
21 </div>
22 
23 <div class="cities">    <!-- cities类 -->
24 <h2>Paris</h2>
25 <p>Paris is the capital and most populous city of France.</p>
26 </div>
27 
28 <div class="cities">    <!-- cities类 -->
29 <h2>Tokyo</h2>
30 <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
31 and the most populous metropolitan area in the world.</p>
32 </div>
33 
34 </body>
35 </html>

页面效果如下：