概述
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=”序列标号类型”>
<li>列表项i</li>
<li>列表项j</li>
</ol>
其中:
| type=”序列标号类型” |
阿拉伯数字(默认) | 1 |
大写字母 | A |
小写字母 | a |
大写罗马数字 | I |
小写罗马数字 | i |
无序的列表标签<ul>
<ul type=”序列标号类型”>
<li>列表项i</li>
<li>列表项j</li>
</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>：
<a href="http:\www.baidu.com" target="_blank" title="进入百度">百度</a>
1、href : 规定链接指向的页面的 URL；hypertext reference
2、target : 规定在何处打开链接文档：
(1) _top : 默认值，表示在当前窗口
(2) _blank : 在新窗口
(3) <iframe name=”自定义名称 ”>
3、title : 规定关于元素的额外信息：
这些信息通常会在鼠标移到元素上时显示一段工具提示文本。
链接类型
1、将文字作为链接对象：
<a href="http:\www.baidu.com" title="进入百度"target="_blank">百度</a>
<a href="mi.html">小米手机</a>
2、将图像作为链接对象：
<a href="mi.html"><imgsrc="images/mi.jpg" alt="红米手机" /></a>
3、空链接：
<a href="#">空链接</a>
锚点
使用命名锚点可以快速的链接到同一个文档或指定文档中的某个位置
应用1:
<a name="锚点名称">文本</a> 创建锚点(即标识跳转目标)
<a href="#锚点名称">链接文本</a> 链接锚点
应用2:
<a name="锚点名称1" href="#锚点名称2">链接文本</a> 创建锚点(即标识跳转目标1)
<a name="锚点名称2" href="#锚点名称1">链接文本</a> 链接锚点(即标识跳转目标2)
图片标签<img>
<img src="images/pic1.jpg" width="400px"height="363px" alt="萌萌哒" />
1、src：规定显示图片的URL(图片地址/图片存放的位置)
相对地址：(1) 相对当前文档的位置来给引用的资源定位”../”表示返回上一级目录
(2) 相对站点根目录的位置来给引用的资源定位一定是以”./”开始
2、alt：显示替换文本。在浏览器无法载入图像时，通过此属性对用户进行信息提示。
3、width、height : 可选属性
4、title : 规定关于元素的额外信息：
这些信息通常会在鼠标移到元素上时显示一段工具提示文本。
应用1:
<a href=”被链接的对象” target=”被打开的方式”title=”鼠标可查看的信息”>
<img src=”图片保存的位置” alt=”加载失败是的提示信息”>
</a>
3-tabl表格 && form表单
<table> 标签
<table border="边框粗细的像素值">
<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>元素定义表头(可选)；
===================================================================
<table border="10px" align="center" width="80%" height="123px">
<table cellpadding="10px" cellspacing="10px">
<tr align="center" width="10px" height="10px">
<td align="center" width="10px" height="10px">
<td rowspan="3"colspan="3">
其中:
border：定义边框的粗细;像素值
Align:对齐方式 ;left center right
Width:元素宽度 ;像素值 或 百分比
Height:元素高度 ;像素值
Cellpadding:单元格边距
Cellspacing:单元格间距
Rowspan: 行跨度
Colspan : 列跨度
thead、tbody、tfoot
复杂表格:
(1)通过跨行跨列合并单元格,实现
(2)通过<td>中嵌套<table>
<td>
<table>~</table>
</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=”重置”/> 重置域
<textarea row=”10” col=”50” style=”resize:none”> 默认值</textarea>
文本框的只读属性readonly 禁用属性 disabled
<select>//下拉框
<option>元素1</option>//下拉项
<option selected=”selected”>元素2</option>//默认值
<option>元素3</option>
</select>
<form action=”目标地址” method=-”get”></form>
其中 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"/>
<input type="checkbox"name="checkbox3" id="checkbox3" />
</form>
注意：textarea区域Chrome,Safari和FireFox中可拖拽，过分拖拽会影响布局：
解决办法：
1、添加resize:none;
2、添加max-height，max-width
<form action="" method="get">
单选按钮：
<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>
<option value="2">上海</option>
<optionvalue="3">广州</option>
</select>
</form>
单选按钮：只能同时选中一个，需要让这些单选按钮的name属性值为相同的。
如果想要使点击文本选中单选框：
<input type="radio" name="xingbie"id="nv"/><label for="nv">女</label>
让for属性与id属性绑定。
<form action="" method="get">
文件域：<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=”重置”> 重置域
<input >
<textarea row=”10” col=”50” style=”resize:none”> 默认值</textarea>
文本框的只读属性readonly 禁用属性 disabled
<select>//下拉框
<option>元素1</option>//下拉项
<option selected=”selected”>元素2</option>//默认值
<option>元素3</option>
</select>
<form action=”目标地址” method=-”get”></form>
其中 action 属性 用来指定表单提交的请求地址,一般指向后台的控制器.
===============================================
<iframe>标签
<iframe src="格式化标签.html" frameborder="1" width="300px"height="200px" >显示格式化标签的网页</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架构1-基本架构所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复