html新手内部培训保密资料.ppt

html标记语言基础培训,培训内容：html 培训时间: 2012.3.31,网站结构,1. 网站分为前台显示和后台管理 2. 前台就是用户可以看到的页面，大致分为 主页、列表页、文章页、特殊页（页面之间互相链接）。 3. 后台用于管理前台显示及属性应用，用户看不到，只有管理与特殊授权人员才能看到。 网站的组成部分：域名（网站地址） 空间（网站内容存放的位置）,什么是 html？, html 指的是超文本标记语言 html 不是一种编程语言，而是一种标记语言 标记语言是一套标记标签 html 使用标记标签来描述网页,html文档的结构, 欢迎进入 html 世界 这会是一种很有趣的体验 ,html文档的头部信息(head),html头部信息(head)里包含关于所在网页的信息。头部信息(head)里的内容，主要是被浏览器所用，不会显示在网页的正文内容里。 标题(title)是最常用的head信息。它不显示在html网页正文里，显示在浏览器窗口的标题栏里。 提供关于网页的信息 这是标题 ,代码简介,概念:网站代码又称网站源代码或网站源码，我们可以把它理解成源文件代码，网页其实是由一大堆的源代码组成，通过我们的浏览器（或服务器）翻译成现在我们所看到的这个样子。,源码类型,asp、php、jsp、.net、cgi等。动态源码最大的特点就是能够和用户之间互动。比如说网易的信箱，张三登陆的时候，会看到欢迎光临张三；李四又登陆了，李四又看到欢迎光临李四。其实他们两个人登陆的是一个页面，这个就是动态源码的好处。html是静态源码，不能实现以上功能。,html 标签,html 标记标签通常被称为 html 标签 html 标签是由尖括号包围的关键词，比如 html 标签通常是成对出现的，比如 和 标签对中的第一个标签是开始标签，第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签,html里的超链接,html用来表示超链接 可以指向任何一个文件源：一个html网页，一个图片，一个影视文件等。用法如下： 链接的显示文字 点击当中的内容，即可打开一个链接文件，href属性则表示这个链接文件的路径。,html里的绝对路径和相对路径,html有2种路径的写法：相对路径和绝对路径。 html相对路径(relative path) 同一个目录的文件引用 如果源文件和引用文件在同一个目录里，直接写引用文件名即可 这是一个链接 如何表示上级目录 /表示源文件所在目录的上一级目录，/表示源文件所在目录的上上级目录，以此类推。 如何表示下级目录 引用下级目录的文件，直接写下级目录文件的路径即可,相对路径,internet上资源相对于当前页面的地址，它包含从当前 页面指向目的页面位置的路径 例如：public/example.htm 使用相对url的好处在于 当用户需要移植站点时，只要保持站点中各资源的相对位置不变，就可以确保移植后各页面之间的超链接仍能正常工作。 用户在编写网页时，通常使用的都是相对url(除非需要引用外部网页) 如果在网页中需要指定内部资源，应使用相对url 相对url本身并不能唯一地定位资源，但浏览器会根据当前页面的绝对url正确地理解相对url。,绝对路径,html绝对路径(absolute path)指带域名的文件的完整路径。 新浪站点链接,绝对路径,internet上资源的完整地址，包括完整的协议种类、计算机域名和包含路径的文档名 其形式为： 协议:/计算机域名/文档名 例如： /public/html/example.htm http表示用来访问文档的协议的名称 表示文档所在计算机的域名 public/html/example.htm 表示文档名 如果在网页中需要指定外部intemet资源，应使用绝对url 说明 省略了最后部分文件名的url通常也认为是绝对url， 因为它能够完全定位资源的位置 例如，就是一个绝对url,说明,说明 在url中，总是使用正斜杠(/)作为路径分隔符，而不是使用windows或dos中的反斜杠()。 在客户端，点击不同类型的链接时，会自动启动相应的客户端软件来访问相应的资源。 句点(.) 当前目录 双重句点()上一级目录(父目录) 例如 ./image.gif表示当前目录中的imagegif文件，相当于image.gif； /public/index.htm表示与当前目录同级的public目录下的index.htm文件，也就是当前目录上一级目录下的public目录中的index.htm文件,html图片(images),用 这个 tag 可以在html里面插入图片。最基本的语法如下： url表示图片的路径和文件名。比如 url 可以是 images/logo/blabla_logo01.gif，也可以是个相对路径 “/images/logo/blabla_logo01.gif“。,html图片属性,图片align属性 用align属性，可以改变水平对齐方式(居左、居中、居右)。 用valign属性，可以改变图片的垂直(居上、居中、居下)对齐方式图片的大小 在缺省状况下，图片显示原有的大小。你可以用height和width属性改变图片的大小。不过图片的大小一旦被改变，图片会相应放大或缩小，显示出来的结果可能会很难看。,html背景的属性,html的 有两个关于背景的属性， bgcolor属性 bgcolor属性用来设置html网页的背景颜色。 background属性 background属性用来设置html网页的背景图片。background属性值就是背景图片的路径和文件名，如果背景图片小于网页显示窗口，那么这个背景图片会自动重复。,html表格,html表格用表示。 一个表格可以分成很多行，用表示； 每行又可以分成很多单元格，用表示。 这三个tag是创建表格最常用的tag。,html布局,html 123 45 6 789 ,html字体,在html里，可以用font这个元素及其属性来设定字体的大小，颜色和字体风格。 字体大小 用字体大小属性(size)来设定字体的大小。示例代码如下： 这一段的字体大小的值是2。 字体风格 用face属性来设定字体风格。示例代码如下： 这一段的字体风格是arial。 字体颜色 用颜色属性(color)来设定字体颜色。,html表单,html表单(form)是html的一个重要部分，主要用于采集和提交用户输入的信息。 举个简单的例子，一个让用户输入姓名的html表单(form)。示例代码如下：,html常用代码,功能性定义代码 1)贴图： 2)加入连接：写上你想写的字 3)字体加粗：写上你想写的字 4)字体控制大小：写上你想写的字 (其中字体大小可从h1-h5,h1最大，h5最小) 5)更改字体：写上你想写的字 6)换行： 7)段落：段落 8)列表：第一列第二列,html里的超链接,链接的target属性 使用链接的target属性，可以在一个新窗口里打开链接文件。 链接的title属性 使用 链接的title 属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。,html里的列表格式,1.有序列表（ordered list） 定义：一种在表的各项前显示有数字或字母的缩排列表 列表项 1 列表项 2 列表项 3 ol标记符的属性： type设置数字序列样式 start 设置数字序列的起始值, 值可以是任意整数 当位于 ol 标记符内时，li 标记符的属性： type 设置数字样式，取值与 ol 的 type 属性相同 value 设置一个新的数字序列起始值，以获得非连续性的数字序列, 有序列表示例 用大写罗马字母表示的有序列表： 列表项1 列表项2 列表项3 起始数字为 3 的有序列表： 列表项1 列表项2 列表项3 编号不连续的有序列表 列表项1 列表项2 列表项3 变换了数字样式的有序列表 列表项1 列表项2 列表项3 ,有序列表,使用有序列表嵌套可以获得不同层次的编号列表。嵌套时，只需将内层列表作为外层列表的一个列表项即可。列表的嵌套层数没有限制。 嵌套的有序列表 嵌套的有序列表 列表项 1 子列表项 1 子列表项 2 子列表项 3 列表项 2 列表项 3 ,有序列表的嵌套,无序列表,定义：一种在表的各项前显示有特殊项目符号的缩排列表。 无序列表标记符 ul 标记符的 type 属性控制列表项前特殊符号的显示 列表项标记符 li 标记符的 type 属性的值如下表所示：, 无序列表示例 默认无序列表： 列表项1 列表项2 列表项3 使用方块作为列表项标记的无序列表： 列表项1 列表项2 列表项3 ,无序列表,html常用代码,一般布局用代码 1)层： 2) 表格： 3)表格的行和单元格：第一行第一个格子第二个格子 4)框架（一个特定的窗口）： 框架集 5)表单： ,字体控制标记符 ,size 属性控制字符的大小size=“ “ 字号从17,字号越大，默认值为3 color属性控制字符的颜色color=“ “ 使用颜色名称或十六进制值指定颜色 face 属性指定字体样式face =“ “ 常用的英文字体有“times new roman”、“arial”等 常用的中文字体有“宋体”、“楷体”等 例子： 例子一 例子二 例子三 例子四,html 注释,在html文件里，你可以写代码注释，解释说明你的代码，这样有助于你和他人日后能够更好地理解你的代码。 注释可以写在之间。浏览器是忽略注释的，你不会在html正文中看到你的注释。 ,注意,始终为属性值加引号 属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号 例如：name=bill “helloworld“ gates,/ 杭州人