一、背景

翻出我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推荐标准发布。

插曲：这中间 W3C 走向了一条”歪路“，即推出 XHTML（下面会介绍），它是基于 HTML，但借用了 XML 的写法，但太严格、不向后兼容等缺点导致适得其反（尤其是 XHTML2.0 直接在草案阶段就腹死胎中），于是几大浏览器厂商联合起来成立了 WHATWG 制定新的标准，好在 W3C 及时认清回头，加入了 WHATWG 并肩作战，最后推出 HTML5，成为至今的主流。

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、所有元素必须是封闭的，即要有结束标签。而空元素的话可用/>来结束。

正确：<br />

错误：<br>

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

正确：<td rowspan="3">

错误：<td rowspan=3>

4、禁止属性简化

正确：<dl compact="compact">

错误：<dl compact>

5、必须包含一个文件头声明 <!DOCTYPE>

文档标记类型<!DOCTYPE html>用于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

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

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>文章详情</title>

  </head>

  <body>

    <nav>

      <ul>

        <li>网站导航栏 - 1</li>

        <li>网站导航栏 - 2</li>

      </ul>

    </nav>

    <article>

      <header>

        <h1>文章标题</h1>

        <h2>文章副标题</h2>

      </header>

      <aside>

        <h1>文章作者</h1>

        <p>文章作者简述</p>

        <time datetime="2019-07-26" pubdate>文章发布日期</time>

      </aside>

      <figure>

        <img src="#" alt="文章配图" />

        <figcaption>文章配图说明</figcaption>

      </figure>

      <p>文章内容..</p>

      <p>文章内容..</p>

      <p>文章内容..</p>

      <section>

        文章互动区（点赞等）

      </section>

      <section>

        文章分享区

      </section>

      <article>

        <h2>评论区</h2>

        <article>

          <header>

            <h3>评论者: 专业水军</h3>

            <p>

              <time pubdate datetime="2018-03-23T15:10-08:00">~1 min ago</time>

            </p>

          </header>

          <p>还行</p>

        </article>

        <article>

          <header>

            <h3>评论者: 大水怪</h3>

            <p>

              <time pubdate datetime="2018-03-23T15:10-08:00">~1 hour ago</time>

            </p>

          </header>

          <p>楼上说的对</p>

        </article>

      </article>

      <footer>

        文章版权说明

      </footer>

    </article>

  </body>

</html>

注意点：

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 的一套机制。

主要通过role和aria-*来标识，例如下面用无语义的 div 实现的进度条：

<div id="percent-loaded" role="progressbar" aria-valuenow="75"

     aria-valuemin="0" aria-valuemax="100" />

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

8、HTML5 的最简格式

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>文档标题</title>

  </head>

  <body>

    文档内容......

  </body>

</html>

三、CSS

1、什么是 CSS ？

层叠样式表（英语：Cascading Style Sheets，缩写：CSS）

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

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

2、CSS区分大小写

2、CSS 的最新版本？

CSS3 是最新的CSS 标准，由万维网联盟（W3C）定义和维护。

3、引入 CSS 的几种方法

方法一 直接 外部样式表 [推荐]
<link rel="stylesheet" type="text/css" href="my.css"/>
方法二 间接 外部样式表
<style type="text/css">

	@import "mystyle.css";

</style>

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

方法三 内部样式表
<style type="text/css">

	div{margin: 0;padding: 0;border:1px red solid;}

</style>
方法四 内联样式
<div style="border:1px red solid;">测试信息</div>

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 的基础的更多相关文章

  1. Html 之div+css布局之css基础

    Css是什么 CSS即层叠样式表(Cascading StyleSheet). 在网页制作时采用层叠样式表技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制. 只要对相应的代码 ...

  2. css系列教程--简介及基础语法和注意事项

    css简介:css指的是层叠样式表,cascading style sheets.用来定义html中的dom节点如何展示在页面中的问题.解决了内容与表现形式的分离问题.常见的样式表有外部链接样式表和内 ...

  3. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

  4. Css入门课程 Css基础

    html css javascript三者关系 html是网页内容的载体 css是网页内容的表现,外观控制 javascript是网页逻辑处理和行为控制 css相对于html标签属性的优势 css简化 ...

  5. css基础-css选择器和css文本样式相关

    css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 : ...

  6. CSS学习笔记1：基础知识

    CSS规则由两部分组成,选择器和声明     选择器:标签,告诉浏览器哪些标签需要用到这个样式     声明:样式的内容,由一或多对属性:值以:隔开组成,由{}包围,需要多个选择器时以逗号隔开     ...

  7. CSS从零开始(1)--CSS基础语法

    1.CSS语法 CSS规则有两个主要部分构成:选择器,以及一条或多条说明. 例如:selector{declaration1;declaration2;declaration3;......;} 注: ...

  8. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

  9. [HTML & CSS] HTML和CSS基础知识

    最近将博客简单地修饰了下,需要用到HTML和CSS代码,花了一天时间学习了一下这两方面的知识.虽然内容很简单,但是足够用来修改自己的博客了. 1. HTML 1.1. HTML介绍 HTML与CSS的 ...

  10. 关于CSS你应该知道的基础知识 - 样式应用篇

    上一篇简单总结了一下选择器,如果一个元素被多个选择器选中,元素的样式就会以级联方式被应用到.要搞清最终那个样式被应用到元素上了,首先要明白引用CSS代码的几种方式. CSS代码引用方式 如何应用CSS ...

随机推荐

  1. 一篇文章看清楚JDK13的特性！

    1.switch优化更新 JDK11以及之前的版本: switch (day) { case MONDAY: case FRIDAY: case SUNDAY: System.out.println( ...

  2. go1.13 mod 实践和常见问题

    实践建议 0,go mod 要求所有依赖的 import path 的path 以域名开头,如果现有项目转1.13的go mod 模式,且不是以域名开头则需要修改. eg: code.be.mingb ...

  3. C语言每日一练——第4题

    一.题目要求 已知数据文件in.dat中有300个四位数,并调用readDat()函数把这些数存储数组a中,编写函数jsValue(),其功能是:求出所有这些四位数是素数的个数cnt,再把所有满足此条 ...

  4. 你不知道的JavaScript（上）作用域与闭包

    第一部分 作用域与闭包 第一章 作用域是什么 1.作用域 变量赋值操作会执行两个动作:首先编译器会在当前作用域中声明一个变量(如果之前没有声明过), 然后会在运行时引擎会在作用域中查找该变量,找到就会 ...

  5. 服务器上无法调用Office组件的解决方法（HRESULT:0X800A03EC异常）

    HRESULT:0X800A03EC的异常,经过多番查找,终于找到了解决方法,在 Windows 2008 中, 如果以 SYSTEM 用户跑, 系统会去寻找 SYSTEM 这个用户的 Profile ...

  6. 《Java基础知识》Java静态内部类、匿名内部类、成员式内部类和局部内部类

    内部类可以是静态(static)的,可以使用 public.protected 和 private 访问控制符,而外部类只能使用 public,或者默认. 成员式内部类 在外部类内部直接定义(不在方法 ...

  7. 迈布-----UE4AI自动巡逻与攻击

    这个行为树给我恶心的都想吐,我用的是4.24,跟着官网做达不到那个效果,跟着视频做也达不到那个效果,跟我弄的非常不耐烦,最后终于在今天整出来了.有的地方用了一下我自己的逻辑.//诸位依靠教程的,一定得 ...

  8. Centos6.5 Intel X722 编译安装网卡驱动

    1,编译环境准备,安装好kernel-devl ,kenel-headers等; 注意: 一定要注意kernel 的内核,一定要保持被安装的机器与编译的内核保持一致; 下载驱动地址:https://d ...

  9. Spring Boot微服务电商项目开发实战 --- 分布式开发要避的那些坑

    今天已经进入第七讲了,整个微服务架构的搭建工作也基本完成.那到目前为止究竟使用了那些技术及实现了什么功能呢?我们先回顾一下. 使用的技术:SpringBoot.Dubbo.Zookeeper.Redi ...

  10. ProcessExplorer 工具下载

    链接:https://pan.baidu.com/s/1RPYkFqIMvBX2OKvTm0bgkw 提取码:4v5v