HTML基础知识
HTML
超文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言。
- 标签
由左右尖括号和它们中间的字母及数字组成
- 元素
由起始标签和结束标签以及2个标签之间的所有文本组成
-
- 元素嵌套
一个元素要完全包含另一个元素
-
- 元素分类
-
- 块级别元素
块级别元素显示都是从新行开始,可以包含内联元素。
-
-
- 内联元素
-
内联元素一般在句子中,不会从新行开始,不能包含块级别元素
-
- 元素特性
在附带特性的元素起始标签内,由名称和值组成,特性值必须放置在双引号内并用等号与名称隔开。
-
-
- 名称
-
-
-
- 值
-
-
-
- 分类
-
- 核心特性
- 国际化特性
- UI事件
-
- UI事件特性
使用UI事件特性可以将事件与脚本相关联。
- 转义字符
字符 | 数字实体 | 命名实体 |
" | " | " |
& | & | & |
< | < | < |
> | > | > |
- 注释
<!-- 注释 --> |
- 提交方式
-
- get
- post
- 声明
-
- 文档类型声明
DOCTYPE声明位于文档起始位置,如果有XML声明,则其位于XML声明之后。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
-
- XML声明
可选项,声明必须位于文档的起始位置
<?xml version="1.0" encoding="UTF-8" ?> |
- XHTML与HTML的区别
- 标签必须以小写字母书写
- 特性必须以小写字母书写
核心特性
- id
用于唯一标识网页内的任何元素,必须以字母开头后面可以添加任意数量的字母、数字、连字符、下划线、冒号和句号,任意两个元素的id不能相同。
- class
用于指定元素属于哪一类元素。
- title
元素的建议标题。
基本文本格式化
- 空白和流
-
- 空白折叠
-
- 保留空格
-
- <pre>
-  
- hn 标题元素
-
- 标签
-
- <h1>
- <h2>
- <h3>
- <h4>
- <h5>
- <h6>
- 大小
-
- <h1>最大
- <h4>默认与文本大小相同
- <h6>最小
- <p> 段落元素
- <br /> 换行符
- <pre> 预先格式化文本
核心元素
- <html> 网页
- <head> 网页头
-
- <title>
-
- <base>
-
- <object>
-
- <link>
-
- <style>
-
- <script>
-
- <meta>
- <body> 网页体
列表元素
- <ul> 无序列表
用于放置项目符号列表,即无序列表,每一个项都要使用<li>元素。
- <ol> 有序列表
用于放置有序列表,可以更改序号的表现形式,可使用阿拉伯数字、字母或罗马数字,每一个项都要使用<li>元素。
- <li> 项
用于存放列表中的每一个项。
- <dl> 定义列表
用于定义特殊类型的列表,这种列表用于提供术语,并且术语后面跟上简短的文本定义或描述。
-
- <dt>
用于放置即将定义的术语。
-
- <dd>
用于放置术语的定义或描述。
- 嵌套列表
在列表中可以嵌套其他的列表。
链接和导航
- URL 统一资源定位符
完整的Web地址。
- DNS 域名服务器
实际上所有的域名在后台都是转换成IP地址的,通过IP地址可以访问到所有Internet上的计算机,DNS中包含了运行网站的域名和对应的IP地址。
- 目录
-
- 父级目录
../ |
-
- 根目录
~/ |
- <a> 链接
利用<a>元素可以指定链接,在起始标签<a>和结束标签</a>之间的文本组成了链接的内容,用户可以浏览和点击它,此外起始标签需要附带href特性,该特性的值是所要链接的文件名。当链接是E-mail时在href特性的值开头使用“mailto:”。
框架
框架能够将浏览器窗口划分为多个独立的部分或窗格,每个窗格包含独立的网页,优点在于加载其中的任意页面都不需要重新加载浏览器窗口内的全部内容。
- <frameset>
框架集,需要替代掉<body>元素。
- <frame>
框架元素。
- <noframes>
当浏览器不支持框架时提供消息提示。
- <iframe>
内联框架、浮动框架,可以出现在网页的任意位置,不需要放置在<frameset>内。
分组元素
- <div>
该元素主要用于块级别元素分组
- <span>
该元素仅用于分组内联元素
多媒体
- <img>
该标签用于网站中添加图片,至少附带src和alt这两个特性,src指定图片的来源,alt指定图片的描述。在该标签外套用<a>可以使得该图片有链接的效果。
- <map> <area>
用于客户端的图像映射,图像映射可以为一张图片创建多个链接。
- <object>
- <param>
该元素用于向对象传递参数,对象所需要的参数类型取决于对象的工作,例如可以为播放器提供额外的信息。
- <embed>
用于网页添加Flash
短语元素
- <em> 强调
该元素是文档中的强调点,通常是以斜体的形式显示,但是不能希望显示斜体而使用该元素,应当是需要强调时才使用。
- <strong> 着重强调
该元素用于强调文本内容,强调程度强于<em>,通常以粗体显示,应当在需要强调时才使用。
- <address> 地址
用于包含地址文本,大多数浏览器显示为斜体。
- <abbr> 缩写词
用于使用缩写形式,可使用title特性存放其完整版本,如果缩写的是外语单词,可以使用XHTML中的xml:lang特性指明使用的语言种类。
- <acronym> 首字母缩略词
用于使用首字母缩写形式,可使用title特性存放其完整版本,如果缩写的是外语单词,可以使用XHTML中的xml:lang特性指明使用的语言种类。
- <dfn> 特殊术语
用于声明正在引入特殊术语,通常以斜体显示
- <blockquote> 用于引用文本
用于引用另一个源中的一段文本,通常是一个独立的左右缩进块,可以使用cite特性指明引用的来源,一般是指向在线文档的URL。
- <q> 用于短引用
在句子内添加引用,而不是将引用作为独立的缩进块,可以使用cite特性指明引用的来源,一般是指向在线文档的URL。
- <cite> 用于引证
用于指明引用的来源,一般是指向在线文档的URL。
- <code> 用于代码
用于包含任何编程代码,通常以等宽字体显示,文本中的特殊字符需要使用转义字符。
- <kbd> 用于通过键盘输入文本
用于告知用户输入一些文本,通常以等宽字体显示。
- <var> 用于编程变量
用于表面其内容是可以由用户提供的一个变量,通常以斜体显示。
- <samp> 用于程序输出
用于指示程序、脚本等的样本输出,通常以等宽字体显示。
表示元素
- <b> 加粗显示
- <i> 斜体显示
- <tt> 等宽字体显示
- <sup> 上标显示
- <sub> 下标显示
- <big> 较大显示
- <small> 较小显示
- <hr /> 水平线
表格
- <table>
表格标签
- <tr>
行标签
- <td>
单元格标签
- <th>
标题单元格,一般以粗体显示
- <caption>
用于表示表格主题
- <thead>
用于创建独立表格标题
- <tbody>
用于指示表格主体
- <tfoot>
用于创建独立脚注
- <colgroup>
用于对列分组
- <col>
用于共享样式的列
- 表格特性
- colspan 占据多列
- rowspan 占据多行
表单
- <form>
用于创建表单
- <input>
-
- 单行文本输入
-
- type:text
- 密码输入
-
- type:password
- 按钮
-
- type: submit 提交数据
- type: reset 重置初始值
- type: button 用于触发客户端脚本
- 图片
-
- type:image
- 复选框
-
- type:checkbox
- 单选按钮
-
- type:radio
- 文件选择
-
- type:file
- 隐藏域
-
- type:hidden
- <textarea>
用于多行文本输入
- <button>
按钮
- <select>
下拉列表框
- <option>
下拉框选项
- <optgroup>
选项分组
- <label>
文字标签
- <fieldset>
表单周围创建边框
- <legend>
为表单边框创建主题
- 数据发送方式
-
- get
-
- post
表单数据隐藏在HTTP头里
编辑文本元素
- <ins>
通常文本添加下划线显示。
- <del>
用于删除一些文本,通常添加删除线显示。
国际化特性
- dir
用于指定文本在浏览器中显示的方向,从左到右还是从右到左。
值 | 含义 |
ltr | 从左向右(默认值) |
rtl | 从右向左 |
- lang
指示文档中使用的主要语言。,有助于搜索引擎。
-
- 语言
-
- ar:阿拉伯语
- en:英语
- en-us:美国英语
- zh:中文
- xml:lang
在XHTML中该特性是lang的替代特性。