HTML笔记

看到朋友写的 觉得不错 就转载一下 记下来


http://user.qzone.qq.com/805853418/blog/1346209954

0常见标记概览
<frameset>        ……框架集标记   
<iframe>            ……浮动框架,详见第9章:框架
<form>               ……表单标记
<input>              ……控件输入标记
<select>            ……菜单列表控件标记
<textarea>        ……文本域标记,以上标记详见第8章:表单
<table>             ……表格标记
<tfoot>              ……表尾标记
<div>                 ……层标记,以上标记详见第7章:表格
<marquee>        ……动态文字标记
<bgsound>        ……背景音乐标记
<embed>           ……多媒体标记,以上标记详见第6章:多媒体
<img>                ……图像标记
<map>               ……映射图像热点设置标记,详见第5章:图像
<a href……>     ……链接标记
<a name……>   ……书签标记,详见第4章:超链接
<ul>                   ……无序列表标记
<ol>                   ……有序列表标记
<dl><dt><dd>    ……自定义列表标记
<menu>             ……菜单标记
<dir>                  ……目录标记,以上标记详见第3章:列表
<h1>                  ……1号标题标记
<font>                ……字体标记
<p>                    ……段落标记
<br>                   ……换行标记
<hr>                   ……水平线标记
<blockquote>     ……向右缩进标记
&bsp;                 ……空格标记,以上标记详见第2章:文字与段落
<html>                ……html标记
<head>               ……html头标记
<body>               ……html主体标记
<title>                 ……文件标题标记
<meta>               ……元信息标记,以上标记详见第1章:基本标记
 
1基本标记
<html>
 <head>
  <title>文件标题</title>……标题标记title
……下面是元信息标记meta
  <meta name="keyword" content="具体的关键字">……设置页面关键字
  <meta name="description" content="对页面的描述语言">……设置页面描述
  <meta name="generator" content="编辑的软件名称">……设置编辑工具
  <meta name="author" content="作者姓名">
  <meta name="robot" content="搜索方式">……限制搜索方式
   ……content的值有all,none,index,follow,noindex,nofollow(以页面能否被检索和页面链接能否被查询分类)
  <meta http-equiv="content-type" content="text/html;charset=字符集类型">
   ……或<meta http-equiv="Content-Language" content="语言">
   ……charset设置网页的内码语系,如简体中文为gb_2312等
   ……设置了网页文字及语言
  <meta http-equiv="refresh" content="跳转时间;url=链接地址">
   ……设置网页的定时跳转,时间以秒为单位。若url省略,则相当于网页定时自我刷新
  <meta http-equiv="expires" content="到期的时间"
   ……设定网页的到期时间,时间为GMT时间格式
  <meta http-equiv="cache-control" content="no-cache">
   ……cache-control可替换为pragma,设定了禁止从缓存中调用网页
  <meta http-equiv="set-cookie" content="到期的时间">……删除过期的cookie
  <meta http-equiv="windows-target" content="_top">……强制打开新窗口
  <meta http-equiv="过渡事件" content="revealtrans(duration=过渡效果持续时间,transition=过渡方式)">
   ……设置网页的过渡效果
   ……过渡事件包括page-enter和page-exist,时间以秒为单位,过渡方式有0-23个编号
  <base href="链接地址" target="新窗口打开方式">……通过基底网址标记设置HTML页面的绝对路径
   ……则页面中的其他链接地址只需设为相对地址即可,target包括_parent,_blank,_self,_top
 </head>
 <!--注释的文字-->……页面注释标记
……下面是页面的主体标记body
 <body bgcolor="颜色代码" background="文件链接地址" bgproperties="背景图片固定属性" text="颜色代码" link="颜色代码"
              alink="颜色代码" vlink="颜色代码" topmargin=上边距的值 leftmargin=左边距的值>
   ……页面背景色bgcolor,背景图片background,bgproperties默认情况下可省略,则图片会平铺。
   ……若为fixed属性,则滚动页面时背景图像会跟着移动,相对于浏览者来说,则感觉图片是总停留在相同位置。
   ……还可使用CSS样式<style type="text/css">
      <body{background-repeat:no-repeat}
       </style>,no-repeat表示不平铺,不重复。也可改为repeat-x,repeat-y表示只向某个方向平铺
   ……设置文字链接属性link,link,alink,vlink分别设置未访问的、正在访问的、访问后的文字链接文字颜色
  <a href="../15.html">打开一个相对地址</a>……这时则会把base里的链接地址放在这个地址的前面
 </body>
</html>
 

2文字与段落
(1文字标记)
 <h1 align=对齐方式>……</h1>  ……标题文字标记,从h1到h6一共6级标题。标题文字对齐方式包括left,center,right
 <font face="字体1,字体2" size="文字字号" color="颜色代码">应用字体的文字</font>    ……字号可以设置为1~7,也可以是+1~+7,-1~7,默认文字大小与3号字相同
 <strong>粗体的文字</strong>……还可以用<b>粗体文字</b>实现
 <em>斜体字</em>……还可以用<I>斜体字</I>或者<cite>斜体字</cite>实现
 <u>带下划线的文字</u>
 <sup>……</sup>    ……上标标记
 <sub>……</sub>    ……下标标记
 <strike>文字</strike>或者<s>文字</s>  ……设置删除线
 <code>文字</code>  或者<samp>文字</samp>   ……等宽文字标记
 &nbsp;    ……空格标记,注意后面要加分号。还有其他特殊符号如&copy;&reg;&trade;等等
(2段落标记)
 <p>段落文字</p>  ……段落标记,可以没有</p>,遇到下一个<p>,会自动另起一段
 <nobr>不换行的文字</nobr>   ……取消文字换行标记
 <br>     ……换行标记
 <pre>文字</pre>    ……保留原始排版方式标记
 <center>文字</center>   ……居中对齐标记
 <blockquote>文字</blockquote>  ……向右缩进标记
(3其他标记)
 <hr width=85% size=3 color="颜色代码" align=对齐方式 noshade> 
    ……水平线标记,默认情况水平线是100%宽度和1像素的高度,可以通过width,size设置。width可以是像素值,也可以是百分数。size必须为像素数。
   ……水平线默认空心带阴影的立体效果。通过noshade可去掉水平线阴影
 <ruby>
  被说明的文字
  <rt>
  文字的标注
  </rt>
 </ruby>  ……文字标注标记,通过添加对文字的标注来说明网页中的某段文字
 <var>变量</var>      ……声明变量标记,变量为斜体
 <plaintext>或<xmp>   ……忽视HTML标签标记,一般放在body之后。其后面的html标记全部会被认为是字体显示在界面上
 

3列表
(1无序列表)
 <ul type=符号类型> ……符号类型值有disc,circle,square三种,分别表示实心圆,空心圆,实体矩形,默认disc.也可以在LI中设置。如:<LI type=符号类型>
  <LI>第一项
  <LI>第二项
  ……
 </ul>
(2有序列表)
 <ol type=序号类型 start=起始数值> ……有序列表使用编号而不是符号来排列。 一般用字母或数字。故type的取值为1,a,A,i,I五种取值,其中i和I为罗马数字
      ……start设置有序列表的起始数值,可以为字母、数字、罗马数字。
  <LI>第一项
  <LI>第二项
  ……
 </ol>
(3自定义列表)
 <dl>
  <dt>名词1<dd>解释1
  <dt>名词1<dd>解释1
  ……
 </dl>  ……自定义列表主要用于解释名词。包含两个层次的列表。dt后是需要解释的名词,dd是具体的解释,解释的内容在显示时会自动换行缩进
(4菜单列表)
 <menu>
  <LI>第一项
  <LI>第二项
  ……
 </menu>  ……菜单列表标记menu与无序列表效果相同
(5目录列表)
 <dir>
  <LI>第一项
  <LI>第二项
  ……
 </dir>  ……目录列表dir一般用来创建多列的目录列表,与无序列表效果相同
(6列表其他应用)
 <dl compact></dl> ……列表简化标记compact,可以使各项紧密排列,节省空间
 <LI><font color="颜色代码">列表项的内容</font><LI> ……设置列表文字颜色等等其他内容,在此不作详细说明
 
 <ul>
  <LI>
   <ol>
    <LI>
    <LI>
    ……
   <ol>
  </LI>
  <LI>……
  ……
 </ul>   ……列表的嵌套使用,一般是有序列表和无序列表的嵌套
 

4超链接
(0超链接建立)
 <A href="文件名" target=目标窗口打开方式>链接元素</A>     或   <A href="URL">链接元素</A>
   ……target值包括_parent,_blank,_self,_top,默认_self
(1内部链接)
 eg:在index.html中有这样的代码
  <A href="film/film1.html">影片详情</A>
  <A href="film/film2.html">影片详情</A>  
    ……这说明film1.html和film2.html在与index.html同一级的film文件夹里,这句话表示了在下一级目录里找到文件。即film目录下的文件
    在film1.html中有这样的代码
  <A href="../index.html">返回</A> ……..表示上一级目录。说明index.html在film1.html文件的上一级目录里
  <a href=film2.html">下一个影片介绍</a>  ……这里表示同级目录。说明film2.html与film1.html在同一个目录下
(2书签链接)
 <A name="书签名称">文字</A> ……建立书签
 <A href="#书签名称">链接的文字</A> ……链接到同一页面的书签
 <A href="链接的文件地址#书签名称">链接的文字</A> ……链接到不同页面的书签
(3外部链接)
 <A href="……">链接文字</A>
  ……省略号里的是绝对地址,其格式包括 http://……,ftp://……,telnet://……,mailto://……四种
  ……http表示采用WWW服务进入万维网站点,ftp表示通过FTP访问文件传输服务器,telnet表示启动远程连接Telnet,mailto表示直接启动邮件系统Email
  ……http常用在设置友情链接时,ftp则需获得许可才能在网络上传播,故需从服务器管理员处取得登录权限,当然,有一些可以匿名访问,Telnet常用来登录一些BBS网址
  ……mailto后可以加一些参数,eg:<A href=" mailto:opinion@163.com?CC=电子邮件地址&Subject=主题文字&BCC=电子邮件地址&Body=邮件内容>链接文字</A>
  ……下载文件,eg:<A href="文件所在地址">链接文字</A>
 

5图像
(1图像结构)
 <img src="图像地址" height=图像高度 width=图像宽度 border=边框宽度>
 <img src="pic.jpg" hspace="水平间距" vspace="垂直间距" align="相对文字对齐方式" alt="提示文字的内容"
 ……如果没有br和p标记换行显示,则图像与文字挨在一起。通过调整hspace和vspace可以进行调整
 ……align取值有top,middle,bottom,texttop,absmiddle,baseline,absbottom,left,right
(2图像超链接)
 <A href="链接地址" target="目标窗口打开方式"><img src="图像文件地址"></A>
 
 设置图像热区链接
    <img src="图像地址" usemap="映射图像名称">
 然后定义热区图像及热区链接属性
    <map name="映射图像名称">
  <area shape="热区形状" coords="热区坐标" href="链接地址">
    </map>
 另:可以通过Dreamweaver通过可视化来实现以上代码
 
6多媒体
(1设置动态文字)
 <marquee direction="滚动方向" behavior="滚动方式" loop="循环次数" scrollamount="滚动速度" scrolldelay="时间间隔">
   ……滚动方向包括up,down,left,right,
   ……滚动方式包括scroll(默认循环),slide(一次滚动),alternate(交替滚动)
   ……循环设置loop,滚动速度scrollamount(以像素为单位),滚动延迟scrolldelay,滚动延迟scrolldelay(以毫秒为单位)
  <font face="隶书" color="#CCCCCC" size=4>动态文字</font>
 </marquee>
 <marquee bgcolor="颜色代码" width=背景宽度 height=背景高度 hspace=水平范围 vspace=垂直范围>
   ……hspace和vspace是指滚动文字与周围其他元素之间的水平距离和垂直距离,默认情况下是紧挨着的
  滚动文字
 </marquee>
(2设置背景音乐)
 <bgsound src=背景音乐地址 loop=3>……可为avi,mp3文件,循环次数loop
(3添加多媒体文件)
 <embed src=多媒体文件地址 width=播放界面宽度 height=高度 autostart=true/false loop=true/false hidden=true/false>
 </embed>……可为avi,swf(flash),mpg(mpeg)等类型文件,src,width,height一定得设置,多媒体文件播放需要客户端安装相应播放软件
  ……设置自动运行autostart,循环次数loop,只能为true或false,
  ……隐藏面板hidden,这个功能可以只保留声音不显示图像,但必须把autostart设为true
 

7表格
(0表格结构)
 <table width=90% height=200 align="center" border="1" bordercolor="#9933CC" cellspacing=3 cellpadding=10 bgcolor="DDCCFF" background="背景图片地址">
    ……width,height用百分数时,若浏览器变化,表格也随之大小变化。若用像素值,则不变
    ……内框宽度cellspacing,文字与边框距离cellpadding
  <caption valign="垂直对齐方式">表格标题</caption> ……表格标题垂直对齐方式,包括top和bottom.注意bottom时标题在表格下方
  <tr height=160 bordercolor="#00CCFF" bgcolor="#FFEE00" background="背景图片地址" align="center" valign="垂直对齐方式">
    ……垂直对齐方式还包括middle,水平对齐方式包括left,center,right
   <th>表格表头</th>……一段加粗文字
   ……
  </tr>
  <tr>
   <td width=30 height=20 colspan=2 align="center" valign="bottom" bgcolor="#660000" bordercolor="#CCCCFF">单元格文字</td>
    ……单元格水平跨度colspan,单元格垂直跨度rowspan
  </tr>
  <tr>
   <td bordercolorlight="#00FFEE" bordercolordark="#DDAAFF" background="背景图片地址">单元格文字</td>
    ……设置单元格亮边框bordercolorlight,暗边框bordercolordark,若同时设置了背景色和背景图片,则显示背景图片
   <td nowrap>单元格文字</td>……单元格文字内容不换行nowrap,若超出则用滚动条实现
  </tr>……
 </table>
(1表格详细结构)
 <thead>
  <tr>
   <th>……</th>
   <th>……</th>
   ……
  </tr>
 </thead>……设计表头样式
 <tbody>
  <tr>
  <td>
   <table>
    <tr>
     <td>页面导航</td>
    </tr>
    <tr>
     <td>页面导航</td>
    </tr>
   </table>
  </td>……表格嵌套,在单元格td中嵌套了另一个表格table
  <td>……</td>
 </tbody>……设计表主体样式
 <tfoot>
  ……
 </tfoot>……设计表尾样式
(2层标记)
 <div id=值 align=对齐方式 style=样式 class=应用的样式类></div>
 例:<div id="exam2" style="position:absolute;top:70pt;left:170pt;">
  <img src="pic.jpg">
     </div>
 ……层标记又称区隔标记,与表格功能相似,但功能更强大。id用来标识层,style用来设定层的属性,包括层的大小和超始位置;
        ……class用于定义层所应用的CSS样式。div常与CSS结合使用。
 
 
8.表单
(0表单结构)
 <form action=" mailto:abcd@163.com" name="research" method="post" enctype="Text/plain" target="_self">
   ……处理程序action不可缺,表单名称name,方法method有get和post,
       编码方式enctype有Text/plain,默认,multipart/form-data,其中第三个是上传文件的表单的方式
       目标显示方式target有_self(默认),_blank(在新窗口打开),_parent,_top
 </form>
(1控件)
 A<form>
  <input name="##" type="text" size="15" maxlength="10" value="http://">
   ……控件名称、控件类型,长度,最长字符数,文字段默认取值name,type,size,maxlength,value
  </form>
          type="password"
 B <input type="radio" name="test" value="A" checked>……单选按钮名称,取值(送到服务器),checked默认按钮被选中
          type="checkbox"  ……复选框
 C <input type="button" name="##" value="按钮值" onclick="处理程序"> ……onclick参数有window.close(),window.open()等等
          type="submit" ……提交按钮,不需设置onclick参数,其它与button同
          type="reset"  ……重置按钮
 D <input type="image" src="图像地址" name="图像域名称">……图像域名称应该是点击图片后与服务器交流的id吧?
 E <input type="hidden" name="隐藏域名称" value="提交的值">
 F <input type="file" name="文件域名称">……到时页面会自动添加一个“浏览…”按钮,单击后会有“选择文件”对话框出现
(2菜单列表控件、文本域标记、id标记)
 A <select name="下拉菜单名称">
  <option value="选项值" selected>选项内容……这里的select表示默认选中的一项
  <option value="选项值">选项内容
  </select>
 B <select name="列表项名称" size="显示的列表项数" multiple>……multiple表示这一列表可以进行多项选择
  下同菜单控件
 C <textarea name="文本域名称" value="文本域默认值" row=行数 cols=列数>
   </textarea>
 D <input name="##" type="text" size=20 id="username"> ……id标记用来标识页面的惟一元素
 
 
9.框架
(0框架结构)
 <frameset>
  <frame>
  <frame>
 </frameset>
(1框架集基本属性)
 A<frameset rows="30%,70%">……水平分割窗口rows
 B<frameset cols="150,*">……垂直分割窗口cols
 C<frameset rows="30%,70%">
  <frame>
  <frameset cols="20%,55%,25%">……这里相当于第二个frame,故不用再写<frame>
   <frame>
   <frame>
   <frame>
  </frameset>
   </frameset>……嵌套分割窗口
 D<frameset rows="55%,45%" frameborder="1" framespacing="10" bordercolor="#CC99FF">
     ……设置边框可见,边框宽度为10像素,边框颜色frameborder,framespacing,bordercolor
(2窗口属性)
 A<frameset rows="30%,70%">
  <frame src="pic01.gif" name="pic" noresize>……页面源文件,页面名称,窗口尺寸不变动src,name,noresize
  <frame src="src01.html" name="text" marginwidth="40" marginheight="30" scrolling="Auto">
     ……边框与内容水平边距、垂直边距,框架滚动条显示marginwidth,marginheight,scrolling
  </frameset>
 B<noframe>
  <img src="pic03.jpg">
  </noframe>……不支持框架标记noframe
(3浮动框架)
 A<body>
  <iframe src="##" width="30" height="40" align="center">……页面源文件,特有属性宽度、高度、对齐方式src,width,height,align
   </iframe>       ……另外还有name,marginwidth,marginheight,scrolling,frameborder等共有属性,但没有framespacing和bordercolor
  </body>……注意整个页面不是框架页面,即不是frameset,而是body
(4链接)
 A在导航界面中常用到,通过target与name的连接实现
 <a href="1.html" target="content">江武杰</a>
 <a href="2.html" target="content">黄孝斌</a>……这两句是navig.html里的内容
 <frame src="navig.html">
 <frame src="1.html" name="content">……这两句是layout.html里的内容,实验打开的是这个文件
 B浮动框架的链接
 <body>
  <a href="1.html" target="content">江武杰</a>
  <a href="2.html" target="content">黄孝斌</a>
  <iframe src="1.html" name="content">
  </iframe>
 </body>……浮动框架与一般框架的链接省了一个文件,看起来更简洁,因为target和name在同一个文件里


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值