前端--对前端的认识　

　一个网页的构成：

Html用于描述页面的结构

Css用于控制页面中元素的样式

JavaScript用于响应用户操作

html

超文本标记语言

第一个demo:

    我是小帅哥我是大帅哥

前端-- 注释

注释中的内容不会在页面中显示，但是会在源码中显示，我们可以通过注释来说明网页的代码。

也可以通过注释隐藏一些页面中不想显示的内容。

<font></font>用来设置字体，color属性用来设置颜色，size用来设置字体大小

效果：

w3c上面的标签列表，来自http://www.w3school.com.cn/tags/index.asp：

标签	描述
	定义注释。
	定义文档类型。
	定义锚。
	定义缩写。
	定义只取首字母的缩写。
	定义文档作者或拥有者的联系信息。
	不赞成使用。定义嵌入的 applet。
	定义图像映射内部的区域。
	定义文章。
	定义页面内容之外的内容。
	定义声音内容。
	定义粗体字。
	定义页面中所有链接的默认地址或默认目标。
	不赞成使用。定义页面中文本的默认字体、颜色或尺寸。
	定义文本的文本方向，使其脱离其周围文本的方向设置。
	定义文字方向。
	定义大号文本。
	定义长的引用。
	定义文档的主体。
	定义简单的折行。
	定义按钮 (push button)。
	定义图形。
	定义表格标题。
	不赞成使用。定义居中文本。
	定义引用(citation)。
	定义计算机代码文本。
	定义表格中一个或多个列的属性值。
	定义表格中供格式化的列组。
	定义命令按钮。
	定义下拉列表。
	定义定义列表中项目的描述。
	定义被删除文本。
	定义元素的细节。
	不赞成使用。定义目录列表。
	定义文档中的节。
	定义定义项目。
	定义对话框或窗口。
	定义定义列表。
	定义定义列表中的项目。
	定义强调文本。
	定义外部交互内容或插件。
	定义围绕表单中元素的边框。
	定义 figure 元素的标题。
	定义媒介内容的分组，以及它们的标题。
	不赞成使用。定义文字的字体、尺寸和颜色。
	定义 section 或 page 的页脚。
	定义供用户输入的 HTML 表单。
	定义框架集的窗口或框架。
	定义框架集。
	定义 HTML 标题。
	定义关于文档的信息。
	定义 section 或 page 的页眉。
	定义水平线。
	定义 HTML 文档。
	定义斜体字。
	定义内联框架。
	定义图像。
	定义输入控件。
	定义被插入文本。
<isindex>	不赞成使用。定义与文档相关的可搜索索引。
	定义键盘文本。
	定义生成密钥。
	定义 input 元素的标注。
	定义 fieldset 元素的标题。
	定义列表的项目。
	定义文档与外部资源的关系。
	定义图像映射。
	定义有记号的文本。
	定义命令的列表或菜单。
	定义用户可以从弹出菜单调用的命令/菜单项目。
	定义关于 HTML 文档的元信息。
	定义预定义范围内的度量。
	定义导航链接。
	定义针对不支持框架的用户的替代内容。
	定义针对不支持客户端脚本的用户的替代内容。
	定义内嵌对象。
	定义有序列表。
	定义选择列表中相关选项的组合。
	定义选择列表中的选项。
	定义输出的一些类型。
	定义段落。
	定义对象的参数。
	定义预格式文本。
	定义任何类型的任务的进度。
	定义短的引用。
	定义若浏览器不支持 ruby 元素显示的内容。
	定义 ruby 注释的解释。
	定义 ruby 注释。
	不赞成使用。定义加删除线的文本。
	定义计算机代码样本。
	定义客户端脚本。
	定义 section。
	定义选择列表（下拉列表）。
	定义小号文本。
	定义媒介源。
	定义文档中的节。
	不赞成使用。定义加删除线文本。
	定义强调文本。
	定义文档的样式信息。
	定义下标文本。
	为 <details> 元素定义可见的标题。
	定义上标文本。
	定义表格。
	定义表格中的主体内容。
	定义表格中的单元。
	定义多行的文本输入控件。
	定义表格中的表注内容（脚注）。
	定义表格中的表头单元格。
	定义表格中的表头内容。
	定义日期/时间。
	定义文档的标题。
	定义表格中的行。
	定义用在媒体播放器中的文本轨道。
	定义打字机文本。
	不赞成使用。定义下划线文本。
	定义无序列表。
	定义文本的变量部分。
	定义视频。
	定义可能的换行符。
<xmp>	不赞成使用。定义预格式文本。

如何让浏览器识别到底是html4还是xhtml还是html5?

利用文档声明：<!doctype html>

主要作用：

用来标识当前页面的html的版本;

该声明用来告诉浏览器，当前的页面是使用HTML5的标准编写的。

doctype

HTML总共有那么多的版本，而且这其中至少有三个版本在广泛使用，那么浏览器怎么知道我们在使用哪个版本呢？

为了让浏览器知道我们使用的HTML版本我们还需要在网页的最上边添加一个doctype声明，来告诉浏览器网页的版本。

html4

　　1、过渡版

　　2、严格版

　　3、框架集

xhtml1.0

过渡版

严格版

框架集

Html5

怪异模式

为了兼容一些旧的页面，浏览器中设置了

两种解析模式：

– 标准模式（Standards Mode）

– 怪异模式（Quirks Mode）

怪异模式解析网页时会产生一些不可预期的行为，所以我们应该避免怪异模式的出现。

避免的最好方式就是在页面中编写正确的doctype。

进制

几进制就是满几进一

二进制：

0 1

例如:10 11 100 101 110 111

十进制：

0 1 2 3 4 5 6 7 8 9

例如：10 11 12 13 14 。。。

十六进制：

满16进1

0 1 2 3 4 5 6 7 8 9 a b c d e f

a b c d e f分别表示10,11,12,13,14,15

例如：10 11 12 ... 19 1a 1b 1c 1d 1e 1f

16进制由于是满16进1，所以必须设置几个特殊的字符来表示10 11 12 13 14 15

八进制：

满8进1

0 1 2 3 4 5 6 7

例如：10 11 12 13 14 15 16 17 20 21 22

乱码

产生乱码的根本原因是，编码和解码采用的字符集不同。

计算机是一个非常笨的机器，它只认识两个东西 0 1。在计算机中保存的任何内容，最终都需要转换为0 1这种二进制编码来保存，包括网页中的内容。

比如：中国，在计算机底层，可以能需要转换为 1010001001010101011010。

在读取内容时，需要将二进制编码，在转换为正确的内容。

编码：依据一定的规则，将字符转换为二进制编码的过程。

解码：依据一定的规则，将二进制编码转换为字符的过程。

常见字符集：

ASCII

ISO-8859-1

GBK

GB2312：中文系统的默认编码。

UTF-8：万国码，支持地球上所有的文字。

ANSI：自动以系统的默认编码来保存文件。

告诉浏览器网页所使用的编码字符集，通过meta来进行设置，避免乱码问题的产生。

meta标签用来设置网页的一些元数据，比如网页的字符集，关键字，简介，

            
             
             网页的标题                这是一个非常漂亮的网页

常用标签

内容标题标签

h1~h6

-在HTML中，一共有六级标题标签

h1 ~ h6

在显示效果上h1最大，h6最小，但是文字的大小我们并不关心

使用HTML标签时，关心的是标签的语义，我们使用的标签都是语义化标签

6级标题中，h1的最重要，表示一个网页中的主要内容，h2 ~ h6重要性依次降低

对于搜索引擎来说，h1的重要性仅次于title，搜索引擎检索完title，会立即查看h1中的内容

h1标签非常重要，它会影响到页面在搜索引擎中的排名，页面只能写一个h1

一般页面中标题标签只使用h1 h2 h3,h3以后的基本不使用

            
             
             网页的标题                这是一个非常漂亮的网页
        这是一个非常漂亮的网页
        这是一个非常漂亮的网页
        这是一个非常漂亮的网页
        这是一个非常漂亮的网页
        这是一个非常漂亮的网页

效果：

段落标签：

段落标签，段落标签用于表示内容中的一个自然段

使用p标签来表示一个段落

p标签中的文字，默认会独占一行，并且段与段之间会有一个间距

网页的标题

这是一个非常漂亮的网页

段落标签1

段落标签2

效果：

自结束标签br

在HTML中，字符之间写再多的空格，浏览器也会当成一个空格解析，

换行也会当成一个空格解析。

在页面中可以使用br标签来表示一个换行，br标签是一个自结束标签

网页的标题

这是一个非常漂亮的网页

张三，

李四，

赵雷，

王五。

效果：

自结束标签hr

hr标签也是一个自结束标签，可以在页面中生成一条水平线

网页的标题

这是一个非常漂亮的网页

张三，

李四，

赵雷，

王五。

效果：

实体

在HTML中，一些如< >这种特殊字符是不能直接使用，

需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号我们称为实体（转义字符串）

浏览器解析到实体时，会自动将实体转换为其对应的字符

实体的语法：

&实体的名字;

< <

> >

空格  

版权符号 ©

html中实用的实体：

http://w3school.com.cn/html/html_entities.asp

实体

a<b>c

©÷老王爱琼琼

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分（cent）	¢	¢
£	镑（pound）	£	£
¥	元（yen）	¥	¥
€	欧元（euro）	€	€
§	小节	§	§
©	版权（copyright）	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

效果：