html语言课件

HTML语言学习进度表1、html代码(上)p1—p153学时2、html代码(下)p16—p363学时3、js代码(上)3学时4、js代码(下)3学时5、复习总结3学时HTML入门•HTML英语意思是：HypertextMarkedLanguage，即超文本标记语言•以文本文件为基础，添加一系列标记描述其格式、颜色等属性，加上图片、音视频、动画，通过浏览器解释，形成精彩画面。eg01•通过HTML可以表现出丰富多彩的设计风格•通过HTML可以实现页面之间的跳转.eg02•浏览器解释html从上到下、从左到右逐句解释.eg03•所有的网页都以HTML为基础，可嵌入其他语言。•文件的扩展名为.html或.htmeg04eg05HTML的文档结构htmlheadtitle最简单的网页/title（可见）/headbody怎么样？简单吧？（可见）/body/htmlhtml网页eg06头部区域主体区域HTML的基本语法•标记名文本/标记名例如：title最简单的网页/titleeg06•标记名属性名=“属性值”文本/标记名例如：bodybgcolor=“red”背景红色/bodyeg07•标记名例如：我想学做网页br是呀！我也想学!eg07HTML的常用标记(一)、html…/html标记（网页全体）用于标识当前文档为html网页。网页内容以html开始/html结束以下所有标记或标记对都必须嵌于此标记中。(二)、head…/head标记（网页头部）（1）title…/title标记浏览器窗口的标题栏中显示的文字，即网页标题（2）link标记linkhref=DefaultSkin.cssrel=stylesheettype=text/css用于载入外部CSS文件eg08（3）meta标记METAhttp-equiv=Content-Typecontent=text/html;charset=gb2312标识网页文档编码---简体中文其它语言字符集(Charsets):iso-8859-1、big5、x-euc-jp、euc-krMETAcontent=通化师范学院name=descriptionMETAcontent=吉林，通化，大学，师范name=keywordsMETAcontent=allname=robotseg09（4）script…/script标记scriptsrc=“abc.js”/scripteg10在当前网页里载入一个abc.js文件（5）STYLE…/STYLE标记eg10在此标记之间定义本网页的css样式(三)、body…/body标记（网页体部）（1）body…/body标记属性：①bodybgcolor=#text=#link=#alink=#vlink=#bgcolor---背景色彩text---非可链接文字的色彩link---可链接文字的色彩alink---正被点击的可链接文字的色彩vlink---已经点击(访问)过的可链接文字的色彩#=rrggbb#3333FF色彩是用16进制的红－绿－蓝(red-green-blue,RGB)值来表示。16进制的数码有:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.eg11②bodybackground=image-URL网页整体背景图象eg12③bodyleftmargin=#topmargin=#页面左边的空白、页面上方的空白(天头)eg13未加入eg14加入（2）ahref=“URL”target=“…”…/a标记：链接标记属性说明1：url指定此链接指向的文件名及文件路径，文件类型广泛，一般为其他网页文件。路径分为相对路径（物理）和绝对路径（网址）。标记之间指定了具有链接的元素，可以是文字，图片等.文字链接实例：ahref=“samp/link.html”链接的例子/a图片链接实例：ahref=“”imgsrc=“123.gif”/a属性说明2：target属性指定链接出现在哪类窗口target=“_blank”以新建窗口的方式打开连接。target=“_self”在当前窗口中打开连接。eg15（３）hr标记：标尺线①hrsize=3②hrwidth=150或hrwidth=50%③hralign=left或hralign=right④hrnoshade⑤hrcolor=#0000ff或hrcolor=redeg16#=rrggbb16进制RGB数码，或者是下列预定义色彩：Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,Fuchsia,White,Green,Purple,Silver,Yellow,Aqua（4）h#.../h#标记(#=1,2,3,4,5,6)：标题字体标记使用方法：eg17h1今天天气真好！/h1显示：今天天气真好！h2今天天气真好！/h2显示：今天天气真好！h3今天天气真好！/h3显示：今天天气真好！h4今天天气真好！/h4显示：今天天气真好！h5今天天气真好！/h5显示：今天天气真好！h6今天天气真好！/h6显示：今天天气真好！属性说明：hn---/hn这些标记显示黑体字。hn---/hn这些标记自动插入一个空行，不必用p标记再加空行。因此对文字标题设置时，在一行中无法使用不同大小的字体。（5）font.../font标记：普通字体标记属性扩展：①fontsize=#.../font字体大小（#=1,2,3,4,5,6,7or+#,-#）使用方法：fontsize=#.../font控制字体大小fontsize=6今天天气真好！/font显示：今天天气真好！fontsize=5今天天气真好！/font显示：今天天气真好！fontsize=4今天天气真好！/font显示：今天天气真好！fontsize=3今天天气真好！/font显示：今天天气真好！fontsize=2今天天气真好！/font显示：今天天气真好！fontsize=1今天天气真好！/font显示：今天天气真好！eg18②fontcolor=#.../font字体颜色③fontface=“#,#,...,#”.../font（#=客户端可获得的字体）fontface=“宋体HellowWorld!/font显示：HellowWorld!eg19（6）物理字体标记使用方法：b今天天气真好！/b：以黑体字显示i今天天气真好！/i：以斜体字显示u今天天气真好！/u：以加下划线显示tt今天天气真好！/tt：打字机风格sup今天天气真好！/sup：上标显示sub今天天气真好！/sub：下标显示strike今天天气真好！/strike：删除显示eg20（7）逻辑字体标记使用方法：em今天天气真好！/em：斜体加黑体strong今天天气真好！/strong：加黑code今天天气真好！/code：代码小字cite今天天气真好！/cite：斜体文字small今天天气真好！/small：文字变小big今天天气真好！/big：文字变大eg20（8）字符实体标记使用方法：&#;#=字符实体名称或者ascii值&&<>" 空格符在dreamweaver中快捷键为ctrl+shift+空格键©eg21综合练习：标记的组合使用ifontsize=5b今天/b天气fontsize=6真好！/font/font/i显示：今天天气真好！h1ahref==_blank今天天气真好/a/h1hralign=centerwidth=500size=4noshadecolor=#FF0000brufontcolor=#006633face=黑体size=5今天天气真好！/font/uhralign=leftwidth=300size=1color=#FF9900iahref=ok.htmtarget=_self好！郊游去！/a/i显示：小结：1、标记多数必须以成对形式出现。2、标记都有很多扩展的属性。3、标记间可以灵活嵌套嵌套内的标记不得有未封闭的标记对。4、注意网页的区域性（9）行控制标记①段标记(可以看作是空行)p代码：你好吗？p很好。显示：你好吗？很好。eg24快捷键：在dreamweaver中直接按下回车键②换行标记br代码：你好吗？br很好。显示：你好吗？很好。eg24快捷键：在dreamweaver中按下shif+回车键.效果类似word中的回车（10）文字对齐标记①hnalign=#.../hn(#=left,center,right)标题的对齐代码：h1align=“center”大家还在听课么？/h1显示：大家还在听课么？eg25②palign=#.../p(#=left,center,right)段落的对齐代码：默认左对齐palign=center居中对齐palign=right右对齐显示：默认左对齐居中对齐右对齐eg26③center.../center通用居中对齐代码：center希望还在听/center显示：希望还在听eg27（11）文字的分区显示divalign=#.../div(#=left,center,right)代码：divalign=leftCanyoufeelhappinesswithoutunpleasant?brPleaseshowmeyoursmile./div显示：Canyoufeelhappinesswithoutunpleasant?Pleaseshowmeyoursmile.代码：divalign=centereg28Canyoufeelhappinesswithoutunpleasant?brPleaseshowmeyoursmile./div显示：Canyoufeelhappinesswithoutunpleasant?Pleaseshowmeyoursmile.代码：divalign=rightCanyoufeelhappinesswithoutunpleasant?brPleaseshowmeyoursmile./div显示：Canyoufeelhappinesswithoutunpleasant?Pleaseshowmeyoursmile.（12）列表标记①无序列表ulli.../ul（ul标记一个圆点显示的无序列表，li为表项）代码：ulliTodayliTommorow/ul显示：•Today•Tommoroweg29②制定无序列表中的标记litype=#（#=disk,circle,square）代码：ullitype=discONElitype=circleTWOlitype=squareTHREE/ul显示：ONEOTWOTHREEeg29③有序列表olli.../ol（ol标记一个数字显示的有序列表，li为表项）代码：olliTodayliTommorow/ol显示：TodayTommoroweg29④定制有序列表表中的序号litype