常见的HTML标记和属性

喜欢ヅ旅行 2021-09-13 23:16 412阅读 0赞

# 常见的 HTML 标记 #

## HTML文件标记 ##

<table> 
 <thead> 
  <tr> 
   <th>标 记</th> 
   <th>意 义</th> 
   <th>作 用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;html&gt; &lt;/html&gt;</code></td> 
   <td>文件声明</td> 
   <td>让浏览器知道这是 HTML 文件</td> 
  </tr> 
  <tr> 
   <td><code>&lt;head&gt; &lt;/head&gt;</code></td> 
   <td>开头</td> 
   <td>提供文件整体资讯</td> 
  </tr> 
  <tr> 
   <td><code>&lt;title&gt; &lt;/title&gt;</code></td> 
   <td>标题</td> 
   <td>定义文件标题，将显示于浏览顶端</td> 
  </tr> 
  <tr> 
   <td><code>&lt;body&gt; &lt;/body&gt;</code></td> 
   <td>网页文件的内容</td> 
   <td>设计文件格式及内文所在</td> 
  </tr> 
 </tbody> 
</table>

--------------------

## 排版标记 ##

<table> 
 <thead> 
  <tr> 
   <th>标 记</th> 
   <th>意 义</th> 
   <th>作 用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;!--注解--&gt;</code></td> 
   <td>说明标记</td> 
   <td>为文件加上说明，但不被显示</td> 
  </tr> 
  <tr> 
   <td><code>&lt;br&gt;</code></td> 
   <td>换行标记</td> 
   <td>令字、画、表格等显示于下一行</td> 
  </tr> 
  <tr> 
   <td><code>&lt;p&gt; &lt;/p&gt;</code></td> 
   <td>段落标记</td> 
   <td>为字、画、表格等之间留一空白行</td> 
  </tr> 
  <tr> 
   <td><code>&lt;pre&gt; &lt;/pre&gt;</code></td> 
   <td>预设格式</td> 
   <td>令文件按照原始码的排列方式显示</td> 
  </tr> 
  <tr> 
   <td><code>&lt;div&gt; &lt;/div&gt;</code></td> 
   <td>区块标记</td> 
   <td>设定文字、图像、等元素的摆放位置</td> 
  </tr> 
 </tbody> 
</table>

--------------------

## 字体标记 ##

<table> 
 <thead> 
  <tr> 
   <th>标 记</th> 
   <th>意 义</th> 
   <th>作 用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;strong&gt; &lt;/strong&gt;</code></td> 
   <td>加重语气</td> 
   <td>产生字体加粗 Bold 的效果</td> 
  </tr> 
  <tr> 
   <td><code>&lt;b&gt; &lt;/b&gt;</code></td> 
   <td>粗体标记</td> 
   <td>产生字体加粗的效果</td> 
  </tr> 
  <tr> 
   <td><code>&lt;em&gt; &lt;/em&gt;</code></td> 
   <td>强调标记</td> 
   <td>字体出现斜体效果</td> 
  </tr> 
  <tr> 
   <td><code>&lt;i&gt; &lt;/i&gt;</code></td> 
   <td>斜体标记</td> 
   <td>字体出现斜体效果</td> 
  </tr> 
  <tr> 
   <td><code>&lt;h1&gt; &lt;/h1&gt;</code></td> 
   <td>一级标题标记</td> 
   <td>变粗变大加宽，程度与级数反比</td> 
  </tr> 
  <tr> 
   <td><code>&lt;h2&gt; &lt;/h2&gt;</code></td> 
   <td>二级标题标记</td> 
   <td>将字体变粗变大加宽</td> 
  </tr> 
  <tr> 
   <td><code>&lt;h3&gt; &lt;/h3&gt;</code></td> 
   <td>三级标题标记</td> 
   <td>将字体变粗变大加宽</td> 
  </tr> 
  <tr> 
   <td><code>&lt;h4&gt; &lt;/h4&gt;</code></td> 
   <td>四级标题标记</td> 
   <td>将字体变粗变大加宽</td> 
  </tr> 
  <tr> 
   <td><code>&lt;h5&gt; &lt;/h5&gt;</code></td> 
   <td>五级标题标记</td> 
   <td>将字体变粗变大加宽</td> 
  </tr> 
  <tr> 
   <td><code>&lt;h6&gt; &lt;/h6&gt;</code></td> 
   <td>六级标题标记</td> 
   <td>将字体变粗变大加宽</td> 
  </tr> 
  <tr> 
   <td><code>&lt;sub&gt; &lt;/sub&gt;</code></td> 
   <td>下标字</td> 
   <td>下标字</td> 
  </tr> 
  <tr> 
   <td><code>&lt;sup&gt; &lt;/sup&gt;</code></td> 
   <td>上标字</td> 
   <td>上标字</td> 
  </tr> 
 </tbody> 
</table>

--------------------

## 清单标记 ##

<table> 
 <thead> 
  <tr> 
   <th>标 记</th> 
   <th>意 义</th> 
   <th>作 用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;ol&gt; &lt;/ol&gt;</code></td> 
   <td>顺序清单</td> 
   <td>清单项目将以数字、字母顺序排列</td> 
  </tr> 
  <tr> 
   <td><code>&lt;ul&gt; &lt;/ul&gt;</code></td> 
   <td>无序清单</td> 
   <td>清单项目将以圆点排列</td> 
  </tr> 
  <tr> 
   <td><code>&lt;li&gt; &lt;/li&gt;</code></td> 
   <td>清单项目</td> 
   <td>每一标记标示一项清单项目</td> 
  </tr> 
  <tr> 
   <td><code>&lt;dl&gt; &lt;/dl&gt;</code></td> 
   <td>定义清单</td> 
   <td>清单分两层出现</td> 
  </tr> 
  <tr> 
   <td><code>&lt;dt&gt; &lt;/dt&gt;</code></td> 
   <td>定义条目</td> 
   <td>标示该项定义的标题</td> 
  </tr> 
  <tr> 
   <td><code>&lt;dd&gt; &lt;/dd&gt;</code></td> 
   <td>定义内容</td> 
   <td>标示定义内容</td> 
  </tr> 
 </tbody> 
</table>

--------------------

## 表格标记 ##

<table> 
 <thead> 
  <tr> 
   <th>标 记</th> 
   <th>意 义</th> 
   <th>作 用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;form&gt; &lt;/form&gt;</code></td> 
   <td>表单标记</td> 
   <td>决定单一表单的运作模式</td> 
  </tr> 
  <tr> 
   <td><code>&lt;textarea&gt; &lt;/textarea&gt;</code></td> 
   <td>文字区块</td> 
   <td>提供文字方盒以输入较大量文字</td> 
  </tr> 
  <tr> 
   <td><code>&lt;input&gt;</code></td> 
   <td>输入标记</td> 
   <td>决定输入形式</td> 
  </tr> 
  <tr> 
   <td><code>&lt;select&gt; &lt;/select&gt;</code></td> 
   <td>选择标记</td> 
   <td>建立 pop-up 卷动清单</td> 
  </tr> 
  <tr> 
   <td><code>&lt;option&gt; &lt;/option&gt;</code></td> 
   <td>选项</td> 
   <td>每一标记标示一个选项</td> 
  </tr> 
 </tbody> 
</table>

--------------------

## 图形标记 ##

<table> 
 <thead> 
  <tr> 
   <th>标 记</th> 
   <th>意 义</th> 
   <th>作 用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;img&gt;</code></td> 
   <td>图形标记</td> 
   <td>用以插入图形及设定图形属性</td> 
  </tr> 
 </tbody> 
</table>

--------------------

## 连接标记 ##

<table> 
 <thead> 
  <tr> 
   <th>标 记</th> 
   <th>意 义</th> 
   <th>作 用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;a&gt; &lt;/a&gt;</code></td> 
   <td>超链接标记</td> 
   <td>加入超链接</td> 
  </tr> 
 </tbody> 
</table>

--------------------

## 框架标记 ##

<table> 
 <thead> 
  <tr> 
   <th>标 记</th> 
   <th>意 义</th> 
   <th>作 用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;frameset&gt; &lt;/frameset&gt;</code></td> 
   <td>框架设定</td> 
   <td>设定框架</td> 
  </tr> 
  <tr> 
   <td><code>&lt;frame&gt; &lt;/frame&gt;</code></td> 
   <td>框窗设定</td> 
   <td>设定框窗</td> 
  </tr> 
 </tbody> 
</table>

--------------------

## 其他标记 ##

<table> 
 <thead> 
  <tr> 
   <th>标 记</th> 
   <th>意 义</th> 
   <th>作 用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;marquee&gt; &lt;/marquee&gt;</code></td> 
   <td>移动文字</td> 
   <td>令文字左右走动</td> 
  </tr> 
  <tr> 
   <td><code>&lt;meta&gt;</code></td> 
   <td>开头定义</td> 
   <td>主要为网页文件添加关键词和描述</td> 
  </tr> 
 </tbody> 
</table>

--------------------

## StyleSheet ##

<table> 
 <thead> 
  <tr> 
   <th>标 记</th> 
   <th>意 义</th> 
   <th>作 用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;script&gt; &lt;/script&gt;</code></td> 
   <td>脚本标记</td> 
   <td>添加Javascript代码或者是VBScript代码</td> 
  </tr> 
  <tr> 
   <td><code>&lt;style&gt; &lt;/style&gt;</code></td> 
   <td>样式表标记</td> 
   <td>控制网页版面</td> 
  </tr> 
  <tr> 
   <td><code>&lt;link&gt;</code></td> 
   <td>链入标记</td> 
   <td>链入外部 CSS 文件</td> 
  </tr> 
  <tr> 
   <td><code>&lt;span&gt; &lt;/span&gt;</code></td> 
   <td>自订标记</td> 
   <td>独立使用或与样式表同用</td> 
  </tr> 
  <tr> 
   <td><code>&lt;br&gt;</code></td> 
   <td></td> 
   <td>表示换行</td> 
  </tr> 
  <tr> 
   <td><code>&amp;nbsp</code></td> 
   <td></td> 
   <td>空格</td> 
  </tr> 
  <tr> 
   <td><code>&amp;gt</code></td> 
   <td></td> 
   <td>表示大于号</td> 
  </tr> 
  <tr> 
   <td><code>&amp;lt</code></td> 
   <td></td> 
   <td>表示小于号(&lt;)</td> 
  </tr> 
 </tbody> 
</table>

--------------------

# HTML 标记常用的属性 #

## 通用属性： ##

**class：**为某个对象指定一个CSS样式表。  
**style：**通过添加CSS代码来控制对象的样子。  
**width：**指定对象的宽度  
**height：**指定对象的高度

--------------------

## 对齐方式： ##

**align：**水平对齐，可取的值为left，center，right  
**valign：**垂直对齐，可取的值为top，middle，bottom

--------------------

## `<meta>`标记属性： ##

**name：**值为 **keywords** 时，增加关键字。值为 **description** ，增加页面内容描述

--------------------

## `<img>`标记属性： ##

**src：**指定一张图片(通过路径来指定图片)  
**alt：**为图片添加描述信息

--------------------

## `<a> </a>`链接标记属性： ##

**herf：**指定链接到哪里  
**target：**指定是否要打开新的窗口来显示网页

--------------------

## 滚动字幕标记属性： ##

**behavior：**设置文字的移动方式，可取值有alternate，scroll，slide  
**scrollamount：**控制文字移动速度，值为数字  
**direction：**控制文字的移动方向，可选的值有left、right、up、down  
**onmousemove：**设置鼠标移入滚动区时，让滚动字幕停止，取值为 this.stop()  
**onmouseout：**控制鼠标移出滚动区时，让滚动字幕移动动，取值为this.start()

--------------------

## 表格属性： ##

**border：**设置表格的边框粗细  
**bordercolor：**指定边框颜色  
**bgcolor：**指定表格的背景颜色  
**background：**指定表格的背景图片  
**cellpadding：**指定表格内容与边框之间的距离  
**cellspacing：**指定单元格之间的距离  
**colspan：**指定某个单元格占几列(用于合并单元格，且只能用于标记)  
**rowspan:**指定某个单元格占几行(用于合并单元格，且只能用于标记)

--------------------

## 样式表标记和链入标记属性： ##

**type：**值为text/css的时候，指明为文本样式表(样式表标记和链入标记都可以用)  
**rel：**值为stylesheet时，指定链入的是样式表文件  
**href：**指定CSS文件的位置