HTML笔记（1）

HTML

2015-8-31

HTML超文本标记语言（HyperText Markup Language）

是一种纯文本类型的语言。使用带有尖括号的“标记”将网页中的内容逐一标识出来。

  用来设计网页的标记语言

用该语言编写的文件，以.html或者.htm为后缀

由浏览器解释执行

HTML页面上，可以嵌套用脚本语言编写的程序段，如：VBScript，JavaScript

 

HTML基础语法

1、标记语法

HTML用于描述功能的符号称为“标记”，比如

、

等

标记在使用时必须使用尖括号括起来（<>）

有封闭类型标记，也有非封闭类型的标记

封闭：成对出现，有开始，有结束，也叫双标签。如：

非封闭：只有开始没有结束，也叫单标签。如：
、

---

、

2、元素，即标记

每一对尖括号包围的部分

如包围的部分就叫做body元素

元素就像是小标签，用于标识网页文档的不同部分

元素可以包含文本内容和其他元素，也可以是空的，比如前面所述的空标记

元素嵌套

元素之间可以相互嵌套，形成更为复杂的语法

注意：要注意嵌套的标签顺序；代码要以缩进的方式体现出来 

3、属性和值

属性用来修饰元素

<标记名称 属性名=“属性值” 属性名=“属性值”>

属性的声明必须位于开始标记里；一个元素的属性可能不止一个，多个属性之间用空格隔开；多个属性之间不区分先后顺序

每个属性都有值

属性和属性的值之间用等号连接；属性的值包含在引号中

这是一个P

 

标准属性（公共属性、通用属性）：

大部分标签所具备的属性，

如：id（定义所在标签的唯一标识名称）

Title（鼠标移入到当前标签所在区域时所显示的文字）

Class（引用样式表中的指定类样式）

Style（定义当前标签的行内样式）

4、注释

注释只在编辑文档情况下可见，在浏览器展示页面时并不会显示

为代码添加适当的注释是一种良好的编码习惯

添加注释的语法如下：

 

Ps：“”之间的任何内容都不会显示在浏览器中；注释不可以嵌套在其他注释中；注释不可以嵌在<>标记中；

5、HTML和XHTML、HTML5

1999年12月24日，W3C推荐标准HTML4.01

XHTML于2000年的1月26日成为W3C标准

与HTML4.01几乎相同；更严格更纯净的HTML版本

HTML5的目标，就是更为简洁的HTML代码（不再严格要求，并保证兼容性）

6、HTML文档的结构

文档类型声明  

    整个文档的包含元素

页面头部

页面主体部分

-----------------------------------------------------

2015-9-01

1、元素

 作用：网页头部，主要包含网页的说明信息。

①　网页标题   

----标题内容出现在浏览器最上方；标题标签没有任何属性；标题只能出现在head标签中；一个网页最多只能有一个标题。

②　网页的编码格式 

默认编码：ISO-8859-1

通过meta标签 

          通过meta标签  

③　声明内部样式表 

④　引入外部样式表

⑤　声明内部的js（javascript）脚本 

⑥　引入外部的js（JavaScript）脚本

⑦　声明其他元素，如关键字、描述等

 添加网页的描述和关键字。Meta：一般做说明信息的声明。

常用属性：http-equiv(编码)  content  name  charset（编码）

添加关键

添加描述  

2、文本标记

作用：文本是网页上的重要部分；直接书写的文本会用浏览器的样式显示；包含在标记中的文本则会被显示为标记所拥有的样式。

特殊字符：通过转义字符(改变了单词的原有的意思，被解释成一种全新的含义)来表示特殊符号.

空格： 

 < ：<  小于

 > ：>  大于

 ¥ ：¥  人民币

 ©：©  企业标识

“："  引号

文本样式：对文本进行修饰。

... 加粗

...倾斜

...下划线

...删除线

^...上标

_...下标

 

3、标题元素  

标题元素让文字以醒目的方式显示，旺旺用于文章的标题

 一级标题

 二级标题

.

.

 六级标题

4、段落元素 

P提供了结构化文本的方式，具备一定的格式。

与其他文本用换行区分；添加垂直空白距离，作为段落的间距

P标签的常用属性：align：文本在p标签内的水平对齐方式

                  align=”center/left/right”

5、换行标记 

在任何地方创建手工换行

6、分区元素

多用于布局；方便以后对文本添加不同的样式

块分区元素：该元素会自动占一行

行内分区元素：众多的行内元素不会换行，在一行内显示

7、块级元素和行内元素

块级元素：div , p , hr , hn , ol , ul ....

作用：多数用于网页布局

行内元素：span, b, s, u, i,sub,sup.....

作用：包围文本，方便为文本添加效果 

8、分割线 

---

作用：在网页构建一条水平线。空标记。属于块级元素。

常用属性：size：尺寸，水平线的粗细程度

width：水平线的长度。（取值可以给具体值，可以给百分比（可随浏览器大小调整））

align：水平对齐方式（center、left、right）

color：颜色

9、预格式化标签

保留源文件当中的空格和换行格式