前端基础学习

HTML概述

HTML (Hypertext Markup Language)超文本标记语言，构成网页文档的主要语言同时也是网络上应用最广泛的标记型语言。
一个HTML元素（Element），一般由开始标签（tag）和结束标签（tag）构成，并且标签之间可能包含其他的子标签，以及文本内容；另外开始标签中也可能包含一些属性。
div和span在web前端开发中使用的非常多，特别是div元素，通常会使用div+css实现页面的布局(传统的布局方式是使用table)；div是一个常见块级元素(block element)，而span是一个常见行内元素(inline element)；div在显示时默认是独占一行，而span所占据的宽度跟内容有关。

CSS样式在html页面中的几种使用方式

在html中使用css的方式包含以下几种

1. 内联样式：在html页面的style标签之间直接编写样式代码
2. 外部样式文件：将外部的css文件通过link标签引入html页面中
3. 内嵌样式：直接使用html标签内部的style属性设置样式

由于css提供了大量的选择器用于选中元素，因此，在实际的开发中很有可能会对一个元素使用多个不同的选择器，此时不同的选择器会由于其优先级的问题呈现不同效果，css选择的优先级一般表现为以下:

`!important>ID选择器>属性选择器>类选择器>标签选择器

• IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的绘制模式。
• 通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。

声明顺序

相关的属性声明应当归为一组，并按照下面的顺序排列：

1. 定位
2. 盒模型
3. 文字和排版
4. 可视化效果
5. 其他

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。

其他属性只是影响组件的 内部 或者是不影响前两组属性，因此排在后面。

选择器

对于通用元素使用 class ，这样利于渲染性能的优化

• 对于经常出现的组件，避免使用属性选择器（例如，[class^="..."]）。浏览器的性能会受到这些因素的影响。
• 选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。
• 只有在必要的时候才将 class 限制在最近的父元素内（也就是后代选择器）（例如，不使用带前缀的 class 时 – 前缀类似于命名空间