HTML基础

HTML概念
了解HTML发展史
基础语法
常用标签（段落、图片、链接等）

什么是HTML

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

HTML发展史

HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2——1997年1月14日，W3C推荐标准
HTML 4.0——1997年12月18日，W3C推荐标准
HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
HTML 5——2014年10月28日，W3C推荐标准

HTML特点

HTML不需要编译，直接由浏览器执行。
HTML文件是一个文本文件。
HTML文件必须使用html或htm为文件后缀。
HTML大小写不敏感，HTML和html一样。

HTML基础语法

1.HTML基本结构

[/code][code]

复制代码

标题

复制代码

[/code][code]

复制代码

网页主体内容

复制代码

[/code][code]

复制代码

2.HTML标签属性
语法：....

3.文档声明和meta标签
声明必须放在文档的第一行
声明不是一个HTML标签
当网页出现乱码时，需要在标签之间添加

4.文字和段落标签

标题标签：.....

复制代码

段落标签：

复制代码

换行标签：

复制代码

文字斜体：

复制代码

加粗：

复制代码

下标：

复制代码

上标：

复制代码

特殊符号：

复制代码

空格：聽

复制代码

小于号：<

复制代码

大于号：>

复制代码

&：&

复制代码

双引号："

复制代码

版权：漏

复制代码

注册：庐

复制代码

5.无序列表和有序列表

无序列表：

复制代码

[/code][code] Coffee

复制代码

Tea

复制代码

Milk

复制代码

[/code]注意：在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：
[list][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][/list][code]圆点列表：

复制代码

[/code][code] Apples

复制代码

Bananas

复制代码

圆圈列表：

复制代码

[/code][code] Apples

复制代码

Bananas

复制代码

正方形列表：

复制代码

[/code][code] Apples

复制代码

Bananas

复制代码

[/code][list][*][*][*][*][*][*][*][/list][code]有序列表：

复制代码

编号列表：

复制代码

[/code][code] Apples

复制代码

Bananas

复制代码

Lemons

复制代码

type值为1时或者没有时，列表项为数字1，2.....
type值为a时，列表项为小写字母a,b....
type值为A时，列表项为大写字母A,B....
type值为i时，列表项为小写罗马数字i
type值为I时，列表项为大写罗马数字I

大写字母列表：

复制代码

[/code][code] Apples

复制代码

Bananas

复制代码

Lemons

复制代码

小写字母列表：

复制代码

[/code][code] Apples

复制代码

Bananas

复制代码

Lemons

复制代码

大写罗马数字列表：

复制代码

[/code][code] Apples

复制代码

Bananas

复制代码

Lemons

复制代码

小写罗马数字列表：

复制代码

[/code][code] Apples

复制代码

Bananas

复制代码

Lemons

复制代码

自定义列表：

复制代码

一个自定义列表：

复制代码

[/code][code] Coffee

复制代码

- black hot drink

复制代码

Milk

复制代码

- white cold drink

复制代码

[/code]注意：1.和是同一级标签，两者不能直接嵌套。 2.三个标签要组合使用。
5.图像和超链接标签
[list][*][*][/list][code]图片标签：

复制代码

[/code]这里要提一下相对路径和绝对路径：
相对路径是指目标相对于当前文件的路径，网页结构设计中多采用这种方法来表示目标的路径。表示方法如下：
[list][*][*][*][*][/list][code]./ ：代表文件所在的目录（可以省略不写）

复制代码

../../ ：代表文件所在的父级目录的父级目录

复制代码

值得注意的是：（/ ：代表文件所在的根目录）其实可以理解成项目内部的绝对路径。
绝对路径是指完整的网址，假设项目的网站域名为www.test.com，那么000.css的绝对路径应该是https://www.test.com/css/000.css。

超链接：

复制代码

访问菜鸟教程!

复制代码

[/code][code]如果是一个空链接：

复制代码

访问菜鸟教程!

复制代码

[/code][code]如果需要在新链接打开：

复制代码

访问菜鸟教程!

复制代码

[/code][code]如果需要鼠标移动到链接上时显示文本可以设置title属性：

复制代码

访问菜鸟教程!

复制代码

[/code][list][*][*][*][*][*][*][*][*][*][*][*][/list][code]锚链接的使用：

复制代码

id属性可用于创建在一个HTML文档书签标记。

复制代码

查看章节 4

复制代码

章节 1

复制代码

这边显示该章节的内容……

复制代码

章节 2

复制代码

这边显示该章节的内容……

复制代码

章节 3

复制代码

这边显示该章节的内容……

复制代码

章节 4

复制代码

这边显示该章节的内容……

复制代码

上面是一个页面内的锚链接的应用，当要是跳传到另外一个页面中的锚点，则：查看章节 4