菜鸟的HTML学习之路

开发网站流程

• 确定风格、功能（论坛、留言板、支付、用户登录等）。
• 美工制作网页效果图（首页、列表页、内容页）。
• 制作人员切图排版，排成网页形式。
• 后台程序开始写程序。
• 前台与后台结合。

HTML注释

<!——注释内容——>

注意：注释只是为了以后维护用。

项目符号

<ul>
    <li>内容</li>

　　<li>内容</li>

　　<li>内容</li>
</ul>

<ul>或<li>的常用属性

l  Type：项目符号的类型，取值：disc（小黑点）、circle（圆圈）、square（实心方块）

HTML编号列表（有序）

<ol>

         <li>内容</li>

         <li>内容</li>

         <li>内容</li>

</ol>

<ol>或<li>的常用属性

• Type：编号类型，取值：1、a、A、i、I
• Start：从第几个开始编号

滚动字幕标记（已被淘汰）

<marquee>

         内容…..  

</marquee>

  常用属性

• Direction：滚动方向，取值：up、down、left、right
• Width：滚动宽度
• Height：滚动高度
• BgColor：滚动背景色
• ScrollAmount：滚动步长值
• ScrollDelay：两步之间的停留值
• Loop：循环滚动次数

图片标记

语法格式：<img 属性=“值”>

常用属性：

• Width：图片宽度。
• Height：图片高度。
• Border：图片的边框。
• Src：图片的路径。
• Align：left、center、right。（可以实现图文混排效果）
• Hspace：图片与文字左右间距。
• Vspace：图片与文字上下间距。

超级链接

语法格式：<a 属性=“值”>内容</a>

常用属性：

• Href：目标文件地址URL。
• Target：打开方式。 _blank：新窗口、_self：本窗口、_parent:上个窗口打开、top：最顶级窗口打开。
• Name：定义描点名称。
• mailto
• #空链接。
• Js连接：<a href=”javascript:window.close()”>

Html颜色表示

表示方法三种：

颜色单词：blue、green、red、yellow。

10进制表示：rgb（255，0，0）

16进制表示#FF0000（红）、#00FF00（绿）、#0000FF(蓝)

锚点链接

• 含义：锚点链接，是在一个网页的不同区域进行跳转
• 定义锚点（做记号）：<a name=”锚点名称”></a>
  • • 例如：<a name=”top2”></a>

• 跳转到锚点（记号）：
  • • 语法：<a href=”#锚点名称”>内容…..</a>

<meta>标记

作用：提供网页的元信息。指定网页的搜索关键词。

<meta>标记有两个属性：http-equiv和name

1、  http-equiv属性

• 功能：模拟http协议文件头信息，告诉浏览器怎么打开网页。
• http-equiv属性一般与content属性配合使用。Content属性指定信息的详细属性
  • • 设置网页的字符集：　<meta http-equiv=”contengt-type” content=”text/html;charset=utf-8”/>

• • • 网页自动刷新：<meta http-equiv=”refresh”content=”2”>;<meta http-equiv=”refresh”content=”2;url=http://www.baidu.com”>

2、  name属性

设置网页的搜索关键词、版权信息、作者等。

（1）       设置网页搜索关键词

<meta name=”keywords” content=”网站建设，企业网站建设，网站制作，网上商城”/>

（2）       设置网页描述信息

<meta name=”description” content=”飞虎是否健康空间给你那个你的手机功能即可给你个开朗少女攻坚克难暖色开发功能”>

Xhtml规范

• l  所有标记和属性全部小写
• l  单边标记必须关闭。如：<br>-----<br/>
• l  所有的属性值都必须加引号。
• l  所有属性都必须有值。如：<hr noshade>---<hr noshade=”noshade”/>
• l  标机之间要顺序嵌套，外层套内层。
• l  Xhtml网页必须有DTD文档类型定义代码

DTD文档类型定义

三大类型：

表格标签

（1）结构：(一行四列)

<table border=“1”>

           <tr>

                    <td>&nbsp;</td>

                    <td>&nbsp;</td>

                    <td>&nbsp;</td>

                    <td><&nbsp;/td>

           </tr>

</table>

（2）border属性：

• Width：宽度
• Height：高度
• Border：边框
• Bordercolor：边框颜色
• Bgcolor：表格背景色
• Background：背景图片
• Cellpadding：单元格与内容距离
• Cellspacing：单元格与单元格距离
• Rules：合并边框线，取值：all

（3）       tr属性：

bgcolor

align

height：水平：left、center、right

valign：垂直：top、middle、bpttom

（4）      td属性：

• colspan：合并单元格（左右）
• rowspan：合并单元格（上下）
• background
• width
• height
• bgcolor
• align
• valign

表单

（1）结构：

　　<form name=”form1” method=“get” action=“login.php”>

                   用户名：<input type=”text” name=”username”/>

                   密码：<input type=”password” name=”userpwd”/>

                   <input type=”submit” value=”提交表单”/>

    </form>

（2）<form>标记属性----块元素

• name
• method:提交方式 get、post
• action：指定表单的处理程序，一般是PHP文件
• enctype：指定表单数据的编码方式。只能在method=post情况下。
• application/x-www-form-urldecoded   //默认加密方式
• multipart/form-data   //上传文件，值是他自己

（3）get和post方法

             Get提交方式：将表单数据追加到action指定的处理程序的后面，然后向服务器发出请求。不安全

如果某个表单元素，不想往服务器传递数据，那么，name可以不用写。

POST提交方式：POST提交的数据相对安全，可以提交海量数据，可以上传附件。

单行文本域

语法格式：<input type=”text” 属性=“值”>

属性：

• name：文本框的名字
• Type：表单元素类型
• Value：文本框的值
• Size：文本框的长度
• Maxlength：最多可以输入多少个字符。
• Readonly：只读属性。可以选中，但不能修改。Readonly=“readonly”
• Disabled：禁用属性 同上。

单行密码域

语法格式：<input type=”password” name=”userpwd”>

属性：

• name：文本框的名字
• Type：表单元素类型
• Value：文本框的值
• Size：文本框的长度
• Maxlength：最多可以输入多少个字符。
• Readonly：只读属性。可以选中，但不能修改。Readonly=“readonly”
• Disabled：禁用属性 同上。

单选按钮

语法格式:<input type=”radio” name=”sex” value=“男”/>男

<input type=”radio” name=”sex” value=“女”/>女

属性：

• name：元素名称
• Checked：默认选择checked=“checked”
• Value：值

复选框

语法格式：<input type=”checkbox” name=”like” value=”游戏”/> 游戏

<input type=”checkbox” name=”like” value=”杀人”/> 杀人

<input type=”checkbox” name=”like” value=”放火”/> 放火

属性：

• name：元素名称
• Checked：默认选择checked=“checked”
• Value：值

下拉列表

 

语法格式：

<select name=””>

         <option value=”北京”>北京</option>

         <option value=”天津”>天津</option>

         <option value=”重庆”>重庆</option>

</select>

• <selectd>：只有一个name属性。
• <ption>：两个属性value、selected
• Selected：默认选中
• 层叠样式表方式改下拉列表宽度：type=”width:100px”

文本区域

语法格式：<textarea name=”名称” cols=“宽度” rows=“高度”></textarea>

属性：

• name：元素名称
• Cols：宽度
• Rows：高度

各种按钮

• 提交按钮 <input type=”submit” value=”提交”/>
• 重置按钮 <input type=”reset” value=“重置”/>
• 图片按钮 <input type=”image” src=”images/123.jpg”/>
• 普通按钮 <input “button” onclick=”javascript:window.close()” value=”关闭窗口”>
• 普通按钮本身不具备任何功能，需与js配合使用。

上传文件域

语法格式：<input type=”file” 属性=“属性”/>

属性：

• Name：名称
• Value：上传文件名。Value属性是只读属性，
• <input type=”file” name=”uploadfile”/>必须与<form name=”form1” method=”post” action=”login.php” enctype=”multipart/form-data”>配合实现才能上传

隐藏域

功能：看不见的框。传递一些值，而又不想让别人看到。主要用于php后台。如id号。

语法格式：<input type=”hidden” name=”id” value=”1263”>

<caption>表格标题

语法格式：<caption></caption>

<caption>是<table>的子标记。<caption>放在<table>的后面。

网页多媒体

网页视频一般是flash格式，flash比较小、兼容性好，适合网站播放。

图片热点

图片热点：给一张图片加多个热点。

语法结构：

<ing src=”inmages/01.jpg” usemap=”#Map”/>

<map id=”Map”>

<area shap=”热区形状” cords=”热区坐标”  href=”链接地址” />

<area shap=”热区形状” cords=”热区坐标”  href=”链接地址” />

<area shap=”热区形状” cords=”热区坐标”  href=”链接地址” />

</map>

<area>标记常用属性：

• Shape：热区的形状，取值：rect（矩形）、circle（圆）、polygon（多边形）
• Coords：热区的坐标
• 如果shap=rect时，那么，coords=“x1,y1,x2,y2”列如：coords=”50,20,200,150”
• （x1,y1）为左上角坐标，（x2，y2）为右下角坐标。
• 如果shap=circle时，那么，coords=“x,y,r”,其中（x，y）圆心坐标，r为半径。

普通框架

框架集和框架页：

框架集：<frameset></frameset>:主要用来划分窗口。

框架页：<frame>:主要用来指定默认显示的网页地址。

<frameset>属性：

• Cols:划分左右型框架。
• Cols=”200,*”   左边为宽度200px，剩下的为右边。
• Cols=”180,*,180”   左右框架为180px，剩下的为中间框架
• Rows：划分上下型框架
• Rows=”200,*”  上框架高度为200px，剩下的为下框架。
• Frameborder：是否显示边框线，取值0或1.
• Border：边框粗细。
• Bordercolor：边框颜色。

<frame>框架页的属性 ：

• Src：该小窗口中，默认显示的网页地址。
• Noresize：不能调整大小。Noresize=”noresize”
• Scrolling:是否显示滚动条，取值：auto、yes、no
• Name：给当前小窗口起个名字。这个name就是给<a>标记target属性来用的。

<noframes>含义：当浏览器不支持框架时，会提示信息。低版本不支持。高版本都支持。

语法格式：<noframes>内容</noframes>

内嵌框架（行内框架）

与普通框架区别：<iframe>是<body>的子标记，因此，放在<body>中。

语法格式：<iframe 属性=“值”>对不起，您的浏览器版本过低</iframe>

常用属性：

• Src：引入文件地址。
• Width：宽度
• Height：高度
• Frameborder：是否显示框架的边框线，取值：yes或no。
• Scrolling：是否显示滚动条。取值：yes、no、auto。
• Name：制定小窗口的名称，改名称也是给<a>标记的target属性来用。
• Align：框架在网页中对齐方式，取值：left、center、right。

CSS简介

CSS 层叠样式表。

CSS的主要目的：是给html标记添加各种各样的表现（表格、样式）。比如：文字样式、背景、文本样式、连接样式。

语法格式：

<style type=”text/css”> 

h1{

Color:red;    //文本颜色

Text-align:center;    //对齐方式

Border:1px solid #444;     //半框样式

Background-color:#ffff00;    //背景色

}

</style>

CSS选择器

基本选择器

(1) “*”选择器：通配符

• 描述：将匹配所有的html标记，所有标记都会改变。
• 语法：*{color：red；}

（2）标签选择器

• 描述：将匹配指定的html标记
• 语法：h1{color：red；}

（3）class选择器（类选择器）-----使用最多的选择器

• 描述：给一类html标记加样式。这里所指的“一类”是：每个html标记都有的一个class属性，且class的一样。Class属性是公共属性，每个html标记都有。
• 格式：<style type=”text/css”>

.myClass{

Color:red;

Background-color:yellow;

}

</style>

<h1 class=”myClass”></h1>

<p class=”myClass”></p>

（4）id选择器

• 描述：给指定id的元素添加样式
• 注意：网页中html标记的id属性的值，必须是唯一的。

style type=”text/css”>

#myId{

Color=red;

Background-color:yellow;

}

</style>

<p id=”myId”></p>

组合选择器

（1）多元素选择器

• 描述：给多个元素加同一个样式，多个选择器之间用逗号分开。
• 格式：h1,p,div,.p1{ background：red；  }

（2）后代元素选择器(最常用)

• 描述：给某个标签的某一个后代元素加样式。选择器之间用“空格”隔开。
• 格式：<style type=”text/css”>

div  h1.title{ color:red; }

　　　　　　　 Div  p.title{ color:yellow; }

　　　　　　</style>

　　　　　　  <div>

　　　　　　 <h1 class=”title”>   </h1>

　　　　　　 <p class=”title”>   </p>

　　　　　　 </div>

（3）子元素选择器

描述：给某个元素的子元素添加样式

CSS尺寸属性

Width：元素宽度，一定要加px单位。

Height：元素高度。

CSS字体属性

• Font-size：文字大小。如：font-size：14px；
• Font-family：字体。如：font-family：微软雅黑；
• Font-style：斜体，取值：italic。如：font-style：italic；
• Font-weight：粗体，取值：bold。如：font-weight：bold；

CSS文本属性

• Color：文本颜色
• Text-decoration：文本修饰线，取值：none（无）、underline（下划线）、overline（上划线）、line-through（删除线）
• Text-align：文本水平对齐方式，取值：left、center、right
• Line-height：行高，可以固定值，也可以百分比、如：line-height：24px；line-height：150%；
• Text-indent：首行缩进。Text-indent：28px；
• Letter-spacing：字间距。

伪类选择器

一个超链接，有四个状态

• 正常状态（：link）：鼠标没放上之前链接的样式。
• 放上状态（：hover）：鼠标放到链接上时的样式。
• 激活状态（：action）：按住鼠标左键不松开的样式。
• 访问过的状态（：visited）：按下鼠标左键，并弹起，这时的样式。

在平时的工作中，会使用以下写法，来给链接加样式：

A:link,a:visited{ color:#444;text-decoration:none; }  //将“正常状态”和“访问过的状态”合二为一。

A:hover{ color:#990000;text-decoration:underline; }  //”鼠标放上” 单做一种效果

CSS列表属性

List-style：列表样式，取值：none。去掉项目符号或编号前面的各种符号。

<style type:”text/css”>

ul,ui{  list-style:none;  /*去掉项目符号前面的符号*/  }

</style>

<ul>

<li>北京市</li>

<li>东营市</li>

<li>上海市</li>

<li>深圳市</li>

</ul>

CSS边框属性：每个元素都可以加边框线

• Border-left：左边框线。
• 格式：border-left：粗细 线型 线的颜色
• 线型：none、solid、dashed（虚线）、dotted（点状线）
• 举例：border-left：5px dashed red；
• Border-right：右边框线。
• Border-top：上边框线。
• Border-bottom：下边框线。
• Border：同时给四个边加边框线。

CSS内边距属性：边框线到内容的填充

注意：平时我们所说的width和height属性，他们指内容的宽度和高度，不含内、外边距、边框线。

• Padding-left：左内填充距离，右边线到内容间的距离。
• Padding-right：右内填充距离。同上
• Padding-top：上。
• Paddingbottom：下。
• 缩写形式
• Padding:10px;    //四个边的内填充分别为10px；
• Padding：10px 20px;   //上下为10px；左右为20px；
• Padding：5px 10px 20px;   //上为5px，左右为10px，下为20px；
• Padding：20px 10px 5px 20px;    //顺序为上右下左；

CSS外边距属性：边线往外的距离

• Margin-left：左边线往外的距离
• Margin-right：右……
• Margin-top：上…….
• Margin-bottom：下…….
• 简写式：
• Margin：10px；   //四个外边距分别为10px。
• Margin：10px 20px；   //上下外边距为10px，左右外边距为20px。
• Margin：10px 20px 50px；    //上外边距为10px，左右为20px，下为50px。
• Margin：10px 20px 30px 40px；   //顺序为上右下左。

CSS背景属性

• Background-color:背景颜色。
• Background-image:背景图片地址。 Background-image:url(image/banner.jpg)