文档章节

html 1

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

课程安排

 

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 ⋅ 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 ⋅ 0

小牛电动的产品质量控制

@token 来,回答问题时间,你有24小时时间做准备。 【残次品】早上收货,不能骑行的,现在已经在修理! http://bbs.niu.com/thread-28442-1-3.html 【残次品】充电器坏,对小牛的售后的解决方...

junanhonglei ⋅ 2015/08/30 ⋅ 1

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 ⋅ 15

android网络通信之socket教程实例汇总

一、socket基础 1、Socket通讯机制(详细),如何将socket通信的客户端与服务器 http://www.eoeandroid.com/thread-61727-1-1.html 2、Http和Socket区别 http://www.eoeandroid.com/thread-9...

程序袁_绪龙 ⋅ 2014/12/11 ⋅ 0

一周拾遗:30多个物联网应用创意合集

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

物联网小能手 ⋅ 2016/12/14 ⋅ 0

超经典!Java入门图文解说!亮瞎你的狗眼!

Java入门专栏 第2课 Hello World! http://bbs.itheima.com/thread-137079-1-1.html?javatbfst 第3课 注释 http://bbs.itheima.com/thread-137082-1-1.html?javatbfst 第4课 变量 http://bbs......

方微雨 ⋅ 2014/08/15 ⋅ 2

apache伪静态规则转nginx伪静态

下面是apache的伪静态,求nginx的伪静态 ErrorDocument 404 /404.html Options +FollowSymlinks RewriteEngine On RewriteBase / RewriteRule ^index.html$ index.php RewriteCond %{QUERY_......

忧郁骑士 ⋅ 2014/02/23 ⋅ 3

shell的高级应用-游戏

[2011-08-10] Shell游戏:迷宫 - by baoyu05 http://bbs.chinaunix.net/thread-3579315-1-1.html [2011-08-11] shell game: Five stone game (五子棋) - by yinyuemi http://bbs.chinauni......

jk409 ⋅ 2015/01/11 ⋅ 0

android开发之第三方集成之OAUTH教程篇

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

长平狐 ⋅ 2012/08/09 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 29分钟前 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 35分钟前 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

Spring 依赖注入(DI)

1、Setter方法注入: 通过设置方法注入依赖。这种方法既简单又常用。 类中定义set()方法: public class HelloWorldOutput{ HelloWorld helloWorld; public void setHelloWorld...

霍淇滨 ⋅ 昨天 ⋅ 0

马氏距离与欧氏距离

马氏距离 马氏距离也可以定义为两个服从同一分布并且其协方差矩阵为Σ的随机变量之间的差异程度。 如果协方差矩阵为单位矩阵,那么马氏距离就简化为欧氏距离,如果协方差矩阵为对角阵,则其也...

漫步当下 ⋅ 昨天 ⋅ 0

聊聊spring cloud的RequestRateLimiterGatewayFilter

序 本文主要研究一下spring cloud的RequestRateLimiterGatewayFilter GatewayAutoConfiguration @Configuration@ConditionalOnProperty(name = "spring.cloud.gateway.enabled", matchIfMi......

go4it ⋅ 昨天 ⋅ 0

Spring clound 组件

Spring Cloud技术应用从场景上可以分为两大类:润物无声类和独挑大梁类。 润物无声,融合在每个微服务中、依赖其它组件并为其提供服务。 Ribbon,客户端负载均衡,特性有区域亲和、重试机制。...

英雄有梦没死就别停 ⋅ 昨天 ⋅ 0

Confluence 6 重新获得站点备份文件

Confluence 将会创建备份,同时压缩 XML 文件后存储熬你的 <home-directory>/backups> 目录中。你需要自己访问你安装的 Confluence 服务器,并且从服务器上获得这个文件。 运行从 Confluence...

honeymose ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部