程序博客网 > js 时间间隔

HTML5与CSS3基础教程-笔记

来源：互联网发布：js 时间间隔编辑：程序博客网时间：2024/06/07 08:30

HTML5与CSS3基础教程-笔记

1.网站构造块

语义化的重要性
- 提升可访问性和互操作性(针对使用辅助技术的设备来说)
- 提升搜索引擎优化(SEO)的效果
- 是维护代码变得容易
- 通常可以减少代码量，是页面加载更快

3.基本HTML结构

所搜引擎可能会根据lang属性制定的语言区分搜索结果，从而仅显示与搜索词语言相同的页面；屏幕阅读器也可能通过指定语言来调整发音
- <html lang="en">
页面字符编码很重要，例如如果没有设置UTF-8，可能很多字符都会乱码
- <meta charset="utf-8">
语义化标签-以下标签为HTML5新引入
- header
- nav
- main
- article
- section
- aside
- footer
出于SEO和可访问性的目的，最好将重要的内容放在前面，通过CSS来改变他们在浏览器中的顺序

4.文本

HTML5使用新的mark元素来实现荧光笔效果
<br/>标签没有单独的结束标签，成为空元素，没有任何内容

5.图像

有损/无损
- 有损
  - JPEG
- 无损
  - PNG/GIF
- JPEG不支持透明，PNG/GIF均支持透明

6.链接

链接到网页特定位置(称为锚/anchor)
每个以#开头的链接href值都指向拥有指定id的元素

7.CSS构造块

CSS用层叠的原则来考虑特殊性(specificity)，顺序(order)和重要性(important)
特殊性规则指定选择器的具体程度。选择器越特殊，规则就越强。遇到冲突时，优先选用特殊性强的规则
有时候，特殊性还不足以判断在相互冲突的规则中应该优先选用哪一个。在这种情况下，规则的顺序就可以起到决定作用：晚出现的优先级高
重要性 !important (优先级最高，但因为太强所以不推荐使用)
一个em的长度大约与对应元素的字号相等
百分号的工作方式是相对于父元素的百分比
line-height中的纯数字数值代表相当于字号的倍数
外部样式表可以通过link和import导入，不过不推荐import，因为import影响页面下载速度和呈现速度
结合符
- + 选择紧邻元素
- ~ 选择之后的所有同级元素

10.为文本添加样式

rem工作原理和em相同，不同的是总以根元素作为参照
pt用做打印样式表的单位

11.用CSS进行布局

盒模型
- 标准盒模型 width==内容宽度
- 怪异盒模型 width==内容宽度+2*padding+2*border
position属性使用absolute值如果不指定top/bottom/left/height的值则元素的位置会如同属性设置为static，只不过是元素本身不占据文档流中的空间
background会延伸到边框的后面
visibility隐藏元素时元素仍然占据文档流位置，而display:none会将元素从文档流中移除
元素属性(非CSS)中的hidden所产生的效果和display:none相同
z-index仅对定位过(即position设置为absolute/fixed/relative)的元素有效

12.构建响应式网站

媒体查询
- 一般语法 @media only screen and (min-width: 480px) and (max-width: 767px)

13.使用CSS3进行增强

使用:before/:after伪类生成内容，通过CSS而不是HTML

0 0

js 时间间隔

js 时间间隔

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子铁路学校铁路便当铁路大专铁路冲浪铁路乘务铁路工具铁路招工铁路交通铁路院校铁路机械铁路运价集通铁路铁路招人铁路规划铁路中学铁路学院格库铁路铁路工程铁路客运铁路建设铁路开通铁路图片铁路信号机铁路资讯铁路信号粤海铁路铁路价格铁路货车铁路司机铁路通车铁路基建铁路货场铁路道口铁路配件铁路工作铁路系统铁路公园铁路时刻表铁路投资铁路英才铁路枢纽