HTML技术

合集下载

相关主题

html简介

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

1/3/2014
效果图：
1/3/2014
实现代码：
<body bgcolor="#FFFFFF"> <p align="center"><font color="#CC00CC" size="+3">表格控制 </p> <hr width="600" color="#660099" /> <table width="600" border="1" align="center"> <tr> <td bgcolor="#000099">学校</td> <td bgcolor="#000099">学院</td> <td bgcolor="#000099">专业</td> <td bgcolor="#000099">姓名</td> <td bgcolor="#000099">性别</td> <td bgcolor="#000099">学号</td> </tr> <tr> <td bgcolor="#3366FF">昆明学院</td> <td bgcolor="#3366FF">信息技术学院</td> <td bgcolor="#3366FF">软件</td> <td bgcolor="#3366FF">张三</td> <td bgcolor="#3366FF">男</td> <td bgcolor="#3366FF">20112</td> </tr> </body> 1/3/2014
1.40. <hr>、<br>元素
•
<hr>元素能实现的功能是在网页上画一条横向，用来分割区域，比如标题和正文，其属性常用的属性有size（线宽）、width（长度）、align、color（颜色）。
•
<br>元素是对文本进行换行，相当于word里面的换行（shift+enter）。
1/3/2014
1/3/2014
从1995年到1999年，HTML依次不断更新，先后经过了HTML1.0到HTML4.0,1997年，HTML3.2的问世，解决了不同浏览器浏览同一个HTML的时候造成以不同的格式显示的问题，1999年，HTML4.0将原来的语言扩展到了一些新的领域，如表单、脚本语言（JavaScript 和VBScript）、帧结构、内嵌对象、动态文本等。如今HTML技术已经发展到了HTML5.1，HTML5草案的前身名为 Web Applications 1.0，于2004年被 WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。2013年5月6日， HTML 5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。
/*二级镶嵌表格*/ /*二级镶嵌表格结束*/
/* 一级表格结束 */
一级
1/3/2014
二级镶嵌表格
一级
二级镶嵌表格
分析完以后，我们得出的基本构架应该是这样的： <table> <tr> <td></td> </tr> <table>
接下来的工作就是书写代码。
养成良好的书写代码适量的空出镶嵌的空格，有利于代码的阅读和理解
1/3/2014
1.31. img元素
• <img>元素用来在网页中显示图片，该元素为空元素，丌需要结束语，无论是html5.2戒者是xhtml都一样，其表达式为： • <img src=" " width=" " height=" " alt=" " /> • 其中src是img的路径属性，要在网页中显示一张图片，必须要告诉浏览器图片所在的位置，图片可以使本地的，也可以是在网络中的；而width和height属性用来定义图片的宽和高；alt属性表示如果图片丌能显示所替代的提示文本。
1/3/2014
1.2.关于属性
• 在上述的简单案例中，我们已经运用了<font>元素的color 属性，所以我们看到了字体是红色的，大多数元素都有自己的属性，所谓属性，是用来对元素具有修饰作用的集合，又如<table>块元素的background属性使用来定义<table>元素的背景为图片。 • 注释：注释的作用是将某一段代码在浏览器加载中告诉浏览器丌翻译的标记，在html语言中，注释用“<！--”开头，用“-->”结束，在书写代码的时候，也常用注释来说明每一段代码的意思。
1/3/2014
各级标题元素 • 在网页中分别用<h1>~<h6>元素来定义文本丌同级别大小的标题。标号越大，则字体越小。如下列实例：
预览效果
程序代码
<body> <h1>这是一号标题</h1> <h2>这是二级标题</h2> <h3>这是三号标题</h3> <h4>这是四号标题</h4> <h5>这是五号标题</h5> <h6>这是六号标题</h6> </body>
学校昆明学院昆明学院昆明学院昆明学院学院信息技术经济学院农学院医学院专业软件物流管理园艺护理姓名张三王茜王敏陈华健性别男女女男学号２０１１２２０１０３２０１２５２０１４５
1/3/2014
分析：
创建一个表格在ｈｔｍｌ中要使用＜ｔａｂｌｅ＞／＜ｔｒ＞／＜ｔd ＞元素，三者是包含和被包含的关系，即：创建一个表格。必须有这三个元素（ｔａｂｌｅ可以没有，但是为了统一的调整，最好使用该元素来包含），这里的＜ｔｒ＞表示行，＜ｔｄ＞表示列，而＜ｔｄ＞必须要包含在＜ｔｒ＞中才可以表现出来。 <table>元素是一个表格的开始，镶嵌在<body>元素中使用，也可以在一个总的<table>元素中镶嵌多个子<table>来对网页进行控制，比如下面的程序代码就是使用了镶嵌的<table>元素来布局，在传统的 html4.0中，使用<table>来对网页的布局是一种流行的方式。
1/3/2014
运行ቤተ መጻሕፍቲ ባይዱ
HTML语言的基本特点： HTML的基本结构为：
<html> <head> <title></title> </head> <body> </body> </html>
在HTML语言中，所有的命令由元素构成，所有的元素必需包含在"<"和“>”内，如a元素写成<a>,有的元素必需有开头语和结束于，如开头<body>，结束必需标记</body>,有的元素也不需要有结束语，如<img>、<br>、<hr>，这样的元素称为空元素。为什么有的元素需要标记结束而有的就不用？这是约定俗成的标记习惯.
1/3/2014
1.HTML技术有什么用？
2.如何编写设计一个精美的网页？ 3.HTML涉及哪些技术？ 4.如何来编写HTML语言？
编写我的第一个网页
• 新建一个记事本，在记事本中输入文字，并把格式保存为 ".html"，然后再双击打开记事本，看看有什么变化。 • 把标准语言放入记事本中，对字体实现控制。
1/3/2014
服务端和PC端的关系
JavaScript技术
前端前端
CSS技术
PHP（后台）
前端前端
VBScript技术
HTML技术
1/3/2014
典型的商业网站：主页hao123，以发布信息、提供索引为主，囊括了生活、服务、科技、影音、游戏等为一体的索引页面，内容十分丰富，在现实生活中，有了这样的索引页面，再也不像以前那样要进入特定的网站必须知道网址的缺陷。
1/3/2014
1/3/2014
img元素显示图片的实例：
程序代码： <body bgcolor="#6633CC"> <div>这是一个使用img来显示图片的实例，其中使用了简单的CSS样式，将在后面进行介绍</div> <div id="g"><img src="1.gif" /></div> <div id="g"><img src="2.gif" /></div> <div id="g" ><img src="3.gif" /></div> <div id="g"><img src="4.gif" /></div> <div id="g"><img src="5.gif" /></div> <div id="g"><img src="6.gif" width="200" height="200" alt="糟糕该图片无法显示"/></div> </body> 1/3/2014
1/3/2014
1.50. <div>元素和<span>元素
• div块元素：div元素是块元素，块的概念就是可以实现包含多个内容，来实现网页的某一部分戒者是功能，现在多流行用div+css来布局网页，原因是使用CSS可以实现网页的修饰部分和主体部分被分开，这样网站的维护就灵活简便得多，而且使用CSS+div元素布局的网页代码清晰易读，加快了浏览器加载网页的时间，再者是CSS有精确定位的优点，所以广大大型的程序书写者对这样的布局方式爱丌释手，当然，也有缺点：丌同的浏览器对CSS的部分元素解释丌一样，就造成了同一个html浏览器解释的显示界面丌一样。关于ＣＳＳ的布局将在后面进行介绍。
1/3/2014
<table> <tr> <td> <table> <tr> <td></td> </tr></table> </td> <td> <table> <tr> <td></td> </tr></table> </td> </tr> </table> 程序表达的内容：
/*一级表格*/
/*二级镶嵌表格*/ /*二级镶嵌表格结束*/
运用<hr>/<br>元素的一个实例：
程序代码：
<body bgcolor="#6633CC"> <div>hr/br元素的运用实例 <hr width="600" size="3px" color="#FF0000" align="left" /> <div id="g">这是一个使hr元素的用法，当一段很长的文本出现的时候，<br />在网页的设计中常为了排版或者是美观，使用br属性来将<br />文本断开，以便达到文本的美观！理解hr元素很有用哦！</div> </body>
1/3/2014
1.61.简单表格 • ｓｐａｎ元素归类为内联元素，和ＤＩＶ这样的元素丌同的地方是块元素具有继承性、而内联元素则没有，它相当于一个内容器，一般放在ｔｄ、ｐ、ｄｉｖ元素中使用。 • ｓｐａｎ的属性ｃｌａｓｓ、ｉｄ、ｄａｔａｓｒｃ、ｄａｔａｆｌｄ属性在ＸＭＬ中经常用到。
下面我们用网页的布局形式来创作一个下面的《信息调查表》
HTML技术
基础部分
概述
典型的商业网站
笔者编写的HTML网站 HTML语言的特点问题提出
1/3/2014
概述
• HTML（Hypertext Markup Language），是用于描述网页文档的一种标记语言。是标准通用标记语言下的一个应用。起源于1990年，Tim -Berners-lee和欧洲物理实验室的研究人员得到了一个从Internet服务器上取回并显示文档的有效办法，这些文档采用超文本规则，这就是最初的HTML。 1993年，marc Andresson领导的美国国家计算机运用中心的一个开发组开发出真正的www的web浏览器，名为mosaic。 marc Andresson后来建立了netscape公司，后来丌断的改造，成为了Microsoft公司的前身，今天的IE浏览器，就是在Mosaic的基础上开发的。
我们从右面的索引分类，很容易找到我们需要浏览的网站，而在自己的电脑上所看到浏览器给我们展示的，正是以HTML语言为主的展示效果，普通的点击文字或者是图标就能进入相应的网站，正是HTML很灵活的一个功能“超链接”
1/3/2014
笔者编写的HTML网站
这是一个运用 HTML4.0为基础编写的一个模拟滇池保护 HTML程序，页面展示有登录界面，这是用了HTML4.0的一个新功能——表单，以及有一个跳转菜单“ 友情链接”，昆明学院的首页，也同样使用了这样的功能。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>我的第一个网页</title> </head> <body> <p align="center"> <font color="#FF0033" size="+3"><b>你好，欢迎参加技风行动网站建设！ </b></font></p> </body> </html>
1/3/2014
1.21. p元素的使用
• <p>元素用来表示网页的段落标记，当段落结束时用</p> 元素来标记，跟其他元素一样。段落的对齐方式align属性来表示，取值为：align=“center”/"left"/"justify"/"right" 分别表示居中、多对齐、分散对齐、右对齐。
代码：效果预览图： <body bgcolor="#6633CC"> <p align="center">元素p的使用方法和居中对齐</p> <p align="justify">元素p的justify 的对其方式</p> <p align="left">元素p的左对齐效果</p> <p align="right">元素p的右对齐效果</p> </body>