《html5与css3基础教程》（第8版）个人笔记
《html5与css3基础教程（第8版）个人笔记
四至六章
small 行内 短语
版权符号：©
可任意嵌套，html和html5表示含义不一样
strong 重要
em 强调
html5中 b i
figure：图
figcaption可以用来添加署名？
blockquote中的cite：提供引述文本的位置
很多开发人员避免使用q，而是手动添加引号或字符实体
datetime可以用于在web应用之间同步日期和时间
YYYY-M-DDThh:mm:ss或hh:mm.sss
UTC全球标准时间
abbr的title缩写词全称（通常尽在第一次出现时提供），用括号提供缩写词的全称更好
abbr在css中设置了虚线下划线，若不显示，在其父元素中设置line-height
html5之前有acronmy（首字母缩写），但在html5中废弃
dfn：定义术语。dfn里若只嵌套一个abbr，dfn本身没有文本，那么title属性只能出现在abbr里
sup和sub会扰乱行间距
address里只包含联系信息
ins和del是少有的既可以包围短语内容又可以包围块级内容
s标注不再准确或不在相关的内容
code：代码或文件名
< 和 > 用< 和 & gt
kbd smap
字体等宽：code kbd smap pre
white-space：pre-wrap,pre,nowrap
hCard:微格式
span中：dir lang title ,span中，class和id通常只应用一个
u：html5中表示非文本注解
wbr：可换行处
ruby：旁注标记（rp,rt)
bdi bdo
meter (title,optimum,low,high)
jpeg有损的格式
png-24文件大小比jpeg大得多
png和gif是无损格式，gif只有256中颜色，png对透明的支持比gif好，产生的文件更小，png和gif都支持透明度，但使用png更好，gif的每个像素要么透明要么不透明
透明图像应使用png-8或者png-24
WebP:谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
但WebP是一种有损压缩。相较编码JPEG文件，编码同样质量的WebP文件需要占用更多的计算资源。
打印机的每英寸数通常比显示器的每英寸数要多
svg：可缩放矢量图形
Charles和Fiddler是模拟连接的两个工具
不要用alt代替图像的caption，应将img放入一个figure，并添加figcaption
用代码改变图片的属性（大小）会比实际这个尺寸的图片加载的更慢，应该用图像编辑器改变图像的尺寸
Retina显示屏，每一个点都用四个点代替。考虑到Retina显示屏和其他类似的显示屏，图像的尺寸扩大两倍，然后以一半的尺寸显示他们，否则的话会模糊
tab或tab和shift结合可以对网页进行导航（下一个链接、表单、图像）
不要过度使用块级链接（一堆内容用一个a包起来）
避免使用类似“点击此处”作为链接，缺乏上下文
锚用id
不要使用指向电子邮件地址的链接
七至十
不推荐使用内联样式表
！important除非在特殊情况下，否则不推荐这张种方法.若有些网页会包含一些无法修改的html，例如第三方新闻源，这时可使用！important覆盖这些样式
用户自己创建的样式表的优先级低于编码人员为网站创建的css，但是高于浏览器默认的样式
inhert：希望显示地指出该属性的值与对应元素的父元素对该属性设定的值相同
rem：相对html元素的字体大小
rgba：可在最后添加一个透明度
hsl（色相，饱和度，亮度）
hsla与rgba类似
链接到外部样式表：
@import（影响页面的下载速度和呈现速度）
link（浏览器会将他保存在缓存里，加快页面的加载
link media=“screen”（print,all）或@media print{}
.class > 元素：class的直接子元素
.class 元素a + 元素b：a、b直接相邻
伪类：first-child，：last-child，
伪元素：:：first-line，::first-letter,::before,::after
定义a中伪类的顺序：link、visited、focus、hover、active
属性选择器：
~：完全匹配其中一个单词
|：属性值以value-打头
^: 属性值以value开头
$: 属性值以value结尾
*：属性值为value的子字符串
链接到外部的a，添加rel=“extternal”
font-family属性是继承的，但是input、textarea和select不会继承，可以用inherit强制继承
font-stle：italic斜体
若字体本身并没有加粗、斜体，用代码强制加粗和斜体会产生伪粗体和伪斜体
font-weight:范围可在100~900，400是正常粗细
响应式设计里，字体大小用em
font-size：100%相当于设置为16px（大多数系统的默认字体大小）
颜色若为#aabbcc，可简化为#abc
background-attachment:fixed/scroll
background默认会延伸到边框以内。可以用backgrond-clip改变:content-box,padding-box,border-box,默认值是border-box
letter-spacing字偶距，word-letter：字间距
将字母间距和单词间距设为默认值：0或normal
使用em时，只有计算出来的大小会被继承
text-indent：缩进，对行内元素没有效果
text-align只对块元素有作用
text-transform；capitalize每个单词首字母大写
font-varient：small-caps小型大写字母
text-decoration: line-throuth，underline，overline
html5中，在link是可以不写type=“text/css”
十一至十四
box-sizing：border-box，宽度和高度就包含边框以内（包含边框）
.clearfix
定位若为static，则z-index无效
vertical-align:baseline,middle,super,sub,text-top,text-bottom,top,bottom
cursor:pointer,default(箭头)，crosssair（加号），move，wait，help，text，progress，auto，x-resize
响应式页面的组成：图像和媒体，流式布局，媒体查询
可伸缩图像：不设置宽度和高度，设置max-width：100%
弹性布局：父元素设置max-width，子元素设置宽度为%
属性前缀：谷歌-webkit-
媒体查询：<link ... media=“only screen and （min-width：480px）” href="">
<meta name="viewpoint" content="width=device-width,initial-scale=1">视觉区域的宽度会设置成设备款都
引入字体时，构造子集
找web字体：
自托管（@font-face，一次只能引入一种，可重命名），font-weight：normal，font-style：根据导入的字体样式
web字体服务，在link里导入，在font-family和font-weight分别设置对应的值
厂商前缀：
-webkit-:Webkit/Safari/旧版chrome
-moz-：firefox
-ms-：IE
-o-: OPERA
椭圆形圆角：border-radius：x（水平半径）/y（垂直半径）
text-shadow的模糊半径可选
box-shadow：spread扩张或收缩阴影
inset内阴影
渐变背景：
线性渐变：background：linear-gradient（to top left/120deg，silver，black）
径向渐变：background：radial-gradient（at top/（100px 50px）//（closest-side）/（closest-corner）（farthest-side） at 65% 70%，yellow 70%（百分数设置颜色挺值得为之），red）
sprite：拼合图像（设置background-img，然后设置background-position）
