HTML学习日志.docx

HTML学习日志01.HTML简介 HTML(Hyper Text Mark-up Language超文本标记语言)，标记就是用来描述网页内容的一些特定符号，HTML不是编程语言，而是一种描述性的标记语言，用于描述网页中内容的显示方式，比如文字以什么颜色、大小来显示，这些都是利用HTML标记来实现的. HTML文档的创建方式: 用HTML语言创建的文档 手工直接编写(例如记事本) 通过图形化的HTML开发软件Dreamweaver 由Web服务器上的动态网页程序生成 标记也称为标签或元素.02.HTML语法 HTML最基本的语法是: 内容 标记符通常都是成对出现的，有一个开头标记和结束标记，结束标记只是在开头标记的前面加一个斜杠/，当浏览器打开html文件后，就会理解里面的标记符，然后把标记符对应的功能表达出来。例如: 文字内容 制作一个html网页文件: 新建一个记事本的文件，命名为 *.html 在文件里面输入内容 HTML标记的类型: 单标记与双标记 单标记: 单一型，无属性值: 如: 单一型，有属性值: 如: 双标记 无属性值: . 如: . 有属性值: . 如: . 说明: 标记与属性、属性之间以空格分隔 属性不区分先后顺序，且属性不是必需的. 虽然在HTML中标记不区分大小写，但在XHTML中所有标记都必须小写，所以建议所有标记都采用小写.03.HTML文档结构 所有的网页文件，通常由四对标记来构成文档的骨架: 标题 正文 说明: . 标识网页文件的开始与结束，所有的html元素都要放在这对标记中. . 标识网页文件的头部信息，如标题、搜索引擎关键字等. . 标识网页文件的标题 . 标识网页文件的主体部分04.注释 注释格式: 05.头部(head)标记 meta标记用于定义文件信息，对网页文件进行说明，便于搜索引擎查找。放置于之间. 设置关键字: 多个关键字内容之间可以用,分隔. 设置描述: 设置作者: 设置字符集: 设置页面定时跳转: 06.主体(body)标记 在HTML4.01中，所有body元素的呈现属性均不被赞成使用。 在XHTML1.0 Strict DTD中，所有body元素的呈现属性均不被支持。07.字符格式 功能 标记 加粗 文本 倾斜 文本 加强语气(加粗) 文本 加强语气(倾斜) 文本 下划线 文本 删除线 文本 上标 文本 下标 文本 说明 如果标记的内容比较重要，可以在语义上加权 文章网页的主题推荐使用. 网页的段落文字推荐使用.08.段落控制标记 . 段落标题说明: x取值1-6 hx内的文本会自动加粗显示 hx针对的对象是段落，而font针对的对象是任意文本.09.换行 : 换行(换行不换段)10.修饰标记 : 线条 属性名称 属性值 说明 size 像素 绝对设置，以数字表示，属性值越大，线越粗 百分比 相对设置，以%表示，属性值越大，线越粗 width 像素 绝对设置，长度不会应视窗的改变而改变 百分比 相对设置，长度会应视窗的改变而改变 noshade=noshade 实体线 在xhtml中，所有的标签都必须要用属性值，如果没有，使用属性名。 例如: 11.特殊标记 定义一个块引用: 使用文本缩进 格式: . 属性名称 属性值 说明 cite url 被引用的地址 居中标记. (已废弃) 预格式化. 不加此标记会忽略所有空格和制表符。 常用在表示源代码.12.XML的特殊符号(转义符号) 空格   版权号 © 注册符号 ® " & & >13.列表的标记 列表标记可以创建一般的无序列表，编号列表，以及定义列表三种方式，还可以在一种列表中嵌套另一种列表。便于概括显示一系列相关的内容。 利用列表可以做排行榜. (1)无序列表 . 内容1 内容2 . 说明: 表示一个项目. 项目符号类型: disc circle square (2)有序列表 . 内容1 内容2 . 说明: type 1 表示以1,2,3,4来表示 a 表示以a,b,c,d来表示 A 表示以A,B,C,D来表示 i 表示以i,ii,iii来表示 I 表示以I,II,III来表示 (3)定义列表 . 标题1 内容1 内容2 标题2 内容1 内容2 . 14.图片 图片标记: 图片的路径: 绝对路径: 提供目标文档的完整主机名称、路径信息及文档全称. 相对路径: 从当前文档开始的路径. 如果当前文档和目标文档位置平行，则直接书写目标文档全称. 如果当前文档和目标文档所在文件夹位置平行，则书写为: 文件夹名称/目标文档全称. 如果当前文档所在的文件夹和目标文档位置平行，则书写为: ./目标文档全称. 根相对路径: 从站点根目录开始的路径，以/开头. 图片标记属性 属性 属性值 说明 src URL 图片的路径 alt 文本 规定图片的替代文本图片无法显示时 title 文本 鼠标悬停时显示的内容 width 像素/百分比 设置图片宽 height 像素/百分比 设置图片高 border 数字 设置图片边框 align left 图片靠左，文字靠右 right 图片靠右，文字靠左 top 文字垂直居上靠 middle 文字垂直居中 bottom 文字垂直居下(默认) vspace 像素 定义图象顶部和底部的空白(垂直边距) hspace 像素 定义图象左侧和右侧的空白(水平边距)15.表格 因为表格中可以包含任何内容，所以在使用DIV+CSS之前，网页设计师是使用表格对网页内容进行排版与布局的. 表格标记基本结构: . 定义表格 . 定义表行 . 定义表列(单元格) . 定义标题栏(文字加粗，居中) 表格属性: 设置表格的背景色 设置表格的背景图片 设置边框的宽度，若不设置此属性，则边框宽度默认为0. 设置表格单元格边框与其内部内容之间空间的大小，默认为2(表格边距) 设置表格单元格之间空间的大小，默认为2(单元格间距) 设置表格边框的颜色 设置表格边框亮部分的颜色(当border的值大于等于1时才有用). 设置表格边框暗部分的颜色(当border的值大于等于1时才有用). 设置表格的对齐方式(left=左，center=居中，right=右). 设置表格的宽度，单位用绝对像素值或总宽度的百分比. 设置单元格的宽度 设置单元格的高度 设置单元格的背景颜色 设置单元格的背景图片 设置单元格的水平对齐方式 设置单元格的垂直对齐方式 设置行合并的数目 设置列合并的数目 设置在单元格中不换行 表格标签下的边框设置 属性名称 属性值 说明 frame void 不要显示表格的边线 above 只显示出表格的上边线 below 只显示出表格的下边线 hsides 只显示出表格的上下边线 vsides 只显示出表格的左右边线 lhs 只显示出表格的左边线 rhs 只显示出表格的右边线 border/box 显示出表格的所有线 rules rows 只显示出横行的格框线 cols 只显示出直行的格框线 all 显示全部格框线 groups 表示列组合水平部分 none 不显示任何格框线 表格的结构化 . - 表头区 . - 表体区 . . - 表尾区 直列化格式(设置列单元格格式) . 属性名称 属性值 说明 align left 靠左 center 靠中 right 靠右 valign top 靠上 middle 靠中 bottom 靠下 span 数字 直列数 bgcolor 颜色 背景颜色 个别直列设置 功能完全和一样16.超级链接 一个网站是由多个网页组成的，网页之间都是通过链接实现相互关联的.通过链接实现由当前文档到目标文档的一种跳转. 链接语法: 显示内容 打开链接窗口的形式: _blank在新窗口中打开 _self在自身窗口中打开(默认值) _parent在上一级窗口中打开，框架会经常使用 _top在浏览器的整个窗口中打开，忽略任何框架 链接重要的使用原则，不许是回路，有去有回，优化，加相关链接 链接分类: 站内链接: 站外链接: E-mail链接: 局部链接(锚点链接): 可以跳转到某个页面或其他文档中的指定位置. 创建锚点: 显示内容 链接锚点: 显示内容 空链接: 显示内容 设为首页: 设为首页 添加收藏: 加入收藏夹 脚本链接: 是一种特殊的链接，当单击设置脚本链接的文本或图像时，可以运行相应的JavaScript. 常用的脚本链接: 网易 关闭窗口: 输入javascript:window.close() 打开窗口: 输入javascript:window.open(文件名)17.表单 表单的作用是从访问您的web站点的用户那里获得信息.访问者可以使用诸如文本域、列表框、复选框以及单选按钮之类的表单元素输入信息，然后单击某个按钮提交这些信息.是客户端与服务器交流信息的途径. 表单标记 form标记用于创建一个表单，定义表单的开始与结束，它是一个容器，用于包含其他表单元素，例如文本框、单选框等，表单元素必须入在form标记内才有作用. 表单元素 属性method的值说明 POST方法可以传递大量信息 GET方法将附加到请求该页的URL中，适合传递少量信息(默认方式) 如果没有设置method属性，默认处理表单数据的方法是GET. 说明: 所有的表单元素，都必须要放置在表单标签中 所有的表单元素，以input为例，必须包含type属性与name属性 有些表单元素的属性是相似的. 还有一些非input元素作为表单元素. 常用表单元素标记 单行文本框: 密码框: 单选框: 复选框: 标签(标记)元素: 标签(标记)内容 标签为input元素定义标签(标记)，标签的for属性应当与相关元素的id属性相同: 例: 男 列表框: (1)下拉菜单式 列表1 列表2 . 分组: optgroup label=分组名称 列表1 列表2 . (2)多行列表式 列表1 列表2 . 浏览框 按钮: 按钮类型: submit(提交按钮) reset(重置按钮) button(普通按钮) 图片按钮: 隐藏域: 多行文本框: 表单外框: .: 定义围绕表单中元素的边框,用在标签里面 .: legend元素为fieldset元素定义标题.18.多媒体. FLASH动画的两种方式插入方式: (1)使用.标记插入FLASH动画: . (2)通过网页工具dreamweaver自动生成代码 网络流媒体视频的插入: embed src=URL allowFullScreen=true quality=high width=480 height=400 align=middle allowScriptAccess=always type=application/x-shockwave-flash 企业视频推广思想 (1)上传到所有可以上传的视频网站. (2)在自己的企业网站中加入分享代码.19.滚动字幕 滚动字幕 direction=滚动方向 left(左) right(右) up(上) down(下) behavior=滚动方向 scroll(循环滚动) slide(只滚动一次) alternate(来回滚动) loop=滚动的循环次数 若未指定则循环滚动(loop=infinite) bgcolor=背景颜色 width=宽度 height=高度 onmouseover=this.stop() onmouseout=this.start() scrollamount=滚动速度 数值越大速度越快 scrolldelay=延时 (走走停停)20.框架 写框架(frameset)时不需要写body标记 框架标记: 框架做作流程(以左右框架为例) 先做主框架文件main.html 再分别制作包含文件left.html与right.html 通过框架技术，将left与right包含到主框架文件main.html中，主框架文件不需要写body标记 对每个被包含的框架指定名称: 如果还需要其他文件，须制作其他文件，例read.html,write.html. 在被包含的框架文件中指定链接，用target属性指定要在哪个框架中打开. 写信 写信 框架的链接操作 标记有一个属性target，默认是在自身窗口打开目标URL. 如果链接指向的目标是一个框架中的区域，必须要给这个区域起个名称 内嵌式框架: 21.XHTML XHTML(The Extensible HyperText Markup Language，可扩展标记语言)XHTLM是HTML向XML过渡的一个桥梁，XHTML是基于HTML的，这是更严密、代码更整洁的HTML版本. HTML发展: 1999 HTML4.01 2000 XHTML1.0 2008 HTML5 XHTML1.0与HTML的区别: XHTML标签必须被正确地嵌套 XHTML标签必须被关闭 XHTML标签名必须用小写字母 XHTML属性名必须小写，必须有值，值必须加引号22.DOCTYPE DOCTYPE(Document Type,文档类型)，主要用来说明你用的XHTML或者HTML是什