HTML网页编程

来源：互联网发布：算法交易 vwap 编辑：程序博客网时间：2024/06/07 08:45

HTML网页编程
前言：
☆静态页面和动态页面
网站页面分为静态页面和动态页面两种
• 静态页面：有一个html页面文件保存在服务器上，浏览器要这个页面的时候服务器就把这个页面文件发给浏览器；
• 动态页面：服务器上没有浏览者要看的页面，而是服务器动态生成的HTML页面发给浏览器，动态语言的服务器端可以用C#、VB.Net、PHP、Java、C等编写。
☆HTML学习要求
掌握手写HTML实现一般难度的Web页面的能力（如网站注册表单），为JavaWeb学习打基础。坚持手写HTML。

HTML是Hyper Text Markup Language的缩写，意思是“超文本标识语言”，它实际上是专门用来编写网页的一种编程语言。大多数网页的构成基础就是HTML的语句。
这里写图片描述
所有页面都应该至少包含这些部分，由于浏览器容错性强，所以即使不包含也能正常显示，但是最好还是写完全了。

接下来进行一些基本标签及语法的演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <title>HTML概述</title>    </head>    <body>        HTML Hello World!!! 湖南城市学院<br/>        一个网页大多由以下要素构成：文字、图片、表格、动画及声音。在这些元素中，文字是十分重要的。下面我们就逐一讲述涉及文字的标记。        字体大小设置演示：<br/>        <small>小字体</small>&nbsp;&nbsp;&nbsp;<big>大字体</big>        <!-- 利用<font size=''></font>标签指定字体的大小 -->        <font size=5>你是我的小丫小苹果</font>        <basefont size="12"><br/>        <!-- 下标签演示-->        5<sub>2</sub>        <!-- 上标签演示 -->        5<sup>2</sup>        <hr/>        <!-- 粗体演示 -->        <b>粗体演示</b>        <!-- 下面的斜体演示好像已经被现在浏览器版本淘汰了，效果已经演示不出来了 -->        <l>斜体演示</l>        <u>加下划线演示</u>        <strike>加删除线演示</strike><hr/>        <!-- 特殊标记的演示 -->        小于号：&lt;<br/>        大于号：&gt;<br/>        "&"号：&amp;<br/>        单引号：&quot;<br/>        特殊R标签：&reg;<br/>        特殊c标签：&copy;<br/>        TM标签：&trade;        <hr color="red"/>        列表是一种条理化地排列信息的方法。它把内容一条条地水平排列显示，直观、清晰。而它也不同于表格，一般列表没有表格复杂。        <dl>            <!-- 两者的区别好像比没有得到很明显的区别！ -->            <dt>上层项目</dt>            <dd>下层项目</dd>            <dd>下层项目</dd>            <dt>上层项目</dt>        </dl>        <br/>        <!-- 下面两个的作用好像并没有得到很大的显示！ -->        <dir>目录</dir>        <menu>菜单</menu>        <br/>        下面演示两个有用的标签---有序列表和无序列表<br/>        无序列表<br/>        （注意：在没有设置类型值得时候默认为disc--实心圆圈）无序列表的几个属性值：1）disc：实心圆圈2）square实心矩形3）circle：空心圆圈<br/>        <ul type="circle">            <li>李白</li>            <li>王安石</li>            <li>杜甫</li>            <li>欧阳修</li>        </ul>        有序列表<br/>        类型值和上面的无序列表是一样的只是改变了图形的形状！start="n"中的n是一个数字，此标记符表示重新定义的起始号。<br/>        期末考试成绩排名前四名：        <ol type="i" start="1">            <li>张三</li>            <li>李四</li>            <li>王五</li>            <li>Rose玫瑰</li>        </ol>    </body></html>

效果图展示：
这里写图片描述

HTML创建表格代码实现：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>  <head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <title>HTML概述</title>  </head>  <body text="#000000">    表格演示（创建复杂表格）：    <table border="1" width="300" height="150" cellspacing="0" cellpadding="10" bgcolor="gray" >        <!-- caption标签用来指定表格的标题！自动默认居中（整个表格的中间），该标签可以设置在表格中的位置：top，left，bottom，right，但是left和right好像被现在版本的浏览器淘汰了！效果演示不出来 -->        <caption align="top">表格标题</caption>        <tr> <th bgcolor="yellow">表头1</th> <th colspan="2">表头2~表头3</th> </tr>        <!-- 使用nowrap标签来进行激活自动换行的屏蔽功能！每行不论多长都不具备换行的效果 -->        <tr> <td nowrap="nowrap" width="100">1行1列</td> <td>1行2列</td> <td>1行3列</td> </tr>        <tr> <td rowspan="2">2行1列~3行1列</td> <td>2行2列</td> <td>2行3列</td> </tr>        <tr> <td bgcolor="blue">3行2列</td> <td>3行3列</td> </tr>    </table>    <hr/>    超链接演示：    <a href="file:///E:/MyEclipse10/Workspaces/newHtml/WebContent/Demo.html">HTML演示一超链接传送门</a>    <br/>    <!-- font标签中使用face属性来设置字体的形状：例如：face="黑体" -->    <font size="5" color="red" face="微软雅黑">使用font标签是字体颜色和大小发生变化</font>    <hr/>    图片显示演示：    <img alt="图片路径没找到" src="../imgs/1.jpg" width="300" height="150" align="top">    <img alt="图片路径没找到" src="../imgs/2.jpg" width="300" height="150" align="top">    <img alt="图片路径没找到" src="../imgs/3.jpg" width="300" height="150" align="top">    <hr color="red"/>    画中画演示：    <iframe src="file:///E:/MyEclipse10/Workspaces/newHtml/WebContent/Demo.html">        画中画演示：这个很强的--之后和ajax演示一起使用很强！    </iframe>  </body></html>

这里写图片描述

0 0