html

来源：互联网发布：家里网络电视打开步骤编辑：程序博客网时间：2024/05/01 22:36

html(css)
1、html基础
(1)什么是html(hypertext markup language)?
制作网页的标记语言。
特点：
  a,以.html或.htm结尾来保存。
  b,由浏览器解释执行。
  c,大小写不敏感
  d,容错性好
(2)w3c推荐的网页设计标准
  数据与结构: html文件。
  外观:样式文件(css文件)。
  行为：ECMAscript文件(javascript文件)。
(3)主要的浏览器
  ie,firefox,chrome,safari,opera
(4)html文件的基本结构

  <html>   <head>    <title>标题</title>    <!-- http-equiv属性，用于模拟http消息头  -->    <!--content-type的作用，是告诉浏览器返回的内容的类型及编码，浏览器会按指定的编码去显示页面-->    <meta http-equiv="content-type"     content="text/html;charset=gbk">    <!--refresh:刷新-->    <meta http-equiv="refresh"     content="3">    <!--link 引入外部的样式文件-->    <link rel="stylesheet" type="text/css" href="style.css">    <!--script 引入外部的脚本文件-->    <script type="text/javascript" src="myjs.js" >    </script>   </head>   <body>   </body>  </html>

2、主要标记
(1)链接
a,基本用法

<a href="html02.html" target="">clickMe</a>

  href:指定点击链接之后，跳转的地址。
  target:
    "_self":在当前窗口中打开。
    "_blank":在新的窗口中打开。
  b,使用图形作为链接

<a href="">   <img src="" width="" height="" border=""/></a>

  其中，img标记，src指定图片的地址（地址不一定
  是一张图片，可能是一个程序的地址，由程序来
  生成相应的图片）。
  c,使用热点(使用图形的某个区域作为链接)
  step1 使用map标记定义热点

<map name="Map">    <area shape="rect"     coords="407,20,560,77" href="qy.html">    <area shape="rect" coords="580,22,734,76"     href="gr.html"></map>

step2 在图形标记当中，使用热点来划分区域。

 <img src="index04.jpg" width="772" height="357" border="0" usemap="#Map">

d,使用锚点(在页面内部跳转)
step1 定义一个锚点

  <a name="top">top info...</a>

step2 使用锚点来跳转

  <a href="#top">to top</a>

e,发送邮件

  <a href="mailto:haha@126.com?subject=hello">给我发邮件</a>

f,链接的伪样式
(2)表格
a,基本用法

  <table border="1" width="60%或者300"  cellpadding="0" cellspacing="0">   <tr>    <td></td>   </tr>  </table>

  cellpadding:单元格内部的数据与单元格之间的空隙。
  cellspacing:单元格之间的空隙。
  b,居中
   水平居中: align(left,right,center)
   垂直居中:valign(top,middle,bottom)
  c,单元格的合并
   colspan:水平方向合并
   rowspan：垂直方向合并
  d,表格可以嵌套
   td的内容又是一个表格
  e,表格的完整结构

  <table>   <caption>标题</caption>   <thead></thead>   <tbody></tbody>   <tfoot></tfoot>  </table>

  thead,tfoot:出现0/1次。
  tbody:出现1次或多次
  习惯上先写thead,然后是tfoot,最后是tbody。
(3)表单
  a,什么表单
  用于收集用户的数据，并提交给服务器来处理。
  b,表单属性

  <form action="" method="">  </form>

  action:服务器端的一个程序的地址，
  用于处理表单数据。
  method:表单提交的方式。
  c,常见表单元素
   input标记:
   1)文本输入框:

<input type="text" name="" value=""/>

   其中name决定了浏览器是否将文本输入的内容提交
   给服务器。value设置缺省值。
   2)提交按钮:

   <input type="submit" value="确认"/>

3)重置按钮:

   <input type="reset" value="清空"/>

4)密码输入框:

   <input type="password" name="pwd"/>

5)单选框:

   <input type="radio" name="gendar" value="m"   checked="checked"/>

其中，checked设置缺省值。
6)多选框:

   <input type="checkbox" name="interest"    value="fishing" checked="checked"/>

7)上传文件:

   <input type="file" name="file1"/>

8)隐藏域:

   <input type="hidden" name="userId" value="1"/>

非input标记
1)多行文本输入框:

   <textarea name="desc" rows="5" cols="20"></textarea>

2)下拉列表

   <select name="city">    <option value="bj">北京</option>    <option value="sh">上海</option>    <option value="wh">武汉</option>   </select>

可以给select添加一个"multiple=multiple",
此时，下拉列表可以当作多选框去用。
(4)列表

<!--无序列表-->  <ul>   <li>item1</li>   <li>item2</li>  </ul>  <!--有序列表-->  <ol>   <li>item1</li>   <li>item2</li>  </ol>  <!--列表可以嵌套-->  <ul>   <li>menu1</li>   <ul>    <li><a href="#">item1</a></li>    <li><a href="#">item2</a></li>   </ul>  </ul>

(5)框架
  将一个窗口划分成多个子窗口。
  iframe:
   可以与body同时出现。
   作用是，将一个窗口嵌套到父窗口当中。
  frameset:
   不能够与body同时出现。
   frameset可以嵌套。
  案例：

<html><head><title>表单示例</title><meta http-equiv="content-type" content="text/html;charset=gbk"></head><body bgColor="#ffffcc" Text="#000099" "><form action=""><B><h2 align="left">证券调查示例</h2></B><p><b>投资经验</b></p><input type="radio" name="result_radiobutton-3" value="radio-0">新手<input type="radio" name="result_radiobutton-3" value="radio-1">中级<input type="radio" name="result_radiobutton-3" value="radio-2">专家<p><b>你购买股票的方式</b></p><input type="checkbox" name="result_checkbox-3" value="checkbox-0">股票<input type="checkbox" name="result_checkbox-3" value="checkbox-1">期权<input type="checkbox" name="result_checkbox-3" value="checkbox-2">互惠基金<p>你购买股票的方式为？<select name="stock"><option value="online transaction ">网上交易</option><option value="phone transaction ">电话交易</option><option value="broker">经纪人代表</option><option value="else">其他</option></select></p><p>今年选择什么证券？<input type="text" name="" value=""/></p><p>有对其他投资者的建议吗？<textarea name="desc" rows="2" cols="20"></textarea></p><p><input type="submit" value="提交"/><input type="reset" value="重置"/></p></form></body></html>