HTML架构

1-基本架构

通用语法:

<html>

<head>

<title>设置文档的标题</title>

</head>

<body>

主体部分，放置需要呈现给用户的内容

</body>

</html>

其中:

html标签

html标签是文档的根标签

body标签

html文档的主体部分，放置需要呈现给用户的内容

head标签

页面的头部分可以包含页面的标题、文件MIME类型、样式表、脚本等

meta标签

1- meta标签用于head标签中，可以为HTML文档提供额外信息：作者信息、关键字、页面国企时间等

2-必选属性:Content

3-可选属性:http-equvi,name,scheme

title标签

设置文档的标题

HTML头部

Head 标签

标签	描述
<head>	定义关于文档的信息。
<meta>	定义信息。
<title>	定义文档标题。
<style>	定义CSS样式

<link>	定义资源引用。
<base>	定义页面中所有链接的基准 URL。
<script>

标签	描述
<!DOCTYPE>	定义文档类型。此标签须位于 html 标签之前。

头素

头素包含关于文档的概要信息，也称为信息（meta-information）。Meta 意为“关于某方面的信息”。

数据（meta-data）是关于数据的信息，

信息（meta-information）。是关于信息的信息。

2-HTML标签

<body>

文本、图片、音频等等(常用标签)

</body>

1-常用标签：

标签开始	描述	标签结束		标签级别
<h1>~<h6>	标题标签 headline	</h1>~</h6>
<p>	段落标 paragraph	</p>		Block 块级框
<div>	无语义 division 块级	</div>
<span>	无语义行内	</span>		Inline 行内框
<br/>	换行标签

<b>	字体加粗加黑	</b>	字体形状标签
<i>	字体倾斜标签	</i>	字体形状标签

<u>	下划线标签nderline	</u>	字体形状标签
<sup>	上标注标签	</sup>	字体形状标签
<sub>	下标注标签	</sub>	字体形状标签

	空字符串标签		字体形状标签
<hr/>	水平线标签

2-列表标签

标签	描述
<ol>	有序的列表标签 ordered list
<ul>	无序的列表标签 unordered list
<li>	列表项 List item
<dl>	自定义列表标签 define list
<dt>
<dd>

有序的列表标签<ol>

</ol>

其中:

	type=”序列标号类型”
阿拉伯数字(默认)	1
大写字母	A
小写字母	a
大写罗马数字	I
小写罗马数字	i

无序的列表标签<ul>

</ul>

其中:type类型为

type=”序列标号类型”
Disc	实心圆(默认)
Cicle	空心圆
Square	实心方块

自定义列表标签<dl>

<dl>

<dt>标题i define tile</dt>

<dd>描述i define description</dd>

<dt>标题j define tile</dt>

<dd>描述j definedescription</dd>

</dl>

3-<a>链接 && <img>图像标签

超链接标签<a>：主要用于网页跳转(网页内部或网页之间)

超链接是网页中比较醒目的一段文本或一个图标，只要用鼠标单击超链接，浏览器就会打开超链接所指向的网页，从一个网页跳转到另一个网页.

超链接标签<a>：

1、href : 规定链接指向的页面的 URL；hypertext reference

2、target : 规定在何处打开链接文档：

(1) _top : 默认值，表示在当前窗口

(2) _blank : 在新窗口

(3) <iframe name=”自定义名称 ”>

3、title : 规定关于素的额外信息：

这些信息通常会在鼠标移到素上时显示一段工具提示文本。

链接类型

1、将文字作为链接对象：

2、将图像作为链接对象：

3、空链接：

锚点

使用命名锚点可以快速的链接到同一个文档或指定文档中的某个位置

应用1:

<a name="锚点名称">文本</a> 创建锚点(即标识跳转目标)

<a href="#锚点名称">链接文本</a> 链接锚点

应用2:

<a name="锚点名称1" href="#锚点名称2">链接文本</a> 创建锚点(即标识跳转目标1)

<a name="锚点名称2" href="#锚点名称1">链接文本</a> 链接锚点(即标识跳转目标2)

图片标签<img>

1、src：规定显示图片的URL(图片地址/图片存放的位置)

相对地址：(1) 相对当前文档的位置来给引用的资源定位”../”表示返回上一级目录

(2) 相对站点根目录的位置来给引用的资源定位一定是以”./”开始

2、alt：显示替换文本。在浏览器无法载入图像时，通过此属性对用户进行信息提示。

3、width、height : 可选属性

4、title : 规定关于素的额外信息：

这些信息通常会在鼠标移到素上时显示一段工具提示文本。

应用1:

</a>

3-tabl表格 && form表单

<table> 标签

<tr>

<td>第i行第m列</td>

<td>第i行第p列</td>

</tr>

<tr>

<td>第j行第m列</td>

<td>第j行第p列</td>

</tr>

</table>

属性：

1、<table>标签定义HTML表格

2、<tr>素定义表格的行，<td>素定义表格单格，

3、<th>素定义表头(可选)；

===================================================================

其中:

border：定义边框的粗细;像素值

Align:对齐方式 ;left center right

Width:素宽度 ;像素值或百分比

Height:素高度 ;像素值

Cellpadding:单格边距

Cellspacing:单格间距

Rowspan: 行跨度

Colspan : 列跨度

thead、tbody、tfoot

复杂表格:

(1)通过跨行跨列合并单格,实现

(2)通过<td>中嵌套<table>

<td>

</td>

==========================================================================

数据库============>服务器====================>浏览器

Table :一般用来展示信息,后台服务器 --> 浏览器

Form :一般用来向服务器输入数据,后台服务器 <-- 浏览器

==========================================================================

<input> 标签

<input> 标签用于搜集用户信息。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

提示和注释：

提示：请使用 label 素为某个表单控件定义标签。

可选的属性

DTD 指示此属性允许在哪种 DTD 中使用。S=Strict,T=Transitional, F=Frameset.

属性	值	描述	DTD
accept	mime_type	规定通过文件上传来提交的文件的类型。	STF
align	left right top middle bottom	不赞成使用。规定图像输入的对齐方式。	TF
alt	text	定义图像输入的替代文本。	STF
checked	checked	规定此 input 素首次加载时应当被选中。	STF
disabled	disabled	当 input 素加载时禁用此素。	STF
maxlength	number	规定输入字段中的字符的最大长度。	STF
name	field_name	定义 input 素的名称。	STF
readonly	readonly	规定输入字段为只读。	STF
size	number_of_char	定义输入字段的宽度。	STF
src	URL	定义以提交按钮形式显示的图像的 URL。	STF
type	button checkbox file hidden image password radio reset submit text	规定 input 素的类型。	STF
value	value	规定 input 素的值。	STF

标准属性

id, class, title, style, dir, lang, xml:lang

事件属性

tabindex, accesskey, onfocus, onblur, onselect, onchange,

onclick, ondblclick, onmousedown, onmouseup, onmouseover,

onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

=================================================

<input type=”text”value=”默认值”/> 普通文本框

<input type=”password”/> 密码文本框

<input type=”submit” value=”登录”/> 提交按钮

<input type=”checkbox ”checked=”checked”/> 复选框(多选框)默认值

<input type=” radio” name=”名称一样”checked=”checked”/> 单选框默认值

<input type=”image” src=”图像地址” alt=”加载失败提示信息”/>图像域

<input type=”file”/> 文件域,用于文件上传

<input type=”reset ” value=”重置”/> 重置域

文本框的只读属性readonly 禁用属性 disabled

<select>//下拉框

<option>素1</option>//下拉项

<option selected=”selected”>素2</option>//默认值

</select>

其中 action 属性用来指定表单提交的请求地址,一般指向后台的控制器.

===============================================

====================================================

<form> 标签

定义和用法

<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 素。

表单用于向服务器传输数据。

提示和注释

注释：form 素是块级素，其前后会产生折行。

例子

<form action="form_action.asp" method="get">

  <p>First name: <input type="text" name="fname" /></p>

  <p>Last name: <input type="text" name="lname" /></p>

  <input type="submit" value="Submit" /></form>

必需的属性

属性	值	描述	DTD
action	URL	规定当提交表单时，向何处发送表单数据。	STF

可选的属性

属性	值	描述	DTD
accept	MIME_type	规定通过文件上传来提交的文件的类型。	STF
accept-charset	charset	服务器处理表单数据所接受的字符集。	STF
enctype	MIME_type	规定表单数据在发送到服务器之前应该如何编码。	STF
method	· get · post	规定如何发送表单数据。	STF
name	name	规定表单的名称。	TF
target	· _blank · _parent · _self · _top · framename	规定在何处打开 action URL。	TF

标准属性

id, class, title, style, dir, lang, xml:lang

事件属性

onsubmit, onreset, onclick, ondblclick, onmousedown, onmouseup,

onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

=====================================================

<form action="" method="get">

单行文本框：<input name="user"type="text" id="user" value="请输入英文字母" />

密码域： <inputtype="password" name="textfield" id="textfield" />

多行文本框：<textarea name="textarea"id="textarea" cols="45"rows="5"></textarea>

复选框：

<inputname="checkbox" type="checkbox" id="checkbox"checked="checked" />

<inputtype="checkbox" name="checkbox2" id="checkbox2"/>

</form>

注意：textarea区域Chrome,Safari和FireFox中可拖拽，过分拖拽会影响布局：

解决办法：

1、添加resize:none;

2、添加max-height，max-width

单选按钮：

<inputname="radio" type="radio" id="radio"value="radio" checked="checked" />

<inputtype="radio" name="radio2" id="radio2"value="radio2" />

下拉菜单：

<selectname="select" id="select">

<optionvalue="1">UI设计</option>

<optionvalue="2">前端工程师</option>

<optionvalue="3">网站美工</option>

</select>

列表：

<selectname="select2" size="3" id="select2">

<optionvalue="1">北京</option>

<optionvalue="3">广州</option>

</select>

</form>

单选按钮：只能同时选中一个，需要让这些单选按钮的name属性值为相同的。

如果想要使文本选中单选框：

让for属性与id属性绑定。

文件域：<input type="file"name="photo" id="photo" />

提交按钮：<input type="submit"name="submit" id="submit" value="提交" />

重置按钮：<input type="reset"name="button" id="button" value="重置" />

图像域：<input type="image"name="imageField" id="imageField" src="tj.jpg"/>

隐藏域：<input type="hidden"name="hiddenField" id="hiddenField" />

普通按钮：<input type="button"name="button2" id="button2" value="按钮" />

</form>

=================================================

<input type=”text”value=”默认值”> 普通文本框

<input type=”password”> 密码文本框

<input type=”submit” value=”登录”> 提交按钮

<input type=”checkbox ”checked=”checked”> 复选框(多选框)默认值

<input type=” radio” name=”名称一样”checked=”checked”> 单选框默认值

<input type=”image” src=”图像地址” alt=”加载失败提示信息”/>图像域

<input type=”file”/> 文件域,用于文件上传

<input type=”reset ” value=”重置”> 重置域

文本框的只读属性readonly 禁用属性 disabled

<select>//下拉框

<option>素1</option>//下拉项

<option selected=”selected”>素2</option>//默认值

</select>

其中 action 属性用来指定表单提交的请求地址,一般指向后台的控制器.

===============================================

<iframe>标签

1、iframe素会创建包含另外一个文档的内联框架（即行内框架）。

2、在HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 素。

3、您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。

4、总结常用属性

<iframe> 标签

iframe素会创建包含另外一个文档的内联框架（即行内框架）。

提示和注释：

提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。

可选的属性

DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional,F=Frameset.

属性	值	描述	DTD
align	· left · right · top · middle · bottom	不赞成使用。请使用样式代替。规定如何根据周围的素来对齐此框架。	TF
frameborder	· 1 · 0	规定是否显示框架周围的边框。	TF
height	· pixels · %	规定 iframe 的高度。	TF
longdesc	URL	规定一个页面，该页面包含了有关 iframe 的较长描述。	TF
marginheight	pixels	定义 iframe 的顶部和底部的边距。	TF
marginwidth	pixels	定义 iframe 的左侧和右侧的边距。	TF
name	frame_name	规定 iframe 的名称。	TF
scrolling	· yes · no · auto	规定是否在 iframe 中显示滚动条。	TF
src	URL	规定在 iframe 中显示的文档的 URL。	TF
width	· pixels · %	定义 iframe 的宽度。	TF

标准属性

id, class, title, style

今天的文章 HTML架构分享到此就结束了，感谢您的阅读。

1-基本架构

html标签

body标签

head标签

meta标签

title标签

HTML头部

2-HTML标签

1-常用标签：

2-列表标签

无序的列表标签<ul>

自定义列表标签<dl>

3-<a>链接 && <img>图像标签

3-tabl表格 && form表单

<table> 标签

<input> 标签

<form> 标签

<form action="" method="get">

<iframe>标签

相关推荐