你的位置:首页 > 网页设计

[网页设计]功能强大的HTML


 HTML基本标签(一)

1.什么是HTML

  html:Hyper TextMakeup language:超文本标记语言

  html:网页的“源码”

  浏览器:“解释和执行”html源码的工具

2.网页的摘要信息

网页摘要信息利于浏览器解析和搜索引擎搜索:

  2.1使用<title>标签

<head>

<tlite>搜狐-中国最大的门户网站</title>

</head>

  2.2使用<meta>标签

  (1)描述文档类型和字符编码

  (2)描述搜索关键字和描述

 

 

   3.HTML页面中的块和行

      HTML标签分类(方便后续的布局设计)

         块级标签:显示为”块”状,前后隔一行

         行级标签:按行逐一显示

     强调:块级和行级标签的区别:

块级:前后换行

行级:一行内显示

块级标签分为:基本块级标签,常用于布局的块级标签

  基本块级标签:

001.标题标签

<h1>标题</h1>

 ......

<h6>标题</h6>

h1最大,h6最小

  002.段落标签

<p>...</p>

  003.水平线标签

<hr/>

  常用于布局的块级标签:

001.有序列表标签

<ol>

  <li>列表项1</li>

</ol>

002.无序列表标签

<ul>

 <li>列表项1</li>

</ul>

003.定义描述标签(常用于图文混编)

<dl>

<dt>标题</dt>

<dd>描述1</dd>

</dl>

004.用定义描述标签实现图文混编的效果

005.表格

<table>

 <tr>

   <td>百度</td>

   <td>新浪</td>

 </tr>

</table>

006.表单

<form method=”post/get” action=”#”>

...

</form>

 

007.分区标签div

重点: 一般当做结构化块状元素使用,作为逻辑分区(分块)即容器来使用。

 

04.请说出实际开发常用的4种块状结构是什么?

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

   02.div-dl-dt-dd:常用语图文混编的场合

   03.table-tr-td常用于图文布局或数据显示

   04.form-table-tr-td:常用于布局表单

05.行级标签

 001,图像标签

      <img src="图片地址" alt="提示文字" title="提示文字">

为了浏览器之间的兼容,推荐使用title属性,确保能显示提示文字

     alt:当图片不显示时,显示在图片上的文字

     title:鼠标停留在图片上显示的文字

002.行级标签<span>:显示某行内的独特样式

   <span>文本等行级内容</span>

003.换行标签<br/>

 

06.为什么需要w3c标准

w3c:World Wide Web Consortium,万维网联盟

W3C的职能:负责制定和维护web行业标准

W3C提倡的web结构:

1、内容(结构)和表现(样式)分离

2、HTML内容结构要求语义化 

07.XHTML1.0基本规范

  001.标签名和属性名必须小写

  002.html标签必须关闭

  003.属性值必须用引号括起来

  004.标签必须正确嵌套

  005.必须添加文档类型声明

文档声明必须位于文档的最前面,级别有三种:Strict(严格类型),Transitional(过渡类型),Frameset(框架类型)

 

 HTML基本标签(二)

01.超链接--实现页面间的导航

语法:<a href="链接地址" target="目标窗口位置">链接热点文本或图像</a>

例如:

02.相对路径:相对于当前目录的地址,常用

<a href="login/login.htm">登录</a>

绝对路径:指向目标地址的完整描述,少用

<a href="memAdmin/login/login.htm">登录</a>

<a href="http://www.sohu.com">搜狐</a>

重要:如果要访问当前路径的上一级路径可以使用../

 

03.超链接的三种应用场合

001.页面间链接

002.锚链接

003.功能性链接

 001.页面间链接

    <a href="login/login.htm">[登录]</a>

    适用场合:常用于网站导航

 002.实现锚链接(分为同页面锚链接和页面间锚链接)

    同页面锚链接:

   1,定义标记(锚):<a name="标记名">目标位置</a>

   2,设置链接到标记位置:<a href="#标记名">当前位置</a>

    适用场合:适用于页面内容较多,超过一屏的场合

    跨页面链接:

    1.标记所在页:<a name="标记名">[明星专区]</a>

   锚链接可以用于同页也可以跨页链接

    2.设置链接到标记位置:<a href="anchor.html#star">明星专区</a>

  003.功能性链接

邮箱、QQ链接等

待写…

04.注释

<!--注释内容--!>

被注释的行用于增加代码的可读性,不显示

05.特殊符号

空格: 

大于:>

小于:<

引号("):"

版权号():©

因为<、>等符号在HTML中已使用,所以必须用其他符号来代替,都以;号结束

 

06.常见的表单元素

单行文本框(text)

密码框(password)

文本域(textarea)

<textarea></textarea>

单选按钮(radio)

复选框(checkbox)

提交按钮(submit)

下拉列表(select)

<select>

<option vlalue=”1”>一月</option>

</select>

重置按钮(reset)

 

07.表单的基本语法

<form action="表单提交地址" method="提交方法">:提交方法只有post和get两种

文本框、按钮等表单元素

</form>

action:指定提交后,由服务器上哪个处理程序处理

method:指定向服务器提交的方法:一般为post或get方法,post方法比较安全。

08.表单的执行原理

客户端:请求登录,通过表单填写账户信息

客户端和服务器类似两个人沟通一样,从而建立交互活动

服务器端:验证发来的账号信息,然后给出反馈!

09.表单元素的基本格式

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

10.表单元素的逐一介绍

文本框

<input name="名称" type="text" value="初值" size="数字">

name用于服务器端获取数据,例如:request.getParameter("userName")

密码框

<input name="名称" type="password" value="初值" size="数字">

按钮

<input name="名称" type="按钮类型" value="按钮文字" src="图片按钮的图片url">

普通按钮:button

提交按钮:submit

重置(清空)按钮:reset

图片按钮:image

单选按钮

<input name="组名" type="radio" value="文本" checked="...">

名字name相同表明属于同一组

特点:单选

 复选框

<int type="checkbox" name=" "value=" " checked=" ">

特点:多选

文件域

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

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

<input type="submit" name="upload" value="上传"/></p>

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

<option value="选项值" selected="selected">...</option>

</select>

作用:提供固定选项,避免用户输入错误

多行文本框

<textarea name="" cols="列宽" rows="行宽">

文本内容</textarea>

 

隐藏域

   方便服务器端"记住"客户端的信息,但又不希望客户看到的数据

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

 

只读和禁用属性

readonly:希望某个框内的内容只允许用户看,不能修改

disabled:因没达到使用的条件,限制用户使用

 

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

欢迎阅读服务条款协议,贵美的权利和义务

</textarea><br/><br/>

同意以上协议<input name="agree" type="checkbox"/>

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

 

 表格应用和布局

1.为什么使用表格?

表格常见应用场合:

01论坛

02.购物网站

03.门户网站应用表格

 

 

2.表格的基本结构

行、列和单元格

特点:通常情况下,同行的高度一致,同列的宽度一致

 

3.表格的基本语法

<table>

<tr>

<td>百度</td>

<td>新浪</td>

</tr>

<tr>

<td>谷歌</td>

<td>56网</td>

</tr>

</table>

 

 

 

如何创建表格?

<table>代表表格的开始,border=“2”表示边框宽度为2

 

4.表格的跨行跨列(重点,重点!!!)

如何跨列

<table width="200" border="1">

  <tr>

    <td colspan="3">学生成绩</td>

  </tr>

  <tr>

    <td>语文</td>

    <td>98</td>

  </tr>

  <tr>

    <td>数学</td>

    <td>95</td>

  </tr>

</table >

 

其中,colspan属性表示跨多少列

该行其他单元格的内容就省略不写了

rowspan属性表示跨多少行

 

5.表格高级标签

表格标题:<caption>

表头:<th>

页眉:<thead>

数据主体:<tbody>

页脚:<tfoot>

 

6.表格布局

如何实现图文布局?

实现步骤:

01.确定行列数:5行2列

02,写出5行2列表格

03,确定跨行跨列的单元格:

  1行1列单元格跨2列

  2行1列单元格跨4行

04.增加rowspan和colspan删除多余单元格、

 

<table border="1px">

  <tr>

    <td colspan="2"><img src=“…" alt="公告栏" /></td>

  </tr>

  <tr>

    <td rowspan="4"><img src=“…" alt="公告左侧图" /></td>

      <td>大学要求老师开网店</td>

  </tr>

  <tr>

    <td>安全锤网上大热销</td>

  </tr>

……

  </tr>

</table>

 

  7.如何实现表单布局?

  使用表格进行布局对显示数据有什么要求?实现思路是什么?

  使用场合:数据显示要求为规整,符合表格布局的特点

  布局的实现思路:

  01,需要几行几列的表格?

  02,那些单元格有跨行或跨列?

  03,编写表格代码实现

  

  注意:1,同列单元格宽度由该列宽度最大的单元格决定

     2,同行单元格宽度由该行高度最高的单元格决定

  

 8. 嵌套布局

  嵌套表格布局的缺点:

  01,代码量大

  02,层次结构也相对复杂

  03,不利于Google等搜索引擎搜索查找数据

  9.表格布局适用场合:

  01,规则的数据显示

  02,表单页面

  提示:表格布局不适合不规则的复杂页面,这种场合

  需使用DIV+CSS布局

  

框架

1、为什么使用框架?

  框架的两类用途:

  01.显示多窗口页面--使用<frameset>框架集

  02.页面复用--使用<iframe/>内嵌框架

  

  二、框架文件的特点

  多个页面文件组成

  主文件(index.html):

  01.top.html  02.left.html  03.right.html

  

  三、框架的基本结构

  创建框架网页的步骤:

  01.创建各子窗口对应的HTML文件

  02.创建整个框架页面文件,引用子窗口文件

  框架页面基本语法:

  <frameset cols="25%,50%,*" rows="50%,*" border="5">

     <frame src="the_first.html">

  </frameset>

  其中,cols将窗口分隔成左中右3个部分

        rows将窗口分隔成上下2个部分

        border表示边框尺寸大小

   

   纵向分隔窗口

   <frameset  bordercolor="red"  rows="25%,50%,*"  border="5">

    <frame src="subframe/the_first.html" name="top" />

    <frame src="subframe/the_second.html" name="middle" />

    <frame src="subframe/the_third.html" name="bottom" />

</frameset>

<noframes>

    <body>  如浏览器不支持框架,才显示body内的内容 </body>

</noframes>

   注意:01.框架和body不能共存

      02.为了兼容性,可以使用<noframes>标签

    横向分隔窗口:

    <frameset cols="200,*,200" border="5" bordercolor="#FF0000">

    <frame name="leftFrame" src="subframe/the_first.html" />

    <frame name="mainFrame" src="subframe/the_second.html" />

    <frame name="rightFrame" src="subframe/the_third.html" />

    </frameset>

   

   框架实现多窗口页面:

   典型的2行2列结构

   <frameset rows="20%,*" frameborder="0">

    <frame src="subframe/top.html" name="topframe" scrolling="no" 

       noresize="noresize" />

       <frameset cols="20%,*">

          <frame src="subframe/left.html"  name="leftframe"scrolling="no" 

             noresize="noresize" />

          <frame src="subframe/right.html" name="rightframe" />

      </frameset>

   </frameset>

   

   如何实现窗口间的关联:

   01.设置窗口名(框架主页)

   <frameset rows="20%,*" farmeborder="0">

      <frame src="subframe/right.html" name="rightFrame">

   </frameset>

   02.设置<a>的target属性(窗口子页面)

   <a href="buy.html" target="rightFrame">走一个</a>

   设置链接在右窗口中打开

   

   target的其他用法:

   在新窗口中显示:_blank

   在自身窗口中显示:_self

   在上级窗口显示:_top

   在父窗口显示:_parent

   

   三、为什么用<iframe/>

   01.<frameset>需要使用多个文件,目录结构复杂

   02.内嵌较为灵活,可以在网页的任何位置使用

   03.可以作为模板,在本网站的多个页面复用

   

   iframe基本用法

   <iframe src="引用页面地址" name="框架标识名"

   frameborder="边框" scrolling="no">

   注意点:和<frameset>不同,iframe放在<body>标签内

   

   常用属性

   如何设置在内嵌窗口显示

   <a href="subframe/the_third.html" target="mainFrame">

   下边显示第三页

   </a>

   <iframe name="mainFrame" width="800px" height="150px"

   scrolling="yes" noresize="noresize"

   src="subframe/the_second.html"/>  

  

 Css样式表(一)

1,为什么使用CSS样式表?

CSS全称(Cascading Style Sheets)层叠样式表

  1. 样式表能实现内容与样式分离,方便团队开发
  2. 样式复用,方便网站的后期维护
  3. 页面的精确控制,实现精美、复杂页面

说明:CSS是用来美化页面用的,可以对页面元素进行更精细的设置,样式主要描述元素的字体颜色、背景颜色,边框等。

2,CSS的用途

  1. 外观美化
  2. 布局、定位

CSS基本语法:

  <head>

<style  type=“text/css”>

选择器(即修饰对象){

  对象的属性1:属性值1;

  对象的属性2:属性值2;

}

      </style>

  </head>

例子:

  Li

{

  Color:red;

  Font-size:30px;

  Font-family:隶书;

}

  3.选择器的分类

  选择器分为:标签选择器、类选择器、ID选择器(重点)

  1. 标签选择器

<style  type=”text/css”>

 Li{

   Color:red;

   Font-size:28px;

   Font-family:隶书;

</style>

作用:用于修饰同类HTML标签的共同风格

  1. 类选择器

<style type="text/css">

         .blue{color:blue;}                

        ……

</style>

    ……

<ul>

<li >家用电器</li>

<li>各类书籍</li>

<li >手机数码</li>

<li>日用百货</li>

</ul>

注意:类名有点号

  1. ID选择器

    <style>

#menu{

    width:200px; background:#ccc;

    font:bold 14px 宋体;

}

</style>

… …

<div id="menu">

  <ul>

    <li>家用电器</li>

   ……

  </ul>

</div>

4.文本属性

字体、字号:

  Font(缩写形式)

  Font-weight(粗细)

  Font-size(大小)

  Font-family(字体)

 行距、对齐等:

  Line-height(行高)

  Text-align(对齐)

  Letter-spacing(字符间距) 我  是

  Text-decoration(文本修饰) 

 

 White-space(空白处理) 属性值:nowrap:不换行

<style tylie="text/css">

li{

  font: 12px 宋体;

  text-align:left;

  line-height:28px;

 }

.title{ 

  letter-spacing:5px;

  white-space:nowrap;

  text-decoration:underline;

 }

.bigFont {

  font-size:16px;

  color:red;    

 }

</style>

 

5.背景属性

  1. background(缩写形式)
  2. background-color(背景色)
  3. background-image(背景图)
  4. background-repeat(背景图重用方式)
  5. background-position(位置坐标、偏移量)

 

div{ 

     background:url(images/bg.jpg) no-repeat; 

     background-position: -70px -60px

}

6 .背景属性的经典应用

图标截取-背景偏移量技术:理解清楚是左移还是右移,然后设置div的宽度和高度以适应图片的显示。

<html>

<head>

<title>文本属性</title>

<style type="text/css">

 div{

                 width:20px;background:url(images/icon.gif) no-repeat;

 float:left;

   }

.help{

    background-position:-120px 0px;

      }

             

  .login{

    width:40px;background-position:0px -20px;

  }

</style>

</head>

<body>

 

   <div></div><span>购 物 车</span>

   <p> </p>

   <div ></div>帮助中心

   <div >登录</div>

</body>

</html>

7.列表属性

01.列表li常用属性

   List-style(列表风格)取值

  属性值      方式                 语法规则           实例

   none      无风格                list-style:none;       刷牙

   disc      实心圆(<ul>默认类型)  list-style:disc;       ● 刷牙

   circle    空心圆                list-style:circle;     ○ 刷牙

  square    实心正方形            list-style:square;     ■ 刷牙

  decimal   数字(<ol>默认类型)    list-style:decimal;    1. 刷牙

 表格常见属性

  背景颜色;

   color:文本颜色

   border-style:solid;边框风格,实线(默认是没有),还有dotted(点)等值;

   border-color:边框颜色;

   border-width:边框宽度(默认是0)

 

CSS样式表(二)

  1.如何控制CSS样式

  1. 盒子模型

网页中所有元素都可以看做一个一个的盒子

盒子模型包括:

   元素内容

 填充(也称内边距):padding

   边框:border

   边界(也称外边距):margin

  1. 样式控制思路

盒内样式修饰:设置网页元素的颜色、字体等外观

盒子位置布局:确定盒子所在的位置、和其他网页元素的关系

2.盒子模型详解

  1. 为什么需要盒子属性

1, 盒子模型是网页布局的基础

2, 盒子属性是盒子模型的关键属性

  1. 什么是盒子属性
    1. 盒子属性

margin(外边距/边界)

各个属性又分为四个方向

Margin-top

Margin-right

Margin-bottom

Margin-left

Margin:1px,2px,3px,4px;(每个值分别是:上右下左,顺时针方向)

Margin:值1,值2,值3;(含义:上为值1,左右为值2,下为值3)

Margin:1px,2px;(含义:上下值为1,左右值为2)

Margin:0 auto;相当于margin:0 auto 0 auto;即上下是0,左右是自动,要有HTTP头协议才能居中显示

Margin:值1;(含义:上右下左都是值1)

Margin-left:1px;

 

Border(边框)

  修饰属性:

Border-color

Border-width

Border-style

            四个方向:

                                Border-top

  Border-right

  Border-bottom

    Border-left

         典型应用

Border-style:none;

Border:1px solid red;

Border-right:5px dotted blue;

          (solid 实线,dashed虚线 dotted点)

         使用border属性修饰表单

<style  type=”text/css”>

                .textBorder{

  Border-width:1px;

  Border-style:solid;

}

</style>

</head>

<body>

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

<p>名字:

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

</p>

<p>密码:

  <input name="pass" type="password"  size="21" >

</p>

 

Padding(内边距/填充)

  Padding属性

  Padding

  Padding-top

  Padding-right

  Padding-bottom

  Padding-left

  3.元素的宽高及实际占位

元素的实际占位(实际宽、高)

  盒子高度=height属性+上下填充高度+上下边框高度(上下两个)

  盒子宽度=width属性+左右填充宽度+左右边框宽度

 4.使用盒子属性实现DIV+CSS布局

 实现步骤:1,分析页面的分块结构,形成HTML组织结构

                 为了控制整个页面的居中,添加一个大容器:container

       2.编写每个DIV块的CSS控制定位

5.浮动float

01.为什么需要float浮动属性

使用float浮动属性可以解决两块布局无法同行显示的问题

02.什么是浮动属性

所谓浮动就是标签脱离常规文档流而表现为向右或向左浮动

默认的常规文档流:页面内容从上到下,从左到右排列,DIV块换行显示。

03,浮动的三大显著特性

1, DIV块元素失去“块状”换行显示特征,变为行内元素。

2, 紧贴上一个浮动元素(同方向)或父级元素的边框,如宽度不够将换行显示。

3, 占据行内元素的空间,导致行内元素围绕显示

6.为什么需要clear属性

  默认情况下第3个div随窗口大小决定是否换行,如希望换行可以使用clear区隔属性。

  什么是clear清除属性

    Clear作用:1,如果前一个元素存在左浮动或右浮动,则换行以区隔。

                      2,只对块级元素有效

   Clear属性的取值

    Right

    Left

    Both

    None

 CSS样式表(三)

  1.超链接样式的特点

  01.超链接样式的特殊性

        文本或图像加上链接,将失去原样式而继承链接的样式

     02.超链接样式的四种状态

         未访问状态(a:link)

         已访问状态(a:visited)

         鼠标移上状态(a:hover)

         激活选定状态(a:active)

     注意:加链接后,图片/文本样式的变化

               图片添加了边框,文本添加了下划线

2.超链接伪类样式

采用选择器:通过状态的方式定义样式,一般称为伪类

           伪类 示例 说明

           a:link                a:link{color:#999;}         未访问状态

           a:visited           a: visited  {color:#333;}            已访问状态

           a:hover            a: hover   {color:#ff7300;}         鼠标移上状态

           a:active            a: active {color:#999;}          激活选定状态(鼠标点击未释放时)

3.如何设置超链接样式:因为实现的是css样式复用

设置超链接样式的步骤:

      1.确定页面所有超链接的样式是否相同,否则分开定义

      2.先确定四个状态共有样式,再分别定义其他状态

4.如何应用样式

三类应用样式的方式:

      01.内部样式表:

            <style type="text/css">

              //样式定义

            </style>

            HTML和CSS在同一文件,方便开发时修改,样式和内容分离

            不够彻底,不利于页面复用

      02.外部样式表

                <link rel="stylesheet" href=CSS外部文件名 type="text/css"/>

                分别定义*.css和*.html文件,样式和内容彻底分离,多个网页可以共享同一CSS

       03.行内样式表

               <a href="#" >日用百货</a>

               单独定义某个元素的样式,灵活方便。但因为内容与样式混在

               一起,应尽量少用或不用。

5.样式的优先级

     01.各类样式有继承

     02.各类样式的优先级

          由低到高,“近者优先”原则

            1,浏览器默认设置

            2,外部样式表文件

            3,内部样式表

            4,行内样式表

          选择器的优先级

          a=(最高级 )

<a style=””>

          b=(ID用到的数目)

          c=(class用到的数目)

         d=(标签用到的数目)

   03.    <style type="text/css">

       div

       {

         background:green;

        }

    </style>

    <link href="css/layout.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <div >

    </div>

</body>

 

     选择器优先级的案例

        <style type="text/css">

      div

      {

       width:200px;

       height:100px;

       background:yellow;

       }

       .dv1

       {

        background:red;

       }

       #mydiv

       {

        background:blue;

        }

    </style>

</head>

<body>

    <div id="mydiv"  >

    </div>

</body>

6.典型的局部布局结构

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

    div-dl-dt-dd:常用语图文混编场合

    table-tr-td:常用于图文布局或显示数据的场合

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

      div-ul-li局部布局样式的修饰

        实现思路:布局结构分析、css样式分析

7.如何复用CSS代码

抽取重复代码建立类,如:.pic{//共有的CSS代码}

     应用样式:多个类样式,如:<li ></li>

     div-dl-dt-dd局部布局样式修饰

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html 

<head>

    <title></title>

    <style type="text/css">

        div

        {

            background:url(./images/bg.gif) no-repeat;

            padding-top:32px;

            width:235px;

            height:292px;

            }

          div dl

          {

              margin:3px;

              padding-left:5px;

          }

        div dl dt

        {

            float:left;

            padding:2px 0px;

            }

         div dl dt img

         {

             height:46px;width:53px;border:1px solid red;

             }

          div dl dd a

          {

              line-height:60px;

              vertical-align:middle;

              text-decoration:none;

              }

    </style>

</head>

<body>

  <div>

   

    <dl>

        <dt><img src="images/show1.jpg"/></dt>

        <dd>

            <a href="#">大牌狂降价,三折直送</a></dd>

    </dl>

     <dl>

        <dt><img src="images/show2.jpg"/></dt>

        <dd>

            <a href="#">大学要求老师开网店</a></dd>

    </dl>

     <dl>

        <dt><img src="images/show3.jpg"/></dt>

        <dd>

            <a href="#">黑眼圈推荐,美白不停</a></dd>

    </dl>

     <dl>

        <dt><img src="images/show4.jpg"/></dt>

        <dd>

            <a href="#">瘦身狂飙风,修形之选</a></dd>

    </dl>

     </div>

</body>

</html>

8.css中基本符号

(空格)(逗号)(#)(冒号)

         选择器的组合:

         标签+类

         标签+id

         id+空格+类

         id+空格+类+逗号

Li .pic{width:28px;}

div#nav{text-align:center;}

#nav .pic{border:1px;}

#nav .pic,#nav .text{height:26px;}