朝花夕拾《精通CSS》一、HTML & CSS 的基础

一、背景


翻出我4年前看的《精通CSS》一书,可惜当初没有整理读书笔记的习惯,最近又很少写前端,遂很多东西、知识点遗忘了,恰且现在 css 也有些变化和进步,遂一起打包整理,输出成几篇 blog 系列,以犒自己。

二、HTML


1、什么是 HTML?

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言

超文本(Hypertext)是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本。

2、HTML 历史

1980年,物理学家蒂姆·伯纳斯-李在欧洲核子研究中心(CERN)在承包工程期间,为使CERN的研究人员使用并共享文档,他提出并创建原型系统ENQUIRE。

ENQUIRE 即最早的雏形。

1993年中期,互联网工程任务组(IETF)发布首个HTML规范的提案:超文本标记语言(HTML)互联网草案,由伯纳斯-李与丹·康纳利撰写。

1995年11月24日,HTML 2.0作为IETF RFC 1866发布。

2000年,HTML成为国际标准(ISO/ IEC15445:2000)。

1997年12月18日,HTML 4.0作为W3C推荐标准发布。

1999年12月24日,HTML 4.01作为W3C推荐标准发布。

HTML 4.01 又称 XHTML1.0

2014年10月28日,HTML 5作为W3C推荐标准发布。

3、微格式

由于 HTML 中缺少相应的元素,很难突出显示人、地点或日期等类型的信息。为了解决这个问题,有一组开发人员决定开发一套标准的命名约定和标记模式来表示这些数据。这些命名约定基于 vcard 和 icalendar 等现有的数据格式,现在称为微格式(microformat)

当前有 9 个正式的微格式,还有 14 个格式草案。例如一些:

ロ用于日期、日历和事件的 hCalendar

ロ用于人和组织的 hcard

ロ用于人之间的关系的 XFN

口用于产品说明的 hproduct(草案)

口用于原料和烹调步骤的 hrecipe(草案)

ロ用于产品和事件审查的 hreview(草案)

口用于博客帖子等片段式内容的 hatom(草案)

4、什么是 XML ?

可扩展标记语言(英语:Extensible Markup Language ,XML )。

1、跟 HTML 的共同点:

都是标记语言,为了标记数据的含义。

2、跟 HTML 的不同点:

HTML 只是用来描述网页数据,而是 XML 可以用来描述几乎所有数据。

HTML 的标签是 W3C 制定好的,但 XML 完全可以自定义标签,创造自己的规范。

题外话,笔者之前用到 Web service 技术,用到的数据传输格式就是 XML。

5、什么是 XHTML?

可扩展超文本标记语言(英语:eXtensible HyperText Markup Language,XHTML

为了约束 HTML 松散的语法,把严格的 XML 套在了 HTML 身上,即诞生了 XHTML。

XHTML 就是以 XML 的语法形式来写 HTML。

语法的严格体现在——例如:

1、元素名称和属性必须小写

2、所有元素必须是封闭的,即要有结束标签。而空元素的话可用/>来结束。

正确:

错误:

3、所有 XHTML 属性必须包含引号

正确:

错误:

4、禁止属性简化

正确:

错误:

5、必须包含一个文件头声明

文档标记类型用于HTML5

6、语义化HTML

(1)语义化HTML作用

1、利于 SEO (搜索引擎)

2、利于爬虫

3、方便无障碍浏览

(2)例1:strong / em / i / b几个标签的区别

strong 标签表示很强的强调,表现为字体变粗。

em 标签表示稍强的强调,表现为斜体。

i 标签表示因为某种原因和正常文本不同的文本,例如专业术语、外语短语等。

b 标签 没有语义,建议用 css 的 font-weight:bold。

(3)例2:语义化HTML 实例 demo

这里模仿一个文章详情页的网页:



  
    
    文章详情
  
  
    
    

文章标题

文章副标题

文章配图
文章配图说明

文章内容..

文章内容..

文章内容..

文章互动区(点赞等)
文章分享区

评论区

评论者: 专业水军

还行

评论者: 大水怪

楼上说的对

文章版权说明

注意点:

1、header 和 footer 适用于 article 或者 整个 body

2、acticle、nav、aside 可以理解为特殊的section,如果可以用 article、nav、aside 就不要用section,实在没有实际意义的就用 div。

(4)语义化HTML的市面使用情况

我这里随便挑了几家,

国外的 medium,支持的还不错。

但国内的知乎、简书,都是 div + span 党,还是不行。


更多的HTML5标签参考:HTML5 标签列表

7、ARIA

ARIA(Accessible Rich Internet Application 无障碍富互联网应用),是能够让残障人士更加便利的访问 Web 的一套机制。

主要通过rolearia-*来标识,例如下面用无语义的 div 实现的进度条:

这里平时的开发几乎不会涉猎,故不做深究。

8、HTML5 的最简格式



  
    
    文档标题
  
  
    文档内容......
  

三、CSS


1、什么是 CSS ?

层叠样式表(英语:Cascading Style Sheets,缩写:CSS

样式和表很好理解,层叠是什么意思呢?后面的文章我会有详细的介绍。

1、CSS 属于领域专用语言(DSL)

2、CSS区分大小写

2、CSS 的最新版本?

CSS3 是最新的CSS 标准,由万维网联盟(W3C)定义和维护。

3、引入 CSS 的几种方法

方法一 直接 外部样式表 [推荐]
方法二 间接 外部样式表

导入样式表比链接样式表慢。

方法三 内部样式表
方法四 内联样式
测试信息

4、CSS 语义化

如果说HTML语义化标签是给机器看的,那么CSS命名的语义化就是给人看的。

5、CSS 书写小技巧

(1) 可以去掉小数点前的 0

font-size : .8em

(2) 0后面无需跟单位

.class{padding:0;}

(3) url()里面的value不用加引号

url(images/logo.png)

(4) 有意义的注释

为了使注释更有意义,可以使用关键字来区分重要的注释。我使用 @todo 来表示某些东西需要在以后进行修改、修复或复查,用 @bugfix 表示代码或特定浏览器遇到的问题,用 @workaround 表示并不完普的权宜之计。

6、CSSDOC

貌似很少有人专门去用,暂略。

7、CSS3 新特性

2D、3D 转化、过渡、动画等略

你可能感兴趣的:(朝花夕拾《精通CSS》一、HTML & CSS 的基础)