《HTML学习笔记.doc》由会员分享，可在线阅读，更多相关《HTML学习笔记.doc（38页珍藏版）》请在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【字体属性】1
2、9【颜色和背景属性】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将多个空格以及回车等效为一个空格，HTM
6、L的分段完全依赖于分段标记。也可以有多种属性，比较常用的属性是：align# ，#可以是：left,、center,、right 标记用来创建一个回车换行。4、HTML页的文字效果 【字体大小】 html有七种字号，1号最小，7号最大。默认字号为3 。设置文本的字号有两种办法：一种是设置绝对字号， 另一种是设置文本的相对字号； 【字体风格】【物理风格VS逻辑风格】：物理风格：黑体，斜体，下划线，打字机体逻辑风格：强调、特别强调、源代码、例子、键盘输入、变量、定义、引用、较小、较大 、上标、下标。几种字体风格示例：设置字体风格黑体斜体下划线打字机风格强调加重【字体颜色】 用指定 #可以是6位16
7、进数，分别指定红、绿、蓝的值 也可以是black，olive，teal，red，blue，maroon，navy，gray，lime，fudrsia，white，green，purple，sliver，yellow，aqua之一 【闪烁】 标记对可使文本闪烁，闪烁频率为秒钟一次。（在Mozilla Firefox 2.0中通过，某些浏览器不支持）【水平线】一般用于分隔同一文体的不同部分起到美观的作用。 【滚动字符】在HTML页中可以用标记对实现文字的滚动。滚动字符的属性：l 标记对中的各种属性来改变滚动字符的效果。可选的参数有： align：是设定活动字幕的位置：居左、居中、居右、靠上（ali
8、gn=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地址【下拉
19、列表框】标志对用来创建一个菜单下拉列表框。此标志对用于标志对之间 。请选择最喜欢的女歌星:张曼玉王菲田震那英【可以输入多行的文本框】用来创建一个可以输入多行的文本框 ，此标志对用于标志对之间。属性：您的意见对我很重要:请将意见输入此区域38 区入意 0 = 重对的 性间之标 / 田 王 曼曼 = 歌欢喜请 之标 于框列单个来志标 息的要设用，在域区藏性属以于 框清全单可 = ：器交 户输= 例域输数函执点本 数的要选控当 数函要改当 数字的输入文表 度件定 ,始件定 称件义 明说及域入文 = ：输 域 框 钮 = ：输的性属 决属 种体具输类了共志 息息输可区入用来标“ 中档 载控器览能位重具
20、 记 = = = 式的组控由 能交页，信客而息写者给页 本的入表 . 乐音背记记记标没标有记 记 故故只作。芳任春 : 。和著愁。主寂桥 : 目 : = 和更自黄 开边外驿 = 【0 0 _ 0 _ 效和格主 0 0_ 现字 文一网指 法个格定 述 一 随需有0容内的 0 间0和 !在文内的 最,网而字当描 间将 览 不为是 0 ; - 了用再述外就主述的在将表，的述 的部述 添内 定指 身表时外风的定 部了页某指适。内的 一间 。香作泥。芳一春。和更自独。主寂，” 咏.” = 部置的 = 开分设内文网格的网整档档 外，级一加文 连格定描 一随要随,本的 本。内的 一之标 . 内文 ，义。档
21、外到链级加 连： 加的指将式下以 应 作板类，多次可就/景绿 为粗定/ ; : *色红显, 为字* ; : 如，术的制种它称简式“翻中 就 是 = ：如法面的设到链自击用定到标用样热称区定设图以该，像用记 点 照虫张 显字文图标当览的图示示图替文这支不览浏使若的该描用】性 0 = 。 为 , , , 值可等部间、的图现控可，的边图用：性# 】厚边定用 # 00= 0= = 局局图地 ：记 使，像页， 、 像用像图。字阿，值 “字马小显 值字数写显 为母写示 值取母母显”值型类几取# 为法修 可数拉是的条记标 清有 。 始示字单出输比清与 单 标以，缩清 用中页符字。用观起不文隔分 持不览某中.
22、 次次频烁文使 烁一 ， ， ， ， 值值、指分进 是指 色颜 = = = /线 /斜 /黑 例格标 、上 较 、 、 量 盘 例 代 、特 强格机字 线划格】辑风格风 字本文 ，字绝法办有本 为字。 小 种 】大果效页 行车个来用 、, , ：可 是属的比属以记段赖完段 一效及格个上览示式段本间记此段建创标/落落 属齐 居标 ；居标 左题 性属题大越字题 ，级 级的为其，记标的了 结节章副有章题题 例度高中于 = = ：的表）齐、对、对对示别之 ， ， 。中文# 以时高中其的；定” “用的其，度文于宽格 = 离距本】出文 = 例示。表 用的的即格 说= 度；明属 大】距，宽小 /息 例示明性
23、# 表通纵明性属 表栏横格表 0. /教文 / 元格 名 编 子 题格表通出以文的所标 定 和 ,由的束结 版行内的对般式基表线 ”. = 软件子认将时邮电单接接 ”标器视此击”# 标= ：代如就签这签到然标义先/称书 签书页就号记寻就，个链接链/浪 : 接链接接性些一可记 果效和主 】文多以 00_ 】框【 _ 0_ 按 来使 0 _ 0 _ 钮选 _ 0 0 _ 区入【 00 0 】藏 0 _ 复 0 【 _ _ 】区输的 0 0 的 【 _ 记写 】 平 0 _ 0 _ 0 _ 字 0 0 格字 0 _ 0 _ 小字 _ 0 效字 】划 0 0 】题 000 _ 00 题输 0 0 _ 色颜 义位件格 0 _ 出输格表 00 0 格宽，小 0_ _ 格的【0 0 0 _ 式本表 0 00 0 _ 0 】链 0 _