HTML与css(一)

Eastboat 2020年4月26日星期日 HTML/CSS

Table of Contents generated with DocToc (opens new window)

语义化
CSS 基础
CSS 规范
盒模型

两年前在图书馆,简简单单的记了一点东西,最近打开 Github 发现当初的md文件(滑稽脸)

你真的精通 HTML 加 CSS 吗?如果认为自己精通 HTML 和 CSS 了,那么你可以思考下面这些问题

什么是HTML语义化?对于标题/图片/表格/表单,如何更好的实现这些方面的语义化?
什么是外边距叠加?出现外边距叠加的根本原因是什么?
在 CSS 中,关于命名,书写以及注释都有哪些好的规范(便于团队开发和后期维护)?
说下display几个属性值的区别?
你深入了解过text-indent,text-align,line-height以及vertical-align这几个属性吗?他们都有哪些高级技巧?
为什么overflow:hideen可以清楚浮动?
CSS 都有哪些性能优化技巧?如果使用更高性能的选择器?
如何使用 CSS 实现各种图像效果?
解释下这些概念包含块/BFC/IFC/层叠上下文

# HTML 基础知识

HTML HyperText Mark-up Language 超文本标记语言又称为 HTML4.0.1

XHTML EXtensible HyperText Mark-up Language 扩展的超文本标记语言

XHTML 是 HTML 的过渡版本 HTML5 是 HTML4.01 的升级版本

XHTML相对于HTML的区别:
--------------------------
1.XHTML在语法上更严格
2.XHTML标签必须闭合
3.XHTML标签以及属性必须小写
4.XHTML属性必须使用引号
5.XHTML除了表单外元素,都应该使用id代替name属性


HTML5特点：
--------------------------
1.HTML5文档说明类型简化 化繁为简
2.标签不在区分大小写  <div></DIV>
3.允许标签属性值不加引号  <div style=color:red"></div>
4.允许部分属性的属性值省略  <input checked redaonly />>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

div 和 span 都没有任何语义 ,正因为没有语义, 所以一般配合 css 来定义元素样式

div和span区别:
--------------------------
div是块级元素,可以包含任何块元素和行内元素 不会与其他元素位于同一行
span是行内元素,可以与其他元素位于同一行

1
2
3
4

id 和 class 是最基本的公共属性

搜索引擎识别一个页面结构是根据标签的语义以及 id 属性来识别的,所以 id 和 class 对搜素引擎优化很重要，就算不需要 css 或 js 操作也建议加上 id 以便于搜素引擎识别页面结构


二者区别:
id属性：
    关键结构使用id属性 例如 主题部分 导航栏 底部信息 logod

class属性：
    小的局部地方可以使用class

1
2
3
4
5
6
7
8
9

# 语义化

学习 HTML 的重点不在于你掌握了多少标签,而是在于掌握标签的语义以及如何编写一个语义结构良好的页面,我们可能在实际开发中会存在这种情况,用一个标签代替另一个标签来实现相同的效果,比如一个标题文字明明要用h1~h6来实现,但我们使用了div.这就违背了 HTML 这门语言的精髓,大部分标签都是有他自身的语义.

HTML+CSS+JS 就像盖房子,房子装饰再漂亮,功能再多,如果结构不稳定也容易坍塌这是开发我们可能拥有上千行代码,如果整个页面全部使用div和span的话,搜索引擎小蜘蛛肯定会迷路的,可能以后都不想来光顾你的站点

编写一个语义结构良好的页面在实际开发中极为重要,主要有两点好处: 1.利于开发调试和后期维护 2.利于搜索引擎优化

# 标题语义化

h1~h6 之间不要出现断层
不要用 h1~h6 的默认样式来代替 css
不要用 div 代替 h1~h6 标签,div 是无语义的

# 图片语义化

alt 和 title 属性 title 给用户看,搜索引擎根据 alt 判断图片内容
figure 和 figcaption 元素 figure 用于包含住图片与图注文字 figcaption 用于展示图注文字

<figure>
  <img src="" alt="" />
  <figcaption>图片下方图注</figcaption>
</figure>

1
2
3
4

# 表格语义化

th(表头单元格) caption(表格标题) thead tbody tfoot

# 表单语义化

label 标签用于显示在输入控件旁边的说明性文字,将某个表单元素和某段说明性文字关联起来

<!-- 
 for属性语义上绑定label和表单元素,
 同时增加了鼠标的可用性,点击label,input就能聚焦
 -->
<input id="name" type="text" />
<label for="name"></label>

1
2
3
4
5
6

fieldset 标签和 legeed 标签

fieldset 标签可给表单元素分组,legend 用于定义某一组表单的标题 fieldset 元素的 disabled 属性可以禁用整个组中的表单元素

# 其他语义化

br 标签只能在段落中进行换行,不能用于其他情况语义化验证 HTML5 摒弃的标签

# 语义化验证

判断一个页面是否良好,一个简单的办法就是去掉 css 样式,然后看页面是否还有很好的可读性

# CSS 基础

# 绝对单位

绝对单位大小是固定的,使用的是物理度量单位,显示效果不会受到外界因素影响,一般多用于传统平面印刷

cm/in/mm/pt/pc 等

# 相对单位

px:全称 pixel
%:
- wdith height font-size 的百分比相对于父元素的相同属性计算
- line-height 相对于父元素的 font-size 的值计算
- vertical-align 的百分比相对于当前元素的 line-height 计算
em 相对于当前元素的大小而言
- text-indent:2em 实现缩进 2 字符(所有浏览器的默认字体大小都是 16px)
rem，全称 font size of the root element，指的是相对于根元素（即 html 元素）的字体大小。rem 是 CSS3 新引入的单位，目前除了 IE8 及以前版本之外，大部分主流浏览器都是支持 rem 的。rem 布局是也是移动端最常用的字体大小之一。

# CSS 特性-继承和层叠

继承性：子元素继承父级元素的某些样式属性,充分利用 css 的继承性从而减少代码的重复编写
- 文本相关的属性: font-family font-size font-style font-weight font line-height text-align text-indent word-spacing
- 列表相关的属性 list-style list-style-type list-style-position list-style-image
- 颜色相关的属性 color a 标签默认有样式优先级比继承的高
层叠性：对于同一个元素来说，重复定义了多个属性,并且有相同的权重下,以最后的定义的属性为主

# CSS 优先级

层叠，其实指的就是样式的覆盖。当样式的覆盖发生冲突时，以优先级高的为准。当“同一个元素”的“同一个样式属性”被运用上多个属性值时，我们就需要遵循一定的优先级规则来选择属性值了。

样式覆盖发生冲突常见的共有以下五种情况:

# 引用方式冲突。

行内样式>（内部样式 = 外部样式）

# 继承方式冲突。

就近原则,以“最近的祖先元素”为主

# 指定样式冲突

指定“当前元素”的样式。当直接指定的样式发生冲突时，样式权值高者获胜

行内样式> id选择器> class选择器>元素选择器

# 继承样式与指定样式冲突。

当继承样式和指定样式发生冲突时，指定样式获胜。在 CSS 中，选择器权重值的计算只针对指定样式（当前元素），并不能用于继承样式。当继承样式和指定样式发生冲突时，指定样式获胜。我们先判断指定样式，然后才考虑继承样式。

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      #outer strong
      {
      　　/*权重=100+1=101*/
      　　color:Red;
      }
      #outer .inner strong
      {
      　　/*权重=100+10+1=111*/
      　　color:Green;
      }
      .inner strong
      {
      　　/*权重=10+1=11*/
      　　color:Blue;
      }
      .inner span strong
      {
      　　/*权重=10+1+1=12*/
      　　color:Purple;
      }
      strong
      {
      　　color:Black !important;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <p class="inner">
        <span><strong>绿叶学习网</strong></span>
      </p>
    </div>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# !important

可以使用!important 规则来改变样式的优先级。

用处: 覆盖样式:举一个活生生的例子：有人在 jQuery 插件中写了糟糕的行内样式，而你需要在 CSS 文件中修改这些样式。
如何覆盖!important

使用相同的选择器，再添加一条!important 的 CSS 语句。
使用更高优先级的选择器，再添加一条!important 的 CSS 语句

# CSS 选择器

元素选择器
id选择器
class类选择器
群组选择器
层次选择器  后代 、子代 -、兄弟 ~、相邻 +

1
2
3
4
5

# CSS 规范

# 命名规范

# 1.css 文件命名

reset.css 重置样式,重置元素默认样式
global.css 全局样式,全站公用,定义页面基础样式
themes.css 主题样式
module.css 模块样式
master.css 母版样式
columns.css 专栏样式
forms.css 表单样式
mend.css 补丁样式,用于维护和修改
print.css 打印

global.css 用于定义公共模块样式以及基础样式。常见的公共模块包括导航、底部信息栏等。基础样式包括全局字体、文字颜色等,事实上，把样式文件划分为多个文件，这是“开发阶段”的做法！按照功能模块划分 CSS 文件，那是为了方便在开发阶段进行开发和修改。在整站发布的时候，我们会使用工具将多个 CSS 文件压缩合并成一个文件

# 2.id 和 class 命名

骆驼峰命名法，例如 topMain、subLeftMenu
中划线命名法，例如 top-main、sub-left-menu
下划线命名法，例如 top_main、sub_left_menu。

网页主体

导航部分

其他

# 书写规范

在 CSS 中，属性的书写顺序也是很有讲究的。良好的书写顺序习惯，既方便阅读，同时也方便后期维护。Andy Ford 和 Fantasai 这两位都是 CSS 领域内的专家，他们都各自对 CSS 属性书写顺序提出过自己的意见。表所示的是综合两位专家的思想所推荐的 CSS 属性书写顺序。

属性类别	举列
影响文档流属性(布局属性)	display,position,float,clear 等
自身盒模型属性	width,height,padding,margin,border,overflow 等
文本属性	font,line-height,text-align,text-indent,vertical-align 等
装饰性属性	color,background-color,opactiy,cursor 等
其特属性	content,list-style,quotes 等

# 注释规范

# 顶部注释

是文件的基本信息，一般包括文件说明、文件版本（更新）、作者以及版权声明等。

/*
 *@description:说明
 *@author:作者
 *@update

1
2
3
4

# 模块注释

模块注释是各个模块（如导航、底部信息栏等）的注释说明，模块注释建议要说明“开始”和“结束”，以便一目了然。

/*导航部分，开始*/
……
/*导航部分，结束*/

1
2
3

# 简单注释

一般用于注释某些关键代码，如功能代码。简单注释分为单行注释和多行注释这两种。

# CSS Reset

现在浏览器有很多，主流的有 Chrome、Firefox、IE、Safari、Opera 等。不同的浏览器，默认样式也是不同的。目的就是去除常见元素的默认样式

CSS reset 代码必须在其他 CSS 之前引入
Eric Meyer 建议此 CSS reset 代码是应该根据个人需求不同来定义,并不推荐大家直接把这段 CSS reset 代码简单地原样复制粘贴到自己的 CSS 中
Eric Meyer 建议此版本的 CSS reset 代码也有很多不足，例如 div、li、code 就没有 padding 和 margin。因此，我们应该重新审视并修订这段代码再拿来用
目前优秀互联网企业的网站使用 CSS reset 越来越少，国外也有些优秀的网页设计师已经开始表达自己“不使用 CSS reset”的观点。对于真正的实战开发来说，CSS reset 也可以说是可有可无的。因此，对于是否使用 CSS reset 也应该根据实际开发需求来决定

# 盒模型

在“CSS 盒子模型”理论中，页面中的所有元素都可以看成一个盒子，并且占据着一定的页面空间。一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两个方面来理解：一是理解单独一个盒子的内部结构，二是理解多个盒子之间的相互关系。

# 内容区

内容区是 CSS 盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他的三部分都是可选的。

内容区有三个属性：width、height 和 overflow。使用 width 和 height 属性可以指定盒子内容区的高度和宽度。在这里注意一点，width 和 height 这两个属性是针对内容区而言，并不包括 padding 部分。当内容信息太多而超出内容区所占范围时，可以使用 overflow 溢出属性来指定处理方法。

# 内边距

内边距，指的是内容区和边框之间的空间，可以看做是内容区的背景区域。

# 边框

边框属性有 border-width、border-style、border-color 以及综合了三类属性的快捷边框属性 border。其中 border-width 指定边框的宽度，border-style 指定边框类型，border-color 指定边框的颜色。

# 外边距

外边距，指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离

# 深入 border

border:0”与“border:none”的区别主要体现在两点：性能差异和兼容差异

性能差异表现:

“border:0”表示把 border 定义为 0px。虽然 0px 在页面上看不见，但是浏览器依然会对 border 进行渲染，渲染之后，实际上是一个像素为“0”的 border。也就是说，“border:0”需要占用内存
border:none”表示把 border 定义为“none（无）”，浏览器解析“border:none”时并不会作出渲染。"border:none"不需要占用内存。

# 外边距叠加

# 同级元素

同级元素下第一个元素的下边距(20px)会与第二个元素的上边距(10px)合并,以最大值的那个为主

# 父子级元素

父子级元素嵌套情况下(margin-bottom:20px, margin-top:10px),以最大值的那个为主

# 空元素

当一个空元素有上下外边距时，如果没有 border 或者 padding，则元素的上外边距与下外边距会发生合并。

空元素，指的是没有子元素或者没有文字内容的元素，例如<br/>、<hr/>等。

外边距叠加只有三种情况：同级元素、父子元素和空元素。此外对于外边距叠加，我们还需要注意以下几点：

（1）水平外边距永远不会有叠加，水平外边距指的是 margin-left 和 margin-right。
（2）垂直外边距只会在以上三种情况下会叠加，垂直外边距指的是 margin-top 和 margin-bottom。
（3）外边距叠加之后的外边距高度等于发生叠加之前的两个外边距中的最大值。
（4）外边距叠加针对的是 block 以及 inline-块元素，不包括 inline 元素。因为 inline 元素的 margin-top 和 margin-bottom 设置无效

# 存在的意义

css 定义外边距叠加的初衷就是为了更好的对文章进行排版

下面是一个文本型页面，第一个段落上面的空间等于段落的 margin-top。

如果没有外边距叠加，第一个段落之后的所有段落之间的外边距都是相邻的 margin-top 和 margin-bottom 之和，这样就跟第一个段落显得不一致了
如果发生外边距叠加，段落之间的 margin-top 和 margin-bottom 就会合并在一起，这样就跟第一个段落显得一致了。

注意: 外边距叠加的原理比较复杂，跟 BFC（块级格式上下文）有着密切的关系。

# 负 margin

当 margin 为负数的时候，对普通文档流元素和对浮动元素的影响是不一样的, 负 margin 对普通文档流元素的影响，我们分两种情况。

（1）当元素的 margin-top 或者 margin-left 为负数时，“当前元素”会被拉向指定方向。
（2）当元素的 margin-bottom 或者 margin-right 为负数时，“后续元素”会被拉向指定方向

margin-top 和 margin-left 将“当前元素”拉出，然后覆盖“其他元素”

技巧:

# 图片与文字对齐

当图片与文字排在一起的时候，在底部水平方向上往往都是不对齐的，这是因为图片与文字默认是基线对齐（vertical-align:baseline）。如果想要实现图片与文字底部水平方向对齐，除了使用vertical-align:text-bottom这个方法之外，还可以使用兼容性比较好的负 margin 来实现

<style>
  img {
    margin: 0 3px -3px 0;
  }
</style>
<div><img src="images/xx.jpg" alt="" />LOGO</div>

1
2
3
4
5
6

# 自适应两列布局

自适应两列布局，指的是在左右两列中，其中有一列的宽度为自适应，另外一列宽度是固定的。如果使用 float，一般只能实现固定的左右两列布局，并不能实现其中一列为自适应的布局

# 元素垂直居中

使用 position 结合负 margin 来实现

# tab 选项卡

tab 选项卡效果是一种十分节省页面空间的方式，在实际开发中经常会用到。像图 5-27 中的选项卡，关键是使用“margin-top:-1px”来解决选项卡下边框显示问题。

# overflow

对于 overflow 属性，最常见的三个用途如下:

使用overflow:scroll显示滚动条。
使用overflow:hidden来隐藏内容，以免影响布局。

overflow:hidden会使得超出元素的部分自动隐藏，这样处理不好的一点就是这部分的内容显示不完全，比如图片只显示了一部分。不过overflow:hidden使得内容超出时不会影响页面整体布局，这是它的好处。

使用overflow:hidden来清除浮动

使用 clear 属性来清除浮动的缺点是增加一个多余的标签，而使用overflow:hidden清除浮动则不需要。不过overflow:hidden是一个小炸弹，它会将超出父元素部分的内容隐藏，有时候这并不是我们预期想要的效果。

前端技术

前端不太冷

HTML与css(一)

HTML与css(一)

# HTML 基础知识

# 语义化

# 标题语义化

# 图片语义化

# 表格语义化

# 表单语义化

# 其他语义化

# 语义化验证

# CSS 基础

# 绝对单位

# 相对单位

# CSS 特性-继承和层叠

# CSS 优先级

# 引用方式冲突。

# 继承方式冲突。

# 指定样式冲突

# 继承样式与指定样式冲突。

# !important

# CSS 选择器

# CSS 规范

# 命名规范

# 1.css 文件命名

# 2.id 和 class 命名

# 书写规范

# 注释规范

# 顶部注释

# 模块注释

# 简单注释

# CSS Reset

# 盒模型

# 内容区

# 内边距

# 边框

# 外边距

# 深入 border

# 外边距叠加

# 同级元素

# 父子级元素

# 空元素

# 存在的意义

# 负 margin

# 图片与文字对齐

# 自适应两列布局

# 元素垂直居中

# tab 选项卡

# overflow