码迷,mamicode.com
首页 > Web开发 > 详细

HTML概述

时间:2014-05-15 03:58:09      阅读:451      评论:0      收藏:0      [点我收藏+]

标签:标签   html   表单   框架   select   

前言

正文

HTML


历史:


1) 1990问世
2)Tim-Berners-lee 互联网之父
3)W3C(万维网联盟)是一个非盈利的公益性组织
4)1997 HTML4.0 成为W3C的标准


作用


 1.发布联机文档共享数据
 2.发布联机表单收集用户信息
 3.发布帮助文档


HTML文档


1.HTML(HyperText Markup Language,超文本标记语言)
2. 超文本:文本中含有可以相互连接的元素
3.标记语言:语言由标签组成


  HTML语法


1. 标签:<标签名称>标签体</标签名称>
2. 解析标签:浏览器执行
3.主流浏览器:IE、FireFox、Navigater(Netscape)

 4. 解析HTML存在浏览器差异


  书写HTML文档


 1.HTML文件的后缀名html或者htm


 文档结构


 1. 根标签<html></html>


   <head></head>
   用来定义书写文档的描述信息,不显示在当前页面
   <body></body>
   用来书写显示信息
  HTML的注释 <!-- 注释信息 -->

 

 2. Head子标签

 

 

 3. Body子标签


    标题标签
   <h1-6></h1-6>  字体加粗变大独立成行
    文字修饰标签
   <i></i>  斜体
   <u></u>   下划线
   <b></b>  粗体
   <s></s>   删除线
    换行标签
    <br/>
    分隔线
    <hr/>
    字体标签
    <font color=""></font>
    预处理标签
    <pre>
   原样输出标签不会被浏览器解析
   <h1>hello</h1>  
    </pre>

 

    4.实体


    &gt; 大于号
    &lt; 小于号
    &nbsp; 空格
    &quot;  双引号
    &copy;  版权符

 

   5. 列表标签


   
 1)  <h3>有序列表</h3>

   <ol type="i">
    <li>北京</li>
    <li>北京</li>
    <li>北京</li>
    <li>北京</li>   
   </ol>


  2) <h3>无序列表</h3>
   <ul type="circle">
    <li>北京</li>
    <li>北京</li>
    <li>北京</li>
    <li>北京</li>
   </ul>


   3) <h3>描述列表</h3>
   
   <dl>
    <dt>中国</dt>
    <dd>人口最多<dd>
    <dd>人都很和谐<dd>
   </dl>

 

    6.滚动标签


   <marquee 
   scrolldelay="100"   显示时间间隔
   direction="left"    滚动的方向
   scrollamount="20"   移动的速率
   onmouseover="this.stop()" 
   onmouseout="this.start()"
   behavior="alternate"  滚动的方式
   loop="2"     滚动的总次数
   >hello  我就是在滚</marquee>


   7. 行标签


    <span></span>


   8. 块标签


    <div></div>  独立成行

子菜单代码示例

 


  9.  段落标签


    <p></p>


   10. 图片标签


    <img></img>

注:相对路径和绝对路径

    相对路径:相对当前文档的路径
    ./ 表示回到上级目录
    ../上上级目录
    绝对路径:根盘符开始的路径

 

   11. 设置图片区块


    1)热点:

    <img src="../img/01.jpg" width="100"
    height="200" alt="美女"  usemap="#m1"
    ></img>

    <map name="m1">
   <area shape="rect" coords="0,0,100,100" href="./firstHtml.html"></area>
   <area shape="rect" coords="0,100,100,200" href="./firstHtml2.html"></area>  
    </map>

 

   12. 超链接标签


    <a href="">点击连接</a>
    空链接
   


   13. 发送邮件


       调用默认邮件发送软件

 

       14. 表格标签


     <table>
   <tr><td>列标签</td></tr> 行标签     
     </table>


     1)  属性:

      border:边框,单位像素
      width:宽度
      height:长度
      align:水平对齐方式
      vlign:垂直对齐方式
      cellspacing:外边距,   是单元格边框与表格表框以及单元格与单元格边框的距离
      cellpadding:内边距,      是内容与单元格边框的距离
  2) 合并单元格
  1)) 在td标签中进行设置

    colspan=""  设置列单元格合并
    rowspan=""  设置行单元格合并
   注意:合并单元格时要注意把被合并的单元格去掉对应标签

 

    15.另一种表格形式


   <table border="1px" width="200" height="200" cellspacing="0" cellpadding="0">
    <tfoot><td>foot</td><td>foot</td></tfoot> 显示在表格底部
    
    <tbody><td>body</td><td>body</td></tbody>
    <thead><td>head</td><td>head</td></thead> 显示在表格顶部   
   </table>

 

    16. 表单


   <form
    action="表单数据提交的目的地址"
    method="get/post"  默认采用get   
   ></form>


  注: get和post的区别?
   1.get在传送参数过程中以明文形式在浏览器地址栏显示
     post不在地址栏显示
   2.post方式相对安全
   3.get方式提交的数据量相对较小(一般为2K左右)
     post提交的数据量相对较大
   4.get方式一般用来获取数据,post方式一般用于传送数据   form标签要将整个表单信息包裹

    1) input标签
     <input id=""  name="" type="" value=""></input>
   1)) type类型:

      text 文本输入框
       password 密码输入框
       radio  单选按钮
       checkbox 复选框
       file  文件上传
       submit 提交按钮
       reset 重置按钮
       button 可编程按钮
       hidden 隐藏表单域
       image 引入图片

   2))属性

   1))) name属性:设置参数传递过程中的key,不设置参数不会传递
    2)))value属性:在文本输入框以及密码框时用来设置默认值;        在单选复选以及下拉列表中作为参数的value传递;        在按钮中用来做显示
    3)))id属性:唯一标识当前标签
    2)  非input标签
      1))下拉列表

      <select name="city">
          选项
   <option value="bj">北京</option>
   <option value="sh">上海</option>
   <option value="gz" selected="selected">广州</option> 
    </select><br/>
       2))文本域
              <textarea rows="5" cols="10" disabled="disabled"></textarea>
       rows属性:占用的行数
       cols属性:占用的列数

 

      17. HTML中的框架


   1)<frameset rows=""cols=""></frameset>

     rows:将页面分成上下结构,取值可是是%比也可以像素
     cols:将页面分成左右结构··········
   在frameset标签中嵌套<frame></frame>来实现结构划分
 2)  <frame frameborder="" src="" name="" noresize=""></frame>

    src:设置填充的页面地址
    frameborder:设置边框
    noresize:设置当前边框不可拖动
    name:设置当前frame的名称

   注:设置超链接跳转的页面展示方式通过target属性
   <a  href="" target=""></a>
    target取值:在框架中可以取frame的name属性
        _blank  每次打开一个新页面
        _new    打开一个新页面,但是新窗口不关闭不会重新打开
        _self   当前窗口打开,默认取值为_self
        _top    在顶层窗口打开

   注意:在页面中frameset不能和body标签一起使用

   3)内联框架
   <iframe src="" width="300" height="300"></iframe>

   

    

 

总结

HTML概述,布布扣,bubuko.com

HTML概述

标签:标签   html   表单   框架   select   

原文地址:http://blog.csdn.net/z929118967/article/details/25723255

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!