首页 > 代码库 > HTML

HTML

HTML

网页:  客户端技术  html 、css 、javaScript

        服务器端技术  JSP 、ASP.NET、PHP(数据交互)

Html:构建页面的结构

CSS:控制(美化)页面的外观样式

javaScript:添加动态效果

1.HTML基础

什么是HTML

 超文本标记语言HTML(hypertext markup language) , 是一种用来设计网页的标记语言,用该语言编写的文件,以.html戒者.htm为后缀,并且由浏览器解释执行,生成相应的界面。

  作用:创建静态页面,结合CSS和javascript实现页面的创建。

 编写方式:任何文本编辑器。

 运行方式:浏览器解释(有错误时,会生成奇怪的效果)运行。

相关术语

标记:用尖括号< >包围的单词。标记大都成对:开始标记和结束标记。

元素:每一对尖括号包围的部分,

属性:用来修饰元素,每个元素都有值,属性放在开始标记中。

封闭类型的元素:标记要求必须成对出现

非封闭类型的元素(空元素或者空标记):只有一个标记,建议使用 /结束,如  <br />

html文件的基本结构

html 文档的标准结构:

版本信息---指定html版本(Strict DTD, Transitional DTD, Frameset DTD )

<html>

         <head>关于整个文档的定义,比如编码、标题等</head>

         <body>显示页面的内容</body>

</html>

Html的基本结构分为两大部分:头(head)和体(body)。  根标记:<html></html>

(1)Html头标记<head></head>,写描述页面的数据

   <title>标题</title>

 <meta> :元数据,单标记

                  1) 主要用于设置消息头

                  2) 注意不要这样写(有的浏览器会不兼容):

?                                 <meta></meta> (不推荐)

?                                 <meta/> (推荐)

                   3) 消息头: 浏览器访问服务器时,服务器会发送的一些键值对

?                           <meta http-equiv="content-type" content="text/html ;charset=utf-8">

                       表示浏览器读到的是一个html格式文件,字符编码是utf-8

                       http-equiv属性:设置消息头

                       Content属性:设置消息头的值

                       <meta http-equiv="refresh" content="3">:每3秒重新加载页面

                       <meta http-equiv="refresh" content="3;url=‘http ://bbs.tarena.com.cn‘">

  3秒后跳转到bbs.tarena.com.cn。

                        refresh:刷新     content:刷新的频率

<link>引入CSS样式文件

  <link rel="stylesheet"  type="text/css"  href="http://www.mamicode.com/style.css">:引入style.css样式文件

                注意不要写<link></link>或<link/>

<style></style>:在html文件中直接定义样式

    <style>body{ font-size:60px; }</style>

    注意:有<link>又有<style>时,听<style>的

     <script></script>:引入脚本

              引入脚本文件:<script  src="http://www.mamicode.com/c1.js"></script>

     直接写脚本:<script>脚本代码</script>

(2)Html体标记<body></body>,与页面显示的内容有关系

      主要标记:

      <a href=""></a>:链接

      <table>:表格

      <form>:表单

      <ul>、<ol>:列表

      <iframe>、<frameset>:窗口划分

主要浏览器

ie 、firefox 、chrome 、Safari 、Opera

2.几个重要的标记

  文本标记

  标题:h1--h6  1-6号标题,1号标题最大

  段落标记:打断文本自成段落,段落间距。<p></p>  aaa<p>bbb</p>ccc

  换行标记:<br>单标记,相当于回车    aaa<br>bbb<br>ccc

                   <p>自成一个段落,保留段落间距

   <br>:行间距较小

  特殊字符:&lt;p&gt ;==><p> 

       &copy ==>@

       空格字符:&nbsp;

  分区/组元素:div / span 将一些元素分组,进行统一设置。以实现样式的定义或者js代码的添加

               aa<div>a</div>aa       div:独占一行 (块级元素)

          aa<span>a</span>aa   span:不会改变原有的布局(行为元素)

  块级元素(block):页面上会独占一行的元素,上下文的其他元素会自动换行。p  div  table  ul  ol  li

  行内元素(inner):span  a  img

  链接<a href>

  语法:<a  href="http://www.mamicode.com/url地址"  target=" "  title=" ">描述性的文字</a

         href属性:指定链接的地址

         target属性:指定在哪个窗口打开链接,值可以指定为:

                                      _slef:在当前窗口中打开(缺省)

   _blank:新窗口中打开

   title:提示信息,鼠标放在链接上的提示信息

   同一个页面上不同部分之间的跳转(实现页面内部跳转):

定义锚点:<a  name="top"></a>(想回到哪,写哪)

定义链接:<a  herf="#top">to top</a>

回到顶端简介的写法:<a href="http://www.mamicode.com/#">to top</a>

   使用图片作为链接:<a  href="http://www.mamicode.com/url地址">

<img  src=""  width=""  height=""  border="0"/>

   </a>

   发送邮件:<a href="mailto:766908296@qq.com">给我发邮件</a>

    mailto:转到邮箱,发送邮件

   热点(使用图片区域作为链接)

        1)先使用map标记划分图片区域

                   <map  name="Map">

 <area  shape="rect" coords="407,20,560,77"  href="http://www.mamicode.com/qy.html">

 <area  shape="rect" coords="580,22,734,76"  href="http://www.mamicode.com/gr.html">

  </map>

  shape="rect":表示矩形

  coords="407,20,560,77":表示矩形在图片的相对位置

407: 表示矩形左上角距离图片左上角的横坐标

20: 表示矩形左上角距离图片左上角的纵坐标

560: 表示矩形右下角距离图片左上角的横坐标

77: 表示矩形右下角距离图片左上角的纵坐标

        2)使用map

                   <img  src="http://www.mamicode.com/cat.jpg"  usemap="#Map">

            usemap="#Map"表示使用名字为“Map”的图片

   图像:<img>(单标记)

         <img  src=""  width=""  height=""  border="0"  title=""/>

           src:对于img标签,src指定图片的地址(当前路径为html文件所在的路径)

  width:宽度

  height:高度

  border:边框(为0表示没有边框)

  title:通用属性,提示信息

   表格

   (1)表格的基本结构

  <table border="" width="" cellpadding="" cellspacing="">

<tr align="">

<td align=""></td>

              <td></td>

</tr>

   </table>

   解析:先从上到下,再从左到右,先table后tr再td,

         表格默认情况下是自适应的,自己设置也是按比例划分

   文本内容只能放在td里

?     border : 边框的宽度,单位是像素(缺省值是0)

?     width : 表格的宽度

       可以用百比分(表示该表格占父标记的宽度),也可以是绝对值  width=100%、height=100%

?     cellpadding : 单元格内容与单元格之间的空隙

?     cellspacing : 单元格与单元格之间的空隙,单元格与外边框之间的空隙

?     align : 水平对齐,值有"center","right","left"        

       valign : 垂直对齐,值有"top"、"middle"、"bottom"

       td的属性可以有:width 、 height 、 align 、valign

(2)不规则表格:实现页面的布局

       colspan:跨列合并单元格 

       rowspan:跨行合并单元格 

(3)表格的完整的结构

       <table>

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

<thead></thead>

<tfoot></tfoot>

                 <tbody></tbody>

  </table>

?     caption:为表格定义标题

       caption、thead、tfoot可以不出现,如果出现,只能出现一次

?     tbody可以出现多次,至少也要出现一次

?  (4)表格可以嵌套

       在td里可以嵌套table。

表单:表单一般是用来收集用户信息的。

      <form action="" method="" enctype="">

 input标记

              非input标记

</form>

提交:以表单为单位把<form>.....</form>之间的内容为单位提交

?   action属性 : 表单提交之后由哪一个程序来处理

?   method属性 : 表单提交方式  post、get方式

?   enctype属性 : 设置表单的MIME编码

     input标记(单标记):输入,键盘:文本框鼠标:选择

     (1)文本输入框

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

?        type属性: input标记的具体类型

          type内容可以不写,默认是文本框

?        name属性: 标记的一个名称,该名称用于生成一个请求参数,

                       如果没有命名,则浏览器不会将该数据发送给服务器

?        value属性 : 缺省值,有值时表示初始值

     (2)密码输入框

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

         (3)单选框

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

                  单选按钮应是互斥的,只能选择其中一个

?            同一组单选按钮,name必须相同

?            value属性: 发送给服务器端的值

?            checked属性: 就一个值"checked",表示缺省被选上

     (4)多选框

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

     (5)文件上传

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

 (6)按钮

 普通按钮:<input type="button" value="http://www.mamicode.com/普通按钮" />

                                          value属性:按钮上面的文字,

  点击该按钮,浏览器什么都不做 需要编程实现功能

 图像按钮:<input type="image" value="http://www.mamicode.com/图像按钮" />

      提交按钮:<input type="submit" value="http://www.mamicode.com/提交" />

?                value属性: 按钮上面的文字

?               当点击提交按钮时,浏览器默认情况下,会将表单中的数据发送给服务器

 重置按钮:<input type="reset" value="http://www.mamicode.com/重置"/>

?           当点击重置按钮时,浏览器会将输入的数据清空

     (7)隐藏域

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

?不会在界面上显示出来,一般用于向服务器传送数据。

  主要用于记载那些不需要被用户看见的关键数据,如id

?name属性 设置参数名

?value属性 设置参数值

           input标记

           (1)下拉框 / 列表框

            <select  name="" multiple=""  size="">

  <option  value="">...</option>

   </select>

?                value属性: 是提交给服务器的值

?          multiple属性 : 设置该属性值以后,下拉列表变成了一个多选框。允许多选

                    size属性:区分下拉框或者多选框(size>1)

      (2)多行文本输入框

  <textarea  name=""  cols=""  rows=""></textarea>

  cols列 、rows行,设置框的大小是几行几列

 (3)fieldset为控件分组

      <fieldset>元素:为控件分组

      <legend>元素:为分组指定一个标题

      <fieldset>

<legend>地址信息</legend>

地址:<input type=”text”/><br>

邮编:<input type=”text”/><br>

                </fieldset>

                   (4)<label>元素

  语法:<label>文本</label>

  主要属性:for:表示与该元素相联系的控件的ID值

  作用:将文本与控件联系在一起后,单击文本,效果就同单击控件一样。

   <input type=”checkbox” name=”chkHid”  id=”chkHid”>

   <label for=”chkHid”>不要公开我的信息</label>

实例:

<html>

<!--表单的使用-->

<head></head>

<body style="font-size :30px ;font-style :italic ;">

<form>

<!-- 文本输入框 -->

用户名:<input type="text" name="username" value=""/><br/>

<!-- 密码输入框 -->

密码 :<input type="password" name="pwd"/> <br/>

<!-- 单选 -->

性别 :

男<input type="radio" name="gendar" value="http://www.mamicode.com/m" checked="checked"/>

女<input type="radio" name="gendar" value="http://www.mamicode.com/f"/> <br/>

<!-- 多选 -->

兴趣 :

看书<input type="checkbox" name="interest" value="http://www.mamicode.com/reading"/>

画画<input type="checkbox" name="interest" value="http://www.mamicode.com/drawing"/>

书法<input type="checkbox" name="interest" value="http://www.mamicode.com/writting"/> <br/>

<!-- 文件上传 -->

照片 : <input type="file" name="phone"/> <br/>

<!-- 隐藏域 -->

<input type="hidden" name="userId" value="http://www.mamicode.com/123"/>

<!-- 多行文本输入框 -->

自我描述 : <textarea name="desc" rows="6" cols="20"> </textarea> <br/>

 

 

<!-- 下拉列表 -->

你来自于哪个城市 :

<select name="city" style="width :120px ;" multiple="multiple">

<option value="http://www.mamicode.com/bj">北京</option>

<option value="http://www.mamicode.com/nj">南京</option>

<option value="http://www.mamicode.com/tj">天津</option>

</select> <br/>

 <!-- 提交按钮 -->

<input type="submit"  value="http://www.mamicode.com/确定"/>

<!-- 重置按钮 -->

<input type="reset" value="http://www.mamicode.com/重置"/>

<!-- 普通按钮 --> <input type="button" value="http://www.mamicode.com/点我吧"/>

</form>

</body>

</html>

3.列表

 1)无序列表 <ul> <li></li> </ul>

 2)有序列表 <ol> <li></li> </ol>

 3)列表可以嵌套

    <ul>

<li>选项1</li>

<ul>

<li><a href="">item1</a></li>

<li><a href="">item2</a></li>

        </ul>

<li>选项2</li>

<ul>

<li><a href="">item1</a></li>

<li><a href="">item2</a></li>

              </ul>

        <ul>

4.窗口划分

   frameset frame

frameset标记不能够不body标记同时出现

?   rows属性: 将窗口划分成几行

?   cols属性: 将窗口划分成几列

?   frame标记定义子窗口,其中,src指定加载的页面

<!--frameset的使用-->

<html>

<head></head>

<frameset rows="20%,*">

<frame name="topFrame" src="http://www.mamicode.com/top.html"/>

<frameset cols="30%,*">

<frame name="leftFrame" src="http://www.mamicode.com/left.html"/>

<frame name="mainFrame" src="http://www.mamicode.com/main.html"/>

</frameset>

</frameset>

Iframe:在当前窗口当中嵌入一个子窗口

   <iframe src="" width="" height=""></iframe>

 src属性:指定加载的页面

 iframe标记可以用在body标记里

<html>

<!--iframe的使用-->

<head></head>

<body style="font-size :30px ;font-style :italic ;">

你好,世界<br/>

<iframe src="http://www.mamicode.com/html01.html" width="300" height="300"> </iframe>

 一会儿就要下课了。

</body>

</html>

5、大多数元素都有的属性

属性

描述

class

classname

规定元素的类名(classname)

id

id

规定元素的唯一 id

style

style_definition

规定元素的行内样式(inline style)

title

text

规定元素的额外信息(可在工具提示中显示)

 

 

HTML