html常用标记介绍,HTML常用标签简介

本篇文章我们来共同学习下HTML文档中的常用标签及其使用方法；下图为简写内容的HTML文档：

TIM图片20180908130457.png

第一部分：文档结构

1、文档声明：，声明该文档为HTML文档，告知浏览器文本的解读方式。

2、HTML页面：表示HTML页面的开始与结束

语法：

位于之下;

3、页面头部：定义页面全局信息

紧跟在html之后，是html中的首个子元素

头部所包含的内容(子元素)

(1)网页标题：

标题内容

(2)定义网页的编码格式,关键字，描述

网页的编码格式：(utf-8:支持中英文、标点、符号)

关键字：

描述：

( 3)定义或引用javascript：

(4)定义内部样式

(5)引入外部样式

4、页面主体：网页显示的主体内容中包含大量的标签如下：

(1)链接 a标签

TIM图片20180908132123.png

(2)文本样式

斜体：

粗体：

删除线：

下划线：

上标：

下标：

(3)以标题的形式来显示文本内容

【特点】

- 改变字号(一级最大，六级最小)

- 加粗显示

- 上下有垂直的空白距离

- 独立成行

(4)段落元素

【标签】

(5) 换行元素

【标签】

(6)分隔线元素

【标签】

---

【属性】

size：尺寸，取值单位为 px(像素)，可以省略

width：宽度，取值单位为px(像素)可以省略或百分比

color：颜色，取值自然颜色值

align：水平对齐方式，取值：left/center/right

分区元素

(7)块分区元素：

【特点】独立成行

【作用】页面布局

(8)行内分区元素：

【特点】多个元素在一行内显示

【作用】设置同一行文字内的不同格式

(9)- 图像

路径

URL：Uniform Resource Locator(统一资源定位器，俗称：路径)

作用：标识网络任何资源的位置

绝对路径：从文件所在的最高级目录下开始查找资源文件所经过的路径

-包括网络资源&本地资源(如：E:\mmper\练习\img\flower.jpg)

相对路径：从当前文件位置处开始，查找资源文件所经过的路径

- 同目录，直接用， 直接通过资源文件名称进行引用(a.jpg)

- 子目录，进入到子目录中，然后再对资源文件进行引用(img/a.jpg)

- 父目录，返回到父级目录再对资源文件进行引用(../a.jpg)

【标签】

【属性】

src：图片地址(绝对/相对)

width：图像宽度

height：图像高度

(10)表格

由

【标签】

【属性】

width ：设置表格的宽度

height：设置表格的高度

align：设置表格的对齐方式，取值: left/center/right

border：设置表格边框宽度

cellpadding：内边距(单元格边框与内容之间的距离)

cellspacing：外边距(单元格之间的距离)

bgcolor：设置表格的背景颜色

table中包含的子元素

中包含的子元素：

【标签】

(创建表行)

【属性】

align：该行内容水平对齐方式，取值: left/center/right

valign：该行内容的垂直对齐方式，取值: top/middle/bottom

bgcolor：设置表格的背景颜色

【标签】

(创建单元格)

【属性】

align：内容水平对齐方式

valign：内容垂直对齐方式

width ：宽度

height ：高度

【标签】

(表格标题)

【标签】

(列标题)

行标题或列标题，字体有加粗的效果，放在tr中

【标签】 (表头)

【标签】

表主体)

【标签】

(表尾)

一个完整的表格

TIM图片20180908134301.png

有序列表

【属性】

type:指定列表项标志的类型，默认为数字排列

取值：1(默认值)/a/A/i/I

start:定义起始值(数字)，默认从1开始

取值：数字，如：start:1; start:i;等

无序列表

【属性】

type：指定无序列表的列表项标识

取值： disc,默认,实心圆/circle，空心圆/square，实心矩形none，不显示标识

自定义列表

列表中的标题内容

列表中的数据

使用场合：图文混排时使用

6- 表单

由

定义，将用户输入的数据提交给后台。

【常见属性】

action：提交的服务器地址

method：表单数据提交的方式，取值： get：明文提交/post：隐式提交

name：定义表单名称，JS用到的比较多

id： 独一无二的标识

如：

元素

【主要属性】

type：根据不同的type属性值可以创建各种类型的输入字段

value：最终提交给服务器的值

name：控件的名称，提供给服务器使用，没有name，控件则无法提交

id：唯一标识，只能在当前页面使用，服务器不能用

disabled：禁用，不能被提交

常用的表单控件：

(1)文本框：

(2)密码框：

【专有属性】

maxlength：限制输入的字符数，取值：数字

readonly：设置文本控件只读

(3)单选按钮：

(4)复选框：

【专有属性】

checked，设置默认被选中

(5)提交按钮：

(6)重置按钮：

(7)普通按钮：

(8)图片按钮：

(9)隐藏域：

(10)文件选择框：

按钮(提交按钮)

内容

下拉选择框select 和 option