一周一章前端书·第12周：《HTML与CSS进阶教程》S01E0
2018-01-12 本文已影响33人
梁同学de自言自语
第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和HTML5
- HTML (HyperText Mark-up Language)超文本标记语言：把HTML和XHTML和HTML5一起谈时，通常指的是HTML 4.0；
-
XHTML (EXtensible HypeText Mark-up Language)扩展的超文本标记语言：这是XML风格的HTML 4.0，可以说是语法更严谨、结构更纯净的HTML过渡版本。比如：
- 标签必须闭合：
<br>（×错误），<br/>（√正确）； - 标签和属性必须小写：
<DIV></DIV>（×错误），<div></div>（√正确）； - 标签属性值必须用引号括起来：
<input type=text>（×错误），<input type="text">（√正确）； - 用id属性替代name属性：
<div name="wrapper">（×错误），<div id="wrapper">（√正确）；
- 标签必须闭合：
-
HTML5 ：是新一代的HTML标准，HTML 4.0的升级版。HTML5版本不仅仅是规范了一些标签，还增加了一系列新技术，包含canvas、SVG、websocket、本地存储等。举例：
- 定义HTML5文档的类型更简化：
<!DOCTYPE html>； - 标签不区分大小写：
<div>测试</DIV>； - 标签的属性值允许不加引号：
<div id=wrapper>容器</div>； - 某些标签的属性值可忽略不写：
<input type="checkbox" checked>；
省略形式 等价于 checked checked='checked' readonly readonly='readonly' defer defer='defer' ismap ismap='ismap' nohef nohref='nohref' noshade noshade='noshade' nowrap nowrap='nowrap' selected selected='selected' disabled disabled='disabled' multiple multiple='multiple' noresize noresize='noresize' HTML 5允许的简写属性：
省略形式 等价于 checked checked='checked' readonly readonly='readonly' defer defer='defer' ismap ismap='ismap' nohef nohref='nohref' noshade noshade='noshade' nowrap nowrap='nowrap' selected selected='selected' disabled disabled='disabled' multiple multiple='multiple' noresize noresize='noresize' - 定义HTML5文档的类型更简化：
1.3 <div>和<span>
-
<div>和<span>都是没有语义。 -
div是块元素(block)，可以包含其他元素，常用于页面较大块的结构划分和布局； -
<span>是行内元素(inline)，只用来包含文字；
1.4 id和class
- 我们在写jQuery代码时，经常通过元素的
id和class来选择元素，似乎并没什么区别。但在定义HTML元素时，具体什么时候要用id，什么时候用class呢？ -
id是HTML元素的唯一标识，同一个页面相同的id只允许出现一次。W3C建议，只对页面关键性的结构或者大结构才使用id。 比如LOGO、导航、主体内容、底部信息栏等。这是因为搜索引擎识别页面结构时，主要是根据标签的语义以及id属性来识别的，因此id属性不能滥用。 -
class是抽取相同的样式代码，应用到多个元素上，以减少重复代码。 通常元素会应用多个class样式，一个是公共样式，一个是单独样式。 - 示例，三个
<div>标签应用了column样式的同时，还拥有自己的样式：
<div class="column blog"></div>
<div class="column manual"></div>
<div class="column tool"></div>
1.5 设置浏览器标题小图标
<link rel='shortcut icon' type="image/x-icon" href="./image/favicon.icon">
-
rel和type两个属性值是固定形式，href是小图标的URL地址。
注意：小图标必须是
.ico格式
