温故知新(二)HTML
发布在温故知新----重拾前端2013年12月18日view:3590
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。
      其实在我们学习HTML和CSS前我们应该问一下自己什么是网页,网页的目的和价值什么?
      我的理解是网页是一种文本,而文本的价值在于记录,表达和传递。网页应该是世界上最流行的文本,流行程度,范围已经超过过去的任何一种文本形式,在世界的沟通交流中有相当的作用和价值。
      1.什么是HTML?
      而作为一种文本,语言的载体,应该一种规范,这种规范是约定俗成的,由于大面积的使用后,这种规范被民间以及官方肯定。这就是我理解的HTML(HyperText Markup Language超文本标记语言),首先HTML是一种标记语言,而不是一种编程语言,标记的以及在于区分和更好的规范,其次HTML是一种文本,这种文本是在原来文本的基础上做了一定的修改。HTML的所有的标签的都来自于文本的标签(div是一个例外,或者将文本的page区块理解为div也没有不可以的),HTML就像是一个超word的word文档,只不过人们为了方便记忆,标记和书写,对这个文档做做了一定的转移和简化,这种简化通过浏览器在解析成了有对应类型和默认样式的文本内容。所以我一直认为写HTML就像写word,这两个是想通的,本质上都是在写一个标准的文本和符合排版的内容,在一个普遍写毕业论文而被格式所困扰和局限的时代里,我们怎么可以写出一个符合规范的,标记使用正确,并且排版整洁,有优美的HTML那?会写字的人多了去了,但是会写作的人少之又少,同样的道理,会写HTML大有人在,但是写好HTML的真的少之又少。而对HTML的标签的理解,我们不妨去多学几个英文,将简化后的HTML的标签语言再倒退回去,去理解HTML的标签和原意,这对我写HTML有莫大的帮助,这样我们就不难写出至少是符合规范的HTML,至少我们应该清楚,那些是段落,哪些只是句子,哪些是列表,哪里词语,哪里需要断句,在什么地方应该用什么样正确的标点符号。(附录一是HTML标签对应的英文全称和中文)
     2.HTML标签有什么不同?
      在上文中我说了,HTML是一种一种标记语言,是为了确定的约定俗成的规范,而这种确定约定俗成是来自于父亲元素---文本的的约定的规范和排版。这种规范被大部分浏览器厂商说认同,而HTML的发展历史,浏览器的利益战争注定了这个世界不可能只有一种声音,浏览器厂商在约定俗成的规范基础上对HTML的标签模式做了一定的改造,不同的浏览器内核对HTML标签解析有所不同,但是差异不是很大,这种解析是被注入在浏览器本身的底层代码中的。而这种浏览器厂家站在利益角度对规范的不同解读正是前端兼容工作的始作俑者,也是前端工程师发明reset.css的原因和基础。文本有一种规范,规范有不同的解读,而怎么样让文本内容以一种无偏差方式在人群中传递就成为前端工程师的工作和使命了。所以前端站在这种角度来看还是一个蛮神圣的职业,我们不断的为世界的文化事业而耕耘,为了促进点和点,面对面的交流做出我们力量,我们是中间的媒介的,而成为一个精确和标准的媒介应该是每一个前端的目标的自我要求。
      前面说了,文本有一种规范,规范是约定俗成的,大部分被浏览器认可,这种认可被注入到浏览器的底层代码中的,浏览器在解析的时候为特定的规范赋予特定的样式(CSS)。浏览器对这种规范的选择器是HTML标签(type),给这些HTML标签赋予了一定的样式,为了文本内容更好的被展现和排版。所以我的理解是浏览器默认样式就像是在起解析文本的时候引入了一个自己浏览器的内置的css文件,css文件中使用HTML选择器,对HTML标签预付对应的可以被大部分用户接受的css属性。而reset.css是为了写了一些css,建原来的浏览器内置样式进行覆盖和重新定义。目的当然是为了规范更加规范,为了更好的表达和传递。
      在浏览器的默认样式中设计CSS的大部分属性,而决定HTML标签的本质的样式是display属性。
      说到这里,我们不妨抬起头看看周围,XML远处静坐。恩,那是没有被规范的文本。是HTML的兄弟。
 3.HTML有哪些分类?
      前面我提到了浏览器的默认样式,也说了display对HTML起的重要性。
      我们先来重温一下display属性有哪些值吧。display:none、inline、inline-block、block、list-item、table、table-cell和table-row。
      display是css中很重要的一个属性,可能是最重要的一个属性了吧,所以个人认为在涉及css书写顺序的时候display应该写在第一位,在年初中对寒冬大大的问题的回答中我有提及,display的重要性和display、postion还有float的组合内容形式。
      我们一般根据那种约定俗成的归纳---浏览器对HTML的默认属性设置,将HTML标签分为内联(行内)元素,内联块元素,块元素,列表元素,表元素,表格单元格元素,和表格行元素。这是HTML非常重要,也是最基础的一个分类,是HTML标记的最最根本的东西。而这些分类的依据是HTML标签对应的display属性,浏览器默认样式对HTML标签display的设置,这个规范是被所有浏览器认可的,而这种认可是有道理的,一般情况下我不建议你修改display属性,或者在你修改display前你应该思考一下是不是应该更换HTML标签。(display:none除外,个人只是隐约感觉display,float和postion是涉及浏览器内存解析数据结构的三个css重要属性,这三个属性是css最重要的属性,也是最被常用,同样也是最难以理解的三个属性,对这三个属性的变换会直接影响标签的展现已经对其他如width,height,padding等属性有一定的年代影响作用,后文我会对这些内容讲述的我的理解,以及我对浏览器内存数据结构的一个猜想)。
      《设计模式》在依据display分类的基础上提出了多种标签分类方式,将HTML标签分为:结构化元素 ,块状元素(这边块状元素又细分为机构化块状元素,终端块状元素,多目标块元素)和内联元素(这边内联元素又细分为内联语义元素,内联块状元素,内联排列顺序元素)。

        这应该是比较完善的HTML分类方式,而不是只有块状元素和内联元素这两个。同时我们将HTML标签当做是容器,用于存放内容的工具。而对容器的理解可以参考盒元素的盒子容器,(其实个人早起将容器理解为画框,这样对margin,boder,padding内容就比较好理解,但是HTML本身是一种立体结构,而并非我们认为的那样平面结构,一个网页拥有X,Y,Z(z-index)三个坐标轴。其实做过PS的人将HTML的结构理解为图层的概念是我个人认为做好的一个对HTML容器的理解方式。)
      3.1.结构化块状元素:  <html>,<body>,<head>
      我只能讲结构化元素当做是一个大的,特殊的元素元素,也很难说清楚其在浏览器中是否有同样的默认样式,但是这是HTML标签的根基和基础。找<body>容器中我们放置文本内容.而在<head>容器中放置对文本的定义和表述,<meta>,<link>,<script>等内容信息
      3.2.块状元素:这些HTML的display默认值都是block
       《设计模式》将块状元素依据可以放置的文本内容细分为三种。
           注:这是一本翻译与2008年的书,写书的时间可能还要更早,所以这边没有HTML5新加的标签的内容。
          3. 2.1 结构化换块状元素:<ol>,<ul>,<dl>,<table>,<tr>,<thead>,<tfooter>,<tbody>,<colgroup>,<col>
           我们可以将结构化换块状元素理解为这种会计元素的存在只是一种包裹,一种为了结构而存在的块状元素。其实这种模式的包裹在前端开发中是很常见的,在自己开发人员的书写中也是用的非常多的,我想里面大部分人都将过<div class=“wrapper”>和<div class="container">吧。
           结构化块状元素的使用的HTML结构的一个重要手段,合理有修有的HTML文档结构才可以让浏览器解析出干净和公正的浏览器视图,这对SEO,以后的文档转化,提取都有重要的意义,当然后台就是这些结构会直接生成DOM结构,对立书写js有相当重要的影响。
           3.2.2 多目标块状元素:<div>,<li>,<dt>,<td>,<th>,<form>,<noscript>
                   在上面我说了,这种分类的依据是容器中可以放置的文本内容。所以多目标的含义就是在这些HTML中可以放置的内容是多目标的。一来可以放置文本,内联元素,同样在里面可以放置块状元素。
          3.3 内联元素:这些HTML标签的默认值都是inline,或者是inline-block
           依据文本内容的不同,或者为了标记文本的内容的不同建内联元素分为下面三种:
                     3.3.3.1内联语义化元素:
                                重要:<span>,<em>,<strong>
                               词组:<a>,<cite>,<code>,<kdb>,<samp>,<var>
                               单词:<acrouny>,<abbr>,<dfn>
                               字符:<sub>,<sup>

                     3.3.3.2内联排列顺序元素:<br>,<bdo>
                     3.3.3.3 内联块状元素:
                             替代:<img>,<object>,<embed>,<iframe>
                             控制:<iuput>,<textarrea>,<select>,<button>,<label>
           这里面的有点形而上学,更多是一种分类的依据,的确比较难以理解。其实个人感觉去看看JS的DOM结构在回来看看这部分内容可能对这一块的理解有一定的帮助。
           最后我不禁自己要问自己,那到底什么是块状元素,什么是内联元素那,只是因为display的是inline和block吗?那为什么inline是inline,block是block那。那我只能说,应该是浏览器解析机制的不同的,浏览器在内存中对这两种模式应该是不同的解析机制的,可能这是两种不同的数据结构吧。inline就像是数组,你可以在里面不断的加东西,block就像是指针,有时候规定了存储空间大小,有时候没有。大概是这样吧。我只是感觉block是对外部容器而言的,就像margin是自己和外部容器的关系,inline是对内部元素而言的,,就像padding,是自己和内容元素的关系。
           3.什么是HTML结构化和语义化?
           工作就是工作,生活就是生活,什么岗位干什么货,什么时间做什么事情。该吃饭的时候吃饭,该睡觉的时候睡觉。好像是这样的吧,但是真的很难。

附录: 1.HTML标签对应的英文单词和中文意思 见附录一 2.如何理解HTML语义化。http://runkeji.com/index.php/articlelist_view_id_49/ 3.HTML就是写在网页上的word http://weibo.com/p/1005051693902055/weibo?profile_ftype=1&key_word=word&is_search=1#_0

评论
发表评论
暂无评论
WRITTEN BY
战国斯迪
90没有后,守法不听话。
TA的新浪微博
PUBLISHED IN
温故知新----重拾前端
      因为某些原因我翻出了在我衣柜里被我冷置的前端书籍,开始不知道第几次重新读这些书籍。我有在试卷和书籍上写阅读日期和想法和对生活感悟的习惯。我始终坚持我初中班主任认为的那样一张试卷干净是虚伪的表现,所有思想的过程都可以在通过回忆,是纸张和书籍的价值。这也是我在某种程度上抵抗电子图书的原因。
      专栏的题目叫做温故知新。但是我感觉为师就算了,交流或者说是分享吧。我一直认为分身份的教育都是低效和阶级性的。而作为互联网行业时代的重业者,随着可以和黑客精神长大的我们,不应该提倡甚至应该站出来抵抗这这教育的纯在。社区精神也罢,黑客精神也好,开源意识也可以,但中我始终认为教育或者只是的知识无非是问道有先后,术业有专攻。后端不应该看不起前端,前端不应该看不起美工,大大不应该看不上小牛,小牛不应该看不起菜鸟,如此这般,这般如此,这也是我上次一次在前端界出声表达的一种想法。
      我一直以来写的很少,交流很也少,一来是并没有什么拿的出手的东西,二来是知乎的观众心态。
      我也不知道我的专题会写到一个什么样的程度,但是我在第一篇中就说了。文字的本质是记录,而交流和沟通只是在我满足后附带价值。所以我在做的只是在我取悦的事情,而别人的关注瞒住的只是人性中渴望被关注的心理,会成为自己继续的动力,但是不会成为我写好这专题的原因。
      在我的《设计模式》第一页的第一个日期是2011.06.11 还有我原来的一个英文名已经我曾经所在的一个比较纯粹的电脑交流平台的logo。在衣柜最下面抽出这本书的时候我思绪万千,想起了很多的人,也想起了很多的事情。恩。应该写点什么了吧。就当是为了自己,为了我一下次读这些书的时候的可以回忆起一些事情,毕竟那是我们在这个世界生存过的痕迹。
      这个专题只是我的一个读书记录和感想记录。我至少我写完我认为的HTML和CSS。但是对JS我始终感觉还是不怎么自信。
      我想了一下,就像我前几天和朋友说我有点想转销售的时候,朋友和说可惜了呀。我曾经对一个全美和全国数学竞赛一等奖最后迫于生计为销售奔波后对朋友说可惜了呀一样。我只是相对自己说我不做前端是有点可惜了,毕竟那些东西占据了我大学生涯的一半时间和经历。

友情链接 大搜车前端团队博客
我的收藏