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>
页面效果如下：
