当前位置：Gxlcms > html代码 > HTML笔记（1）_html/css_WEB-ITnose

HTML笔记（1）_html/css_WEB-ITnose

时间：2021-07-01 10:21:17 帮助过：9人阅读

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）脚本

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

1、图像与链接

URL：统一资源定位器，用来标识网络中的任何资源

文本、图片、音视频文件、段落，或其他超文本

即路径，指从当前位置到目标位置所经过的路线

路径在web页面主要有三种形式：

绝对路径：文件从最高级目录下开始的完整路径

如： E:\LXD_silence\HTML5Basic\Day01\demo01.html。

完整的URL组成：协议（http://）；主机名或域名（www.baidu.com）；

目录路径（img）；资源名称：音视频、图片、html（logo.gif）

如： http://www.baidu.com/img/logo.gif

特点：无论当前资源路径是什么，使用绝对路径总能找到需要的资源。

相对路径：指文件的位置相对于当前文件的位置。它包括目录名，或指向一个可

以从当前目录出发找到该文件的路径。

平级用名字；子级进目录；父级向上返

根相对路径： /image/user.jpg

2、图像元素

使用元素将图像添加到页面；是一个空标记

属性： src：指定显示图像的路径

width：图像宽度

height：图像高度

title：鼠标移动到图片上所显示的文字

alt：图片不显示的时候的文字

3、链接元素

使用元素创建一个超级链接，语法如下：

文本

属性： href：链接URL

target：目标，可取值为_blank(新窗口中打开)、_self（在自身所在的页面打开网页）

name：锚点名称

链接的各种表现形式：

①　下载资源：下载

②　页面跳转：网页

③　电子邮件链接：联系我们

④　返回页面的空链接：

⑤　链接到JavaScript：JS

锚点

通过a定义锚点：html中的锚点相当于是html文档中某个位置的记号

定义锚点：

跳转到锚点：

跳转到其他锚点处：

2015-9-02

4、表格元素

表格的作用：具备固定格式的信息的布局。

定义表格用

定义行

定义列

属性

height

align 内容在单元格的水平位置（left/center/right）

valign 内容在单元格的垂直位置（top/middle/bottom）

属性

width 宽 height 高

bgcolor 背景颜色

align 水平位置对齐方式 valign 垂直位置对齐方式

colspan 跨列

rowspan 跨行

属性

标题默认将在表格上方居中显示。紧随table标签之后

属性

列标题，与td是平级的（th是表头，默认居中、加粗）

行分组

表头行分组：thead

表主体行分组：tbody

表尾行分组：tfoot

5、结构标记

header 文档头部、页头（使用率较高，可以在同一个页面多次使用）

nav 导航 一般用于制作页面中的主导航

section 文档的节；文档的主体内容（使用率高，可多次使用）

aside 独立于主体内容之外的内容。如 边栏、侧导航...

article 文档中引用的一段文字。如文章、帖子、博客....

footer 页脚、文章结尾（使用率较高）

6、列表

有序列表：

      属性：type: A / a / I / i / 1 定义序列的样式（a/A/I/i/1）

      start 定义列表项是从几开始的

      列表项：

    1. 无序列表：

      （单元格）

      所有放在table里的内容必须放在td里

      属性

      边框属性：border 边框宽度

      bordercolor 边框颜色

      尺寸： width 宽 height 高 （可以是绝对的数值，也可以是百分比）

      背景： bgcolor 背景色 background 背景图

      细节： align 水平对齐方式

      cellspacing 单元格与单元格之间的距离（单元格的外边距）

      cellpadding 单元格内文本与单元格边框的距离（单元格的内边距）

       表格的标题