您的位置：首页 > Web前端 > HTML

HTML笔记（1）

2015-11-12 22:06 477 查看

HTML

2015-8-31

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

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

用来设计网页的标记语言

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

由浏览器解释执行

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

HTML基础语法

1、标记语法

HTML用于描述功能的符号称为“标记”，比如<p>、<h1>等

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

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

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

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

2、元素，即标记

每一对尖括号包围的部分

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

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

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

元素嵌套

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

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

3、属性和值

属性用来修饰元素

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

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

每个属性都有值

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

<p align=”center”>这是一个P</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文档的结构

文档类型声明 <!DOCTYPE html>

<html>整个文档的包含元素

<head>页面头部

<body>页面主体部分

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

2015-9-01

1、<head >元素

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

①　网页标题 <title></title>

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

②　网页的编码格式

默认编码：ISO-8859-1

通过meta标签

<meta http-equiv=”content-type”content=”text/html;charset=utf-8”/>

通过meta标签 <meta charset=”utf-8”/>

③　声明内部样式表 <style></style>

④　引入外部样式表

⑤　声明内部的js（javascript）脚本 <script></script>

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

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

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

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

添加关键<meta name=”keywords” content=”关键字描述”/>

添加描述 <meta name=”description” content=”描述内容”/>

2、文本标记

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

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

空格：

< ：< 小于

> ：> 大于

¥ ：¥ 人民币

©：© 企业标识

“：" 引号

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

<b>...</b> 加粗

<i>...</i>倾斜

<u>...</u>下划线

<s>...</s>删除线

<sup>...</sup>上标

<sub>...</sub>下标

3、标题元素 <hn> </hn>

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

<h1></h1> 一级标题

<h2></h2> 二级标题

.

.

<h6></h6> 六级标题

4、段落元素 <p></p>

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

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

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

align=”center/left/right”

5、换行标记 <br>

在任何地方创建手工换行

6、分区元素

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

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

<div></div>

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

<span></span>

7、块级元素和行内元素

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

作用：多数用于网页布局

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

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

8、分割线 <hr>

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

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

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

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

color：颜色

9、预格式化标签<pre></pre>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航