html入门

本篇博文由作者收集网络资料整理所得,仅作个人笔记使用,如不幸侵犯您的权益,请尽快联系我。。
主要内容选自网页:http://wenku.baidu.com/link?url=PE_qU8xvJ1woKDGD0rhqVkSmZQY6LSLYSW59jHsMGGXCY1QH28BLaJnNJhrFovEbdA2lPBTTe2Y3UQ4SVMa27Wo_1eszQxhncZtcCTCwIb_


什么是 HTML?

HTML 是用来描述网页的一种语言。


  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词,比如 <html>
  • HTML 标签通常是成对出现的,比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签闭合标签
————选自W3School
HTML语句特点:  
1.       
  所有   HTML   语句大部分都是   <TAG></TAG> 结构,   <TAG>   表示打开标记,   </TAG> 表示关闭标记。但有的语句只有描述开始标记,没有描述结束,如   <P>
2.        HTML
中对文字的大小写不敏感。  
3.       
  所有语句都可以循环嵌套,但要注意嵌套对称。
一、   HTML 文档的基本结构  
         
l   HTML   部分:每个 HTML   文档必须以打开   HTML   标记开始,以关闭   HTML 标记结束  
<HTML></HTML>
  说明其间内容为   HTML   格式文档。  
         
l   头部分:此部分包含文档的标题、文档使用的脚本样式表定义等信息,还可以包含搜索工具和索引所要的其他信息。头部分必须包含在   <HEAD></HEAD>   标记对中  
1.        <TITLE></TITLE>
  其间包含的文字是该   HTML 的主题,会显示在窗口的   TITLE   栏位。  
2.        <META>
标记,此标记可以设置网页的编码、自动刷新网页、设置网页的过期值  
       
u   <meta name=”author” content=”…….”>
       
u   <meta name=”keyword” content=”…..”>
       
u   <meta http-equiv=”Expires” content=”mon, 15 sep 2003”>
       
u   <meta http-equiv=”Refresh” content=”10”, url=http://yourlink”>
       
u   <meta http-equiv=”Content-Type” content=”text/html;charset=gb2312”>
         
l   正文部分  
<BODY></BODY>
  其间说明   HTML   文件的主体内容。  
BACKGROUND=“
图形名     背景图形文件  
TEXT=#RRGGBB
  文字颜色(一般为黑   #000000    
LINK=#RRGGBB
  链接标志文字颜色  
VLINK=#RRGGBB
  具有超连接部分显示的颜色,点过之后为   ALINK   的颜色  
ALINK=#RRGGBB
  已经链接标志文字颜色  
ONLOAD=“
扩展函数调用串     <SCRIPT>   一同使用  
<- text -> text
  是描述性文字,注释。  
<SCRIPT></SCRIPT>
  描述一扩展语言。   其中:   LANGUAGE=“javascript”   描述以下为   Java   语言  
 
二、 字  体
<Hy></Hy> (y=1-6)   用于说明各级标题文字,   y=1   时字体最大,   y=6 时字体最小。其中:  
ALIGN=
缺省   对左 (LEFT)
      =CENTER   对中  
      =RIGHT   对右  
<CAPTION></CAPTION>
  显示标题文字(一般用于   TABLE   显示表格)  
<FONT></FONT>
  字体大小设置(   NETSCAPE ONLY     其中:  
SIZE=-4 ~ +4
  将字体设置为   BASEFONT   的相对大小  
COLOR=#RRGGBB
  字体颜色(   R   G     B 三色)  
<BASEFONT></BASEFONT>
  设置基本字体(   NESCAPE ONLY     其中:   SIZE=1-6

三、字型变化
Italic   (斜)字体:  
<I></I>
  斜体字    <EM></EM>   着重字  <CITE></CITE>   段落、书名的引用   
<VAR></VAR>
  表明可变内容   (   如文件名 )
Bold
(黑)字体:   <B></B>   黑体字  <STRONT></STRONG>   加强字   ,
Fixed width font
(紧凑)字体:  
<TT></TT>
  紧凑字(打印机字体)   
<CODE></CODE>
  紧凑字  
<SAMP></SAMP>
  样本字  
<KBD></KBD>
  显示键盘上键名  
其它字体修饰:   <U></U>   下划线  <BLINK></BLINK>   闪烁字  
特殊字符:(CERN中列表)   &lt; < &#60; &gt; > &#62; &amp; & &#38; &quot; " &#34; &ouml; &ntilde; ± &egrave;     @ &#64; &copy; (c)   NETSCAPE ONLY     &reg;     NETSCAPE ONLY   &nbsp;   非中断空格  
 
四、 段  落
<P>   单独表示段落结束。   <P></P>   表示其间文字是同一个段落,段落显示分成若干行,在何处分行由浏览器的窗口宽度决定,可适应任何宽度的窗口。   其中:   ALIGN=   缺省   对左(   LEFT     =CENTER   对中   =RIGHT   对右  
<BR>
  在页面上加一个回车  
<HR>
  显示一条水平分界线。   其中:(以下   NETSCAPE ONLY  
SIZE=n
  高度点数      
WIDTH=n
  宽度点数   =n%
ALIGN=
缺省   对中   =LEFT   对左   =RIGHT   对右  
<CENTER></CENTER>
  表示其间内容显示向中间对齐。(   NETSCAPE ONLY    
<PRE></PRE>
  预设文字格式(   Preformatted Text     其中的文字间隔、跳行、空白照原始键入情形显示出来,常用于程序的表达。其它标注也允许存在   <PRE>   中。  
<BLOCKQUOTE></BLOCKQUOTE>
  区块引用设定。其中的文字内容会比其他文字缩进一些。  
<ADDRESS></ADDRESS>
  地址区域。通常放在最后,包含一个   EMAIL   地址,告知本页面作者。显示为斜体字。  
段落示例
五、 链  接
     <A></A>   链接标记。其间文本(图像)将显示出来,并用链接颜色和下划线区别出来。   其中   :
NAME=“position”   表示页面中 position     HREF=“#position”   表示链接到本页面   position    
NAME=“filename#position”
  链接到   filename   文件的 position     =“filename.html”   链接到指定的   filename   页面  
NAME=“filename.gif”
  显示指定的图形   图形格式为 GIF     TIEF   JPEG   RGB     HDF 等格式  
NAME=“scheme://host-domain[:port]/path/filename”
  链接到指定主机的指定页面   scheme   http   ftp     host-domain   为服务器名   port   为提供此服务的端口号,缺省为80,可省略  
六、 图  像  
<IMG></IMG>
  显示图像。   其中 :
ALIGN=BOTTOM
缺省   文本在图像下面                              =MIDDLE   在中间                           =TOP   在上面  
SRC=“
图像名     图像文件  
ALT=“text”
  图像别名,若图像不显示时,显示在虚框内  
WIDTH=n
  宽度点数   =n%   可显示面积的百分比  
HEIGHT=n
  高度点数   =n%   可显示面积的百分比  
BORDER=n
  立体边框厚度点数  
HSPACE=“
图像名     水平空间( NETSCAPE ONLY    
VSPACE=“
图像名     垂直空间( NETSCAPE ONLY    
ISMAP
  说明本图像为地图  
USEMAP=“#name”
  给本图像取一个地图名  
<MAP></MAP>
  对一幅地图进行   *   作。   其中:   NAME=“name”     <IMG>   中指定的地图名  
<AREA></AREA>
  区域选择。在   <MAP>   中使用 ,   其中   :
SHAPE=RECT
矩形区域,只需提供对角坐标   (x1,y1,x2,y2),
      =POLYGON   多边形,要提供多边形各顶点坐标   (x1,y1,...,xn,yn)
COORDS=x1,y1,...,xn,yn
  坐标值   (   10进制 )
HREF=
链接对象(参照   <A>    
图像示例
七、 列        
 以下各种排列可以综合嵌套排列,成为有层次的排列。
<UL></UL>   未标序的排列(   Unnumbered Lists   在其中的每一行文字前加上   <LI>   ,起始会显示   “·”   “□”       等,具体显示什么由具体的浏览器决定。  
<OL></OL>
  标序的排列(   Numbered Lists   Ordered Lists     在其中的每一行文字前加上   <LI>   ,起始会显示数字编号。  
<LI></LI>
  每一行文字的起头。  
<DL></DL>
  陈述式排列(   Descriptive Lists    
<DT></DT> <DL>
中显示陈述的主题。  
<DD></DD> <DL>
中显示叙述的内容,会比   <DT>   内容缩入一些位置。在   <DT>   <DD>   中,可包含其它链接内容。  
<DIR></DIR>
  显示清单,每行最多20个字符。在其中的每一行文字前加上   <LI>    
<MENU></MENU>
  显示菜单。在其中的每一行文字前加上   <LI>    
八、输入框(输入表格)
<FORM></FORM>   说明一个输入表格。这是从浏览器向服务器发回反馈信息或交互运行的重要方式。其中:  
METHOD=GET
  从服务器获取信息  
       =POST   发送表格信息到服务器  
ACTION=“CGI-program” CGI-program
是服务器上一个可执行程序,其接口标准为   CGI (Common Gateway Interface) ,它将处理浏览器发送回来的   填表信息。   表格中可以使用多种元件,如输入框、列表、按钮等。  
<INPUT></INPUT>
  输入框或按钮选择。在   <FORM>   中使用。其中:  
SIZE=n
  输入框或按钮大小  
NAME=“name”
  便于   CGI-program   识别的变量名  
TYPE=“type”
  类型(见下)  
     =TEXT   文本输入框,只有一行  
     =PASSWORD   口令输入框,输入的信息不显示出来  
     =CHECKBOX   确任盒(   [ ]   [X]    
     =RADIO   圆按钮,几个同名的   RADIO   只能按下一个  
     =SUBMIT   发送按钮,按动后发出已填好的表格  
     =RESET   重置按钮,按动后将所有元件重置为缺省值  
     =IMAGE
     =HIDDEN
VALUE=“value”
  缺省值(见下)  
      =   字符串   对于   TEXT   PASSWORD
      =ON/OFF   对于 CHECKBOX     RADIO
      =   显示字符串   对于   SUBMIT   RESET
<TEXTAREA></TEXTAREA>
  说明一个可以多行输入的文本输入框。其间的文本内容为缺省的文本输入框内容。   其中:  
NAME=“name”
  变量名  
ROWS=n
  输入框行数  
COLS=n
  输入框列数  
<SELECT></SELECT>
  显示一个选择列表。   在其中的每一行文字前加上   <OPTION>   。其中:  
NAME=“name”
  变量名  
SIZE=1
  显示一个   *   作菜单( Option Menu     >=2   显示一个滚动列表(   Scrolled List     SIZE 为列表显示出来的行数  
<OPTION></OPTION>
  每一行列表的起头。在   <SELECT>   中使用。  
九、显示表格
<TABLE></TABLE>   显示二维表格。   其中:  
BORDER=n
  二维表格的立体边框厚度点数  
WIDTH=n
  宽度点数   =n%
CELLPADING=n
  是指   TABLE   中框架与元素的边界的距离  
CELLSPACING=n
  表格中每项之间的空间点数,包括横向和纵向。  
<TR></TR>
  在表格的每一行开头加上   <TR>(Text Row)   。其中:  
ALIGN=CENTER
  对中  
      =LEFT   对左  
      =RIGHT   对右  
<TH></TH>
  在表格的每一种类项目开头加上   <TH>(Text Head)   ,显示为黑体字。  
<TD></TD>
  在表格的每一个项目开头加上   <TD>(Text Data)   。其中:  
WIDTH=n
  宽度点数  
      =n%
HALIGN =CENTER
  对中  
       =LEFT   对左  
       =RIGHT   对右  
VALIGN =TOP
  在上面  
       =MIDDLE   在中间  
       =BOTTOM   在下面
 
  

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值