html 1
课程安排
Html + css 四天
u Html是什么
1. html (hypertext mark-up language)是 超文本标记语言, 主要的用处是做网页, 可以在网页上显示 文字、图像、视频、声音…
<input type=”text” name=”xxx”/>
☞ 标记==元素
简单说明一下动态网页的示意图:
u Html历史
1999 html-- xhtml (xhtml 可以理解成就是html的加强版) -àxml
|
2008 html5.0
u W3c的介绍
是一个制定标准的组织 ( 比如 给 html ,xhtml ,css ,xml , wml…制定标准)
☞ 不同的浏览器，去访问同一个网页，可能看到的效果是有差别!->hack
u Html的运行原理
Hello.html
Html的运行有两种方式
Html文件的基本结构
<html>
<head></head>
<body></BODY>
</html>
1.本地运行
所谓本地运行就是直接用 浏览器打开
2. 远程访问
l 何为协议? 计算机互相通信(网络)的规则. ftp smtp pop http
远程访问的原理示意图:
☞ 这里我们涉及到http协议，这里我们没有深入讲解， 但是这是一个非常重要的知识点.
Html的基本结构
<html>
<head>
<元素 属性1=”值” …./>
</head>
<body>
<元素 属性1=”属性值” 属性2=“属性值” …>内容</元素>
<元素 属性=”属性值”/>
</body>
</html>
说明
1. 标记通常是成对出现 <head></head>
2. 单标记 <br/>
案例:
Demo1.htm
<html>
<head></head>
<body>
<b>横看成林</b><br/><br/>
<font color="red">远近高低各不同</font><br/>
<!--size 值可以取 1..7 -->
<font style="font-size:30px;">不知庐山真面目</font><br/>
</body>
</html>
面试: 请问 后缀 html 和 htm 有什么区别?
答: 1. 如果一个网站有 index.html 和 index.htm 默认情况下，优先访问 .html
3. htm 后缀是为了兼容以前的dos 系统 8.3的命名规范
u html符号实体
说明：当我们在网页中有一些特殊字符时候，可以考虑使用字符实体(char entity)
超链接的案例:
<br/>*****************<br/>
<a href="a.html" target=”_self,_blank,_top,_parent”>连接到a.html</a><br/>
<!--如果我们希望在点击该超链接后，就跳转到外网的某个地址，则应当写完整的url-->
<!--url 统一资源定位-->
<a href="http://www.baidu.com">跳转到百度</a><br/>
<a href="mailto: [email protected]">联系管理员</a>
图片:
<img src=”图片的路径/该图片也可是一个url” width=”宽度” heigth=”高度”/>
u Html的表格元素
l 在以前对网页布局要求不高的情况下，使用 table 布局(即使用表格来显示数据，同时用于布局)
快速入门:
<html> <body> <table align="center" height="10px" bgcolor="yellow" border="3px" width="400px"> <!--tr表示一行--> <tr align="center"> <td>1</td> <td>2</td> <td>3</td> </tr> <tr align="right"> <td>2</td> <td align="center">4</td> <td>5</td> </tr> <tr> <td>3</td> <td>9</td> <td>10</td> </tr> <tr> <td>3</td> <td>9</td> <td>10</td> </tr> </table> </body> </html>
应用案例 ：
1. 确定行
代码 如下:
<html> <body> <!-- <table align="center" height="10px" bgcolor="yellow" border="3px" width="400px"> <!--tr表示一行 <tr align="center"> <td>1</td> <td>2</td> <td>3</td> </tr> <tr align="right"> <td>2</td> <td align="center">4</td> <td>5</td> </tr> <tr> <td>3</td> <td>9</td> <td>10</td> </tr> <tr> <td>3</td> <td>9</td> <td>10</td> </tr> </table>--> <table height="150px"> <tr><td></td></tr> </table> <!--显示菜单--> <table border="1" align="center" bordercolor="#E76BFF" height="225px" cellpadding="1px" cellspacing="0px" width="400px" > <tr> <!--colspan="3" 表该列要占用三列--> <td align="center" colspan="3">菜谱</td> </tr> <tr> <td rowspan="2">素菜</td> <td>青草茄子</td> <td>花椒扁豆</td> </tr> <tr> <td>小炒韭菜</td> <td>白豆腐</td> </tr> <tr> <td rowspan="2">荤菜</td> <td>清蒸龙</td> <td>鱼香肉丝</td> </tr> <tr> <td>小炒肉 <img src="dog.jpg" width="70px" /></td> <td>水煮肉片</td> </tr> </table> </body> </html>
课堂练习:
<html> <title>俺第一个实例</title> <head> </head> <body> <Center> 成绩表 </center> <br/> <!--表格--> <table align="center" align="center" bordercolor="579AFE" height="10px" border="3px" width="500px"> <tr align="center"> <td>项目</td> <td colspan="5" align="center">上课</td> <td colspan="2" align="center">休息</td> </tr> <tr bgcolor="pink" align="center"> <th>星期</b></th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <th>星期六</th> <th>星期日</th> </tr> <tr align="center"> <td rowspan="4" align="center">上午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>英语</td> <td>物理</td> <td>计算机</td> <td rowspan="4" align="center">休息</td> </tr> <tr align="center"> <td>数学</td> <td>数学</td> <td>地理</td> <td>历史</td> <td>化学</td> <td>计算机</td> </tr> <tr align="center"> <td>化学</td> <td>语文</td> <td>体育</td> <td>计算机</td> <td>英语</td> <td>计算机</td> </tr> <tr align="center"> <td>政治</td> <td>英语</td> <td>体育</td> <td>历史</td> <td>地理</td> <td>计算机1</td> </tr> <tr></tr> <tr align="center" > <td rowspan="2" >下午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>英语</td> <td>物理</td> <td>计算机</td> <td rowspan="2">休息</td> </tr> <tr align="center"> <td>数学</td> <td>数学</td> <td>地理</td> <td>历史</td> <td>化学</td> <td>计算机</td> </tr> </table> </body> </html>
u 无序列表
<ul>
<li></li>
</ul>
案例:
代码:
<ul type="circle">
<li>英雄</li>
<li>精武门</li>
<li>西游记</li>
</ul>
☞ type 可以取 disc 、 circle 、 square
u 有序列表
代码:
<ol type="I" >
<li>卢俊义</li>
<li>吴用</li>
<li>林冲</li>
</ol>
☞ type用于指定用什么来显示, start 表示从第几开始计算.
u Frameset框架集
用途主要是用于分割显示多个页面
☞ framest 和 frame 配合使用，一般讲是用于后台页面
快速入门:
代码
A2.html 页面用于保护其它页面
<frameset cols="30%,*">
<frame name="frame1" src="b.html" noresize frameborder="0"/>
<frame name="frame2" src="c.html" frameborder="0"/>
</frameset>
☞ 该页面不能有body和body体
b.html
<body bgcolor="pink">
<!--target表示我们点击后，目标指向谁-->
<a href="zjl.html" target="frame2">周杰伦</a><br/>
<a href="qq.html" target="frame2">齐秦</a><br/>
</body>
☞ target 属性值有四个
_blank : 表示打开一个全新的页面
_self: 替换本页面
_top:
_parent:
* 还有一个就是在 target 值中直接写对应的那个 frame的名字.
c.html:
<body bgcolor="silver">
歌词大全
</body>
其它页面
Frameset的综合小案例:
结构示意图:
案例
All.html <frameset rows="20%,*"> <frame src="top.html" scrolling="no"/> <frameset cols="20%,*"> <frame src="left.html" noresize frameborder="0" /> <frame src="right.html" name="myframe" frameborder="0"/> </frameset> </frameset> Top.html <img src="title.JPG"/> Left.html <body bgcolor="pink"> <ul> <li><a href="zjl.html" target="myframe">青花瓷</a></li> <li><a href="qq.html" target="myframe">当兵的人</a></li> </ul> </body> Right.html <body bgcolor="silver"> 歌词大全 </body>