HTML语言和CSS基础小结

1.标题标签：<h1></h1>---<h6></h6>

2.段落标签：<p></p>

3.水平标签：<hr/>表示标签的开始和结束

4.有序列表标签：<ol></ol>表示有序列表，<li></li>表示各列表项

5.无序列表标签：<ul></ul><li></li>同上

6.定义列表标签：<dl></dl>表示定义列表，<dt><dt/>表示术语。<dd></dd>表示术语的具体描述

7.表格标签：<table></table>表示表格，<tr></tr>表示行，<td></td>表示列

8.表单标签：<form></form>表示表单，<input/>表示输入内容项

9.分区标签：<div></div>

经验总结:

     在实际开发中，常使用<div>进行分区，ul-li或ol-li实现无序或有序的项目列表，dl-dt-dd实现图文混编，table-tr-td实现规整数据的显示。

     div-ul(ol)-li:常用于分类导航或菜单等场合。

     div-dl-dt-dd:常用于图文混编等场合。

     div-tr-td:常用于规整数据的显示场合。

     form-table-tr-td:常用于表单布局的场合。

10.图像标签：<img/>

   语法：<img src="图片地址" alt="代替文字" title="提示文字"/>

11.范围标签：<span></span>标签限定某个范围，style属性添加突出显示的样式(颜色、字体大小)。

   语法：<span style="color:red;font-size:50px;">8</span>

12.换行标签：<br/>表示强制换行

13.W3C的标准如下：

     1）HTML内容方面——XHTML

     2) 样式美化方面——CSS

     3）结构文档访问方面——DOM

     4）页面交互方面——ECMAScript

14.超链接的基本语法：

      <a herf="链接地址" target="目标窗口位置">连接文本或图像</a>

      herf:表示链接地址的路径。

      target:指定链接在那个窗口打开，常用的取值有_self(自身窗口)、_blank(创建窗口)。

15.页面间的链接：<a herf="其他页地址"/>

16.锚链接:(1) 在页面的乙位置设置标记：<a name="目标位置乙"</a>

         (2) 在甲位置设置herf属性值语法为：<a herf="#marker">当前甲位置</a>

17.功能性链接：电子邮件链接的用法是："maito:电子邮箱地址"

18.代码规范：不规范的注释：<!------项目列表部分------>

             规范的注释：<!--#######项目列表部分#######-->

19.常用的特殊符号及对应的字符实体：

   空格  

   大于号(>) >

   小于号(<) <

   引号(") "

   版权符号 ©

20.表单的基本语法：

     <form action="表单提交地址" method="提交方法"></form>

     action属性:规定当提交表单信息时，向何处发送表单信息时，即处理表单数据的目标地址。如不填，默认为当前页面。

     Method属性:规定提交方式，取值为"get"或"post"。"get"方式一般适用于安全性要求不高的场合，而post一般适用于安全性较高的场合。

21.表单元素的基本格式：

    <input name="表单元素名称" type="类型" value="值" size="显示宽度" maxlength="能输入的最大字符长度" checked="是否选中"/>

各属性的具体含义：

type	指定表单元素的类型，可用的选项有：text、password、checkbox、radio、sumbit、reset、file、hidden、image和button，默认为text
name	指定表单元素的名称
value	指定表单元素的初始值
size	指定表单元素的初始宽度。如果type为text或password，则表单元素的大小以字符为单位；对于其他输入类型，宽度以像素为单位
maxlength	指定可在text或password元素中输入的最大字符数，默认不做限制
checked	此属性只有一个值，为"checked"，表示选中状态，如果不选中，则不需要添加此属性

22.表单元素的介绍

   1.文本框语法如下：

<form method="post" action="">

  <p>用户名：

     <input type="text" value="zhangsan" size="20" name="userName"/>

  </p>

</form>

2.密码框语法如下：

     <p>密码：

        <inpur type="password" size="10" name="pass"/>

     </p>

3.重置、提交与普通按钮的语法如下：

 <p>

    <input type="sumbit" value="提交按钮" name="button"/>

    <input type="reset" value="重置按钮" name="reset"/>

    <input type="button" value="普通按钮" name="cancel"/>

 </p>

 用图片按钮替换的语法为：<input type="image" src="图片地址"/>

4.单选按钮的语法如下：

       <form method="post" action="">

       性别：

       <input name="gen" type="radio" class="input" value="男" checked="checked">

       <img src="图片位置" alt="女" />男 

       <input name="gen" type="radio" value="女"class="input">

       <img src="图片位置" alt="女"/>女           </form>

5.复选框的语法如下：

  <form method="post" action="">

  爱好：

   <input type="checkbox" name="hobby" value="sports"/>运动 

   <input type="checkbox" name="hobby" value="talk" checked="checked"/>聊天 

   <input type="checkbox" name ="hobby" value="play"/>

   </form>

6.文件域的语法如下：

      <form action="" method="post" enctype="multipart/form-date">

      <p><input type="file" name="files"/><br/>

      <input type="sumbit" name="upload" value="浏览"/></p></form>

7.下拉列表框的语法如下：

  <select name="指定列表名称" size="行数">

     <option name="可选项的值" selected="selected">···</option>

     ······

     </select>

   出生日期：

   <form method="post" action="">

<input name="byear" value="yyyy" size="4" maxlength="4"/> 年

<select name="bmon">

<option value="" selected="selected">[选择月份]</option>

<option value="0">1</option>

······

<option value="11">12</option>

</select>月 

<input name="bday" value="yy" size="2" maxlength="2"/>日

  </form>

8.多行文本域语法如下：

      <textarea name="textarea" cols="40" row="6">初始文本内容</texterea>

9.隐藏域语法如下：

  <input type="hidden" name="userid" value="666"/>

10.只读和禁用属性：

       <textarea name="content" cols="60" row="8" readonly="readonly">

        欢迎阅读服务条款···

       </textarea><br/>

       <input name="btn" type="submit" value="注册" disabled="disabled"/>

23.表格的基本语法：

   一行两列：<table><tr><td></td><td></td></tr></table>

   一列两行：<table><tr><td></td></tr>

             <tr><td></td></tr></table>

   跨列：是指单元格的横向合并。

         <table><tr><td colspan="所跨的列数">单元格内容</td></tr></table>

   跨行：是指单元格的纵向合并。

         <table><tr><td rowspan="所跨的行数">单元格内容</td></tr></table>

1）表格的高级用法 

     1.表格的标题<caption></caption>

     2.表格数据的分组标签<thead></thead>、<tbady></tbody>、<tfooter<>/tfooter>

     <thead></thead>标签对应报表的页眉，<tbady></tbody>对应的护具的主体，即详细                                                                                                                        的数据描述部分，<tfooter></tfooteer>对应报表的页脚，即对各分组数据进行汇总的部分。

2）对表格的修饰

   <meta·http-equiv="refresh content="5;url=2 排序列表 cordered list·html">

   背景的颜色<body.bgcolor="颜色">    

   背景图片<body background="img··">

   字体<font face="arial" size=" " color=" ">

   图片的大小<img src=" " width=" "  weight=" "/>

   对齐方式<img src=" '" algin="top"> middle 垂直 bottom 底 centen 水平中

   单元格内容与单元格边框之间的距离<table border ="1",cellpadding=" ">

   单元格与单元格之间的距离<table border="1" cellspacing=" ">

   单元格里加背景<td bgcolor="颜色">第一</td>

   給整个表格加背景<table border="1" bgcolor="颜色">

   将鼠标停留在图片上，你可以看到title属性里写的内容

   Type设为circle的列表，列表前面的符号是空心圆<ul type="circle">

   Type设为disc的列表，列表前面的符号是圆黑点<ul type="disc">

   Type设为square的列表，列表前面的符号是黑方块<ul type="square">

24.使用框架的好处：

   在同一个浏览器窗口先是多个页面

   ‚可以实现页面复用

   ƒ实现典型的“目录结构”

25.常用的框架结构技术有以下两种：

   框架集（<frameset>)的语法如下

     <frameset cols（横向）=15%,50%,*"  row（纵向）="50%,*"  border="5">

      <frame src="the_first.html">

      <frame src="the_second.html">

      ····

      </frameset>

     框架<frame>的常用属性

属性	作用	举例
frameborder	是否显示框架周围的边框	frameborder="1"
name	框架标识名	name="mainFrame"
scrolling	是否显示滚动条	scrolling="no"
noresize	是否允许调整框架窗口的大小	noresize="noresize"

     target属性的取值

属性值	含义
_blank	新窗口中打开链接
_self	在链接所在页面的自身窗口中打开链接
框架窗口名	在指定的框架窗口中打开链接
_parent	在父框架集中打开链接，如果不是框架网页，则含一同"_self"
_top	在顶级窗口几即整个浏览器窗口中打开链接

   ‚内嵌框架（<iframe>）

语法：<ifram src="引用页面地址" namr="框架标识名" frameborder="边框" scrolling="是否出现滚动条"></iframe>

属性：包括name、scrolling、noresize、frameborder