文档章节

html 1

穆子淼
 穆子淼
发布于 2014/06/18 13:50
字数 1584
阅读 25
收藏 1

课程安排

 

Html + css 四天

 

Html是什么

1. html (hypertext mark-up language)是 超文本标记语言主要的用处是做网页可以在网页上显示 文字、图像、视频、声音

<input type=text name=xxx/>

 

 标记==元素 

简单说明一下动态网页的示意图:

 

 

Html历史

 

 

 

1999 html--  xhtml (xhtml 可以理解成就是html的加强版) -&agrave;xml

 |

2008 html5.0

 

W3c的介绍

是一个制定标准的组织 比如 给 html ,xhtml ,css ,xml , wml制定标准)

 

 不同的浏览器,去访问同一个网页,可能看到的效果是有差别!->hack

 

Html的运行原理

Hello.html

Html的运行有两种方式

 

Html文件的基本结构

 

<html>

<head></head>

<body></BODY>

</html>

 

1.本地运行

 

所谓本地运行就是直接用 浏览器打开

 

 

 

2. 远程访问

 

 

何为协议计算机互相通信(网络)的规则. 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的命名规范

 

 

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: hanshunping@tsinghua.org.cn">联系管理员</a>

 

 

图片:

 

 

<img src=图片的路径/该图片也可是一个url width=宽度 heigth=高度/>

 

Html的表格元素

在以前对网页布局要求不高的情况下,使用 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>

 

无序列表

<ul>

<li></li>

</ul>

 

案例:

 

代码:

<ul type="circle">

<li>英雄</li>

<li>精武门</li>

<li>西游记</li>

</ul>

 

 type 可以取 disc 、 circle 、 square

 

 

有序列表 

  

代码:

 

<ol type="I" >

<li>卢俊义</li>

<li>吴用</li>

<li>林冲</li>

</ol>

 type用于指定用什么来显示, start 表示从第几开始计算.

 

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>

 

 该页面不能有bodybody

 

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>




© 著作权归作者所有

共有 人打赏支持
穆子淼
粉丝 2
博文 17
码字总数 22519
作品 0
昌平
符合SEO的nginx url规则配置

server { charset utf-8; clientmaxbody_size 128M; listen 80; server_name www.aa.com aa.com; index index.html index.htm index.php; root /home/wwwroot/default/aa; if ($host = "aa.c......

happy_limit
2016/11/28
26
0
40个Android源码学习实例

1.高仿京东商城源码 http://www.apkbus.com/android-115203-1-1.html 2.抽屉demo http://www.apkbus.com/android-115205-1-1.html 3.仿微信二维码名片源码 http://www.apkbus.com/android-11......

boonya
2016/07/15
53
0
一周拾遗:30多个物联网应用创意合集

一周拾遗:只为关注物联网的你。如有你感兴趣的内容,但一周拾遗未展示的,可发送邮件至workshop@gizwits.com,没准下周就有你想看的内容啦。 物联网应用创意看不完: 智能云签 http://club....

物联网小能手
2016/12/14
281
0
android开发之第三方集成之OAUTH教程篇

微博作为新兴的一项网络工具,在某种意义上讲实现了把世界变小的作用。足不出户,也变成了现实。作为程序员我们更加关注的是为我所用。幸好的是微博运行商为我们提供了丰富的接口,我们可以善...

长平狐
2012/08/21
1K
0
Arduino教程汇总

原始链接:Arduino教程汇总贴 (有更新) 初识arduino http://www.arduino.cn/thread-1083-1-1.html 常见arduino版本比较 http://www.arduino.cn/thread-1192-1-1.html arduino驱动安装方法 ht......

小堤
2013/05/26
23K
15

没有更多内容

加载失败,请刷新页面

加载更多

下一页

jetbrains系产品IDEA:mac上面提示快捷键设置

原因 由于Mac上面的Ctrl+空格变成输入法切换的快捷键,在使用IDEA的过程中,代码提示很不方便,需要使用option+/这种传统eclipse上面的代码提示快捷键作为主要快捷键。 怎么修改? 移除【opt...

亚林瓜子
31分钟前
0
0
Exclipse 输出结果时换行

System.out.println(f1 + "\n" + d1 + "\n" + d2);

笑丶笑
31分钟前
1
0
怎样治疗标签不能触发onblur事件

I realize this was over a year ago, but it showed up for me in Google while trying to solve this same issue. It seems Chrome does not consider some elements, like body and ancho......

Weijuer
34分钟前
0
0
vue常见库安装

移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件,才有了FastClick。 安装fastclick npm insta...

林夏夕
36分钟前
0
0
kafka 教程(三) kafka Java API 编程

下午写

MrPei
37分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部