一:名词必知:
HTML: Hypertext Markup Language 超文本标记语言
XML: Extensible Markup Language 可拓展标记语言
XHTML: Extensible Hypertext Markup Language 可拓展超文本标记语言
CSS: Cascading Style Sheet 级联样式表
URL: Uniform Resource Locator 统一资源定位符
hspace左右距离,vspace上下距离
二:文本标记:
1.HTML中的注释 <!-- 注释说明的内容 -->
<html dir="rtl" lang="en-US"></html> dir属性 rtl 和 ltl表示网页内容的显示方向 lang表示网页内容所使用的语言 zh中文
<head profile="元数据metadata配置文件地址"><base/><link /><meta /><Object /><script /><style /></head>
刷新此文档<meta http-equiv="Refresh" content="5" />
加载其他文档 <meta http-equiv="Refresh" content="30;URL=http://www.hao123.com">
2.<b>粗体内容</b> 粗体效果
<i> 斜体内容</i> 斜体效果
<tt>文本</tt> 用电传打字机式的等宽字体效果
3. 经常用于搜索引擎检索
表引用 <cite>被突出显示的文本,一般显示为斜体</cite>
强调(emphasis)标记 <em>强调的内容</em>
语气较重的强调 <strong>会程序粗体显示效果</strong>
表程序代码片段 <code> 程序 代码 </code>
<kbd> </kbd> 表示用户从键盘输入的内容
表示范例文本 <samp>一个例子</samp>
<dfn>表示某个文字的定义内容</dfn>
<var></var> 表示程序语言中的变量名称
<ins cite="修改说明文本url" datetime="YYMMDD">加下划线的内容</ins>
<del cite="修改说明文本url" datetime="YYMMDD">加删除线的内容</del>
<abbr> 标签 用title属性来表示文本是什么的缩写 <abbr title="etcetera">etc.</abbr>鼠标置于文本之上时显示说明
<acronym> 元素可定义只取首字母缩写 <acronym title="说明文本">文本</acnym> 鼠标置于文本之上时显示说明
4.常见字符标记: @ ©
> 大于号 >
< 小于号 <
& 与号 &
实体符号如 A A a a { 表示 { w 表w !;表! 0~255
5.<a></a>锚标签 用于定位文本超链接
超链接 <a href = url>说明文本</a>
定义网页内内容<a name="abc"></a> <a herf="#bac">显示abc锚处的内容</a>
<a href=".html" onMouseOver="status='浏览器下面的状态了显示的内容';return true;">文字</a>
<a>中可选属性rel和rev分别表示源文档和目标文档之间的关系和方向,经常使用的文档关系包括;next,prev,head,toc目录,parent源之上的文档,child,index索引,glossary术语表,这些文档关系也用在文档的<head>中的<link>标签里
6.url传递中保留字符和不安全字符及其URL编码
字符 描述 用法 编码
; 分号 保留 %3B
/ 斜号 保留 %2F
? 问号 保留 %3F
: 冒号 保留 %3A
@ "at"符号 保留 %4O
= 等号 保留 %3D
& "和"符号 保留 %26
< 小于号 不安全 %3C
> 大于号 不安全 %3E
" 双引号 不安全 %22
# 井号 不安全 %23
% 百分号 不安全 %25
{ 左大括号 不安全 %7B
} 右大括号 不安全 %7D
| 竖线 不安全 %7C
\ 反斜线 不安全 %5C
^ 加字号 不安全 %5E
~ 波浪号 不安全 %7E
[ 左中括号 不安全 %5B
] 右中括号 不安全 %5D
` 反单引号 不安全 %60
通常情况下,如果对某个字符是否在URL中使用有疑问,那么你应该始终使用该字符的编码。除字母,数字和字符$-_.+!-'()外的其他所有字符都应该使用编码。这是一条很重要的经验
三:文本结构
1. (1)换行 (line break) <br clear=all/left/right/none />单符 clear清除所有数据流后显示后面的数据 <nobr />强制不换行
(没有结束标签的标签有:<area /> <base />解析文档中的所有的超链接<basefont /><br /> <col /> <frame /> <hr /><img/><input /> <link /> <meta /> <param />)
我们可以使用下面的段落符号对文本进行自定义显示效果
(2)部分 (division) <div>也叫做层</div>
<div title=说明文本 id=唯一name class=name align=center/left/right dir=rtl/ltl nowrap></div>
(3)段落 (paragraph) <p>段落内容</p>
<p title=说明文本 id=唯一name class=name align=center/left/right dir=rtl/ltl nowrap></p>
段落中可以包含任何允许在文本流中出现的元素,其中包括传统的文字和标点,链接(<a>),图像(<img>),换行(<br />),字体变化(<b>,<i>,<tt>等款字体,<u>下划线,<strike>删除线,<big>,<small>,<sup>上标,<sub>下标,<font>)和基于内容的样式变化(<acronym>,<cite>,<code>,<dfn>,<em>,<kbd>,<samp>,<strong>,<var>)
(4)块引用
<blockquote>被缩进斜体的文本内容</blockquote>
<q>简短的引用</q>
(5)地址标签address 斜体显示
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<address><a href="mailto:webmaster@oreilly.com">Webmaster</a>O'Reilly& Associates,Inc.</address>
2.标题 heading <h1></h1> ...... <h6></h6>
水平分隔线 (horizzontal rule) <hr />单符,表示断开文本流
<pre>按照输入时的格式显示文本</pre>
<bdo dir="rtl">Hello</bdo>文本倒置显示olleH
3.列表 List 设置compact属性是列表更紧凑
无序列表 unordered list <ul><li>列表项1</li><li>列表项2</li></ul>
有序列表 ordered list <ol><li>列表项1</li><li>列表项2</li></ol>
start属性设置开始值,默认1,type A 大些字母 a小写字母 I大写罗马数字 i小写罗马数字 1阿拉伯数字
定义列表 definitin list <dt><dd>列表项1</dd><dd>列表项2</dd></dt> 带缩进
4.表单 from 用于与服务器交互
5.表格
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
1
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6.框架 frame
四:图片 http://www.w3school.com.cn/tags/tag_img_prop_ismap_usemap.asp
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
1
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)