Web设计——初识HTML

     【基本概念及个人理解】


HTMLHyperTextMark-upLanguage)即超文本标记语言,“超文本”指页面内除了文字之外还可以包含图片、链接,甚至音乐、程序等非文字元素。


在做新闻发布系统的过程中遇到的包含链接的例子

           

        

包含图片的例子:

验证码:

设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起,形成一个有机的整体,我们不用去考虑具体信息是存放在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标或一行文字,网络就会马上转到与此图标或文字相关的内容上去,而这些信息可能存放在网络的另一台电脑中。除此之外,HTML是网络的通用语言。它允许网页制作人建立文本与图片相结合的复杂页面,无论你使用的是DellLenovo或是MAC等电脑,还是用的FireFoxIEGoogle等浏览器,这些页面都可以被网上其他人浏览到。这就是HTML,它距离我们并不遥远,现在读者你看到的就是用HTML语言写的界面。


【结构】


HTML包括两大部分:head(头部)body(主体),其中头部描述了浏览器所需要的信息,它本身不作为内容来显示,但影响网页显示的效果,而主体则包含所要说明的具体内容。页面上显示的任何信息都包含在这两个标签之中。


以下是HTML常用的标签:


1.主要标签:


标签

说明

创建一个HTML文档

设置文档标题和其它在网页中不显示的信息

</span></p> <span style="font-family:'宋体';font-size:14px;"></span></td> <td width="321" valign="top" style="border-width:0px 1pt 1pt 0px;border-style:none solid solid none;border-color:rgb(0,0,0) rgb(0,0,0);width:241pt;"> <span style="font-family:'宋体';font-size:14px;"></span> <p style="text-align:left;"><span style="font-family:'微软雅黑', sans-serif;font-size:12pt;">设置文档的标题</span></p> <span style="font-family:'宋体';font-size:14px;"></span></td> </tr> <tr> <td width="151" valign="top" style="border-width:0px 1pt 1pt;border-style:none solid solid;border-color:rgb(0,0,0);width:113.15pt;"> <span style="font-family:'宋体';font-size:14px;"></span> <p style="text-align:center;"><span style="font-family:'微软雅黑', sans-serif;font-size:12pt;"><h1></span></p> <span style="font-family:'宋体';font-size:14px;"></span></td> <td width="321" valign="top" style="border-width:0px 1pt 1pt 0px;border-style:none solid solid none;border-color:rgb(0,0,0) rgb(0,0,0);width:241pt;"> <span style="font-family:'宋体';font-size:14px;"></span> <p style="text-align:left;"><span style="font-family:'微软雅黑', sans-serif;font-size:12pt;">最大的标题</span></p> <span style="font-family:'宋体';font-size:14px;"></span></td> </tr> </tbody> </table> <span style="font-family:'宋体';font-size:14px;"></span> </div> <p><span style="font-family:'宋体';font-size:14px;"><br></span></p> <h3 style="text-indent:24pt;">2.格式标志标签:</h3> <p><span style="font-family:'宋体';font-size:14px;"><br></span></p> <div> <span style="font-family:'宋体';font-size:14px;"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <table border="1" style="border:;border-collapse:collapse;"> <tbody> <tr> <td width="132" valign="top" style="background:rgb(166,166,166);border:1pt solid;width:99pt;"> <span style="font-family:'宋体';font-size:14px;"></span> <p style="text-align:center;"><span style="font-family:'微软雅黑', sans-serif;font-size:12pt;">标签</span></p> <span style="font-family:'宋体';font-size:14px;"></span></td> <td width="227" valign="top" style="background:rgb(166,166,166);border-width:1pt 1pt 1pt 0px;border-style:solid solid solid none;border-color:rgb(0,0,0);width:6cm;"> <span style="font-family:'宋体';font-size:14px;"></span> <p><span style="font-family:'微软雅黑', sans-serif;font-size:12pt;">说明</span></p> <span style="font-family:'宋体';font-size:14px;"></span></td> </tr> <tr> <td width="132" valign="top" style="border-width:0px 1pt 1pt;border-style:none solid solid;border-color:rgb(0,0,0);width:99pt;"> <span style="font-family:'宋体';font-size:14px;"></span> <p style="text-align:left;"><span style="font-family:'微软雅黑', sans-serif;font-size:12pt;"><p></span></p> <span style="font-family:'宋体';font-size:14px;"></span></td> <td width="227" valign="top" style="border-width:0px 1pt 1pt 0px;border-style:none solid solid none;border-color:rgb(0,0,0) rgb(0,0,0);width:6cm;"> <span style="font-family:'宋体';font-size:14px;"></span> <p><span style="font-family:'微软雅黑', sans-serif;font-size:12pt;">创建一个段落</span></p> <span style="font-family:'宋体';font-size:14px;"></span></td> </tr> <tr> <td width="132" valign="top" style="border-width:0px 1pt 1pt;border-style:none solid solid;border-color:rgb(0,0,0);width:99pt;"> <span style="font-family:'宋体';font-size:14px;"></span> <p style="text-align:left;"><span style="font-family:'微软雅黑', sans-serif;font-size:12pt;"><p align=""></span></p> <span style="font-family:'宋体';font-size:14px;"></span></td> <td width="227" valign="top" style="border-width:0px 1pt 1pt 0px;border-style:none solid solid none;border-color:rgb(0,0,0) rgb(0,0,0);width:6cm;"> <span style="font-family:'宋体';font-size:14px;"></span> <p><span style="font-family:'微软雅黑', sans-serif;font-size:12pt;">将段落按左、中、右对齐</span></p> <span style="font-family:'宋体';font-size:14px;"></span></td> </tr> <tr> <td width="132" valign="top" style="border-width:0px 1pt 1pt;border-style:none solid solid;border-color:rgb(0,0,0);width:99pt;"> <span style="font-family:'宋体';font-size:14px;"></span> <p style="text-align:left;"><span style="font-family:'微软雅黑', sans-serif;font-size:12pt;"><br></span></p> <span style="font-family:'宋体';font-size:14px;"></span></td> <td width="227" valign="top" style="border-width:0px 1pt 1pt 0px;border-style:none solid solid none;border-color:rgb(0,0,0) rgb(0,0,0);width:6cm;"> <span style="font-family:'宋体';font-size:14px;"></span> <p><span style="font-family:'微软雅黑', sans-serif;font-size:12pt;">换行<span><span> </span></span></span></p> <span style="font-family:'宋体';font-size:14px;"></span></td> </tr> </tbody> </table> <span style="font-family:'宋体';font-size:14px;"></span> </div> <p><span style="font-family:'宋体';font-size:14px;"><br></span></p> <h3 style="text-indent:24pt;">3.链接标志:</h3> <p><span style="font-family:'宋体';font-size:14px;"><br></span></p> <div> <span style="font-family:'宋体';font-size:14px;"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <span style="font-family:'宋体';"></span> <table border="1" style="border:;border-collapse:collapse;"> <tbody> <tr> <td width="170" valign="top" style="background:rgb(166,166,166);border:1pt solid;width:127.35pt;"> <span style="font-family:'宋体';font-size:14px;"></span> <p style="text-align:center;"><strong><span style="font-family:'微软雅黑', sans-serif;font-size:12pt;">标签</span></strong></p> <span style="font-family:'宋体';font-size:14px;"></span></td> <td width="274" valign="top" style="background:rgb(166,166,166);border-width:1pt 1pt 1pt 0px;border-style:solid solid solid none;border-color:rgb(0,0,0);width:205.55pt;"> <span style="font-family:'宋体';font-size:14px;"></span> <p style="text-align:center;"><strong><span style="font-family:'微软雅黑', sans-serif;font-size:12pt;">说明</span></strong></p> <span style="font-family:'宋体';font-size:14px;"></span></td> </tr> <tr> <td width="170" valign="top" style="border-width:0px 1pt 1pt;border-style:none solid solid;border-color:rgb(0,0,0);width:127.35pt;"> <span style="font-family:'宋体';font-size:14px;"></span> <p><span style="font-family:'微软雅黑', sans-serif;color:#333333;font-size:12pt;"><a href="URL"></span></p> <span style="font-family:'宋体';font-size:14px;"></span></td> <td width="274" valign="top" style="border-width:0px 1pt 1pt 0px;border-style:none solid solid none;border-color:rgb(0,0,0) rgb(0,0,0);width:205.55pt;"> <span style="font-family:'宋体';font-size:14px;"></span> <p><span style="font-family:'微软雅黑', sans-serif;font-size:12pt;">创建超文本链接</span></p> <span style="font-family:'宋体';font-size:14px;"></span></td> </tr> <tr> <td width="170" valign="top" style="border-width:0px 1pt 1pt;border-style:none solid solid;border-color:rgb(0,0,0);width:127.35pt;"> <span style="font-family:'宋体';font-size:14px;"></span> <p><span style="font-family:'微软雅黑', sans-serif;font-size:12pt;"><a name="name"></span></p> <span style="font-family:'宋体';font-size:14px;"></span></td> <td width="274" valign="top" style="border-width:0px 1pt 1pt 0px;border-style:none solid solid none;border-color:rgb(0,0,0) rgb(0,0,0);width:205.55pt;"> <span style="font-family:'宋体';font-size:14px;"></span> <p><span style="font-family:'微软雅黑', sans-serif;font-size:12pt;">创建位于文档内部的书签</span></p> <span style="font-family:'宋体';font-size:14px;"></span></td> </tr> <tr> <td width="170" valign="top" style="border-width:0px 1pt 1pt;border-style:none solid solid;border-color:rgb(0,0,0);width:127.35pt;"> <span style="font-family:'宋体';font-size:14px;"></span> <p><span style="font-family:'微软雅黑', sans-serif;font-size:12pt;"><a href="#name"></span></p> <span style="font-family:'宋体';font-size:14px;"></span></td> <td width="274" valign="top" style="border-width:0px 1pt 1pt 0px;border-style:none solid solid none;border-color:rgb(0,0,0) rgb(0,0,0);width:205.55pt;"> <span style="font-family:'宋体';font-size:14px;"></span> <p><span style="font-family:'微软雅黑', sans-serif;font-size:12pt;">创建指向位于文档内部书签的链接</span></p> <span style="font-family:'宋体';font-size:14px;"></span></td> </tr> <tr> <td width="170" valign="top" style="border-width:0px 1pt 1pt;border-style:none solid solid;border-color:rgb(0,0,0);width:127.35pt;"> <span style="font-family:'宋体';font-size:14px;"></span> <p><span style="font-family:'微软雅黑', sans-serif;font-size:12pt;"><link></span></p> <span style="font-family:'宋体';font-size:14px;"></span></td> <td width="274" valign="top" style="border-width:0px 1pt 1pt 0px;border-style:none solid solid none;border-color:rgb(0,0,0) rgb(0,0,0);width:205.55pt;"> <span style="font-family:'宋体';font-size:14px;"></span> <p><span style="font-family:'微软雅黑', sans-serif;font-size:12pt;">定义一个链接和源之间的相互关系</span></p> <span style="font-family:'宋体';font-size:14px;"></span></td> </tr> </tbody> </table> <span style="font-family:'宋体';font-size:14px;"></span> </div> <p><span style="font-family:'宋体';font-size:14px;"><br></span></p> <h3 style="text-indent:24pt;">4.链接标记注解:</h3> <p><span style="font-family:'宋体';font-size:14px;"><br></span></p> <p style="text-indent:36pt;"><span style="font-family:'微软雅黑', sans-serif;color:#333333;font-size:12pt;">target="..."</span><span style="font-family:'微软雅黑', sans-serif;color:#333333;font-size:12pt;">决定链接源在什么地方显示<span>(</span>用户自定义的名字,<span>_blank,_parent,_self,_top)</span></span></p> <p><span style="font-family:'宋体';font-size:14px;"><br></span></p> <p style="text-indent:36pt;"><span style="font-family:'微软雅黑', sans-serif;color:#333333;font-size:12pt;">rel="..."</span><span style="font-family:'微软雅黑', sans-serif;color:#333333;font-size:12pt;">发送链接的类型<span> </span></span></p> <p><span style="font-family:'宋体';font-size:14px;"><br></span></p> <p style="text-indent:36pt;"><span style="font-family:'微软雅黑', sans-serif;font-size:12pt;">rev="..."</span><span style="font-family:'微软雅黑', sans-serif;font-size:12pt;">保存链接的类型</span></p> <p><span style="font-family:'宋体';font-size:14px;"><br></span></p> <p style="text-indent:24pt;"><span style="font-family:'微软雅黑', sans-serif;font-size:12pt;">以上是在做新闻发布系统经常用到的标签,当然还有很多标签,有兴趣的读者可以去了解学习。需要注意的是所有的标签都是成双成对出现的,比如:<span>HTML</span>页面以<span><html></span>标签开始,必定以<span></html></span>结束。</span></p> <p><span style="font-family:'宋体';font-size:14px;"><br></span></p> <p style="text-indent:24pt;"><span style="font-family:'微软雅黑', sans-serif;font-size:12pt;">在学习了之后会发现基础的<span>HTML</span>语言简直是容易到爆了,它只不过是由一系列标签组合成文本文件的一种语言。其实,<span>HTML</span>文档的标签就像我们每本书的目录一样,有章、有节,节下有一级标题、二级标题,不管是什么,这些都是设计的基本规则。</span></p> <p><span style="font-family:'宋体';font-size:14px;"><br></span></p> <h2 style="text-indent:24pt;">【实践】</h2> <p><span style="font-family:'宋体';font-size:14px;"><br></span></p> <p style="text-indent:24pt;"><span style="font-family:'微软雅黑', sans-serif;font-size:12pt;">以下是以新闻发布系统的登陆界面来看<span>HTML</span>是怎么使用的,当然,这里已经是加上<span>css、div</span>来设计样式的结果。</span></p> <p style="text-indent:24pt;"><span style="font-family:'微软雅黑', sans-serif;font-size:12pt;"></span></p> <pre><code class="language-html"><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="Web.admin.login" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>后台登录-新闻发布系统

后台登录-新闻发布系统

用户名:qshzh

密 码:123456

验证码:

          

HTML很神奇,却一直无处不在,只要我们一浏览网页就会接触到它,不信,现在就右击鼠标→“查看源”试试,这就是HTML




 





你可能感兴趣的:(.NET,B/S,项目)