html语言课件
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
HTML的文档结构
<html>
头部区域
<head> <title>最简单的网页</title>（可见） </head> <body>
html网页 eg06 主体区域
怎么样？ 简单吧？ （可见） </body>
</html>
HTML的基本语法
• <标记名>文本</标记名> 例如： <title>最简单的网页</title> eg06
代码：<div align=left> Can you feel happiness without unpleasant? <br> Please show me your smile.</div> 显示： Can you feel happiness without unpleasant? Please show me your smile.
eg18
③ <font face=“#, #, ..., #”> ... </font> （#=客户端可获得的字体） <font face=“宋体"> Hellow World!</font> 显示：Hellow World! 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
（4）<h#> ... </h#>标记 (#=1, 2, 3, 4, 5, 6)：标题字体标记 使用方法：eg17 <h1>今天天气真好！</h1> 显示： 今天天气真好！ <h2>今天天气真好！</h2 > 显示： 今天天气真好！ <h3>今天天气真好！</h3 > 显示： 今天天气真好！ <h4>今天天气真好！</h4 > 显示： 今天天气真好！ <h5>今天天气真好！</h5 > 显示： 今天天气真好！ <h6>今天天气真好！</h6 > 显示： 今天天气真好！ 属性说明： <hn>---</hn> 这些标记显示黑体字。 <hn>---</hn> 这些标记自动插入一个空行，不必用 <p> 标记再加空行。 因此对文字标题设置时，在一行中无法使用不同大小的字体。 （5）<font > ... </font>标记 ：普通字体标记 属性扩展： ①<font size=#> ... </font>字体大小（ #=1, 2, 3, 4, 5, 6, 7 or +#, -#） 使用方法：
代码： <div align=center> eg28 Can you feel happiness without unpleasant? <br> Please show me your smile. </div> 显示： Can you feel happiness without unpleasant? Please show me your smile.
代码：默认左对齐<p align="center">居中对齐<p align="right">右对齐
显示： 默认左对齐 居中对齐
右对齐
eg26 ③ <center>...</center> 通用居中对齐 代码： <center>希望还在听</center> 显示： 希望还在听 eg27
（11）文字的分区显示 <div align=#> ... </div> (#=left,center,right )
（10）文字对齐标记
① <hn align=#>...</hn>(#=left,center,right )标题的对齐 代码：<h1 align=“center”>大家还在听课么？</h1> 显示：
大家还在听课么？ eg25
②<p align=#>...</p> (#=left, center, right )段落的对齐
(三)、 <body>…</body>标记（网页体部） （1） <body>…</body>标记属性： ① <body bgcolor=# 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 ② <body background="image-URL"> 网页整体背景图象 eg12
HTML
语言
学习进度表
1、html代码(上) p1—p15 2、html代码(下) p16—p36 3、js代码 (上) 4、js代码 (下) 5、复习总结 3学时 3学时 3学时 3学时 3学时
HTML入门
• HTML英语意思是：Hypertext Marked Language，即超文 本标记语言 • 以文本文件为基础，添加一系列标记描述其格式、颜色等 属性，加上图片、音视频、动画，通过浏览器解释，形成 精彩画面。eg01 • 通过HTML可以表现出丰富多彩的设计风格 • 通过HTML可以实现页面之间的跳转.eg02 • 浏览器解释html从上到下、从左到右逐句解释.eg03 • 所有的网页都以HTML为基础，可嵌入其他语言。 • 文件的扩展名为.html 或 .htm eg04 eg05
（8）字符实体标记 使用方法： &#; #=字符实体名称 或者 ascii 值 & & < < > > " " 空格符 在dreamweaver 中快捷键为 ctrl+shift+空格键 ©
eg21
综合练习：标记的组合使用
<i><font size=5> <b>今天</b> 天气<font size=6> 真好！</font> </font></i> 显ቤተ መጻሕፍቲ ባይዱ：
今天 天气 真好！
<h1><a href="http://www.sohu.com" target="_blank">今天天气真好</a></h1> <hr align="center" width="500" size="4" noshade color="#FF0000"> <br> <u><font color="#006633" face="黑体" size="5">今天天气真好！</font></u> <hr align="left" width="300" size="1" color="#FF9900"> <i><a href="ok.htm" target="_self" >好！郊游去！</a></i> 显示：
③ <body leftmargin=# topmargin=# > 页面左边的空白 、页面上方的空白(天头) eg13未加入 eg14加入
（2）<a href=“URL” target=“…”> …</a>标记：链接标记 属性说明1：url指定此链接指向的文件名及文件路径，文件类型广泛， 一般为其他网页文件。 路径分为相对路径（物理）和绝对路径（网 址）。标记之间指定了具有链接的元素，可以是文字，图片等. 文字链接实例：<a href=“samp/link.html”>链接的例子</a> 图片链接实例：<a href=“www.sohu.com”><img src=“123.gif”></a> 属性说明2： target属性指定链接出现在哪类窗口 target=“_blank ” 以新建窗口的方式打开连接。 target=“_self ” 在当前窗口中打开连接。 eg15 （３） <hr> 标记：标尺线 ①<hr size=3> ②<hr width=150> 或 <hr width=50%> ③<hr align=left> 或 <hr align=right> ④<hr noshade> ⑤<hr color=#0000ff> 或 <hr color="red"> eg16 #=rrggbb 16 进制 RGB 数码，或者是下列预定义色彩： Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
（3）<meta >标记 <META http-equiv=Content-Type content="text/html; charset=gb2312"> 标识网页文档编码 ---简体中文 其它语言字符集(Charsets): iso-8859-1 、 big5 、x-euc-jp 、 euc-kr <META content=通化师范学院 name=description> <META content=吉林，通化，大学，师范 name=keywords> <META content=all name=robots> eg09 （4）<script>…</script>标记 <script src=“abc.js”></script> eg10 在当前网页里载入一个abc.js文件 （5）<STYLE>…</STYLE>标记 eg10 在此标记之间定义本网页的css样式
• <标记名 属性名=“属性值”>文本</标记名>
例如： <body bgcolor=“red”>背景红色</body > eg07 • <标记名 > 例如： 我想学做网页<br>是呀！我也想学! eg07
HTML的常用标记
(一)、<html>…</html>标记（网页全体） 用于标识当前文档为html网页。网页内容以<html>开始</html>结束 以下所有标记或标记对都必须嵌于此标记中。 (二)、 <head>…</head>标记（网页头部） （1）<title>…</title >标记 浏览器窗口的标题栏中显示的文字，即网页标题 （2）<link >标记 <link href="DefaultSkin.css" rel="stylesheet" type="text/css"> 用于载入外部CSS文件 eg08
小结：
1、标记多数必须以成对形式出现。 2、标记都有很多扩展的属性。 3、标记间可以灵活嵌套 嵌套内的标记不得有未封闭的标记对。 4、注意网页的区域性
（9）行控制标记
① 段标记 (可以看作是空行) <p>
代码：你好吗？<p>很好。
显示：你好吗？ 很好。 eg24 快捷键：在dreamweaver中直接按下 回车键 ②换行标记 <br> 代码：你好吗？<br>很好。 显示：你好吗？ 很好。 eg24 快捷键：在dreamweaver中按下 shif+回车键 . 效果类似word中的回车
<font size=#> ... </font>控制字体大小
<font size=6>今天天气真好！</font > <font size=5>今天天气真好！</font > <font size=4>今天天气真好！</font > <font size=3>今天天气真好！</font > <font size=2>今天天气真好！</font > <font size=1>今天天气真好！</font > ② <font color=#> ... </font>字体颜色 显示： 今天天气真好！ 显示： 今天天气真好！ 显示： 今天天气真好！ 显示： 今天天气真好！ 显示： 今天天气真好！ 显示： 今天天气真好！