首页 > 新闻 > 知识赋能

HTML编程基础

2014-06-16 6385
分享至:
通常情况下,人们应用Dreemwcave以可视化的方式设计网页。而直接用HTML标记符设计网页的情况则较少,对HTML标记符也了解不多,但在动态网页设计中,常常需要利用ASP代码摘出网页的部分HTM L代码,此时必须熟悉HTML标记符,因此,本章将对常用的HTMI标记符进行介绍。
1. 1. 1什么是HTML
HTML(街pertext Markup Language)即超文本标记语育,是一种用来在WWW (World Wide Web) L表示信息的描述性的标记语言。
HTML文本是由HTML标记组成的描述性文本。HTML标记可以描述文字、图形、动网、声音、表格、链接等。生成一个HTMI文本述常可以通过以下四种方法:
I)利用各种文本编辑器(如Windows记事本)i is接使用HTML语言编写。
2)借助一钱HTMI.的编辑工其,如FroniPage、HotDog等。
3)其他格式的文档(如Word文档)转换成HTML文本。
4)山Web服务器端实时动态地生成。

下面应用第一种方法完成一个简单的实例
1. 1.2一个简单的HTM 1.实例
I例1-1)创建一个简单的网贞,步骤如下:
1)选择“开始”一“程序”,“附件”一“记事本”命令,打开记事本程序。翰人以
下HTML代码

< TITLE > I ITM L实例
< BODY Bgcolor = "#FFFFFF">



2)选择“文件.菜单下的“保存,命令.打开“保存”对话框,在输人文件名和文件扩展名(1-1. him),选择合适的目录.然后单击“保存”
3)在浏览器中打开运行该文件(1-1. him),运行结果如图1-1所示。

从以上过程可以看出,使用HTML语言确实能够很容易地制作网页,但是这样的网页距离关观实用的要求显然还有一定差距。因此后面的章节将会详细地介绍如何利用HTML诸言的其他标记符来修饰文字和图像等页面元素。

1.2 HTML常用标记
标记符是HTML语言中定义网页内容格式和显示的指令.制网贞内容的显示效果。

1.2.1页面基本属性标记
而标记符的属性用于进一步控制网页的内容多么丰富、版式多么复杂,网页的基本结构却都是一样的。
1.网页的基本结构
如下所示:

< TITLE>文档标题<,TITLE》

< BODY>
这是HTMI文档的主要部分


HTML的结构包括头部(HEAD)、主体(BODY)两大部分.其中头部描述浏览器所需的信息,而主体则包含页面的具体内容及格式说明。
2.语官字符维,(Charsets)的信息

#=US-ASCII,ISO-8859-I,X-MAC-ROMAN, 150-8859-2, X-MAC-CE, ISO-2022-JP, X-SJIS,X-EUC-JP, EUC-KR, ISO-2022-KR, GB2312, GB_ 2312-80, X-EUC-TW, X-CNS11643-1,X-CNSI 1643-2, BIG5
可在HTML文件中设置MIME字符集(i息。您在浏览主页时.最好自己在浏览器的选项菜单内选择相应的语言(language encoding),但是如果HTML文件里写明了设置,浏览器就会自动设置语言选项。如果主页里用到了字符实体(entities),则该主页就应该写明字符集信息,否则,您在浏览该主页时,若未正确设置语言选项,显示将可能混乱。
3.背.色彩和文字色影
设置网贞的背景色彩和文字色彩可通过设置BODY标记的属性来实现,具体格式如下:

BODY标记各参数的含义见表1-l
4.添加注释
由于Web站点需要经常更新,而且制作时往往是几个人合作,所以创建的页面必须易于维护,而添加增强文件可读性的重要手段。
HTML中的注释是由(结束标记符)组成的。这两个标记符中间的内容就是注释的内容,它们不会在浏览器中显示。
5.画线
在网页中产生分隔线可用
标记来实现,其用法为:


属性说明:
I) Width用于指定分隔线的宽度.宽度优的指定方式有两种.一是用像素点来指定,
例如.若要产生宽度为500像素的直线,则实现代码为:


另一种方法是用百分比表达,例如,若要产生宽度是网页宽度的75%分隔线,则实现代码如下:


2) Si,用于指定直线的高度。例如.要绘制宽度为80%,高度为l的直线,则实现代
码如下:


3) Align指定直线的对齐方式,取值有left、Center、Right。
4) Noahade指定直线是否有阴形。如果带有该参数,则直线无阴影。

标记一般用于产生水平分隔线,若要产生竖直线,可将Width设置为1, Size设置为竖直线的高度谊。例如:< HR Width= I Size= 500 Noshade >
1.2.2文字属性标记
文字是网页中最主要的页面元素,HTML语言提供了一些用来修饰文字的标记符,可以川它们来设置文字的字体、颜色、大小和样式等属性。
1.字体控制
标记符是用来控制文字的字体、大小和颜色的。其语法格式为:
文本
属性说明:
Face属性用于指定字体;Size用于指定字体的大小;Color用于设置字体的颜色。字体大小的表达方法有两种,一是设置为绝对字号,此时的设置优可以是1~7, 1号最小,7号最大,默认字号为3,可利用< BASEFONT Size=字号>设置或更改默认字号。例如,若要以绿色,宋体4号字输出“HTML实例”,则实现代码为:
< FONT Face=“宋体”Size=4 Color=“#008000">HTML实例

另一种设置为相对字号大小,此时的用法为,其中n代表字号改变的量,+表示字体在默认字号的基础上增大字号,- 表示在默认字号的基础上递减字号。例如:
< BASEFONT Size=3)
HTML实例

2.标题的字号
语法格式为:
< Hn)
说明:n是1 -6的数字,表示最大的标题,
表示最小的标题。在默认状态下,标记符中的文字在浏览器中显示时都是黑体,而且文字将自动在标记符后换行。
【例1-2】在网页中分别用六级标题标记符拍出一个侧试效果的文本。


标越字体演示</TITLE》<br /> </HEAD ><br /> <BODY Bgcolor = " #FFFFFF" Text=“#000000”><br /> <Hl>这是第一级标题</H1><br /> <H2》这是第二级标肠</H2><br /> <H3>这足第三级标题</H3><br /> <H4>这是第四级标肠</H4 ><br /> <115》这是第五级标题</HS><br /> <H6>这是第六级标题</H6><br /> </BODY)<br /> </HTML><br /> 运行结果如图,1-2所示。 <div style="text-align: center; "></div> </div> </div> <div class="source"><strong>来源声明:</strong><p>本文章系尚品中国编辑原创或采编整理,如需转载请注明来自尚品中国。以上内容部分(包含图片、文字)来源于网络,如有侵权,请及时与本站联系(010-60259772)。</p></div> <div class="arrow"> <a href="/Article/226_3603" class="prev">上一篇</a> <a href="/zhishifuneng/" class="back"></a> <a href="/Article/226_19726" class="next">下一篇</a> </div> </div> <div class="col-r"> <div class="m-box"> <h3 class="m-t1">行业解决方案</h3> <ul class="ul-tab"> <li class="i1"><a href="/kyysjjfa/" target="_blank" >科研院所</a></li> <li class="i2"><a href="/wmchjjfa/" target="_blank" >外贸出海</a></li> <li class="i3"><a href="/jtssgsjjfa/" target="_blank" >集团上市公司</a></li> <li class="i1"><a href="/zzyjjfa/" target="_blank" >制造业</a></li> </ul> <h3 class="m-t1">热门标签</h3> <ul class="ul-tab"> <li class="i1"><a href="/search/49">微信小程序开发</a></li> <li class="i2"><a href="/search/44">定制网站制作</a></li> <li class="i3"><a href="/search/25">集团网站建设</a></li> <li class="i1"><a href="/search/wangzhanjianshe">网站建设</a></li> </ul> <div class="m-pic"><a href="javascript:;" class="js-yu"><img src="/storage/upload/files/20260312/e3377bb6c20d6b2807f9ca437175e43e.png" alt=""></a></div> </div> </div> </div> </div> </div> </div> <div class="row-b4"> <div class="wp"> <div class="m-solution_head"> <h3 class="g-tit1">客户认可</h3> <div class="right glist-chapter-swiper-btn"> <!-- <div class="btn prev"><i class="jtl"></i></div> <div class="btn next"><i class="jtr"></i></div> --> <div class="btn prev"> <svg><use href="/static/index/images/ui.svg#long-white-left" /></svg> </div> <div class="btn next"> <svg><use href="/static/index/images/ui.svg#long-white-right" /></svg> </div> </div> </div> <div class="glist-chapter"> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <a href="/Article/225_19486" class="item s1"> <i class="circle"></i> <h3 class="title">尚品中国签约华安资产官网改版项目</h3> <!-- <span class="date">2024-04-11</span>--> <div class="icon"><img src="/storage/upload/files/20260312/60f6026bc0030f5767e08d79b810daec.png" alt="尚品中国签约华安资产官网改版项目" /></div> </a> </div> <div class="swiper-slide"> <a href="/Article/225_19448" class="item s2"> <i class="circle"></i> <h3 class="title">尚品签约Charles River维通利华网站建设项目</h3> <!-- <span class="date">2024-03-11</span>--> <div class="icon"><img src="/storage/upload/files/20260312/a9365a4f28d842c4d1c89514a83ea941.png" alt="尚品签约Charles River维通利华网站建设项目" /></div> </a> </div> <div class="swiper-slide"> <a href="/Article/225_19405" class="item s3"> <i class="circle"></i> <h3 class="title">构建数字未来,尚品签约中联数据</h3> <!-- <span class="date">2023-12-21</span>--> <div class="icon"><img src="/storage/upload/files/20260312/793a7e95ca38f31502d772f8d59d544b.png" alt="构建数字未来,尚品签约中联数据" /></div> </a> </div> <div class="swiper-slide"> <a href="/Article/225_19337" class="item s1"> <i class="circle"></i> <h3 class="title">尚品签约大兴航空城微信小程序设计及开发项目</h3> <!-- <span class="date">2023-10-23</span>--> <div class="icon"><img src="/storage/upload/files/20260312/2f19f12c56eb9dcf92fa2e91d9331299.png" alt="尚品签约大兴航空城微信小程序设计及开发项目" /></div> </a> </div> <div class="swiper-slide"> <a href="/Article/225_19333" class="item s2"> <i class="circle"></i> <h3 class="title">尚品签约海南国家公园研究院官网改版项目</h3> <!-- <span class="date">2023-09-21</span>--> <div class="icon"><img src="/storage/upload/files/20260313/8e7489b6344ad6a7bb73ab90b84e383e.png" alt="尚品签约海南国家公园研究院官网改版项目" /></div> </a> </div> <div class="swiper-slide"> <a href="/Article/225_19307" class="item s3"> <i class="circle"></i> <h3 class="title">尚品中标中国医学科学院病原生物学研究所网站建设项目</h3> <!-- <span class="date">2023-08-22</span>--> <div class="icon"><img src="/storage/upload/files/20260312/119ef43d56a54b744058e40311cfef1e.png" alt="尚品中标中国医学科学院病原生物学研究所网站建设项目" /></div> </a> </div> <div class="swiper-slide"> <a href="/Article/225_18727" class="item s1"> <i class="circle"></i> <h3 class="title">尚品签约山东经典重工集团——构建国际化品牌官网升级</h3> <!-- <span class="date">2022-12-23</span>--> <div class="icon"><img src="/storage/upload/files/20260312/fa5782dc3adb0e077ecd4c443cce2221.png" alt="尚品签约山东经典重工集团——构建国际化品牌官网升级" /></div> </a> </div> </div> </div> </div> </div> </div> <div class="row-b2"> <div class="wp"> <div class="m-yu"> <div class="left"> <div class="txt"> <h3 class="tit">立即预约专属顾问 开启数字化转型之旅!</h3> <div class="info">10年+资深项目经理1V1服务 | 行业定制化方案 | 精准报价体系</div> <a href="javascript:;" class="btn js-yu"> <span>获取策划方案</span> <div class="icon"><i></i></div> </a> </div> </div> <div class="pic"><img src="/static/index/images/p6.png" alt="立即预约专属顾问 开启数字化转型之旅!"></div> <div class="bg"></div> </div> </div> </div> </div> <div class="footer"> <div class="fd-con"> <div class="wp"> <div class="fd-nv"> <dl> <dt><a href="/service/" >服务</a></dt> <dd> <!-- <div class="i-t"><a href="/service/#item-5">高端网站建设</a></div> --> <div class="i-t"><a href="/service/?target=item-5">高端网站建设</a></div> <!-- <div class="i-t"><a href="/service/#item-4">微信小程序/ H5</a></div> --> <div class="i-t"><a href="/service/?target=item-4">微信小程序/ H5</a></div> <!-- <div class="i-t"><a href="/service/#item-3">安全产品</a></div> --> <div class="i-t"><a href="/service/?target=item-3">安全产品</a></div> <!-- <div class="i-t"><a href="/service/#item-2">Ai系统设计开发</a></div> --> <div class="i-t"><a href="/service/?target=item-2">Ai系统设计开发</a></div> <!-- <div class="i-t"><a href="/service/#item-1">智能化数字营销</a></div> --> <div class="i-t"><a href="/service/?target=item-1">智能化数字营销</a></div> </dd> </dl> <dl> <dt><a href="/case/" >案例</a></dt> <dd> <div class="i-t"><a href="/keyansuo/" >科研院所</a></div> <div class="i-t"><a href="/jituan/" >集团/央国企</a></div> <div class="i-t"><a href="/FOB/" >外贸出海</a></div> <div class="i-t"><a href="/SMT/" >制造业</a></div> <div class="i-t"><a href="/xiehui/" >协会学会</a></div> <div class="i-t"><a href="/shengwu/" >生物医药</a></div> <div class="i-t"><a href="/EDU/" >高校教育</a></div> </dd> </dl> <dl> <dt><a href="/kyys/" >方案</a></dt> <dd> <div class="i-t"><a href="/kyys/" >科研院所解决方案</a></div> <div class="i-t"><a href="/waimao/" >外贸出海解决方案</a></div> <div class="i-t"><a href="/xhxhjjfa/" >协会学会解决方案</a></div> <div class="i-t"><a href="/groupwebsite/" >集团上市公司解决方案</a></div> <div class="i-t"><a href="/swyyjjfa/" >生物医药解决方案</a></div> <div class="i-t"><a href="/zzyjjfa/" >制造业解决方案</a></div> <div class="i-t"><a href="/gaoxiaojiaoyu/" >高校教育解决方案</a></div> </dd> </dl> <dl> <dt><a href="/News/" >新闻</a></dt> <dd> <div class="i-t"><a href="/News/" >客户认可</a></div> <div class="i-t"><a href="/zhishifuneng/" >知识赋能</a></div> <div class="i-t"><a href="/hangyedongcha/" >行业洞察</a></div> </dd> </dl> <dl> <dt><a href="/about/" >关于</a></dt> <dd> <div class="i-t"><a href="/about/#item-20" >关于尚品</a></div> <div class="i-t"><a href="/about/#item-21" >数字未来</a></div> <div class="i-t"><a href="/about/#item-22" >尚品价值观</a></div> <div class="i-t"><a href="/about/#item-23" >尚品资质</a></div> </dd> </dl> </div> <div class="fd-r"> <div class="share"> <span class="t1">联系我们</span> <div class="t-c"> <div class="i-t"> <span class="ico"><img src="/static/index/images/i-07.png" alt=""></span> <div class="qr"><img src="/storage/upload/files/20260312/0006b734a152ad84a9d7876464ac8978.jpg" alt=""></div> </div> <div class="i-t"> <span class="ico"><img src="/static/index/images/i-08.png" alt=""></span> <div class="qr"><img src="/storage/upload/files/20260312/adcf966484825281a68f0ffa01382c1f.jpg" alt=""></div> </div> <div class="i-t"> <span class="ico"><img src="/static/index/images/i-06.png" alt=""></span> <div class="qr"><img src="/storage/upload/files/20260312/072bf0e8634aa4c0b545b687e3759a1b.jpg" alt=""></div> </div> </div> </div> <div class="tel"> <span class="t1">咨询热线</span> <div class="t-e">010-60259772</div> </div> <div class="fd-link"> <h3 class="tit">友情链接</h3> <div class="con"> <div class="t-s" data-lenis-prevent> <a href="https://www.sino-web.net/" target="_blank" >高端网站建设</a> <a href="https://www.ccxcn.com/" target="_blank" >网站建设</a> <a href="http://www.021ftp.cn/" target="_blank" >上海网站建设</a> <a href="http://www.netconst.com/" target="_blank" >网站建设</a> <a href="http://www.soukelai99.com/" target="_blank" >深圳网站建设</a> <a href="http://www.szmynet.com/" target="_blank" >网站设计</a> <a href="https://www.bjtqcy.com/" target="_blank" >网站建设</a> <a href="https://www.eefung.com/" target="_blank" >舆情监测</a> <a href="https://www.henghost.com" target="_blank" >香港服务器</a> <a href="https://www.mountor.cn/" target="_blank" >网站建设</a> <a href="https://www.omooo.com/" target="_blank" >网站制作</a> <a href="https://www.sino-web.net/xinwen/" target="_blank" >北京网站建设公司</a> <a href="https://www.sino-web.net/about/" target="_blank" >企业网站建设公司</a> <a href="https://www.sscmwl.com/" target="_blank" >温州网站建设</a> <a href="https://www.szweb.cn/" target="_blank" >深圳网站建设</a> <a href="https://www.wxee.net/" target="_blank" >无锡网站建设</a> <a href="https://www.yzsj.net/" target="_blank" >网站制作</a> </div> </div> </div> </div> </div> </div> <div class="fd-bot"> <div class="fd-logo wow fadeInUp"><a href="/"><img src="/static/index/images/fd-logo.png" alt=""></a></div> <div class="fd-tit wow fadeInUp">互联网品牌建设 深度服务商</div> </div> <div class="wp"> <div class="fd-copy"> <div class="left">Copyright © 2026 恒久尚品 版权所有 | <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" rel="noopenner noreferrer">京ICP备09066521号</a> <a href="" target="_blank" rel="noopenner noreferrer">公安机关备案号:11011502003910</a> </div> <div class="right">尚品专注高端网站建设,系统平台开发,微信小程序及安全产品服务</div> </div> </div> </div> <div class="fix-right"> <ul> <li> <div class="con"> <div class="t-c"> <span class="ico"><img src="/static/index/images/i-21.png" alt=""></span> <span class="t1">电话</span> </div> <div class="f-p"> <div class="pop tel">010-60259772</div> </div> </div> </li> <li> <div class="con"> <div class="t-c"> <span class="ico"><img src="/static/index/images/i-22.png" alt=""></span> <span class="t1">微信</span> </div> <div class="f-p"> <div class="pop qr"> <div class="pic"> <img src="/storage/upload/files/20260311/46caf8c4da4f8c9a6281767f3721dbcd.jpg" alt=""> </div> <span class="t2">扫码加微</span> </div> </div> </div> </li> <li> <a href="javascript:window.open('https://affim.baidu.com/unique_43440687/chat?siteId=20826993&userId=43440687&siteToken=4e060ea0ec0f49bbf798e8cde61c77da','','modal=yes,width=800,height=650,resizable=no,scrollbars=no');" class="con"> <div class="t-c"> <span class="ico"><img src="/static/index/images/i-23.png" alt=""></span> <span class="t1">在线</span> </div> </a> </li> <li> <a href="javascript:;" class="con js-yu"> <div class="t-c"> <span class="ico"><img src="/static/index/images/i-24.png" alt=""></span> <span class="t1">预约</span> </div> </a> </li> <li> <a href="javascript:;" class="con btn-top"> <div class="t-c"> <span class="ico"><img src="/static/index/images/i-25.png" alt=""></span> </div> </a> </li> </ul> </div> <div class="pop-form"> <div class="pop-bg"></div> <div class="cont"> <span class="close"></span> <div class="m-contact-form"> <div class="text-form-box"> <div class="text" style="background-image: url(/static/index/images/bg-contact2.jpg);"> <h3 class="title">咨询我们,获得专业的服务和报价</h3> <div class="desc"> <p>联系我们,免费获取项目方案及报价,或只是聊一聊您的项目? 在收到您的需求留言后我们将由专业人员于24小时内与您取得联系,请您保持电话畅通!</p> </div> <ul class="list"> <li>科研院所解决方案</li> <li>外贸出海解决方案</li> <li>协会学会解决方案</li> <li>集团上市公司解决方案</li> <li>生物医药解决方案</li> <li>制造业解决方案</li> <li>高校教育解决方案</li> <li>信创网站改造解决方案</li> </ul> <div class="tel"> <span>更多服务咨询,请联系尚品</span> <p>010-60259772</p> </div> </div> <div class="form"> <form action="/guestbook.html" method="post" name="contact"> <input type="hidden" name="catid" value="17"> <div class="label-tit">您的姓名 <span class="fred">*</span></div> <div class="label-inp"><input type="text" name="name" placeholder="请输入您的姓名" required/></div> <div class="label-tit">您的电话 <span class="fred">*</span></div> <div class="label-inp"><input type="text" name="phone" placeholder="请输入您的手机号/座机号" required/></div> <div class="label-tit">您的邮箱</div> <div class="label-inp"><input type="email" name="email" placeholder="请输入您的邮箱" /></div> <div class="label-tit">公司名称 <span class="fred">*</span></div> <div class="label-inp"> <input type="text" name="company" placeholder="请输入您的公司名称" required/> </div> <button type="submit" class="submit">预约咨询</button> </form> </div> </div> </div> </div> </div> <script> layui.use(["form", "formRequest"], function() { let formRequest = layui.formRequest; $("form[name='contact']").on('submit', function () { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); let _this = $(this); let _option = { url: _this.attr('action'), data: _this.serialize() }; formRequest.request.post(_option, function (res) { const {msg,data: {token}} = res; formRequest.msg.success(msg, function () { refreshCap(); _this[0].reset(); $('meta[name="csrf-token"]').attr('content', token); }); }, function(res) { const {msg,data: {token}} = res; formRequest.msg.error(msg, function () { refreshCap(); $('meta[name="csrf-token"]').attr('content', token); }); }); return false; }); function refreshCap() { $('.captcha').trigger('click'); } }); </script> <script src="/static/index/js/lib.js"></script> </body> </html>