1.HTML简介

HTML - 超文本标记语言 (Hyper Text Markup Language) HTML是建设网站/网页制作主要语言。 HTML是一种易于学习的标记语言。 HTML使用像 尖括号内标记标签来定义网页的内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

实例解析
    <!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元(meta)数据
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

HTML使用开始标记和结束标记来标记一个网页元素,:在上面的例子, 标签标志着一个段落开始, 标志着该段末尾。 通过使用简单的HTML标签,网页设计师可以为一个网页(HTML文档)添加标题,段落,文字,表格,图片,列表,编程代码等。 Web浏览器(IE浏览器,火狐,Chrome等)读取HTML文档,解释HTML标记,并显示正确用户可读的内容(不显示HTML标签)

2.HTML基础

2.1标签

<h1> - <h6>: HTML 标题(Heading)是通过<h1> - <h6>标签来定义的. <p>: HTML 段落是通过标签<p>来定义的. <a>: HTML 链接是通过标签<a>来定义的.提示:在 href 属性中指定链接的地址;使用 target 属性,你可以定义被链接的文档在何处显示;HTML 链接id属性可用于创建在一个HTML文档书签标记 <img>: 1.HTML 图像是通过标签<img>来定义的.注意: 图像的名称和尺寸是以属性的形式提供的。 2.在 HTML 中,图像由<img> 标签定义。 <img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。 要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。 <img src="http://www.runoob.com/images/logo.png" alt="runoob.com" width="336" height="69"> alt 属性用来为图像定义一串预备的可替换的文本。 在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。 height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。 属性值默认单位为像素; <body> 元素定义了 HTML 文档的主体。 <html> 元素定义了整个 HTML 文档。 <hr> 标签在 HTML 页面中创建水平线。 <br /> HTML 折行,<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义,因此它没有结束标签。 <b> 定义粗体文本,是一个HTML 文本格式化标签 <pre> 定义预格式文本,是一个HTML "计算机输出" 标签 <cite> 定义引用、引证,是一个HTML 引文, 引用, 及标签定义 <!-- 这是一个注释 -->定义HTML 注释 <head> <head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。 可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>. 元素包含了所有的头部标签元素。在 元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。 <base> <base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接: <link> <link> 标签定义了文档与外部资源之间的关系。 <link>标签通常用于链接到样式表: <style> <style> 标签定义了HTML文档的样式文件引用地址. 在<style> 元素中你也可以直接添加样式来渲染 HTML 文档: <meta> meta标签描述了一些基本的元数据。 meta标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。 META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。 元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。 meta 一般放置于 head 区域 <script> 该标签用于加载脚本文件,如: JavaScript。

2.2HTML 属性

HTML 元素可以设置属性 属性可以在元素中添加附加信息 属性一般描述于开始标签 属性总是以名称/值对的形式出现,比如:name="value"。 属性实例 HTML 链接由 <a>标签定义。链接的地址在 href 属性中指定: <a href="http://www.runoob.com">这是一个链接</a> 下面列出了适用于大多数 HTML 元素的属性: class:为html元素定义一个或多个类名(classname)(类名从样式文件引入) id 定义元素的唯一id style 规定元素的行内样式(inline style) title 描述了元素的额外信息 (作为工具条使用) 5.HTML 元素 元素的内容是开始标签与结束标签之间的内容 HTML 文档由嵌套的 HTML 元素构成。 HTML 空元素 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。 <br> 就是没有关闭标签的空元素(<br> 标签定义换行)。 一些标签的使用,切记所有标签都需要闭合,不管是单体标签还是成对标签。(尽管目前浏览器是识别有些标签不闭合的情况,但是取的最好的保证兼容性,使用闭合)

2.3 HTML 样式- CSS

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的. CSS 可以通过以下方式添加到HTML中: 内联样式 在HTML元素中使用"style" 属性,当特殊的样式需要应用到个别元素时,就可以使用内联样式。 <h1 style="font-family:verdana;">一个标题</h1> <p style="font-family:arial;color:red;font-size:20px;">一个段落。</p> 内部样式表 当单个文件需要特别样式时,就可以使用内部样式表 在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS <head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head> 外部引用 当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。 使用外部 CSS 文件 最好的方式是通过外部引用CSS文件.

2.4 HTML 图像

2.5 HTML表格

<table> 表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等 <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> 在浏览器中显示结果如下:

2.6 HTML 列表

HTML 支持有序、无序和定义列表: HTML无序列表 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。 无序列表使用<ul> 标签 <ul> <li>Coffee</li> <li>Milk</li> </ul> 浏览器显示结果如下:
  • Coffee
  • Milk
HTML 有序列表 同样,有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于 <ol>标签。每个列表项始于 <li> 标签。 <ol> <li>Coffee</li> <li>Milk</li> </ol> 浏览器显示结果为:
  1. Coffee
  2. Milk

2.7 HTML 区块与布局

HTML 可以通过 <div><span>将元素组合起来。 大多数网站会把内容安排到多个列中(就像杂志或报纸那样)。 大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。

2.8 HTML 表单和输入

HTML 表单用于收集不同类型的用户输入; HTML 表单 表单是一个包含表单元素的区域。 表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。 表单使用表单标签 <form>来设置; HTML 表单 - 输入元素 多数情况下被用到的表单标签是输入标签(<input>)。 输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下: 文本域(Text Fields); 密码字段; 单选按钮(Radio Buttons); 复选框(Checkboxes); 提交按钮(Submit Button); 文本域(Text Fields)举例: <form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form> 浏览器显示如下:
First name:
Last name:

2.9 HTML 框架

通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。 使用<iframe>语法,定义一个内联的iframe>语法,定义一个内联的iframe

2.10 HTML 颜色

HTML 颜色由红色、绿色、蓝色混合而成。 颜色值 HTML 颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。 每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。 目前所有浏览器都支持以下颜色名。 141个颜色名称是在HTML和CSS颜色规范定义的(17标准颜色,再加124)。下表列出了所有颜色的值,包括十六进制值。 Remark 提示: 17标准颜色:黑色,蓝色,水,紫红色,灰色,绿色,石灰,栗色,海军,橄榄,橙,紫,红,白,银,蓝绿色,黄色。点击其中一个颜色名称(或一个十六进制值)就可以查看与不同文字颜色搭配的背景颜色。

2.11 HTML 脚本

JavaScript 使 HTML 页面具有更强的动态和交互性。 HTML