朝花夕拾《精通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、所有元素必须是封闭的，即要有结束标签。而空元素的话可用/>来结束。
正确：
<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 转化、过渡、动画等略
转载于:https://www.cnblogs.com/xjnotxj/p/11251566.html
朝花夕拾《精通CSS》一、HTML CSS 的基础相关推荐
- css做名单,css基础教程：2021年适合新手的7个CSS入门教程推荐
上一篇我们向同学们推荐了5个html入门教程,本篇我们继续向同学们精选推荐一些适合新手学习的CSS基础入门教程,欢迎学习! 首先我们来介绍什么是CSS?以及CSS的作用 CSS 是一种标准样式表语言, ...
- CSS核心概念一把梭-基础部分
封面图片来自Google 1.基本语法 mdn w3cSchool 2.选择器 2.1.选择器类型 (1).简单选择器 通过元素类型 tagName.*..class 或 #id 匹配一个或多个元素. ...
- oocss_面向对象CSS（OOCSS）的基础
前端开发Swift发展,并且每年都添加许多新技术. 对于开发人员来说,跟上所有事情可能是一场斗争. 在Sass和PostCSS之间,很容易迷失在开发工具的海洋中. 一种较新的技术是面向对象CSS,也简 ...
- html精灵图资源,知识分享：HTML5+CSS3基础之CSS Sprites（CSS精灵）
原标题:知识分享:HTML5+CSS3基础之CSS Sprites(CSS精灵) CSS Sprites介绍 Css sprites 可翻译为css精灵,也有人翻译为css雪碧,因为sprite也有雪 ...
- W3school：CSS基础：CSS边框、CSS边距、CSS高度/宽度、CSS框模型、CSS轮廓
W3school:CSS基础:CSS边框.CSS边距.CSS高度/宽度.CSS框模型.CSS轮廓 1.CSS边框(边框.边框宽度.边框颜色.边框各边.简写边框属性.圆角边框) 2.CSS边距(外边距. ...
- css 字体字体图标_CSS基础知识：了解字体
css 字体字体图标 In this tutorial, we'll be learning about working with fonts in CSS! 在本教程中,我们将学习有关在CSS中使用 ...
- CSS从零开始(1)--CSS基础语法
1.CSS语法 CSS规则有两个主要部分构成:选择器,以及一条或多条说明. 例如:selector{declaration1;declaration2;declaration3;......;} 注: ...
- html5教程精灵,HTML5+CSS3基础之CSS Sprites（CSS精灵）
CSS Sprites介绍 Css sprites 可翻译为css精灵,也有人翻译为css雪碧,因为sprite也有雪碧的意思.在国内习惯成他为图片整合技术,说起来这个称呼也是满贴切的,因为他确实是多 ...
- 【海码学院】web前端基础入门CSS之常见CSS兼容问题学习笔记
一.兼容性处理要点 1.DOCTYPE 影响 CSS 处理: 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important ...
- vue css 应用变量_如何使用CSS Grid和CSS变量快速为应用创建原型
vue css 应用变量 CSS Grid and CSS Variables are both huge wins for front-end developers. The former make ...
最新文章
- 元宵节快乐 | 启明云端邀您一起猜灯谜了
- Python的可变类型与不可变类型
- Kafka-＞Flink-＞Hbase(纯DDL/DML形式)
- ipad和iphone切图_如何在iPhone和iPad上密码保护照片
- 修改图层的范围_【PS|第39期】数字绘画 使用填充图层
- LeetCode 101对称二叉树-简单
- jsp页面页面post传值_在Js页面通过POST传递参数跳转到新页面详解
- 纷享逍客宣布完成E+轮融资 长山兴资本领投
- 非精确运算和精确运算
- WAP 手机及开发技术调研（转）
- xsmax无法进入dfu模式_iPhoneXS/XSMax如何强制重启？如何进入恢复模式或DFU模式？...
- Android能装到电脑上吗,怎么在电脑上装安卓系统
- win10如何删除计算机用户,Win10系统如何删除账户？Win10系统删除账户的方法
- 西部陆海新通道海铁联运通达中国六省市
- 撤回的微信消息腾讯服务器有记录吗,教你如何查看对方已经撤回的微信消息
- Windows Terminal PowerShell 7 美化
- LMS与RLS算法学习笔记
- 09 如何通过搜索引擎寻找海量的免费商用图片
- python-日历模块
- CodeVS 1003 电话连线