HTML页面制作常识

1.颜色:

MAC系统自带有测色计,路径:Launchpad -> 其他文件夹 -> 数码测试计

RGB与十六进制颜色码转换:http://www.sioe.cn/yingyong/yanse-rgb-16/

2.常用代码格式:

<!DOCTYPE html>
<html lang="zh">
 <head>
 <meta charset="UTF-8">
 <title>XiaoLan's Blog</title>
 </head>
 
 <!-- 这是一行html注释 -->
 <!--
 style中:
 corlor: 字段颜色
 background: 背景颜色
 padding: 盒子内页边距
 px: 根据参数个数不同,上右下左
 em: 相对比例
 margin: 盒子外页边距
 -->
 
 <style type="text/css">
 body{
 color: #000;
 background: #F9F9F9;
 padding: 12px 5em;
 margin:7px;
 }
 h1{
 color: #ffffff;
 padding: 2em;
 background: #1D8BC1;
 }
 h2{
 color: #FF5D49;
 border-top: 2px dotted #000000;
 margin-top:2em;
 }
 h3{
 color: #FFD700;
 margin-top:2em;
 }
 h4{
 color: #FF00FF;
 margin-top:2em;
 }
 p{
 margin:1em 0;
 }
 </style>
 <body>
 <h1>小蓝的博客</h1>
 <h2>level -> h2</h2>
 <h3>level -> h3 简单,纯粹!</h3>
 <h4>level -> h4</h4>
 {% block content %}
 {% endblock %}
 </body>
</html>

附:关于body里,padding与margin的区别可这样理解:

附:关于CSS中用em,rem代替px的意义:

px是一个固定单位,em,rem表达的是相对单位。

网页用于展示内容,浏览器有不同的显示尺寸,按钮,字体等都有可能随着显示的放大缩小而需要相对的缩放。如果只用px来表示,必然造成网页内容无法相对的放大或缩小,反之,em,rem定义出来的尺寸,就能符合这种需求。

em 和 rem 单位之间的区别是浏览器根据谁来转化成 px 值
1. rem 如何转换为像素值?
 当使用 rem 单位时,根据 根元素字体大小 转换 px 值。
 其对应的像素值为根元素字体大小乘以 rem 值。根元素的字体大小即 html 元素字体大小。
 如:根元素字体大小 为 16px,则 10rem 等于 16px * 10 = 160 px。
2. em 如何转换为像素值?
 当使用 em 单位时,根据当前使用 em 单位的元素的字体大小转换 px 值。
 其对应的像素值为 当前使用 em 单位的元素的字体大小乘以 em 值。
 如:当前使用 em 单位的元素的字体大小为 16px,则 10em 等于 16px * 10 = 160px。
 
使用em的意义,在于“与当前字体大小成比例”设置当前元素的 padding,margin,line-height 等值,在文本排版时很常用。

rem的意义,在于通过控制根元素字体大小,让页面在各种尺寸的移动端设备上自适应。
在移动端页面制作的时候,当你不需要元素的尺寸、间距与当前字体成比例,你应该考虑使用 rem。

作者:阿树
链接:https://www.zhihu.com/question/46279241/answer/100817629
来源:知乎