HTML知识点汇总

发表于 | 分类于 ， ，

以标签为元素

HTML是用来描述网页的语义的一种语言，该语言由一套标记标签组成

1
2
3
4
5
6
7
8
9
<html>

<body>
<p>This is my first paragraph.</p>
<br />
<a href="http://www.github.com">This is a link</a>
</body>

</html>

如上面的一段HTML示例代码，我们可以总结出标签元素具备如下语法规范：

  • 有的元素是双标签的，它们以开始标签起始（<p>），以结束标签终止（<p>）；也有元素是单标签的<br />
  • 双标签的元素通常将待呈现的内容嵌在两个标签之间，这部分内容可以是纯文本（<p>标签所括内容），也可以是合法的其他元素（<body>标签所括内容）
  • 大多数的元素都拥有属性，且在开始标签内进行赋值（<a href=””>），属性值都是字符串类型””（用引号括起来）

基础标签整理

元素 标签 语义 常用属性
页面 <html> 所有的页面内容 lang=语言
头部 <head> 页面的头部
标题 <title> 页面的标题
主体 <body> 页面的主体部分 bgcolor=背景颜色, background=背景图片, text=文本颜色, leftmargin=左边距, rightmargin=右边距, topmargin=上边距, bottommargin=下边距, link=链接初始颜色, alink=链接点击时颜色, vlink=链接点击后颜色
章节标题 <h1> 章节的标题，支持到<h6> align=”left/center/right”
段落 <p> 将正文分割为若干段落 align=”left/center/right”
链接 <a> 锚链接anchor href=目标（url或name）, name=锚点名称, title=悬停文本, target=”_self/_blank/_parent/_top”（用什么方式打开）
图像 <img> 页面中插入图像 src=图片位置, width=宽, height=高, alt=图片不可用时代替显示内容, title=悬停文本
分割 <div> 分割页面为独立区块，单独占一行 align=”left/center/right”
范围 <span> 划分小区域 align=”left/center/right”
水平线 <hr /> 水平分割线 align=位置, size=粗细, width=长度, color=颜色, noshade=不设阴影
换行 <br /> 换行 （无属性）
无序列表 <ul> 无序列表 type=”disc/square/circle”（项目符号）
有序列表 <ol> 有序列表 type=”1/a/A/i/I”（序号数字类型）, start=起始数字
列表项 <li> list item type=项目符号
定义列表 <dl> definition list （无属性）
定义列表标题 <dt> definition title （无属性）
定义列表项 <dd> definition description （无属性）
表格 <table> 页面中插入表格 border=边框, width=宽度, height=高度, bordercolor=边框颜色, align=”left/center/right”, cellpadding=内容与单元格边距, cellspacing=单元格间的距离, bgcolor=背景色, background=背景图片, dir=”ltr/rtl”（单元格排列方向从左到右）
表行 <tr> 表格的每行 dir=”ltr/rtl”, bgcolor=背景色, height=高度, align=”left/center/right”, valign=”top/midlle/bottom”（垂直位置）
单元格 <td> 一行中的每个单元格 width=宽度; height,bgcolor,align,valign; colspan=横向合并单元格个数, rowspan=纵向合并
加粗单元格 <th> 单元格中的内容加粗 （同<td>）
框架集合 <frameset> 让一个网页显示多个页面 rows=水平分割, cols=垂直分割
框架 <frame> 在一个框架内显示一个页面 src=框架内页面, scrolling=是否需要滚动条, noresize=不可改变框架大小, bordercolor=边框颜色, frameborder=隐藏(0)或显示(1)边框, name=框架名称
内嵌框架 <iframe> 嵌入在网页body内的页面 src=嵌入页面, width=宽度, height=高度, scrolling=是否需要滚动条, name=框架名字（公有属性）
表单 <form> 与服务器交互的输入 name=表单名称, action=表单处理程序, method=数据提交方式(GET/POST)
输入框 <input> 接收用户的输入 type=”text/password/radio/checkbox/checked/hidden/button/submit/reset/image/file”（输入的形式）, value=内容, size=文本框显示字符数, readonly=文本框只读, disabled=光标不可点
下拉列表 <select> 下拉列表 multiple=可以多选, size=大于1为滚动视图
选项 <option> 下拉列表的选项 selected=预选中
文本框 <textarea> 文本输入框 rows=行数, cols=列数, readonly=只读
表单划分 <fieldset> 表单按语义分组 （无属性）
表单分组标签 <legend> 表单语义分组的标签 （无属性）
表单标签 <label> 为表单元素定义标签 for=表单的名称
背景音乐 <bgsound> 播放背景音乐 src=音乐文件, loop=播放次数（-1表示循环）
多媒体文件 <embed> 播放多媒体文件 src=多媒体文件, loop=播放次数, autostart=是否自动播放, volume=音量, width=Flash文件宽度, height=Flash文件高度, quality=播放质量, pluginspage=Flash插件下载地址, type=Flash文件格式, wmode=Flash背景是否透明
字幕 <marquee> 滚动字幕 direction=移动目标方向, behavior=”slide/scroll/alternate”（行为方式）, scrollamount=移动速度, loop=循环圈数, scrolldelay=移动一次停顿时长

标签的层次关系

双标签元素互相包括嵌套，需要满足如下的层级关系的约束

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
# 一级-->二级-->三级-->四级->五级
<html>
  |-- <head>
        |-- <title>
        |-- <base>
        |-- <link>
        |-- <meta>
        |-- <style>
        |-- <script>
  |-- <body>
        |-- <h1>
        |-- <p>
        |-- <a>
        |-- <img>
        |-- <div>
        |-- <span>
        |-- <table>
                |-- <tr>
                      |-- <td>
                      |-- <th>
        |-- <ul> /<ol>
                |-- <li>
        |-- <dl>
                |-- <dt>
                |-- <dd>
        |-- <iframe>
        |-- <form>
                |-- <input>
                |-- <select>
                       |-- <option>
                |-- <textarea>
  |-- <frameset>
        |-- <frame>

标签的语义等级

HTML标签按语义可以分为两种等级：

  • 文本级标签：<p>、<span>、<a>、<b>、<i>、<u>、<em> 等文本级标签里只能放文字、图片、表单元素
  • 容器级标签：<div>、h系列、<li>、<dt>、<dd> 等容器级标签里可以放置任何东西

转义字符

转义代码 特殊符号 转义代码 特殊符号
\  空格（non-breaking spacing） \° 摄氏度°
\< 小于号（less than） \± 正负号±
\> 大于号（greater than） \× 乘号×
\& 符号& \÷ 除号÷
\" 双引号 \² 平方²
\' 单引号 \³ 立方³
\© 版权© \绐 文字“绐”（“绐”的unicode编码）
\™ 商标™ \¥ 人民币￥