html css周志,一周一章前端书·第12周：《HTML与CSS进阶教程》S01E01

第01章 HTML基础知识

1.1 HTML和CSS的进阶简介HTML、CSS、JavaScript是前端最核心的三大技术。其中HTML和CSS是基础，入门也很容易，以致于很多人觉得HTML和CSS没什么技术含量。

真是这样吗？试着思考以下问题：什么是HTML语义化？对于标题、图片、表格、表单，如何更好的实践这些内容的语义化？

什么是外边距叠加？出现外边距叠加的根本原因是什么？

在CSS中，关于命名、书写以及注释都有哪些规范，以利于团队开发和后期维护？

说一下display属性的理解，属性值block、inline、inline-block、table-cell的区别？

是否深入了解过text-indent、text-align、line-height以及vertical-align属性，有哪些高级技巧？

为什么overflow:hidden可以清除浮动？

CSS有哪些性能优化技巧？如何使用更高性能的选择器？

如何使用CSS实现各种图形效果，例如三角形、圆、椭圆等。

解释一下包含块、BFC和IFC、层叠上下文等概念。

如果以上问题有一半都答不上来，说明连“熟悉CSS”的程度都算不上，更别说“精通CSS”。

1.2 HTML、XHTML和HTML5HTML (HyperText Mark-up Language)超文本标记语言：把HTML和XHTML和HTML5一起谈时，通常指的是HTML 4.0；

XHTML (EXtensible HypeText Mark-up Language)扩展的超文本标记语言：这是XML风格的HTML 4.0，可以说是语法更严谨、结构更纯净的HTML过渡版本。比如：标签必须闭合：
(×错误)，
(√正确)；

标签和属性必须小写：

标签属性值必须用引号括起来：(×错误)，(√正确)；

用id属性替代name属性：

(×错误)，

(√正确)；

HTML5 ：是新一代的HTML标准，HTML 4.0的升级版。HTML5版本不仅仅是规范了一些标签，还增加了一系列新技术，包含canvas、SVG、websocket、本地存储等。举例：省略形式等价于checkedchecked='checked'

readonlyreadonly='readonly'

deferdefer='defer'

ismapismap='ismap'

nohefnohref='nohref'

noshadenoshade='noshade'

nowrapnowrap='nowrap'

selectedselected='selected'

disableddisabled='disabled'

multiplemultiple='multiple'

noresizenoresize='noresize'

HTML 5允许的简写属性：省略形式等价于checkedchecked='checked'

readonlyreadonly='readonly'

deferdefer='defer'

ismapismap='ismap'

nohefnohref='nohref'

noshadenoshade='noshade'

nowrapnowrap='nowrap'

selectedselected='selected'

disableddisabled='disabled'

multiplemultiple='multiple'

noresizenoresize='noresize'定义HTML5文档的类型更简化：；

标签不区分大小写：

测试

；

标签的属性值允许不加引号：

容器

；

某些标签的属性值可忽略不写：；

1.3

和

和都是没有语义。

div是块元素(block)，可以包含其他元素，常用于页面较大块的结构划分和布局；

是行内元素(inline)，只用来包含文字；

1.4 id和class我们在写jQuery代码时，经常通过元素的id和class来选择元素，似乎并没什么区别。但在定义HTML元素时，具体什么时候要用id，什么时候用class呢？

id是HTML元素的唯一标识，同一个页面相同的id只允许出现一次。W3C建议，只对页面关键性的结构或者大结构才使用id。 比如LOGO、导航、主体内容、底部信息栏等。这是因为搜索引擎识别页面结构时，主要是根据标签的语义以及id属性来识别的，因此id属性不能滥用。

class是抽取相同的样式代码，应用到多个元素上，以减少重复代码。 通常元素会应用多个class样式，一个是公共样式，一个是单独样式。

示例，三个

标签应用了column样式的同时，还拥有自己的样式：

1.5 设置浏览器标题小图标rel和type两个属性值是固定形式，href是小图标的URL地址。注意：小图标必须是.ico格式

作者：梁同学de自言自语

链接：https://www.jianshu.com/p/bda3729a8eed