HTML由原理到实践

来源:互联网 发布:苹果cms整合ck教程 编辑:程序博客网 时间:2024/06/03 21:44

      HTML(HyperText Markup Language),即超文本标记语言,是用来描述网页的一种语言。不需要编译,直接由浏览器来执行。Web页面(网页)相当于是一种文档,而HTML就是用于编写这种文档的一种标记语言。换句话说,HTML是创建网页的基础,它通过标记符号等标记网页要显示什么部分。

      在熟悉HTML之前,我们先来了解一下HTML的框架架构:

   

     HTML的框架结构就跟我们写文章似的,文章要有标题(title)和正文(body)部分。下面是对HTML基础知识的一个总结:



实践:


HTML代码:

<html> <head><title>表单的例子</title></head><body bgcolor="#d0d0d0"><form method="get" action="reg.jsp"><table><tr><td>用户名:</td> <td><input type="text" name="user" value=""></td></tr><tr><td>密码:</td> <td><input type="password" name="pwd"></td></tr><tr><td>性别:</td> <td><input type="radio" name="sex" value="1" checked>男<input type="radio" name="sex" value="0">女</td></tr><tr><td>兴趣爱好:</td> <td><input type="checkbox" name="interest" value="football">足球<input type="checkbox" name="interest" value="bastball">篮球<input type="checkbox" name="interest" value="volleyball">排球<input type="checkbox" name="interest" value="swim">游泳</td></tr><tr><td>最高学历:</td> <td><select size="1" name="education"><option value="" select>...</option><option value="高中">高中</option><option value="大学">大学</option><option value="硕士">硕士</option><option value="博士">博士</option></select></td></tr><tr><td valign="top">个人简介:</td> <td><textarea name="personal" rovs="5" cols="30"></textarea></td></tr><tr><td><input type="reset" value="重置"></td> <td><input type="submit" value="注册"></td></tr></table></form></body></html>

     通过上面的实例,我们可以看出,HTML主要是通过使用标记标签(HTML标签)来描述网页。所以我们有必要来了解一些常用的标签元素: 


框架标签:

     <html></html> 创建一个HTML文档
     <head></head> 设置文档标题和其它在网页中不显示的信息
     <title></title> 设置文档的标题        
     <h1></h1> 最大的标题     


格式标签:

     <em></em> 强调文本(通常是斜体加黑体)
     <strong></strong> 加重文本(通常是斜体加黑体)
     <font size="" color=""></font> 设置字体大小从1到7,颜色使用名字或RGB的十六进制值
     <big></big> 字体加大
     <SMALL></SMALL> 字体缩小        
      <STRIKE></STRIKE> 加删除线  
     <xmp>...</xmp>固定宽度字体(在文件中空白、換行、定位功能有效)
     <plaintext>...</plaintext>固定宽度字体(不執行标记符号)
     <listing>...</listing> 固定宽度小字体 
     <font color=00ff00>...</font>字体颜色
     <font size=1>...</font>最小字体
     <font style ='font-size:100 px'>...</font>无线增大

      <u></u> 下划线
      <b></b> 黑体字    
      <i></i> 斜体字    
      <cite></cite> 引用,通常是斜体   

 
文本标签:   

      <p></p> 创建一个段落   

     <pre></pre> 预先格式化文本  
      <p align=""> 将段落按左、中、右对齐  
      <br> 换行 插入换行符  

      <blockquote></blockquote> 从两边缩进文本

      <dl></dl> 定义列表
      <dt> 放在每个定义术语词前
      <dd> 放在每个定义之前
      <ol></ol> 创建一个标有数字的列表  
      <ul></ul> 创建一个标有圆点的列表
      <li> 放在每个列表项之前,若在<ol></ol>之间则每个列表项加上一个数字,若在<ul></ul>之间则每个列表项加上一个圆点    
      <div align=""></div> 用来排版大块HTML段落,也用于格式化表
      <MENU> 选项清单  
      <DIR> 目录清单  
      <nobr></nobr> 强行不换行
      <hr size='9' width='80%' color='ff0000'>水平線(設定寬度)  
      <center></center> 水平居中  

链接标志表格标志:
     <a href="URL"></a> 创建超文本链接  
     </a> 创建自动发送电子邮件的链接  
     <a name="name"></a> 创建位于文档内部的书签
     <a href="#name"></a> 创建指向位于文档内部书签的链接
     <BASE> 文档中不能被该站点辨识的其它所有链接源的URL
      <LINK> 定义一个链接和源之间的相互关系 


链接标记注解:
      target="..."决定链接源在什么地方显示(用户自定义的名字,_blank,_parent,_self,_top
      rel="..."发送链接的类型  
      rev="..."保存链接的类型
      accesskey="..."指定该元素的热键
      shape="..."允许我们使用已定义的形状定义客户端的图形镜像(default,rect,circle,poly
      coord="..."使用像素或者长度百分比来定义形状的尺寸
      tabindex="..."使用定义过的tabindex元素设置在各个元素之间的焦点获取顺序(使用tab键使元素获得焦点)


3 0