day 4

HTML注释

在代码中，有一些特殊结构，他的特点在编辑器中可以看到，在浏览器中看不到，这种结构叫做注释。特点是浏览器不加载

注释主要有两个作用：

第一个用来注解代码，可以添加合理的解释，从而实现对代码的可读性

 

快捷键是ctrl+/（反斜杠是字母键盘上的，即“？/”）

第二个作用是先注释掉一部分不使用（不确定）的代码，便于后期恢复，多用于代码调试

 

 

 

字符实体

在网页中普通文字部分，在键盘中是打不出来的，比如版权符号，商标符号等，还有一种场景就是代替字符，HTML会识别一部分字符

比如：

 

 我们发现浏览器会自动识别文本中的<h1>标签然后单独加载了

解决办法是利用字符实体进行转换

比如：

 

字符实体的规定以&开头，以;结尾

常用的字符实体：

&nbsp；    空格

&lt；          小于号 

&gt；        大于号

&copy；     版权符号

&reg；        注册商标

&quot；      引号

&amp；       和号

 

 

html布局标签 div和span

div和span都是常用的布局标签，俗称盒子

div：分割跨度大

span：小区域小跨度

作用是用来分割页面布局，div指的是跨度布局分割，span是文字分割

 

 

div

div是容器级标签，双标签

主要作用是进行网页布局的拆分，没有明确的语义

 

span

作用是一个极限小，只适用于文字的跨度划分

比如需要强调某个数字，可采用span标签

 

 

 

 

CSS

全程cascading style sheet ， 层叠式样式表，主要用于配合HYML结构，添加页面样式，辅助布局

 

 

 

基础概念

CSS有两个重要的概念，分别是样式和布局

CSS的样式分为两种，一种是文字的样式，一种是盒模型的样式

CSS的另一个重要的特性就是辅助页面布局，完成HTML不能完成的功能，如并排显示，精确定位显示

从HTML4.0开始。结构层和样式层进行了分离

前端三层：

1.结构层：HTML作用师从语义的角度进行网页结构的搭建

2.样式层：CSS作用从美观的角度去修饰页面样式

3.交互层：JavaScript作用从交互的角度去描述页面的行为

 

 

CSS的属性值写法发生了改变，是k:v；

 

CSS常用的文字属性有三个，分别是 color（文字的颜色），font-size（文字的字号）,font-family（文字的字体）

CSS的属性样式发生了改变，由HTML的k=“v”变成了k：v；

 

文字颜色的属性（color）

属性名：color

 

上述例子中，style=“color”是HTML中的属性样式，因为这个部分是写在p标签里面的，后面的color：blue；就是CSS的属性样式

属性值主要分为两种，一种是单词表示法，一种是颜色值（十六进制，rgba）

 

 需要记忆一些常用的单词表示法的单词，比如red，blue，orange，pink等

 

字号的属性（font-size）

属性值：常用的是px为单位的数字值

根据浏览器的不同，有默认不同的字号大小，比如Chrome和IE默认的字号大小都是16像素

每个浏览器都有自己的最小显示像素，比如Chrome最小像素为8像素

IE浏览器最小字号是1像素

 

 

文字的字体属性（font-family）

属性值必须以双引号包裹，属性值可以有多个，使用逗号隔开

中文字体的常用字体属性值：

微软雅黑，宋体

英文字体的常用字体属性值：

Arial，consolas

实际的字体属性是根据设计图获取的

大多数浏览器默认显示字体是微软雅黑，如Chrome

如果页面中有中英文混杂的，需要同时设置对应的字体

 

 如果使用多个字体，用逗号隔开，如果浏览器无法识别前面的字体，会自动向后识别，中文和英文会分别进行加载

 

 

盒子的三属性

盒子的三属性分别是width（宽度），height（高度）和background-color（背景颜色）

其中width和height常用的属性值都是以px为单位的数字

background-color：属于background系列属性的一种，属性值和color一样，分为单词和颜色值表示法

例如：

 

 

 

 

CSS样式表的引用方法

到目前为止，我们学习了行内式表的使用（就是把代码写在标签上，称为行内式）

 

行内式样式表

将style属性写在标签上，然后它的属性值就是CSS的属性

基本语法：

 

 引入位置：在标签的style属性中，等号后面的引号内引用CSS属性，多个属性间使用；分开

 

内嵌式样式表

基本语法：

 

 书写位置：在head标签的内部，title标签的下面，一对style标签中

 

外链式样式表

基本语法：

 

 书写位置：head标签的内部，title标签的下面，一个link标签的内部去进行css文件引入

link标签的作用就是引入外部文件，通过href属性，属性值是文件地址

rel属性值如果是stylesheet，代表的就是引入样式表

通过引入css文件到html文件中，从而实现样式的加载

 需要介绍的是，CSS内部不需要写任何的标签，直接写CSS选择题和代码，因为css文件内部不允许书写html骨架

 

 

导入式样式表（仅了解）

基本语法：

 

 书写位置：head标签的内部，title标签的下面，style标签内部，通过@import进行导入

注意：导入时（@inport）必须写在style标签的最顶部，url内部是css文件的引入地址

 

四种样式表的区别和优缺点