HTML学习笔记(43页).doc

《HTML学习笔记(43页).doc》由会员分享，可在线阅读，更多相关《HTML学习笔记(43页).doc（43页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、-目录1、页面主体格式和页面效果1【标记中还可以设置一些属性】12、页面链接1【外部链接】1【内部链接】1【邮件链接】23、表格2【表格的基本形式】2【有通栏的表格】3【表的大小，边框宽度，表格间距】4【表格中文本的输出】4【表格在文件中的位置定义】5【表格颜色】5【输入标题】6【标题属性】6【划分段落】64、HTML页的文字效果7【字体大小】7【字体风格】7【字体颜色】8【闪烁】8【水平线】8【滚动字符】9【清单（列表）】10【插入图像】12【设置图像布局】125、什么是 CSS14【如何在HTML中应用CSS】14【内定义CSS】16【文本间CSS】17【CSS的基本语法】18【字体属性】

2、19【颜色和背景属性】19【定义文本间距】20【预排版标记】21【插入背景音乐】216、表单与页面控件22【表单标记】22【写入标记】22【 的属性】22【单行的文本输入区域】23【按钮】23【复选框】24【隐藏区域】24【输入密码的区域】24【单选按钮类型】25【使用图像来代替Submit按钮】25【下拉列表框】26【可以输入多行的文本框】271、页面主体格式和页面效果 【标记中还可以设置一些属性】2、页面链接 【外部链接】新浪网 【内部链接】原理：在欲链接处做个记号，链接时就寻找个这记号。内部链接就是网页中的书签。格式：书签内容 例如，先定义一个标签a，然后找到“标签名”这个标签，就可编写

3、如下代码： 书签内容单击此处监视浏览器调到“标签a”处【邮件链接】访问者单击电子邮件链接时，将打开默认的电子邮件编辑软件 。格式：清华IT在线 3、表格【表格的基本形式】表格，一般用于对网页的内容进行排版。一个表格由标记开始，结束，表的内容由,和定义，标记所标记的单元格的文字以粗体出现，通常用于表格的标题栏 。例子：编号名称价格(元)001语文教材20.00【有通栏的表格】1. 有横向通栏的表格用属性说明；2有纵向通栏的表格用属性说明。横向通栏示例：图书信息【表的大小，边框宽度，表格间距】 1表的大小用width=#和height=#属性说明； 2边框宽度由border=#说明 ；3表格间距即

4、划分表格的线的粗细用cellspacing=#表示。 表格的粗细示例： 【表格中文本的输出】 1文本与表框的距离用cellpadding=#设置 ；2表格的宽度大于其中的文本宽度时，文本在其中的输出位置用“align=#”定义； 3表格的高度大于其中文本的高度时，可以用valign=#说明文本在其中的位置。 （#是top，middle，bottom，baseline四者之一。分别表示顶端对齐、居中对齐、底部对齐、基线对齐） 文本与表框的距离示例： 表格的高度大于其中文本的高度示例：001语文教材20.00【表格在文件中的位置定义】 表格与文件中内容对齐时，若在现在位置上不能满足其对齐方式，可定

5、义其位置，以满足对齐要求，属性一般由align=left、right或center指定 。例如：【表格颜色】表格的颜色用bgcolor=#指定，#是16进制的6位数，格式为rrggbb。例如：、【输入标题】一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标记，其中n为标题的等级。HTML提供6个等级的标题，n越小，标题的字号就越大。【标题属性】 left 标题居左； center 标题居中； right 标题居右另外可以有对齐属性，align#【划分段落】标记对用来创建一个段落，在此标记对之间的文本按照段落的格式显示在浏览器上。HTML将多个空格以及回车等效为一个空格，HT

6、ML的分段完全依赖于分段标记。也可以有多种属性，比较常用的属性是：align# ，#可以是：left,、center,、right 标记用来创建一个回车换行。4、HTML页的文字效果 【字体大小】 html有七种字号，1号最小，7号最大。默认字号为3 。设置文本的字号有两种办法：一种是设置绝对字号， 另一种是设置文本的相对字号； 【字体风格】【物理风格VS逻辑风格】：物理风格：黑体，斜体，下划线，打字机体逻辑风格：强调、特别强调、源代码、例子、键盘输入、变量、定义、引用、较小、较大 、上标、下标。几种字体风格示例：设置字体风格黑体斜体下划线打字机风格强调加重【字体颜色】 用指定 #可以是6位1

7、6进数，分别指定红、绿、蓝的值 也可以是black，olive，teal，red，blue，maroon，navy，gray，lime，fudrsia，white，green，purple，sliver，yellow，aqua之一 【闪烁】 标记对可使文本闪烁，闪烁频率为秒钟一次。（在Mozilla Firefox 2.0中通过，某些浏览器不支持）【水平线】一般用于分隔同一文体的不同部分起到美观的作用。 【滚动字符】在HTML页中可以用标记对实现文字的滚动。滚动字符的属性：l 标记对中的各种属性来改变滚动字符的效果。可选的参数有： align：是设定活动字幕的位置：居左、居中、居右、靠上（al

8、ign=top）和靠下（align=bottom）。 Bgcolor：设定活动字幕的背景颜色，一般是十六进制数。 Direction：设定活动字幕的滚动方向是向左、向右、向上、向下。 Behavior：设定滚动的方式，主要由三种方式：behavior=“scroll”表示由一端滚动到另一端；behavior=“slide”:表示由一端快速滑动到另一端，且不再重复； behavior=“alternate”表示在两端之间来回滚动。 Height：设定滚动字幕的高度。 Width：设定滚动字幕的宽度。 Hspace和vspace：设定滚动字幕的左右边框和上下边框的宽度。 Scrollamount：

9、设定活动字幕的滚动距离。 scrolldelay：设定滚动两次之间的延迟时间。 Loop：用于设定滚动的次数，当loop=-1表示一直滚动下去，直到页面更新 【清单（列表）】 l 清单用于列举信息，常用的清单有3种格式： 无序清单（unordered List） 有序清单（ordered list） 定义清单（definition list） l 作用类似 word 中的项目编号和符号。无序清单 ： 无序清单用开始，每一个清单条目用引导，最后是 ；输出时每一清单条目缩进，并且以黑点标示 。有序清单 ：有序清单与无序清单相比，只是在输出时清单条目用数字标示，以开始结束。 有序清单有序清单条目标记

10、：有序清单条目标记的缺省值是阿拉伯数字，可以用type属性修改。方法为：“#”的取值有如下几种类型：“#”取值为“A”，显示大写字母。“#”取值为“a”，显示小写字母。“#”取值为“I ”，显示大写罗马数字。“#”取值为“i”，显示小写罗马数字。“#”取值为“l ”，缺省值，显示阿拉伯数字。 【插入图像】HTML采用的图像格式有gif、jpg、png 3种，在网页中插入图像时，必须使用HTML的标记。格式为： 【设置图像布局】/Body【“border=# ” 属性用来设定图片边框厚度】 【align=# 属性：】此属性用来调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底部、

11、 左右等，可选值：top, middle, bottom, left, right，内定为bottom。 【alt=属性：】 此属性是用以描述该图形的文字，若用户使用文字浏览器，由于不支持图片，这些文字会代替图片而被显示。若在支持图片显示的浏览器，当鼠标移至图片上该些文字亦会显示 ： 【热点】标记主要用于图像地图，通过该标记可以在图像地图中设定作用区域（又称为热点），这样当用户的鼠标移到指定的作用区域点击时，会自动链接到预先设定好的页面。其基本语法结构如下： 5、什么是 CSS CSS就是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的新技

12、术 ，例如：H1 font: 16pt;text-align:center; color: red /*设定字体大小为16pt,居中显示,红色前景色*/P font-weight: bold; color: green /*设定字体粗细为bold,绿色前景*/ l 样式的好处就是，可以一次设置，多次使用，类似模板的作用【如何在HTML中应用CSS】我们可以利用下列3种方式将CSS指定的格式加入到HTML中： 1外部连结 CSS ：在HTML文件里加一个超级链接，连接到外部的CSS文档。 2内定义CSS，在HTML文件内的.标签之间，加一段CSS的描述内容。 3文本间CSS:在 HTML 文件的

13、文本内容中,随时有需要，随时加一小段 CSS 的描述指定风格。【外部连结 CSS】在HTML文件里加一个超级链接，连接到外部的CSS文档。方便管理整个网站的网页风格，让网页的文字内容与版面设计分开 外部连结 CSS 注意：style.css 文件的位置 【使用外部的CSS】卜算子.咏梅 驿外断桥边，寂寞开无主。 已是黄昏独自愁，更著风和雨。 无意苦争春，一任群芳妒。 零落成泥碾作尘，只有香如故。 【内定义CSS】 在HTML文件内的.标签之间，加一段CSS的描述内容。 这个方法适用于指定某个网页，除了表现外部的 CSS 文档定义好的网页风格外，同时还要表现本身HTML文档内指定的CSS 。注意

14、：如果内在添加的CSS描述与外部连接的CSS描述相冲突的话，网页的表现将以内在添加的CSS描述为主,也就是外部的描述就不再起作用了。 内定义CSS l1 值得注意的是,为了防止不支持CSS的浏览器误将标签间的CSS风格描述当成普通字串而表现于网页上,您最好将CSS的叙述文字插入在之间。【文本间CSS】在 HTML 文件的文本内容中,随时有需要，随时加一小段 CSS 的描述指定风格； 这个方法适用于指定网页内的某一小段文字的呈现风格。 文本间CSS 驿外断桥边，寂寞开无主。 已是黄昏独自愁，更著风和雨。 无意苦争春，一任群芳妒。 零落成泥碾作尘，只有香如故。 【CSS的基本语法】CSS的定义是由

15、三个部分构成：选择符（selector）属性（properties）属性的取值（value）body color: black 设置页面颜色。示例：Ptext-align: center; 段落排列居中color: black; 段落中文字为黑色 font-family: arial字体是arial 【字体属性】l 这是最基本的属性，您经常都会用到。它主要包括以下这些属性【颜色和背景属性】CSS下的颜色和背景属性：红色前景色【定义文本间距】l CSS下文本属性分段标记换行标记注意：标记只有开始标记，没有结束标记 【预排版标记】【插入背景音乐】l 是否在下载完之后自动播放。6、表单与页面控件l

16、表单标记l 写入标记l 下拉列表框l 可以输入多行的文本框【表单标记】表单在Web网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能 。表单是由窗体和控件组成的。格式：【写入标记】在html语言中,标记具有重要的地位，它能够将浏览器中的控件加载到html文档中。标志用来定义一个用户输入区，用户可在其中输入信息。标志中共提供了九种类型的输入区域，具体是哪一种类型由type属性来决定 。【 的属性】1单行的文本输入区域： 2按钮 ： 3复选框： 4隐藏区域： 5密码输入区： 6单选按钮类型： 7使用图像来代替Submit按钮 ： 【单行的文本输入区域】属性及说明：(1)name

17、定义控件名称 (2)value指定控件初始值, (3)size指定控件宽度 (4)maxlength表示该文本输入框允许输入的最大字符数 (5)onchang 当文本改变时要执行的函数 (6)onselect 当控件被选中时要执行的函数 (7)onfocus 当文本接受焦点时要执行的函数 单行的文本输入区域实例： 【按钮】1.普通按钮： 2. 提交到服务器的按钮： 当这个按钮被点击时，就会连接到表单form属性action指定的url地址 3. 重置按钮 ： 可将表单内容全部清除【复选框】checkbox用于多选,有以下属性：【隐藏区域】用户不能在其中输入，用来预设某些要传送的信息。例如： 【

18、输入密码的区域】当用户输入密码时，区域内将会显示“*”号。属性 ： name 定义控件名称。 value 指定控件初始值,该值就是浏览器被打开时在文本框中的内容。 size 指定控件宽度,表示该文本输入框所能显示的最大字符数。 maxlegnth 表示该文本输入框允许用户输入的最大字符数。【单选按钮类型】radio用于单选，有以下属性：当为单选项时，所有按钮name属性必需相同。如：都设置为abc。【使用图像来代替Submit按钮】图像的源文件名由src属性指定，用户点击后，表单中的信息和点击位置的X、Y坐标一起传送给服务器 。属性：name 指定图像按钮名称。src 指定图像的url地址【下拉列表框】标志对用来创建一个菜单下拉列表框。此标志对用于标志对之间 。请选择最喜欢的女歌星:张曼玉王菲田震那英【可以输入多行的文本框】用来创建一个可以输入多行的文本框 ，此标志对用于标志对之间。属性：您的意见对我很重要:请将意见输入此区域第 43 页-