Day1
●HTML的介绍
HTML是一种标记语言,主要用途是开发网页,使用HTML可以展现文字、图片、视频、声音….HTML是我们进行Web开发(网站开发)的基础。
**标记语言是不通过编译而执行的。
- HTML可以编写静态网页。可以包含文字、图片、动画、声音、链接等。
所谓静态是指能不能和网站进行交互。
网页设计师 = HTML+css+js+flash+美工
●HTML的发展历史
蒂姆—伯纳斯—李(1976年人):【万维网之父,HTML设计者,w3c创始人。
1984年到欧洲原子核研究所工作
1989开发出世界第一个浏览器:局部浏览器。】
1993:HTML第一版
1995:HTML2.0
1996:HTML w3c推荐标准(w3c是制定规范的机构)
1999:HTML4.0.1—>2000 xhtml1.0(扩展的html语言)—>2001 xhtml1.1
2008:HTML5.0
www网: world wide web (万维网、Internet)
●w3c: 制定Web标准的机构
World Wide Web Consortium万维网联盟或W3C理事会,W3C组织是对网络制定标准的一个非赢利组织,像HTML、XHTML、CSS、XML的标准就是由W3C来定制
●HTML的运行原理
(1)本地运行
后缀htm和html区别:兼容DOS
(2)远程访问
你可能有疑问:
- ie是怎样访问到hello.html?(URL) 2、万维网是什么?
在100%的情况下(除了自己开发测试外)都是远程访问html!
快速体验:
我开发hello.html,我放在tomcat(是一个软件,服务器)!!
●HTML开发工具
(1)记事本-à先用记事本
(2)dw
(3)frontpage
(4)vs
(5)myeclipse
(6)其他ide…
●HTML基本结构
不管HTML文件有多复杂,它的基本结构式
<元素 属性=‘属性值’…>内容</元素>
如果没有内容,也可以这样写:
<元素 属性=‘属性值’…/>
<p>段落标记</p>
<font size=#>字体标记</font> size取值为1到7
<h#>标题字体</h#> #=1,2,3,4,5,6
<b></b>字体加粗
●HTML的符号实体
两张表
●HTML的超链接
使用超链接可以使网页链接到另一个页面去
<!--target常见的两个属性值 _blank (开新的页面) _self(替换当前页面)-->
<a href='a.html'target="_blank" >老鼠爱大米</a></br>
<a href='http://www.sohu.com'target="_blank" >访问搜狐</a></br>
<a href='http://www.baidu.com'target="_blank" >访问百度</a></br>
*href是可以链接到外网的。
●HTML图片元素(标记)
<img src='http://www.baidu.com/img/baidu_sylogo1.gif' width=470px border =1/></br>
特别说明:src可以是外部网站的图片
●HTML表格元素(标记)
表格的主要用途是显示数据和图片,并且可以布局。
|
|
|
| |
|
|
|
|
|
|
|
|
|
<table border=1 cellspacing=9(空隙大小)cellpadding="5"(填充大小) bordercolor=red(边框颜色) width = 500px height = 200 align=center bgcolor=yellow><!--tr代表一行td代表一列-->
<tr align=center><td>(1,1)</td><td>(1,2)</td><td>(1,3)</td></tr>
<tralign=center><td>(2,1)</td><td>(2,2)</td><td>(2,3)</td></tr>
<tr align=center><td>(3,1)</td><td>(3,2)</td><td>(3,3)</td></tr>
</table>
*表格元素 名称是table
*tr代表行
*td代表列
*cellspacing空隙大小,指两个列,行间的距离
*cellpadding填充大小,各行各列中的内容被填充,这样就会在一定程度上撑大格子
html代码
<html>
<head>
<!--我们的html内容放在body体-->
<title>第一个网页</title>
<h1>你好</h1>
</head>
<body>
<!--我们的html内容放在body体-->
<b>第一行文字</b><!--b表示加粗-->
<!--颜色也可以用十六进制颜色码-->
<p><font color= red>第二行文字</font></p> <!--换行了-->
<!--注意:p段落换行,是前后都换行-->
<font color = blue size=7>第三行文字</font>
<br/><!--换行标记-->
<font size = 4>第四行文字</font><br/>
*********字符实体案例*********<br/>
<font size = 6>© £ ® </font></br>
**********超链接案例***********<br/>
<!--target 常见的两个属性值 _blank (开新的页面) _self(替换当前页面)-->
<a href='a.html' target="_blank" >老鼠爱大米</a></br>
<a href='http://www.sohu.com' target="_blank" >访问搜狐</a></br>
<a href='http://www.baidu.com' target="_blank" >访问百度</a></br>
<a href="mailto:ge-jq@qq.com" >给管理员写信</a>
</br></br>
*********************图片元素***************</br>
<img src='images/boy.jpg' width=270px /></br>
<!--指定高度后按比例缩放高度-->
<img src='http://www.baidu.com/img/baidu_sylogo1.gif' width=470px border =1 /></br>
*****************表格元素*****************</br>
<table border=1 cellspacing=9 cellpadding="5" bordercolor=red width = 500px height = 200 align=center bgcolor=yellow><!--tr代表一行td代表一列-->
<tr align=center ><td>(1,1)</td><td>(1,2)</td><td>(1,3)</td></tr>
<tr align=center><td>(2,1)</td><td>(2,2)</td><td>(2,3)</td></tr>
<tr align=center ><td>(3,1)</td><td>(3,2)</td><td>(3,3)</td></tr>
</table>
</body>
</html>