html文档的一般结构举例,html文档的基本结构和常用标签

HTML

一、HTML简介

1.什么是HTML

2.标签、元素

3.html文档的基本结构

二、HTML中常用标签

1.标题标签

--

2.段落标签

3.常见的转义字符

4.和

5.和

6.

7.

8.

图片标签

9.列表标签

无序列表 ul

有序列表 ol

自定义列表 dl

10.超链接标签

11.div和span标签

三、标签的分类

1.块元素标签

2.行内标签

3.行内块标签

一、HTML简介

1.什么是HTML

HTML是用来做网页的。

HTML 指的是 超文本标记语言 (Hyper Text Makeup Language)

标记语言

标记：标签(tag)

语言：制作网页的语言

一个网页是由多个标签组成的。

超文本：包含超链接的文本。超，指的是超链接。

2.标签、元素

HTML标签是由尖括号包围的关键词，比如

html标签写法分类

双标签：标签名>   /   内容结束标签>

单标签：   一般写成

html标签的属性

一般是键值对  key=“value”

属性的值必须用双引号引起来

html不会报错，所以注意双标签不要忘了闭合

html标签不区分大小写，规范要求都是用小写。

3.html文档的基本结构

html是由浏览器来解析，所以不需要安装任何编译环境

html文档的结构说明：

声明文档

是网页当中最大的标签，所有的内容都要写在此标签内

文档的头部，主要用于书写网页的设置，一般写不直接显示给用户的内容。例如：字符编码的设置，网页的标题，引入外部的CSS文件，引入外部的JavaScript文件

文档的主体部分，网页中只要是显示给用户的内容，都要写在此标签

和都是的子标签

文档的基本结构如下：

Titletitle>

head>

body>

html>

二、HTML中常用标签

1.标题标签

–

– 标题标签，双标签

有默认样式，字体变粗，变大，变黑

会自动换行

一般在一个页面中 只使用一次，

– 可以重复使用

2.段落标签

p> 段落标签

双标签，有默认样式

会自动换行

3.常见的转义字符

空格

< 小于号

> 大于号

© 版权标志

4.和

斜体

斜体 具有强调意义

和都是双标签

5.和

加粗

加粗 具有强调意义

和都是双标签

6.

下划线，也是一个双标签

7.

都是单标签

强制换行

---

水平线

8.

图片标签

单标签

属性：

src 图片的地址

title 鼠标移入图像时的提示文本

alt 图片加载失败时的替代内容

可以使用网络图片也可以使用本地图片

使用的是本地的图片资源

相对路径：目标文件相对于当前文件的位置。

./代表当前路径

../代表上一级路径

Windows下根目录 一般是 盘符：

注意加载图片时盘符前面加/

Linux下的根目录用/来表示

绝对路径：不考虑当前文件的位置，从根目录去查找指定的资源

推荐使用相对路径

9.列表标签

无序列表 ul

ul：声明一个无序列表(unordered list)

li：列表项(list items)

type(了解)：

disc 圆 默认就是disc

square 方块

circle 空心圆

==注意==：ul中的直接子元素必须是li

有序列表 ol

ol：声明一个有序列表(ordered list)

li：列表项

type：

1 代表数字 默认就是数字

a 代表小写字母

A 代表大写字母

i 小写的罗马数字

I 大写的罗马数字

start：指定以第几个开始，只能写数字。

自定义列表 dl

dl：声明一个自定义列表(definition list)

dt：定义列表中的项目 相当于li

dd：描述列表中的项目

10.超链接标签

超链接a 双标签

页面跳转

href：跳转的地址

如果不给值，跳转当前页面

target：_blank 新打开一个窗口加载跳转后的页面

跳转到当前页面的指定位置 锚点

给指定标签添加id属性

a标签的href属性的值为#指定元素id属性的值

跳转到本地html文件的指定位置

a标签的href属性的值为制定页面中标签的id的值

11.div和span标签

没有默认样式的块标签和行标签

块标签

可定义文档中的分区或节(division/section)

会自动换行

一般配合css做网页的布局

行内标签

一般也是配合css去使用，常用于对段落中指定的文字添加特殊样式。

三、标签的分类

按照标签效果进行分类可以分为块标签、行内标签和行内块标签。

1.块元素标签

会自动换行，独占一行

常见块标签：、

、

、、、

、、

2.行内标签

不会自动换行，标签和标签并排在一行显示，

不能设置宽高属性

常见的行内标签：

3.行内块标签

不会自动换行，标签和标签并排在一行显示

可以设置宽高属性

常见的行内块标签：、