HTML基础知识总结

一.常见通用的代码 align —— 用于设置水平对齐方式，可用在<hr>，<table>，<caption>， <tr>，<td>，<th>（即表格的标记中），<input>，<iframe>（浮动框架属性），<img >（图像与文字基准线），<h1~6>，<thead>，<tbody>，<tfoot>，<div>。

background —— 用于设置背景图片，可用在<body>，<table>，<td>，（无<tr>），<th>。

bgcolor —— 用于设置背景颜色，可用在<body>，<table>，<tr>，<td>，<th>，<thead>，<tbody>，<tfoot>（即表格的标记中），<marquee>（设置滚动字）。

border —— 用于设置边框宽度，可用在<img src=””>，<table>，< input>。

bordercolor —— 用于设置边框颜色，可用在<table>，<tr>，<td>，<th>，<frameset>（框架）。

color —— 用于设置颜色，可用于<font>，<hr>。

height —— 用于设置长度，可用在<hr>，<table>，<tr>，<td>，<th>，<img>，<marquee>，< input>，<iframe>，<embed>，<iframe>。

hspase —— 用于设置空白水平间距，可用于<img>，<marquee>。

hidden —— 用于设置隐藏域，可用于<embed>，<input type=””>。

loop —— 用于设置循环次数，可用于<marquee>，<bgsound>（循环次数），<embed>（媒体文件是否循环播放）。

name —— 用于设置名称，可用于<meta>（有好几种用法），<form>，<input>，<select>，<textarea>，<frame>，<iframe>。

src —— 用于设置源文件地址，可用于<img>，<frame>，<bgsound>，<embed>，<iframe>。

text —— （1）用于设置字体颜色，仅用在<body>中，设置整个网页；

（2）用于设置表单当中的文字字段，仅用在<input type=””>中（前提有<form>）。

title —— （1）用于标题标记；

（2）用于描述属性，为设置该属性的元素提供建议性的信息，title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签，可以为链接添加描述性文字。

vspace —— 用于设置垂直空白间距，可用于<img>，<marquee>。

valign —— 用于设置垂直对齐方式，可用于<caption>，<tr>，<th>，<td>。

HTML基础知识总结

width —— 用于设置宽度，可用在<hr>，<table>，<td>，（无<tr>），<th>，<img>，<marquee>，< input>，<iframe>（框架属性），<embed>，<thead>，<tbody>，<tfoot>，<iframe>。

窗口打开方式

属性值

parent

blank

self

打开方式在上一级窗口打开，一般常常用在分帧的框架页中在新窗口打开在同一窗口打开，可以省略二.效果相近的近义代码

<cite>?</cite> = <u>?</u> —— 给文字添加下划线。

<center>?</center> = <? align = ”center”> —— 居中排列

<em>?</em> = <i>?</i> —— 给文字添加斜体效果。

<font size=””>?</font> ≈ <h1~6>?</h1~6> —— 给文字设置字体大小。

<p>?</p> ≈ <br> —— 换行，前者换行是隔行换，后者不是。

<strong>?</strong> = <b>?</b> —— 给文字加粗。

<code>?</code> = <samp>?</samp> —— 使文字等宽。

<ul>?</ul> = <menu>?</menu> = <dir>?</dir> —— 无序列表。

http-equiv=”pragma”content = “no-cache”> —— 禁止从缓存中调用 <meta

三.模块总结 1元信息标记<meta>

http-equiv=”content-type” content=”text/html; charset=字符集类型” http-equiv=”refresh” content=”跳转时间”; url=”链接地址” http-equiv=”expires” content=”到期时间”

http-equiv=”chache-control” content=”no-cache” （禁止从换粗中掉用） http-equiv=”set-cookie” content=”到期时间” （删除过期cookie）

http-equiv=”windows-target” content=”_top” （强制打开新窗口）

http-equiv=”过渡时间” content=”revealtrans(duration=过渡效果持续时间 ,

transition=”过渡方式”)”

> （一定得分开使用）

编号 0 1 2 3 4 5 6 7 8 9 10 11

过渡方式盒装收缩盒装放射圆形收缩圆形放射由下往上由上往下从左至右从右至左垂直百叶窗水平百叶窗水平格状百叶窗垂直格状百叶窗

编号 12 13 14 15 16 17 18 19 20 21 22 23

过渡方式随意溶解

从左右两端向中间展开从中间向左右两端展开从上下两端向中间展开从中间向上下两端展开从右上角向左下角展开从右下角向左上角展开从左下角向右下角展开从左下角向右上角展开

水平线状展开

垂直线状展开随机产生一种过渡方式

2 主体<body>

<body bgcolor=”背景颜色代码” text=”文字颜色代码”

background=”图片链接地址” bgproperties=”背景图片固定属性”

link=”链接颜色代码” alink=”正在被链接颜色代码”

vlink=”访问后颜色代码” topmargin=”上边距的值”（空白） leftmargin=”左边距的值”（空白）> ?? ?? </body>

3文字与段落

（1）<h1~6> ? </h1~6> 从大到小排列

（2）<font face=”字体（，可添加多个）” size=”文字字号（从小到大）” color=”文字颜色代码” > ? </font>

（3）上下标、删除线、等宽、变量声明、文字标注 <sup>?</sup> <sub>?</sub>

<ruby>被说明文字<rt>文字标注</rt></ruby> <var>?</var> （4）特殊符号

特殊符号 “ & < > X § ?

符号的代码 " & < &qt; × § © ®

™  

空格

4列表

（1）无序和有序列表的区别在于<ul>和<ol>

无序列表的type

HTML基础知识总结

type取值

1 a A i

HTML基础知识总结

列表项目的序号类型数字1,2,3,4，?? 小写英文字母a,b,c,d,?? 大写英文字母A,B,C,D,?? 小写罗马数字ⅰ,ⅱ,ⅲ,ⅳ,??

（2）名称解释 <dl> <dt>名词<dd>解释</dl> <dl compact>可以简化列表

5超链接

（1）基本超链接 <a href=”链接地址” target=”目标窗口打开方式”>链接文字</a>

（2）内部链接：对于上级目录为“=../文件名” ;下级目录为“文件夹/文件名”

（3）书签链接：建书签<a name=”书签名”>文字</a>

书签与链接不同页面时，<a href=”链接的文件地址#书签名”>链接文字</a>,反之不要前者。

（4）电子邮件 <a href=”mailto:电子邮件地址”>链接文字</a>

6使用图像

（1）<img src=”图像文件地址” height=”” width=”” border=”” hspace=”” vspace=”” align=”” alt=”提示文字”>

（2）设置热区 <img src=”” usemap=”映射图像名称”>

需要定义热区图像以及热区的链接属性如下 <map name=”映射图像名称”> <area shape=”热区形状” coords=”热区坐标” href=”链接地址”> </map> 7添加多媒体元素

（1）滚动文字 <marquee direction=”” behavior=”方式” loop=”” scrollamount=”速度” scrolldelay=”滚动延迟” bgcolor=”” width=”” height=”” hspace=”” vspace=””> ? </marquee>

（2）背景音乐 <bgsound src=”” loop=””>

（3）添加多媒体 <embed src=”” autostart=”自动运行” loop=”” hidden=”” width=”” height=””> ? </embed>

8表格的应用

（1）表格的基本格式

<thead bgcolor=”” align=”” valign=””> （表头样式）

</tr>

</thead>

<tbody bgcolor=”” align=”” valign=””>（表主体样式）

<tr>

</tr>

</tbody>

<tfoot bgcolor=”” align=”” valign=””>（表尾样式）

</table>

（2）层 <div id=值 align=”” stytle=”样式” class=”应用的样式类”> ? </div>

9添加表单

（1）<form action=”表单的处理程序” name=””method=”传送方式” enctype=”编码方式” target=””> ?? </form>

（2）添加控件：<input type=”” name=””>

type取值

text

password

radio

checkbox

button

submit

reset

image

hidden

file

（3）菜单列表

下拉菜单

<option value=”” selected>选项显示内容

<option value=”” >选项显示内容

</select>

列表项

<option value=”” selected>选项显示内容

<option value=”” >选项显示内容

</select> 取值的含义文字字段（显示长度size=””,最长maxlength=””，默认value=””）密码域，用户在页面中输入时不显示具体的内容，以*代替（同上）单选按钮（checked 已选中，value=”按钮取值”）复选框（checked 已选中，value=”按钮取值”）普通按钮（onclick=”处理程序”，value=”按键取值”）提交按钮重置按钮图像域，也称为图像提交按钮（src=”图像地址”）隐藏域，隐藏域将不显示在页面上，只将内容传递到服务器中文件域

10框架结构

（1）框架的基本结构（无<body>?</body>结构，新建一个HTML）：

<frame>

<noframe> ? （同<body>）? </noframe> （不支持框架标记）

</frameset>

（2）浮动框架（在<body>…</body>中）

</iframe>

<div> 可定义文档中的分区或节（division/section）。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。

可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

SPAN元素被加入到HTML中以允许网页制作者给出样式但无须附加在一个HTML的结构元素上。SPAN在样式表中作为一个选择符使用，而且它也能接受STYLE、CLASS和ID属性。

SPAN是一个内联元素，所以它可以作为HTML中的元素如EM和STRONG使用。最重要的差别在于虽然EM和STRONG带有结构的意义，但SPAN就没有这样的意义。它的存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用。

<span>在行内定义一个区域，也就是一行内可以被<span>划分成好几个区域，从而实现某种特定效果。<span>本身没有任何属性。<span> 与<div>

<span>在CSS定义中属于一个行内元素，而<div>是块级元素，我们可能通俗地理解为<div>为大容器，大容器当然可以放一个小容器了,<span>就是小容器。

更多请看：/zh/reference/css/style-html.html#span

相关推荐

HTML基础知识总结

专栏推荐