HTML5 学习笔记 2017-02-14 am

2017-02-14 本文已影响0人 GodlinE

字符实体

在 html 中对空格/回车/tab 不敏感，会把多个空格/回车/tab 当作一个空格来处理
什么是字符实体？
在HTML 中有的字符是被 Html 保留的，有的 html 字符在 html 中是有特殊含义的，是不能在浏览器中直接显示出来的，那么这些东西要想显示出来必须通过字符实体
空格   一个   就是一个空格，有多少个  就有多少个空格
< <小于符号 < (less than)
> >大于符号 > (greater than)
© &copy 版权符号

体验 CSS

有一个标题（H1）还有一些段落（p）标题是居中的，段落也是居中的，所以我们可以设置 H 标签和 P 标签对的 align 属性等于 center 来实现
标题和段落都有颜色，都有字体，都有大小，所以需要给文字包裹一个 font 标签，然后通过 font 标签来设置颜色和字体以及大小
通过标签来修改样式的缺点
需要记忆哪些标签有那些属性，如果该标签没有这个属性，那么设置了也没有效果
当需求变更时我们需要修改大量的代码才能满足现有需求
HTML 只有一个作用就是用来添加语义
所以在企业开发中修改样式都是交给 CSS 来做
通过 CSS 来修改样式有什么好处？
不用记忆哪些属性属于哪个标签
当需求变更时我们不需要修改大量的代码就可以满足需求
在前端开发中 CSS 只有一个作用，就是用来修改样式

<head>
        <style type="text/css">
                h1{
                    text-align:center;
                    color:red;
                    font-family:"微软雅黑";
                    }
        </style>
</head>

CSS 的格式

格式：

<style type="text/css">
        标签名称｛
                      属性名称:属性对应的值；
                       ........
｝
</style>

注意点：

style 标签必须写在 head 标签的开始标签和结束标签之间（也就是必须和 title 标签是兄弟关系）
style 标签中的 type 属性其实可以不用写，默认就是 type="text/css"
设置样式时必须按照固定格式来设置 key:value;其中 : 和 ; 不能省略
CSS 怎么学
CSS 的学习一共分为两大部分，一个是 CSS 的属性，另一个是 CSS 选择器，也就是说这两部分学完 CSS 就没有别的东西了

文字属性

规定文字样式的属性
格式：font-style:italic;
取值：
nomal: 正常的，默认的就是正常的
italic: 倾斜的
快捷键：
fsi font-style:italic;
fsn font-style:nomal;

规定文字粗细的属性
格式：font-weight:bold;
单词取值：
bold 加粗
bolder 比加粗还粗
lighter 细线，默认就是细线
数字取值：100-900之间整百的数字
快捷键：
fw font-weight:;
fwb font-weight:bold;
fwbr font-weight:bolder;

规定文字大小的属性
格式：font-size:30px
单位： px （像素 pixel）
注意点
通过 font-size 设置大小一定要带单位也就是一定要写 px
快捷键：
fz font-size:;
fz30 font-size:30px;

规定文字字体的属性
格式：font-family:"楷体"
注意点

如果取值是中文，需要用双引号或者单引号括起来
设置的字体必须是用户电脑里已经安装的字体
快捷键：
ff font-family:;

<style type="text/css">
                p{
                  font-style:italic;
                  font-weight:bold;
                  font-size:10px;
                  font-family:"楷体"
                  }
</style>

字体属性补充

如果设置的字体不存在，那么系统会使用默认的字体来显示，默认宋体
如果设置的字体不存在，而我们又不想用默认的字体来显示怎么办？可以给字体设置备选方案
格式：font-family:"字体1","备选方案1", ...;
如果想给中文和英文分别单独设置字体，怎么办？
但凡是中文字体，里面都包含了引文
但凡是英文字体，里面都没有包含中文
也就是说中文字体可以处理英文，而英文字体不能处理中文
注意点：
如果想给界面中的英文单词设置字体，那么英文的字体必须写在中文的前面
补充：在企业开发中最常见的字体有以下几个
中文：宋体/黑体/微软雅黑
英文：Times New Roman /Arial
还需要知道一点就是，并不是名称是英文就一定是英文字体，因为中文字体其实都有自己的英文名称，所以是不是中文字体主要看能不能处理中文
宋体: SimSun
黑体: SimHei
微软雅黑：Microsoft YaHei

文字属性的缩写

缩写格式

font:style weight size family;

例如

font:italic bold 10px "楷体"

注意点

在这种缩写格式中有的属性可以省略，style weight可以省略
在这种缩写格式中 style 和 weight 的位置可以交换
在这种缩写格式中有的属性不能省略，size family 不能省略
size 和 family 的位置是不能随便乱放的，size 一定要写在 family 的前面，而且 size 和 family 必须写在所有属性的最后

文本属性

文本装饰的属性
格式：text-decoration:underline;

取值：
underline 下划线
line-through 删除线
overline 上划线
none 什么都没有，最常用的用途就是去掉 a 标签的下划线

快捷键：
td text-decoration:none;
tdu text-decoration:underline;
tdl text-decoration:line-through;
tdo text-decoration:overline;

文本水平对齐属性
格式：text-align:right;

取值：
left 左
right 右
center 中

快捷键
ta text-align:;
tar text-align:right;
tal text-align:left;
tac text-align:center;

文本缩进的属性
格式：text-indent:2em;

取值：
2em,其中 em 是单位，一个 em 代表缩进一个文字的宽度

快捷键：
ti text-indent:;
ti2e text-indent:2em;

颜色属性

在 CSS 中如何通过 color 属性来修改文字颜色
格式：color:值;

取值：

英文单词，一般情况下常见的颜色都有对应的引文单词，但是英文单词能够表达的颜色是有限制的，也就是说不是所有的颜色都能够通过引文单词来表达
rgb,rgb其实就是三原色，其中 r （red）,g(green),b(blue),
格式：rgb(0,0,0)
那么这个格式中的第一个数字就是用来设置三原色的光源元件红色显示的亮度，第二个数字就是用来设置三原色的光源元件绿色显示的亮度，第三个数字就是用来设置光源元件蓝色显示的亮度，这其中每一个数字它的取值是 0-255 之间，0代表不发光，255代表发光，值越大就越亮
红色: rgb(255,0,0);
绿色: rgb(0,255,0);
蓝色: rgb(0,0,255);
黑色: rgb(0,0,0);
白色: rgb(255,255,255);
在前端开发中其实并不常用黑色，只要让红绿蓝的值一样就是灰色，而且如果这三个值越小那么就越偏黑色，越大就越偏白色
例如：color:rgb(200,200,200);
rgba,rgba 中的 rgb 和前面讲解的一样只不过多了一个 a，那么这个 a 呢代表的透明度，取值 0-1,值越小越透明
例如：color:rgba(255,0,0,0.2);
十六进制，在前端开发中通过十六进制来表示颜色，其实本质就是 rgb，十六进制中是通过每两位表示一个颜色
例如：#ffee00 ff表示r ee表示g 00表示b
什么是十六进制，十六进制和十进制一样都是一种计数方式，在十进制中取值范围0-9逢十进一，在十六进制中取值范围0-F，逢十六进一
十六进制和十进制转换的公式，用十六进制第一位*16 + 十六进制第二位 = 十进制
十六进制的缩写，在 CSS 中只要十六进制的颜色每两位的值都是一样的，那么可以简写为一位
例如：#ffee00 = #fe0
注意点
如果当前颜色对应的两位数字不一样，那么不能简写，#123456
如果两位相同的数字不是属于同一个颜色那么不能简写，#122334

关于为什么 rgb/rgba 每一个通道取值是0-255，因为我们的电脑显示器分24位和32位，rgb 每一个通道占8个二进制位，8个二进制位范围是0-11111111(二进制 2的8次方-1=255),32位对应的 rgba。
关于为什么用十六进制表示，十六进制范围是0-F 转化成二进制范围就是0-1111，两位十六进制的范围就是0-FF 转化成二进制就是0-11111111，一位十六进制最大可以代表四位二进制，对应0-255 取值