功能强大的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)层叠样式表
- 样式表能实现内容与样式分离,方便团队开发
- 样式复用,方便网站的后期维护
- 页面的精确控制,实现精美、复杂页面
说明:CSS是用来美化页面用的,可以对页面元素进行更精细的设置,样式主要描述元素的字体颜色、背景颜色,边框等。
2,CSS的用途
- 外观美化
- 布局、定位
CSS基本语法:
<head>
<style type=“text/css”>
选择器(即修饰对象){
对象的属性1:属性值1;
对象的属性2:属性值2;
}
</style>
</head>
例子:
Li
{
Color:red;
Font-size:30px;
Font-family:隶书;
}
3.选择器的分类
选择器分为:标签选择器、类选择器、ID选择器(重点)
- 标签选择器
<style type=”text/css”>
Li{
Color:red;
Font-size:28px;
Font-family:隶书;
}
</style>
作用:用于修饰同类HTML标签的共同风格
- 类选择器
<style type="text/css">
.blue{color:blue;}
……
</style>
……
<ul>
<li class="blue">家用电器</li>
<li>各类书籍</li>
<li class="blue">手机数码</li>
<li>日用百货</li>
</ul>
注意:类名有点号
- 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.背景属性
- 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>
<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 class="help"></div>帮助中心
<div class="login">登录</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, 盒子属性是盒子模型的关键属性
- 什么是盒子属性
- 盒子属性
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" class="textBorder"/>
</p>
<p>密码:
<input name="pass" type="password" class="textBorder" 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="#" style="color:red;font-size:10px;">日用百货</a>
单独定义某个元素的样式,灵活方便。但因为内容与样式混在
一起,应尽量少用或不用。
5.样式的优先级
01.各类样式有继承
02.各类样式的优先级
由低到高,“近者优先”原则
1,浏览器默认设置
2,外部样式表文件
3,内部样式表
4,行内样式表
选择器的优先级
a=(最高级 style="")
<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 style="background:blue;">
</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" class="dv1" style=" background:#ccc">
</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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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;}
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。