1. 云栖社区>
  2. PHP教程>
  3. 正文

HTML网页编程

作者:用户 来源:互联网 时间:2017-12-01 10:09:37

html网页编程

HTML网页编程 - 摘要: 本文讲的是HTML网页编程, HTML网页编程 前 言: ☆静态页面和动态页面 网站页面分为静态页面和动态页面两种 • 静态页面:有一个html页面文件保存在服务器上,浏览器要这个页面的时候服务器就把这个页面文件发给浏览器; • 动态页面:服务器上没有浏览者要看的页面

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

HTML是Hyper Text Markup Language的缩写,意思是“超文本标识语言”,它实际上是专门用来编写网页的一种编程语言。大多数网页的构成基础就是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>        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网页编程
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>

HTML网页编程

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索html 网页编程 ,以便于您获取更多的相关知识。

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

6款热门基础云产品6个月免费体验;2款产品1年体验;1款产品2年体验

弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

开发者常用软件,超百款实用软件一站式提供