`

CSS+DIV+HTML杂(三)

阅读更多


一:<label>标签
如果想通使用普通windows程序一样,可以用快捷键在表单字符元素之间进行切换,
选中或清除复选框,选择单选按钮,这久需要使用<label></label>标签来实现这种功能了
如:
<form>
<label for="usr" accesskey="a">用户名(<u>a</u>):</label>
<input type="text" name="user" id="usr" /><br />
<label for="pas" accesskey="b">密码(<u>b</u>)</label>
<input type="password" name="pass" id="pas" /><br />
<label for="male" accesskey="c">男(<u>c</u>)</label>
<input type="radio" name="sex" id="male"/>
<label for="female" accesskey="d">女(<u>d</u>)</label>
<input type="radio" name="sex" id="female" /><br />
<label for="mar" accesskey="e">婚姻状况</label>
<input type="checkbox" id="mar" name="married" />
</form>
依次按下Alt+A键、Alt+B键、Alt+C键、Alt+D键、Alt+D键就能看到快捷键的作用了.
for属性:指定快捷键将作用于的保单字段元素,设置值必须与某个表单字段元素的id值相吻合.
accesskey属性,指定for属性所对应的表单字段元素的快捷键,使用快捷键必须按下alt+快捷键

二:头元素
头元素是指通常位于<head></head>标签对之间的元素,包括title,base,link,meta等
这些元素可用来表明网页文件的有关信息,例如,文档标题,搜索引擎针对当前网页文档所
收入的关键字内容和其他一些不属于文档内容的信息.以下都是头元素.

(1):<base></base>
该标签用于指定网页中的超链接的基准地址(以base为准标准的地址),
以改变网页中所有使用相对地址的url的基准地址,<base>标签只能用于
文件头部分,只对该页面有效

target属性:
<base target="_blank" />
代表该页面的超链接都以_blank为方式打开

href属性:
<base href="http://www.163.com/zz" />
代表该页面的超链接都以http://www.163.com/zz/
的zz目录为基准地址(zz目录作为起点)
<a href="tt.html">请点击</a>
这时候点击超链接访问地址为:http://www.163.com/zz/tt.html
注意:href属性设定那个该网页中所有使用HTTP协议的URL地址(例如,<a>和<img>标签的href属性值)的基准地址
如果:<base href="zz" />
那么单击:<a href="tt.html">请点击</a>该连接路径为:
http://zz/tt.html它会自动帮你加上http://协议


(2)<link></link>以下就举例说明样式表的例子,其他的很少用,可以查帮助文档
<link rel="stylesheet" type="text/css" href="tt/url">
其中rel="stylesheet"表明目标资源是一张样式表
要注意的是,一个文档可以包含不止一个应用外部样式表的link单元


(3)<meta>标签
主要又两种类型的<meta>,它们用不同的属性名来划分,这两种属性名为name和http-equiv
1) name属性用于在网页中加入一些关于网页的描述信息,例如,网页的关键字(可供网页搜索引擎机器人查找,分类)
,网页的描述信息等.
<meta name="keywords" content="软件开发,vc,java,培训" />设置搜索的关键字
2)http-equiv属性
该属性包括一下功能:通知浏览器查看此网页时应该使用的字符编码,是否在本地缓存此网页,网页到期的时间,是否间隔一定时间以后刷新当前页面或跳转到其他页面等;

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />设置网页的MIME类型和字符编码
<meta http-equiv="refresh" content="2; url=http://jhxk.iteye.com" />设置页面间隔两秒跳转到http://jhxk.iteye.com
<meta>标签的内容还有很多用到可以查帮助文档


三:<div></div>
区域标签(块级元素)可以包含任何html元素,通过改变<div>的属性,可以让其中所有元素随之消失,出现,更改,移动等
<div>应用于Cascading style sheets(层叠样式表)和客户端脚本编程方面会更显威力
<div align="center">
<p>段落1</p>
<img src="img1.gif">
<p>段落2</p>
</div>
以下是错误的:该标签不能包含在段落标签中
<p>aa<div>bb</div>cc</p>


四:<span></span>
<span>标签本身没有任何意义,该标签专门用于css和客户端脚本编程中
比如:要将文本ZhangSan中的前半部分Zhang单独选取出来,作为一个被
css和javascript调用的独立单元,久可以使用<span>Zhang</span>San.

<span>与<div>的不同之处在于:
<div>是一个区块(block)元素
<span>是文本级元素

 

例如:
<span>aaa</span>bbb
显示效果:

 

 

<div>aaa</div>bbb
显示效果:

 

 

 

以上可见<span>本身第嵌套在其中的文本没有任何影响,只能借助于css和客户端脚本编程来对<span>元素进行处理.

 

  • 大小: 12.5 KB
  • 大小: 11.3 KB
分享到:
评论

相关推荐

    后台模板 css+div+html

    后台模板 css+div+html后台模板 css+div+html后台模板 css+div+html后台模板 css+div+html后台模板 css+div+html后台模板 css+div+html后台模板 css+div+html后台模板 css+div+html后台模板 css+div+html后台模板 ...

    css+div网页模板整站

    《CSS+Div网页模板整站解析》 在网页设计领域,CSS(层叠样式表)与Div元素的结合是构建现代网页布局的核心技术。本资料集合包含了一个完整的网站模板,由十个不同页面组成,旨在为网页设计师提供实用的参考和学习...

    HTML+CSS+DIV网页设计.zip

    html+CSS+DIV网页设计.zip+CSS+DIV网页设计.zip+CSS+DIV网页设计.zip+CSS+DIV网页设计.zip+CSS+DIV网页设计.zip+CSS+DIV网页设计.zip+CSS+DIV网页设计.zip+CSS+DIV网页设计.zip+CSS+DIV网页设计.zip+CSS+DIV网页设计...

    HTML+CSS+DIV网页设计源码.zip

    HTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML...

    《精通CSS+DIV网页样式与布局》源码.rar

    《精通CSS+DIV网页样式与布局》源码.rar 《精通CSS+DIV网页样式与布局》源码.rar 《精通CSS+DIV网页样式与布局》源码.rar 《精通CSS+DIV网页样式与布局》源码.rar 《精通CSS+DIV网页样式与布局》源码.rar

    精通CSS+DIV网页样式与布局

    精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局....

    精通CSS+DIV 书中实例和源代码

    《精通CSS+DIV》是一本深入探讨网页样式与布局技术的专业书籍,其核心内容围绕着如何利用CSS(层叠样式表)和DIV(定义文档结构的HTML元素)来实现高效、美观的网页设计。这本书提供了5个完整的网站设计案例,通过...

    CSS+DIV 20个经典实例(上)

    CSS+DIV 20个经典实例(上)CSS+DIV 20个经典实例(上)CSS+DIV 20个经典实例(上)CSS+DIV 20个经典实例(上)CSS+DIV 20个经典实例(上)CSS+DIV 20个经典实例(上)CSS+DIV 20个经典实例(上)

    div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+CSS像素表格

    div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+CSS像素表格 百分比表格(用DIV+CSS)以百分比显示,可以根据窗口的大小自动调节所显示的大小! DIV+CSS+JS静态分页程序可兼容主流浏览器(IE、FF、Opera) DIV+CSS表格...

    html+css+div学习实例教程

    HTML+CSS+Div 学习实例教程是网页设计领域中不可或缺的一部分,这三种技术共同构成了网页的静态结构和样式。本教程将深入探讨如何利用它们来创建高效、响应式的网页设计。 HTML(HyperText Markup Language)是网页...

    精通css+div 网页样式与布局 ppt文件

    正在学习css+div的朋友应该都知道这几本书吧,《精通css+div 网页样式与布局》还有《css设计彻底研究》这些书都非常好,现在将《精通css+div 网页样式与布局》的ppt文件传上来,这样大家就可以不用买实体书了,至于...

    《精通CSS+DIV网页样式与布局》光盘源码

     第12章 CSS+div美化与布局实战   12.1 框架搭建   12.2 实例一:蓝色经典   12.3 实例二:清明上河图   12.4 实例三:交河故城   12.5 自动选择CSS样式  第3部分 CSS混合应用技术篇  第13章 ...

    jsp css+div 后台框架

    "jsp css+div 后台框架"是一种常见的前端与后端技术组合,用于构建高效、美观且用户友好的Web应用程序。这种框架结合了JavaServer Pages(JSP)、Cascading Style Sheets (CSS) 和 Div布局,以实现动态网页设计和...

    HTML+CSS+DIV网页设计与布局(第2版)(微课版)-教案.docx

    HTML+CSS+DIV 网页设计与布局 本教案旨在教授学生 HTML+CSS+DIV 网页设计与布局的基本概念和技术,涵盖网页设计的基本元素、HTML 基本概念、网页文字和图片、网页基本编辑、表格、多媒体、滚动字幕和列表等方面的...

    div+css例子 div+css例子

    div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子...

    css+div网站实例源码

    **CSS+Div网页布局技术详解** 在Web开发领域,CSS(Cascading Style Sheets)与Div元素的结合使用已经成为构建现代网页布局的标准方法。"css+div网站实例源码"提供了一个优秀的学习资源,让我们深入探讨这个主题。 ...

    CSS+DIV详解网站好帮手

    《CSS+DIV详解网站好帮手》是一本深入解析CSS(层叠样式表)与DIV(定位元素)技术的专业书籍,对于网页设计和开发人员来说,无疑是一份宝贵的参考资料。CSS与DIV是构建现代网页布局的核心工具,它们的合理运用能够...

    《CSS+DIV网页样式与布局》源码

    《CSS+DIV网页样式与布局》是一本深入探讨如何使用CSS(层叠样式表)和HTML的DIV元素来实现高效、灵活的网页设计的书籍。源码提供了书中各个实例的实际代码,供读者学习和实践。以下是对这些知识点的详细解释: 1. ...

    精通css+div网页样式与布局

    《精通CSS+DIV网页样式与布局》从零开始,细致介绍CSS的语法规则,透彻讲解CSS应用于各种网页元素的步骤和技巧深入剖析,CSS+DIV布局的思路和方法比较,IE和Firefox浏览器对CSS支持的不同效果,扩展CSS与JavaScript...

    css+div+js实现简单导航栏菜单栏

    "CSS+Div+JS实现简单导航栏菜单栏"是一个基础但实用的主题,它涵盖了网页布局、样式设计以及交互功能的实现。接下来,我们将深入探讨这三个关键技术在创建导航栏菜单栏中的应用。 首先,CSS(层叠样式表)是用于...

Global site tag (gtag.js) - Google Analytics