首页 > 教程 > 关键词  > CSS最新资讯  > 正文

HTML和CSS编写漂亮正规的网页代码

2008-03-03 09:41 · 稿源:网页教学网

养成文章分段的好习惯

建议用p标签给文章分段,代码如是:<p>文章正文</p>。

值得一提的是很多网页都没有首行缩进的习惯,有的最多也是在编辑器下敲几个空格,这里给出用css的text-indent属性实现的首行缩进代码:<p style="text-indent:2em;">文章正文</p>,缩进单位我用的2em,表示两个汉字,勿用百分比或者px,pt等其他单位长度,用em可以在页面字体和版式缩放的情况下保持两个汉字的缩进。

对于一些喜欢在文章中挂上图片的网页中在这里我推荐用img标签的align属性设置为left或right就可以轻松实现图片的悬挂和正文的绕排。也可以用div标签的float属性来进行左右的悬挂实现文字环绕,更棒的是可以实现如Google Adsense广告的左右悬挂,代码:<div style="height:100%;width:150px;float:right;">这里可以放图片链接,或者像国外的网站那样放入google adsense代码</div>。

用list进行列表,用line-height设置行高

用样式表list的<ul><ol><li>等标签进行一些子标题条目的罗列,代码:<ul><li>问题一</li><li>问题二</li></ul>

正文字体大小可按个人喜爱设置,一般用系统默认的(13pt, 宋体和courier new),如果正文需要一段大字体时而你的文字出现过大而堆砌,可在段落的<p>上加上样式:line-height:120%;这表示行高是字体的1.2倍

超长正文的排版技巧

虽然我们在发表文章时都知道文章最好是短小精悍为佳,但也避免不了一些特殊性质的文章需要长篇幅,这个时候建议你用<h1><h2>...<h6>等不同级别设置子标题,并且在文章顶部用<dir><dl><dt><dd>这四个定义列表标签,显示的效果就如同word中的目录/索引那种样式,这样可增加文章的阅读性和条理性,微软的MSDN里的很多文章都是这样进行编排。要想实现链接跳转功能可用<a name="">这个锚点标签修饰具体的子标题实现,代码:<a name="list1"><h1>标题一</h1></a>

其他一些在网页中常用的html

引用他人文章的片段推荐用<blockquote>标签,这个标签可以自动实现页面左右两端的缩排,一般默认缩排40像素,例如:<blockquote style="background-color:#f7f7f7;border:1px dotted #dedbde;padding:10px;">这是一个引用样式的例子</blockquote>

显示:

这是一个引用样式的例子

字体的html代码大家可能相对熟悉些,如加粗用<b>、斜体用<i>、下划线用<u>、字体颜色大小等用<font>,你也可以用<span style="">的方式或许更方便和更美观,代码:<span style="font-weight:bold;font-style:italic;text-decoration:underline;font-color:blue;">加粗、斜体、下划线、蓝色字体</span>

想实现正文显示html代码的最简单的方法就是加入<xmp>标签,如:<xmp><a href="https://www.webjx.com/">网页教学网</a></xmp>

正确使用a标签

超链接是制作网页中用的最多的html标签,它用来链接到其他的文章或者站点链接,建议大家用a标签时将下列属性都添加上:

href:设置链接的url地址或锚点

target:设置鼠标点击链接后的目标窗口或框架页面,一般常用的是target="_blank",表示新开一个窗口打开链接,向在当前页面打开链接就不用加这个属性了。

title:设置鼠标移动到链接上时显示的提示信息

rel:这个是最近才开始流行的新属性。rel="nofollow"表示禁止搜索引擎从这个站点链接过去而造成链接网址的pagerank值变化,常用来防止spam link;rel="tag"这是为technorati设置让其以这个链接的文字作为该页面的tag标记

示例:<a href=https://www.webjx.com/ target="_blank" title="网页教学网" rel="nofollow">网页教学网</a>

显示:网页教学网

文章中的链接不可过多,太多的链接会让读者阅读时有压抑感和紧张感,如果链接的颜色和文本颜色反差过大,也会让人看起来有眼花缭乱的感觉。最好的链接效果是淡淡的颜色反差或加上下划线,并填写title属性,标明这个链接的内容是什么或者为什么要链接。有时候也可以在文章末尾列表的方式附上本文相关的链接并加以注释。

  • 相关推荐
  • 大家在看
  • Twitter网页版将允许用户 “软屏蔽”粉丝

    据外媒The Verge报道,Twitter网页版正在推出一项新功能,让用户可以在不阻止粉丝的情况下删除他们,这一行动也被称为 “软屏蔽”。要“软屏蔽”一个粉丝,用户需进入个人资料的粉丝列表页面·,点击粉丝名字旁边的三点菜单,然后点击“删除粉丝”选项。 用户删除的粉丝将不会被通知这一变化。“软屏蔽”与屏蔽不同,因为它允许粉丝仍然看到用户的推文和发送私信,但用户发布的内容不会再自动出现在粉丝的消息流中。当用户删除一个

  • 代码暗示苹果准备为Genesis汽车提供CarKey支持

    据外媒报道,苹果可能很快就会为现代旗下的Genesis豪华车推出CarKey数字密钥集成功能,从而将兼容性扩展到宝马之外的汽车品牌。据MacRumors报道,在iOS 15配置文件中发现了Apple Pay NFC功能的代码现将Genesis作为支持的汽车接入终端的“合作伙伴”的证据。此前,宝马是唯一一家上榜的汽车制造商。目前,Genesis和现代汽车都没有公布是否支持CarKey,但前者在2021年GV80和G80车型上首次推出了Android手机的数字按键功能。据称,跟?

  • 备受争议同时 《使命召唤》新反作弊系统Rocochet驱动代码外泄

    昨晚,动视宣布为《使命召唤》系列多款游戏启动全新的反作弊解决方案,该方案在《使命召唤:战区》上线之后随后在《使命召唤:先锋》上线。这套新反作弊方案名为“Rocochet”,是由动视自己设计的,重点是遏制猖獗的游戏作弊行为。“Ricochet”是一个将获得核心权限 (Kernel) 的反作弊软件,这意味着动视将能够访问电脑上所有的内容,以及后台的数据。不过动视承诺,支持 Ricochet 的内核级驱动程序只在《使命召唤:战地》游戏中

  • 亚马逊Twitch被黑客入侵 大量源代码和财务细节被公布

    据报道,整个Twitch的源代码、用户评论历史和详细的财务记录已被一名匿名黑客发布到网上。Twitch是亚马逊旗下的视频和游戏服务。现在,其服务的全部源代码,其移动、桌面和客户端应用程序,以及一个未发布的Steam商店竞争项目都被泄露了。据VGC报道,这些文件是由一个匿名黑客泄露给4chan的。这个人说,这次泄漏是为了"促进在线视频流媒体领域的更多破坏和竞争,[因为Twitch的]社区是一个令人作呕的有毒污水池"。VGC已经证实,黑客

  • 代码站GitLab上市首日大涨35% 市值达149亿美元

    美国当地时间周四,代码共享平台GitLab在纳斯达克上市,上市首日大涨35%,市值达149亿美元。

  • 1Password推出Psst!服务:更安全更便携的和他人共享账号密

    在工作场所和家庭环境中,我们时不时需要和他人共享账号密码,但安全地共享密码却可能非常棘手。1Password 旨在通过其新功能解决这个问题,该功能为你提供了一种以安全方式分享登录凭证的方法,甚至可以与那些没有该服务账户的人分享。这种新方法叫做 Psst!,是 Password Secure Sharing Tool(密码安全分享工具)的简称,它显然是该公司要求最多的功能之一。根据该公司进行的一项研究,大多数工人重复使用公司的凭证。在这些人中?

  • 法大大荣获SAP SuccessFactors “黑科技”大奖

    10月11日,SAP举办了“因需而聚,因创立新”为主题的 SAP SuccessFactors 合作伙伴应用创新大赛2021云端颁奖典礼,法大大凭借领先的技术优势、产品和团队优势,在本次大赛中脱颖而出,荣获“黑科技”大奖,SAP SuccessFactors 员工体验管理大中华区总经理草野拓哉先生参与颁奖。通过合作创新,双方可助力更多的企业全面实现合同签约及管理数字化。△法大大荣获“黑科技”大奖本次大赛围绕 SAP SuccessFactors 为核心平台,基于 SAP

  • 代码风起,平台化和生态化支撑厂商规模化发展

    摘要:在云计算和移动互联网的助推下,企业数字化转型加快,软件应用开发的需求激增,低代码平台应势崛起。从发展路径看,中国低代码平台厂商大致可分为两类:应用衍生类厂商和原生低代码厂商。低代码厂商最终发展趋势将是平台化和生态化,通过联合第三方开发商等合作伙伴,打造生态,为探索更具规模化能力的商业模式打下基础。当前,企业数字化转型不断深入,快速、敏捷地开发数字化应用成为了实现业务数字化的关键。不过,企业却

  • 代码托管平台GitLab提交IPO申请 年化营收已超2亿美元

    在 2020 年底的第二次股份销售中,GitLab 已获得 60 亿美元的估值。本周二,该公司正式提交了 IPO 申请。GitLab 表示,其最近一个季度的营收增长了 69%、至 5810 万美元,但净亏损还是扩大到了 4020 万美元。即便如此,作为微软旗下代码托管与分享协作平台 GitHub 的一大竞争对手,GitLab 还是被不少开发者和投资者们所看好。CNBC 指出,GitLab 是一家云软件提供商,允许开发商在其平台上分享代码和开展项目协作,并且致力于成为一

  • 代码平台三大关键能力,破局应用开发难题

    数字化时代的到来,用户需求不断飙升,专业开发人员缺口问题显著,方便高效的低代码开发技术革命悄然开始,并不断渗透到各行各业。企业的数字化转型涉及多个方面,而低代码开发平台强悍的关键技术能力,能够突破技术及实现手段上的瓶颈,减免决策者的后顾之忧,因此"低代码技术"作为解决企业数字化转型以及增强企业复原力的有力手段,得到越来越多的关注。早在 2019 年,全球知名研究机构Gartner 就对企业级低代码开发平

这篇文章对你有价值吗?

  • 热门标签

热文

  • 3 天
  • 7天