加入收藏 | 设为首页 | 会员中心 | 我要投稿 湖南网 (https://www.hunanwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程 > 正文

HTML着实就是进修几个重要标志的应用

发布时间:2020-03-16 15:42:04 所属栏目:编程 来源:站长网
导读:《这将是一场革命》一文出来往后。获得业界大伙的认同,虽然与此同时也获得部门来自内部与外部的搬弄,不外的越发多的是更多人来寻问每一个点的细节。今晚回家很早就睡了,三更在一个梦中醒来,梦里正在和小学的同窗玩一个游戏The Next。醒来往后认为本身

《这将是一场革命》一文出来往后。获得业界大伙的认同,虽然与此同时也获得部门来自内部与外部的搬弄,不外的越发多的是更多人来寻问每一个点的细节。今晚回家很早就睡了,三更在一个梦中醒来,梦里正在和小学的同窗玩一个游戏——“The Next”。醒来往后认为本身必要做点什么,于是终于将TMENU修改了(拖了好久了);然后认为近期必要对之条件到的五点具体的出一部门其实的案例写得具体点,于是开始写本文。
梦里回到小学,是有原理的。一是谁人“The Next”的游戏提示我,其它一个则是我和飘飘常常和别人说的,要学好HTML先归去看看小学的语文书。回小学的缘故起因是哪里的册本不会受到过多的应试教诲的滋扰,内里的“本质”存有真实性,而语文书这是意味HTML的本质:问题、段落、列表、书目。HTML进修的本质就是该是什么就用什么——Ghost。虽然这句话是必要一个表明的,参照的典型就是你的小学语文书。
我们先来看看我们建造网站的过程。影象中我第一个网站是发生于1998年,其时都是一群用table做网页的人。在table的期间我们认为最难的标题是什么?
怪异的三行不定列机关:

怪异的一像素界线:

table期间事后(影象中是2001年前后),呈现了第一批行使<div>的人。于是海内吹起了一股CSS之风。用法是将他套着多少的table然后操作CSS的绝对定位,尚有的加上些JS让他飘来飘去。后头就有人开始研究CSS起来,记得“风人计划”的初期就有多少谈相助的人拿着一本CSS的书和我嗣魅这说那的(虽然这些人最后都转行了)。在这个时辰我们认为最难的标题是做一个其时被叫做“Java殊效”的咚咚。于此时我被一小我私人提出的XML所吸引,但只是将他看作一种数据储存(其拭魅这也就奠基了Qzone实现的雏形)。
时刻飞快如梭,2004年5月1日,国际劳动节当天,电子家产出书社出书了一本名为《网站重构——应用Web尺度举办计划》的书译。于是海内就遍布了“DIV CSS”的信心,真正的意味上中国网站重构的跨期间性起步开始了;但另一个角度而言,这本书将中国的WebReBuilder从一个火坑拉出来,丢进了其它的一个火炕。我想我们只能行使对待隋唐盛世的目光去对待这本书。由于它只是意味一刷新的天子和新的朝代的降生,并没有从本质上面敦促社会的厘革和进化。这本书将table嵌套,酿成了div嵌套。其时最风行的话语(直到此刻)是“我的网站是‘DIV CSS’做的。”这个时辰我并没有插手这个队列,一向是在守候;由于我有一个很要害的题目没有办理“为什么要‘DIV CSS’而不是‘TABLE CSS’”:
引用《这将是一场革命》内容:
我们先看看一下两个典型。table做的,div做的外貌上他们是一样的,可是一旦产物司理提出修改,示意必要变革。对付div会很等闲的变革成为这个 典型 。典型可以看出不修改html的环境下,table就是打死也完成不了这样的改变。“DIV CSS”比“TABLE CSS”优越就是排版的自由化,就以上例为题,table就一辈子都无法做到。
一向到了Qzone3.0前后,我才开始想大白上面的谜底,历时差不多有一年。接着在Qzone4.0的时辰动用了三个标志“dl、dt、dd”和 TMENU 的降生。此刻很是懊悔的是我也将各人带入了另一个跨期间的起步——“XHTML CSS”,同时也是将各人带进了一个新的火炕。进火炕轻易出火炕难,我才开始大白为什么两个重构绅士——阿捷、老甘会在互联网傍边逐渐消散。我开始不去怪责他们之前的工作,更多的是一种谅解,与此心中也暗下刻意。便开始了举办铺垫“良性竞争”的“SB”见识。
汗青旅程如上,回归到HTML进修的本质就是该是什么就用什么;意思就是标签不能滥用,还原到内容的本质的标签才是及格的标签。就以 TMENU 为范。
之前的HTML代码是:
<ul class="menu">
<li><a href="#"><span><span>123123</span></span></a></li>
<li><a href="#"><span><span>123123</span></span></a></li>
<li><a href="#"><span><span>123123</span></span></a></li>
<li><a href="#" class="now"><span><span>123123</span></span></a></li>
<li><a href="#"><span><span>123123</span></span></a></li>
</ul>
此刻的HTML代码是:
<map id="directmenu" class="menu">
<div><a href="#"><span><span>123123</span></span></a>
<a href="#"><span><span>123123</span></span></a>
<a href="#"><span><span>123123</span></span></a>
<a href="#" class="now"><span><span>123123</span></span></a>
<a href="#"><span><span>123123</span></span></a></div></map>
<h2>以下是一个菜单列表</h2>
<ul class="menu"><li>
<a href="#"><span><span>123123</span></span></a></li>
<li><a href="#"><span><span>123123</span></span></a></li>
<li><a href="#"><span><span>123123</span></span></a></li>
<li><a href="#" class="now"><span><span>123123</span></span></a></li>
<li><a href="#"><span><span>123123</span></span></a></li>
</ul>
两者的差异点,各人也看到了。多了一块map的标签和一个hn的标签。为什么是这样呢?我们再来看一个例子:操场上面有100台差异牌子,差异形状,差异颜色的车;此刻让你将这些车分成多少组,反馈一个列表以供选择。虽然,行使列表是各人城市想到的。可是各人有没有想到这个列表能示意什么呢?
引用典型
<ul>
<li>XXX牌子XXX型号</li>
<li>XXX牌子XXX型号</li>
</ul>
再可能
引用典型
<ol>
<li>XXX牌子XXX型号</li>
<li>XXX牌子XXX型号</li>
</ol>
就这上面的列表,我基础就看不清晰这个列表的分类是怎么形成的,为什么一个是有序,一个是无序的。他们是怎么样会这样排,为什么放在一路。许多许多的题目。我们再来看看下面的典型
引用典型
<h3>黄色系列车</h3>
<ul>
<li>XXX牌子XXX型号</li>
<li>XXX牌子XXX型号</li>
</ul>
再可能
引用典型
<h3>出厂年份</h3>
<ol>
<li>XXX牌子XXX型号</li>
<li>XXX牌子XXX型号</li>
</ol>
上述的典型,各人是否一看就一览无余了。全部的前因后果都变得清清晰楚。然而为什么TMENU代码内里尚有map标签呢?我们看看一个典型

以上的典型虽然是正确的。然而这样的布局就会让人认为用户十分低能了,站名和副标事后不是站点舆图导航菜单么?(特指menu在顶部的站点)并且与此同时HTML自己就提供了一个特指站点舆图导航的标签——<map>。既然有一个自己就有这样意义的标签你又何须行使笔墨去声名呢?你总不会行使<h3>这是一个无序列表</h3><ul>这么呆子吧。各人都知道阿妈是姑娘啊。我们再看看下面的典型:


是不是,代码越发的简朴清楚明白了。



着实要走好WebReBuild的第一步HTML不会很难的,归去看看小学的语文书,想想最本质的,多点问问本身“为什么?”。和做人一样,该是怎么样就应该怎么样,不该该被伟大的社会和繁琐的人际相关滋扰你,僵持做人量力而行的原则,踏扎实实地事变和做人,是金子老是要发光的。
引用内容
我有个怪癖。我很喜畛刳口试的时辰我老是要先考口试人XHTML。就仿佛早年师该魅招收学徒一样,手段和慧根属其次,品德首当其冲。
我觉得,XHTML比如一小我私人的本质,CSS比如人的办事方法和立场,JS比如人干事的举动以及作风。三者的疏散再加上些周边的SEO、人机交互也就是我们所说的网站重构,也就是一个很不错的人。之前老是有一部门人以为CSS就是网站的最首要的元素,着实天然而然的也就代表了一种人生观。简直,一小我私人没有好的办事方法和立场很难在此刻的社会很好的存活;可是这个办事的方法和立场位置过于侧重了,就成了一个擅长诱骗、干事不择本领的人。
引用典型
<h1>站点名称</h1>*
<h2>站点副标</h2>*
<map><div><a href="#">毗连1</a> <a href="#">毗连2</a></div></map>
注:*号注释部门为夸大站点为推广主要的时辰用。
引用典型
<h1>站点名称</h1>*
<h2>站点副标</h2>*
<h3>站点舆图导航菜单</h3>
<ul>
<li>毗连1</li>
<li>毗连2</li>
</ul>
注:*号注释部门为夸大站点为推广主要的时辰用。

(编辑:湖南网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读