静态web开发和案例html_第1页
静态web开发和案例html_第2页
静态web开发和案例html_第3页
静态web开发和案例html_第4页
静态web开发和案例html_第5页
已阅读5页,还剩23页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、HTML基础如鹏网课程大纲理解什么是HTML了解HTML的发展史掌握HTML编程规范掌握HTML常用标签HTML基本介绍HTML(Hyper Text Markup Language)-超文本标记语言-由浏览器解释执行-编写的超文本文档称为网页XHTML-HTML升级到XML的过渡产品-完全兼容HTML4.01-并且具有XML的语法HTML标签规范HTML是通过标签来定义的语言,代码都是由标签组成。HTML代码不区分大小写。HTML代码由开始结束,里面有头部分和体部分两部分组成。头部分是给HTML页面增加一些辅助或属性信息,它里面的内容会最先加载。体部分是真正存放页面数据的地方。多数标签都是开

2、始标签和结束标签,其中个别标签只有单一功能,或者没有要修饰的内容,可以在开始标签内以 / 结束。想要对被标签修饰内容进行更丰富的操作,就用到标签中的属性,通过对属性值的改变,增加了更多的效果选择。 格式:数据内容HTML开发工具可以使用专业的 HTML 编辑器来编辑 HTML:Adobe DreamweaverMicrosoft Expression WebCoffeeCup HTML Editor不过对于初学者,我们推荐使用文本编辑器来学习 HTML,比如Editplus,Notepad+HTML常用标签-字体字体标签 例:HTML字体标签,常见属性size color,还有其它属性,比如:

3、face标题标签 .特殊字符如果要在网页上显示一些特殊符号,比如 & 等。因为这些符号在代码中会被浏览器识别并解释,所以用一些特殊的方式来表示。&列表标签(1)无序列表 游戏 部门注:ul中 type 属性有三个值 circle|disc|square ,用于规定列表的项目符号,但不赞成使用。有序列表 游戏 部门注:ol中 type 属性同样不赞成使用。如果想做出效果更好的列表,如:黑色圆点用图片表示,就用到CSS。列表标签(2)定义列表(definition list) 游戏 穿越火线英雄联盟 部门 研发部门销售部门 图像标签图像标签 例:src:图像URL地址;border用来设置图像的边

4、框;alt:用来为图像定义一串预备的可替换的文本,不能超过1024字符。表格标签(1)表格标签 用于格式化数据。例: 标题 姓名 年龄 张三20 李四25 表格标签(2)常用属性border:框线粗细 0代表无width:宽度 接收整数值、百分数cellpadding:单元格内容与边框的距离cellspacing:单元格与相邻单元格之间的距离常用属性colspan:合并同行单元格rowspan:合并同列单元格表格标签(3)每个表格可以有一个表头、一个表尾和一个或多个表体 (即正文)THEADTBODYTFOOTTBODY 可以控制表格分行下载,从而提高下载速度(网页的打开是先表格的的内容全部下

5、载完毕后,才显示出来,分行下载可以先显示部分内容,这样会减少用户等待时间)。超链接标签(1)超链接标签 超链接(Hyperlink)可以看做是一个“热点”,它可以从当前Web页定义的位置跳转到其他位置,包括当前页的某个位置、Internet、本地硬盘或局域网上的其他文件,甚至跳转到声音、图片等多媒体文件。浏览Web页是超链接最普遍的一种应用,通过超链接还可以获得不同形态的服务,如文件传输、资料查询、电子函件、远程访问等等,通过超链接实现这些功能就会很方便。超链接标签(2)用法一:超链接 网易href:要打开资源的路径,可以是URL,也可以是本地文件。target:指定在哪个窗口或者帧中打开。有

6、四个值:_blank:在一个新开的空白窗口中打开链接_parent:在父级窗口中打开_self:在自身页面中打开链接(默认)_top:在整个浏览器的最顶端(前端)开始打开链接超链接标签(3)用法二:定位标记 链接到同一文档中的特定位置叫做定位标记(锚链接)。一般在本页面中使用,当网页内容过长,定位标记会比拖动滚动条方便快捷。注:定位标记要和超链接结合使用才有效。示例:标记位置.返回标记位置注释:使用定位标记时一定在href值的开始加入#标记名超链接标签(4)例图:回顶端定位标记点HTML常用标签-框架所谓框架便是网页画面分成几个框窗,框窗里可以集成很多Url(链接地址),方便用户浏览,查看.特

7、别是早期的公司门户网站基本都是这种frame框架。HTML常用标签-框架 框架标记,用以划分框窗框窗标记,设定一个框窗所有框架标记要放在一个总起的 html 档,这个档案只记录了该框架 如何划分,不会显示任何资料,所以不必放入 标记。HTML常用标签-框架常用属性COLS=20%,*:垂直切割画面(如分左右两个画面),接受整数值、百分数,* 则代表占用余下空间。数值的个数代表分成的视窗数目且以逗号分隔。ROWS=120,*:就是横向切割,将画面上下分开,数值设定同上。frameborder=0:设定框架的边框,其值只有 0 和 1 ,0 表示不要边框,1 表示要显示边框。border=0:设定

8、框架的边框厚度,以 pixels 为单位。bordercolor=#999:设定框架的边框颜色。framespacing=5 :表示框架与框架间的保留空白的距离。HTML常用标签-框架常用属性src=top.html:设定此框窗中要显示的网页档案名称,每个框窗一定要对应著一个网页档案。name=top:设定这个框窗的名称,这样才能指定框架来作连结,必须但任意命名。scrolling=auto:设定是否要显示卷轴,YES 表示要显示卷轴,NO 表示无论如何都不要显示,AUTO是视情况显示。noresize:设定不让使用者可以改变这个框框的大小,亦没有设定此参数,使用者可以很随意地拉动框架,改变其

9、大小。HTML常用标签-框架当使用的浏览器太旧,不支援框架这个功能时,他看到的将会是一片空白。为了避免这种情况,可使用 这个标记,当使用者的浏览器看不到框架时,他就会看到 与 之间的提示内容,而不是一片空白。 很抱歉,您使用的浏览器不支持框架功能,请转用新的浏览器。 HTML常用标签-框架它的作用是在一页网页中间插入一个框窗以显示另一个链接资源。它是一个围堵标记,但围着的字句只有在浏览器不支持 iframe 标记时才会显示。 如果您看到该文字,说明您的浏览器不支持IFRAME标签。 HTML语法-表单表单 表单标签是最常用的标签,主要用于采集和提交用户输入的信息,与服务器端进行交互。HTML语

10、法-表单标签:接受用户输入信息type标签指定输入标签的类型,共有10个值:文本框text、密码框password、单选框radio、复选框checkbox、隐藏字段hidden、提交按钮submit、重置按钮reset、按钮button、文件上传file、图像image.标签:定义一个选择列表北京郑州注:定义下拉列表中的选项,属性 selected 没有属性值加在其中一个子项上,该子项就变成默认被选中项。HTML语法-表单标签:多行文本框 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。标签:MaleFema

11、lelabel 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。for的属性值指向绑定表单元素的 id 值。块元素大多数 HTML 元素被定义为块级元素或内联元素。-块级元素块级元素在浏览器显示时,通常会以新行来开始(和结束)。例子:, , , -内联元素内联元素在显示时通常不会以新行开始。例子:, , , DIVHTML DIV 是块级元素,它是可用于组合其他HTML元素的容器。DIV元素没有特定的含义。与CSS一起使用,可用于对大的内容快设置样式属性。元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 元素进行文档布局不是表格的正确用法。 元素的作用是显示表格化的数据。SPANHTML 元素是内联元素,可用作文本的容器。 元素也没有特定的含义,当与 CSS 一同使用时,可用于为部分文本设置样式属性。HTML语法-头标签title:指定浏览器标题栏显示的内容base:标签为页面上的所有链接规定默认地址或默认目标href属性:规定页面中所有

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论