功能强大的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最大，h6最小

002.段落标签

003.水平线标签

<hr/>

常用于布局的块级标签：

001.有序列表标签

<ol>

</ol>

002.无序列表标签

<ul>

</ul>

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

<dl>

</dl>

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

005.表格

<table>

<tr>

</tr>

</table>

006.表单

...

</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,图像标签

为了浏览器之间的兼容，推荐使用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.相对路径：相对于当前目录的地址，常用

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

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

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

001.页面间链接

002.锚链接

003.功能性链接

001.页面间链接

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

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)

单选按钮(radio)

复选框(checkbox)

提交按钮(submit)

下拉列表(select)

</select>

重置按钮(reset)

07.表单的基本语法

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

文本框、按钮等表单元素

</form>

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

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

08.表单的执行原理

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

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

服务器端：验证发来的账号信息，然后给出反馈！

09.表单元素的基本格式

10.表单元素的逐一介绍

文本框

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

密码框

按钮

普通按钮：button

提交按钮：submit

重置(清空)按钮：reset

图片按钮：image

单选按钮

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

特点：单选

复选框

特点:多选

文件域

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

</select>

作用：提供固定选项，避免用户输入错误

多行文本框

文本内容</textarea>

隐藏域

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

只读和禁用属性

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

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

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

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

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

表格应用和布局

1.为什么使用表格？

表格常见应用场合：

01论坛

02.购物网站

03.门户网站应用表格

2.表格的基本结构

行、列和单元格

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

3.表格的基本语法

<table>

<tr>

</tr>

<tr>

</tr>

</table>

如何创建表格？

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

4.表格的跨行跨列（重点，重点！！！）

如何跨列

<tr>

</tr>

<tr>

</tr>

<tr>

</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删除多余单元格、

<tr>

</tr>

<tr>

<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将窗口分隔成左中右3个部分

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

border表示边框尺寸大小

纵向分隔窗口

</frameset>

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

</noframes>

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

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

横向分隔窗口：

</frameset>

框架实现多窗口页面：

典型的2行2列结构

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

noresize="noresize" />

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

noresize="noresize" />

</frameset>

如何实现窗口间的关联：

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

</frameset>

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

设置链接在右窗口中打开

target的其他用法：

在新窗口中显示：_blank

在自身窗口中显示：_self

在上级窗口显示：_top

在父窗口显示：_parent

三、为什么用<iframe/>

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

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

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

iframe基本用法

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

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

常用属性

如何设置在内嵌窗口显示

下边显示第三页

</a>

scrolling="yes" noresize="noresize"

src="subframe/the_second.html"/>

Css样式表（一）

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

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

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

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

2，CSS的用途

外观美化
布局、定位

CSS基本语法：

<head>

选择器(即修饰对象){

对象的属性1：属性值1；

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

}

</style>

</head>

例子：

{

Color:red;

Font-size:30px;

Font-family:隶书;

}

3.选择器的分类

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

标签选择器

Li{

Color:red;

Font-size:28px;

Font-family:隶书;

}

</style>

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

类选择器

.blue{color:blue;}

……

</style>

……

<ul>

</ul>

注意：类名有点号

ID选择器

<style>

#menu{

width:200px; background:#ccc;

font:bold 14px 宋体;

}

</style>

… …

<ul>

……

</ul>

</div>

4.文本属性

字体、字号：

Font(缩写形式)

Font-weight(粗细)

Font-size(大小)

Font-family(字体)

行距、对齐等：

Line-height(行高)

Text-align(对齐)

Letter-spacing(字符间距) 我是

Text-decoration(文本修饰)

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

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.背景属性

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

div{

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

background-position: -70px -60px

}

6 .背景属性的经典应用

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

<html>

<head>

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 class="help"></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样式

盒子模型

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

盒子模型包括：

元素内容

填充(也称内边距)：padding

边框：border

边界(也称外边距)：margin

样式控制思路

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

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

2.盒子模型详解

为什么需要盒子属性

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

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

什么是盒子属性
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属性修饰表单

.textBorder{

Border-width:1px;

Border-style:solid;

}

</style>

</head>

<body>

<p>名字：

</p>

<p>密码：

</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>

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

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

02.外部样式表

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

03.行内样式表

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

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

5.样式的优先级

01.各类样式有继承

02.各类样式的优先级

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

1，浏览器默认设置

2，外部样式表文件

3，内部样式表

4，行内样式表

选择器的优先级

a=（最高级 style=""）

b=（ID用到的数目）

c=（class用到的数目）

d=（标签用到的数目）

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

div

{

background:green;

}

</style>

</head>

<body>

</div>

</body>

选择器优先级的案例

div

{

width:200px;

height:100px;

background:yellow;

}

.dv1

{

background:red;

}

#mydiv

{

background:blue;

}

</style>

</head>

<body>

</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 class="pic pic1"></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">

<head>

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>

<dd>

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

</dl>

<dl>

<dd>

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

</dl>

<dl>

<dd>

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

</dl>

<dl>

<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;}

posted on 2015-05-04 18:34 待繁华落幕阅读(1259) 评论(0) 编辑收藏举报