摘要：元数据是关于数据的信息。标签提供关于文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。典型的情况是，元素被用于规定页面的描述关键词文档的作者最后修改时间以及其他元数据。

                   Web前端的基础知识

什么是web？
WEB标准是一系列标准的总称，包括HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。WEB标准不仅仅是大家常说的DIV+CSS。

一、HTML部分
合理的结构
Html4.0的时候我们基本都是用table来布局，但是web2.0时代也是如大家所知道的那样用div+css来布局，table布局几乎不必用到css来影响web的表现，但是却要一层套一层的table，td，tabel…，如此页面相当难以维护，且不易控制表现；而使用div+css来布局就显得更加合理，它使得html结构层与css表现层分离，便于维护，但是它也带来可怕的兼容性问题，特别是ie系列浏览器，它有自己的一套解析和渲染页面的方式与w3c标准实现有着一系列的差异，不过这些差异可以通过hack来解决，而且一旦你掌握了合理的结构，兼容的css，标准的写法这些差异其实完全可以避免产生。html标签通常由尖括号包围的关键词，其标签通常是成对出现的 和开始和结束标签也被称为开放标签和闭合标签。

元数据（metadata）是关于数据的信息。
标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

  //指明文字编码
   //指明采用的语法
     //指明作者
   //指明版权 
    //对网站的简单描述
      //说明了本网站的关键字。


 


对不起。我们已经搬家了。您的 URL 是 http://www.baidu.com


您将在 5 秒内被重定向到新的地址。

如果超过 5 秒后您仍然看到本消息，请点击上面的链接。

后面2行主要是被百度这些搜索网站检索的时候用到的，非常重要。

html链接： 标签进行定义的。
例子： baidu href:在href属性中指定连链接的地址，是超文本引用的意思。
style="text-decoration:none"创建一个没有下划线的超链接
定义没有下划线
html图像： 图像的名称和尺寸是以属性的形式提供的。
tppabs：该软件是离线浏览器。

替换文本属性（Alt）
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

设置图像的对齐方式：

图像 ,是关闭空元素的方法。使用空的段落标记

html（提示：使用小写标签）
属性为html元素提供附加信息。 属性总是以名称/值对的形式出现。Name=value 属性总是在html元素的开始标签中规定。

设置在html中字体的格式。

拥有关于对齐 方式的附加信息，居中排列标题。

---

标签在 HTML 页面中创建水平线。

html注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
注释是这样写的：
实例
注释列表

html拆行

        如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 
 标签：

This is
a para
graph with line breaks

浏览器忽略了源代码中的排版（省略了多余的空格和换行）

始终为属性值加引号。属性值应该始终被包括在括号内。双引号是最常用的，若属性值本身含有双引号，则必须使用单引号。

1、标头元素定义title，搜索引擎关键字
2、标题元素
3、段落元素

4、字形元素 定义一个粗体字形元素。
5、下划线字体 :
6、定义斜体字体
7、链接元素定义一个锚元素，也就是链接元素
8、图像元素 定义个图像元素。
9、表格元素

定义表头元素，需要加入rules=groups
定义表主体元素
定义表尾中的元素。

创建页面表格：都以像素作为单位；width：设置表格的宽度。

10、列表元素：html中的列表：无序列表以及有序列表

:无序列表 若需要更改列表项的标志，type的属性可是disc、square 、circle中的任意一个。

 
每一个列表

：有序列表

 每一个列表

11、表单元素：

 表单元素一般作为数据，提交给后台服务器做处理。它是由
  
来定义的。

如果要在表单中包括一个或多个文件选择字段，必须把

标签的enctype属性设置为multipart/form-data。

最常用的表单标签 标签的类型由标签属性type决定。


                    "password"  定义密码输入框。
                    "radio"用来定义单选按钮。
                    "checkbox"定义个复选框。
                    "submit"定义个提交按钮。

input：accpet属性：可约束浏览器允许用户选择的文件类型。
的主要属性：action以及method:
action:用来指定表单数据被提交后，处理这些数据的程序的地址
Method: 1 post:将表单数据放在http数据的正文部分进行传递。将与action中指定的表单处理服务器连接；浏览器按分段传输的方法将数据传给服务器。

      2 get:将表单数据加到action所指的地址之后进行传递。浏览器先与表单处理服务器建立链接，在一个步骤中发送所有的表单数据。

get：从服务器上获取数据；
post：向服务器传送数据。 其中get是form的默认方法。

标签：定义一个select表单控制中的每个条目，浏览器将标签中的内容作为标签的菜单或是滚动列表中的一个元素显示，其内容只能是纯文本，不能有任何装饰。



Volvo Saab Mercedes Audi




selected属性：在option标签中包含selected属性后，就能预定一个或多个选项。

二、CSS部分
对于一条css如何定义，不用多讲，但是在定义css的时候我们最好考虑一下是否有必要加上这个className，因为定义css我们完全可以使用标签来定义，比如上面的例子里，我们想给span里的文字加粗或者换成红色字体，没有必要给这个span标签特意加上一个className，可以直接这样来定义
.topbar p span{font-weight:bold;color:red;}
这样我们可以节约很多className名字，避免因为相同的样式名而覆盖了之前的属性，而且层次结构也足够的清晰。

行内元素和块级元素
块级元素生成一个元素框，（默认地）它会填充其父级元素的内容，旁边不能有其他元素。换句话说，他在元素框之前和之后生成了“分隔”符。我们最熟悉的HTML元素就是是p和div.
行内元素在一个文本行内生成元素框，而不会打断这行文本。行内元素最好的例子就是XHTML中的a,span元素。strong和em也属于行内元素。这些元素不会在它本身之前或之后生成“分隔符”，所以可以出现在另一个元素的内容中，而不会破坏其显示。
注意，尽管“块”和“行内”这两个词与HTML和XHTML中的块级和行内元素有很多共同点，但也存在一个重要的差别。在HTML和XHTML中，块级元素不能继承自行内元素（即不能嵌套在行内元素中）。但是CSS中，对于显示内容如何嵌套不存在任何限制。

1、内部样式表 内部样式表只对所在的网页有效。

   当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 

2、外部样式表：将样式写在一个以.css为后缀的css文件里面。

  当样式需要被应用到很多页面的时候。外部样式将是理想的选择，使用外部样式表，可以通过更改一个文件来改变整个站点的外观。

rel 属性规定当前文档与被链接文档之间的关系
你的例子里rel 属性指示被链接的文档是一个样式表只有 rel 属性的 "stylesheet" 值得到了所有浏览器的支持。其他值只得到了部分地支持。

3、内嵌样式

    当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
 ，用style定义内嵌的。
This is a paragraph