静态页面cheat sheet v1.0

unity-googlizer-2-638.jpg

之前说到了要有我自己的cheat sheet,所以在正式开始做实际案例之前,我先拟一个自己的cheat sheet v1.0,目的就是用自己的语言总结一下怎么写html。因为学了几天的html\css,感觉知识太多太杂,很难有体系的记住。但是我又是有点感觉不学好基础的就写页面不放心,为了改掉这个坏毛病,自己写拟一个cheat sheet v1.0,然后做实际案例就直接看自己的cheat sheet,如果解决不了,在找其他方式。多做几个案例之后再反复迭代自己的cheat sheet。

注意,我自己的cheat sheet 完全是按照自己的理解杜撰的,尽量做到是html css规范的一个子集,但是肯定有很多错误的地方的。

好了,扯淡正式开始。

1.什么是"LEE文本"

向传统的报纸一样,用户在网页上看到的内容无非就是文字内容、图片,当然现在的网站上还可以放音乐、视频等多媒体内容。基于报纸的例子在多说一句,为了让大家更好的阅读报纸,报纸会有标题、段落啊之类的。处于同样的目的,网页上的内容为了让用户更好的阅读,也需要有标题、段落之类的。为了通用和效率,就有一帮人决定用纯文本的方式来表示网页里的内容,为了在纯文本里表示出哪些是标题、段落,他们就想到了在纯文本里加上标签来表示标题、段落等语义,HTML就诞生了。HTML是网页制作人员和浏览器之间交流的格式,我们普通用户最终看到的是不带标签的由浏览器按照网站制作人员的要求为我们解读出来的最终内容。

好了,回到正题,用户最终在浏览器里面看到的内容我自己把他定义为“LEE文本"。(不直接叫文本就是因为大家潜意识里面对文本有一个通用的概念)。好了现在来看看我所定义的“LEE文本”具体包含哪些内容:

  1. 普通文本:就是html标签里面直接写的文字
  2. 链接文本:就是 <a>普通文本</a>
  3. 个性化文本:就是与周围普通文本不一样的文本,就是 <span>普通文本</span>
  4. 普通图片:就是 <img />标签
  5. 链接图片: <a>普通图片</a>
  6. 表单: <input />
  7. 特殊字符 : 换行 <br /> 空格 

2.所有"LEE文本"都是要包裹在“LEE语义标签”内的

上面大致提到了HTML的作用,毫不夸张的说:html中,除了语义,其他什么都没有。我自己所定义的“LEE文本”必须包裹在一个“LEE语义标签”内,反过来说每个“LEE语义标签”里面只能放“LEE语义元素”。

现在来看看哪些标签不幸入选了“LEE语义标签”:

  1. h1~h6系列标签
  2. p
  3. ul>li组合标签:组合标签的是只能一起用,不能单独用。

3.所有的“LEE语义标签”都至少包裹在一个“LEE结构标签”内的

结构标签就是来构建页面结构用的标签,可以想象成活字印刷术里面用的板子。html5里面新增加了很多语义化的结构标签,但是“LEE结构化标签”里面只有:<div class="语义文本">....</div>

4.“LEE页面布局”技术

很简单,

  1. 上下用标准文档流BFC(注意怎么margin塌陷问题怎么解决)
  2. 左右用float(注意怎么清楚浮动怎么解决)

总结:我自己的html\css cheat sheet v1.0

我的htmlcss总结v1.0.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,590评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,808评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,151评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,779评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,773评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,656评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,022评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,678评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,038评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,756评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,411评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,005评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,973评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,053评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,495评论 2 343

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,596评论 18 139
  • 什么是HTML HTML其实是HyperText Markup Language的缩写, 超文本标记语言 HTML...
    cheney0217阅读 419评论 0 1
  • 什么是HTML HTML其实是HyperText Markup Language的缩写, 超文本标记语言 HTM...
    极客江南阅读 21,880评论 29 196
  • 与会人员逐渐散去了,椭圆形的会议桌上只剩下崔总和宁海对面而坐。崔总点燃一只七星,深吸一口,冲着会议室的禁烟标志呼出...
    克制求简阅读 179评论 0 0
  • 这个故事的主人公是一位老太太,我们称她为X吧,年纪大概在70岁左右,看上去是经过风吹日晒的,所以我有可能估高了她的...
    空思我阅读 394评论 0 1