html教程作用,#HTML教程(标签)

1 .基本结构

基本解释

为标识符,它指出了网页遵循的HTML标准,有时还指出了定义规范的文档类型定义(DTD)

包含了组成网页的所有标签

``

````````都称为标签

称为根标签

``

``称为开始标签

````称为结束标签

一般来说,标签都是成对出现的

标签和标签之间可以相互嵌套,但顺序必须一致

标签不区分大小写,但建议使用小写

2.基本标签及其用法

head部分

标签标题内容

将标题内容显示在浏览器的标题栏中,一般简短,易懂

标签

元数据(metadata)

name 和content的作用为描述页面的内容

规定HTMLL元素在浏览器中呈现的样式

body部分

段落类

标签

段落文本

将文本分段后输出

标签

用于分行,相当于回车换行

用在句子的末端

标签

文本文本

将文本分割输出,相当于空格

---

标签

用于创建一条水平的线(分割线)

用在段落的首端

字体类

标签(x=1~6)

标题

将文本以标题形式输出

其中

字体最大,

相对最小

标签

强调部分

将文本以粗体输出

标签

强调部分

将文本以斜体输出

标签

强调部分

将文本以特殊形式输出

标签

要输出的文本

将文本自定义大小输出

要输出的文本

size可取1~7,其中7最大,1最小

将文本自定义颜色输出

其中color后可以接RGB值,也可以用颜色的单词来表示

引用

标签

引言

自动给引言加上""

标签

引文

自动在页面左右两侧进行缩进处理

标签

代码

将代码完整输出,不改变任何符号

只能对一行代码进行输出

标签

代码段

将代码段完整输出,保留空格和换行符

不受分行的影响

表格类

• 标签

一条内容

一条内容

...

将信息分条排序

通常由"·"起行

1. 标签

第一条内容

第二条内容

...

将信息分条排序

每一行都有固定的编号

特殊类

标签

地址信息

在网页中提供联系信息,通常自动显示为斜体

标签

...

将标签放入div中,可以更清晰的看懂标签的逻辑

``

注释部分只会在源代码页面显示,从而方便管理员理解代码,而不会在页面中输出

"..."

3.表格

表格的组成部分

表题:指出表格包含什么内容.(表题是可选的)

表头:标识行、列或两者,通常使用突出的字体.(可选)

单元格:表格中的各个方框,包含的可能是表格数据,也可能使表头.

表格数据:表格中的值

表格摘要

提供解释性的信息,从而对表格作简要的介绍

在表格前面的段落中进行描述

在表题中进行描述

在表题的元素中进行描述

在表格后面的示意图或者图题中进行描述

单元格

表格是逐行定义的,每一行定义都应该包含该行的所有单元格

表格行..

可包括表头单元格或数据单元格

表头单元格..

通常为粗体,且在水平和垂直方向上都居中

数据单元格..

使用常规字体显示,在水平方向上左对齐,在竖直方向上居中

空单元格

在单元格中包含一行换行符

如:

表题

元素

位于

表题名称...

若信息过多,也可以将详细信息隐藏起来

在

中嵌入元素,可完成对内容的单击隐藏

详细内容...

设置表格

设置宽度

设置为与浏览器窗口等宽

设置边框

边框设置为10像素

单元格内边距(单元边缘与内容的距离)

内边距设置为10像素

单元格间距(单元格与单元格的距离)

单元格间距为8像素

4.图像

图像

图像格式

大多数浏览器都支持的格式:GIF.JPEG.PNG,而HTML5中增加了SVG格式图像的支持

GIF

图像交换格式(Graphics Interchange Format)

支持简单的动画

GPEG

联合图像专家组(Jointment Photographic Experts Group)

多用于储存摄影图像

SVG

可缩放的矢量图像

可随意改变大小而不会对图像质量有任何影响

PNG

便携式网络图形(Portable Network Graphics)

将图像转化为PNG格式,不会丢失任何数据

添加图像

标签

标签有两个属性:src和alt

src:指定图像的URL

alt:简单的图像文本描述

可将图片放在

标签中的任意位置

指向本地目录


指向服务器


图像替代文本


当图像无法显示或加载时会显示"对图片的文字描述"

图像与文本

将图像标签放置在文本标签中,就可以将图片显示在文本内

图像的缩放

标签的两个属性

height和width指定了图像的高度和宽度

!!宽度调用

目的

调整浏览器现实的图像尺寸,使其更适合页面

让浏览器预先知道图像有多大,有助于浏览器在加载图片完成前,排版正确

5.链接

创建链接

要有链接到的文件名(或URL)

要有可单击的链接文本

链接标签

基本组成部分,href、表示链接的文本、结束标签

链接标签必须包含一些属性

本地文件

文本**可被点击的文本**

文本可被点击的文本

web文档

文本**注释**

文本注释

文件的路径

路径分为两种

相对路径:http:\****.****

绝对路径:本地目录

锚(anchor)

用name属性创建一个文档内的标签

锚(显示的文本)

锚

6.表单

表单

收集信息并处理

form标签

标签

的两个常用属性action和method

action: 提交表单的地址(另一个网页的链接或moilto链接)

method: 提交表单的使用方法,一般分get和post两种

标签

描述表单字段的文本

标签

input元素由起始标签和结束标签组成,其中其实标签中包含属性.

其实标签和结束标签之间没有任何其他内容.

文本

文本框只有一行,无法回车换行

姓名:

姓名:

密码

密码框中输入的信息会做掩码处理

密码:

密码:

单选框

同一组选项,name属性必须相同

性别:

男

女

扶他

性别:

男

女

扶他

复选框

爱好

男

女

扶他

爱好:

男

女

扶他

下拉列表

我的性别

男

女

扶她

我的性别:

男

女

扶她

提交按钮

重置按钮

重置按钮可以清空表单中已经填写了的信息

隐藏文本

打开文件

textarea标签

多行文本

文本内容

7. 多媒体

标签

用法

作用

播放视频

属性

src

要播放视频的地址

height

元素的高度

width

元素的宽度

autoplay

一个布尔属性,制定是否在网页加载完毕后立即播放视频

(自动播放)

(手动播放)

loop

一个布尔属性,如果包含它,将循环播放视频(到达末尾后重新播放,直至手动暂停)

(自动循环)

preload

一个布尔属性,如果包含它,浏览器将在页面加载完毕后开始下载视频,为播放所好准备(指定了属性autoplay时,将忽略此属性的设置)

controls

一个布尔属性,告诉浏览器是否提供视频播放控件

poster

开始播放视频前显示的图像(封面)

muted

一个布尔属性,如果包含它,视频将没有声音