html基础标签整理

来源：互联网发布：游戏美工学历要求编辑：程序博客网时间：2024/05/23 20:38

html标签分类整理

一、主体：

< !doctype>

<html> <title>网页的标题名<body>主体

二、文本：

<p>段落

<h1><h2><h3><h4><h5><h6>标题按照重要性从1到6

<br/>换行

<hr/>分界线

<center>居中

<font>字体

<text-align>内容居中

三、表格：

<table>

<caption>偏长的标题，适合配图说明的文字

属性：

colspan 跨列合并

rowspan 跨行合并

cellpadding 单元与内容之间的空白

cellspacing单元格之间的空白

background背景

width／height／text－align

四、表单：

用于搜集不同类型的用户输入

1、标签：

<form>元素定义 HTML 表单

<input>元素有很多形态，根据不同的 type 属性。

<textarea>定义多行输入字段（文本域）

<button>定义可点击的按钮

<select>下拉列表

<option>定义待选择的选项

<label>可与 input绑定

<radio> 定义单选按钮

2、type输入类型：

text定义用于文本输入的单行输入字段

radio定义单选按钮

checkbox定义复选框

action 属性定义在提交表单时执行的动作

submit 定义用于向表单处理程序（form-handler）提交表单的按钮,

password定义密码字段

Name 属性如果要正确地被提交，每个输入字段必须设置一个 name 属性。

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）

何时使用 GET？

您能够使用 GET（默认方法）：如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。当您使用 GET 时，表单数据在页面地址栏中是可见的：
注释：GET 最适合少量数据的提交。浏览器会设定容量限制。
何时使用 POST？

您应该使用 POST：如果表单正在更新数据，或者包含敏感信息（例如密码）。POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。

3、Input 属性：

value 属性value 属性规定输入字段的初始值：
readonly 属性readonly 属性规定输入字段为只读（不能修改）：
disabled 属性disabled 属性规定输入字段是禁用的。被禁用的元素是不可用和不可点击的。被禁用的元素不会被提交。
size 属性size 属性规定输入字段的尺寸（以字符计）
maxlength 属性maxlength 属性规定输入字段允许的最大长度

4、用 <fieldset> 组合表单数据

<fieldset> 元素组合表单中的相关数据

<legend> 元素为 <fieldset> 元素定义标题。

5、HTML5 表单元素

HTML5 增加了如下表单元素：<datalist><keygen><output>

6、HTML5 <datalist> 元素

<datalist> 元素为 <input> 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

7、HTML5 输入类型

HTML5 增加了多个新的输入类型：color、date、date time、datetime-local、email、month、number、range、search、tel、time、url、week

五、链接：

1、有两种使用 <a> 标签的方式：通过使用 href 属性 - 创建指向另一个文档的链接

通过使用 name 属性 - 创建文档内的书签

2、标签<a>的属性target：

定义被链接的文档在何处显示

_blank ,该链接会在新窗口中打开

_parent,在父框集中打开

_self,在相同的框集中打开

_top，在整个框集中打开

3、name属性

name 属性规定锚（anchor）的名称。

可以使用 name 属性创建 HTML 页面中的书签。

六、图像：

1、<img>

在 HTML 中，图像由 <img> 标签定义。<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

2、src 指 "source"。源属性的值是图像的 URL 地址。

3、alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的，width，height，border，space，vspace。

七、列表

1、无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

2、有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

3、定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

八、<div> 和 <span>

1、HTML 块元素

大多数 HTML 元素被定义为块级元素或内联元素。

编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

例子：<h1>, <p>, <ul>, <table>

2、HTML 内联元素

内联元素在显示时通常不会以新行开始。

例子：<b>, <td>, <a>, <img>

3、HTML <div> 元素

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

4、HTML <span> 元素

HTML <span> 元素是内联元素，可用作文本的容器。

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

九、框架

垂直框架

水平框架

框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

使用框架的坏处：

开发人员必须同时跟踪更多的HTML文档
很难打印整张页面

框架结构标签（<frameset>）

框架结构标签（<frameset>）定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积

编者注：frameset 标签也被某些文章和书籍译为框架集。

框架标签（Frame）

十、内联框架

添加 iframe 的语法

<iframe src="URL"></iframe>

URL 指向隔离页面的位置。

Iframe - 设置高度和宽度

height 和 width 属性用于规定 iframe 的高度和宽度。

属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）。

Iframe - 删除边框

frameborder 属性规定是否显示 iframe 周围的边框。

设置属性值为 "0" 就可以移除边框：

使用 iframe 作为链接的目标

iframe 可用作链接的目标（target）。

链接的 target 属性必须引用 iframe 的 name 属性：

1 0