Html学习速记(从O'Reilly教材整理)

一:名词必知:
 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.常见字符标记:    @   &copy;
   >  大于号  &gt;
   < 小于号 &lt;
   &  与号   &amp;
    实体符号如  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 ExpandedBlockStart.gif Code
<address><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 ExpandedBlockStart.gif Code
1<tabel summary="描述" cellpadding="单元格边缘和内容之间的距离" cellspacing="相邻单元格间距及单元格外沿和表格边沿之间的间距">
2  <caption>表格标题</caption>
3  <tr>
4   <th></th>
5   <td  rowspan="" colspan="" axis=""></td>
6   <td></td>
7  </tr>
8 </table>


 6.框架 frame
四:图片  http://www.w3school.com.cn/tags/tag_img_prop_ismap_usemap.asp
 

ContractedBlock.gif ExpandedBlockStart.gif Code
 1<href="/example/map">
 2   <img src="/i/map.gif" alt="替代文本" longdesc="更长的替代文本" align="middle/left/right" border="5" ismap="ismap" usemap="#map" />
 3 </a>
 4
 5 <map name="map">
 6   <area coords="0,0,49,49" href="link1.html">
 7   <area coords="50,0,99,49" href="link2.html">
 8   <area coords="0,50,49,99" href="link3.html">
 9   <area coords="50,50,99,99" href="link4.html">
10 </map>
11

 转载请注明出处:张素丰(博客园

 

 
posted on 2009-03-22 12:33  Anpher Zhang 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/zhangsufeng/archive/2009/03/22/1418900.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值