RWD2 学习笔记
响应式web设计基础3种已有技术
- 弹性网格布局
- 弹性图片
- 媒体查询
关于媒体查询
- 在 link 标签中使用媒体查询
<link rel="style sheet" type="text/css" media="screen" href="screenstyles. css">
- 组合媒体查询
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px), projection" href="800wide-portrait-screen.css" />
- @import 与媒体查询
@import url("phone.css") screen and (max-width:360px);
用CSS中的@import会增加HTTP请求(进而影响加载速度),因此请慎用。
- 在CSS中使用媒体查询
@media screen and (max-device-width: 400px) { h1 { color: green } }
- meta 标签:这个用于视口的meta标签,是网页与移动浏览器的接口。网页通 过这个标签告诉移动浏览器,它希望浏览器如何渲染当前页面。
关于弹式布局与响应式图片
- 将固定像素大小转换为弹性比例大小的简单公式:结果 = 目标/上下文
- 为什么需要Flexbox?行内块与空白、浮动、表格与表元存在的问题需要Flexbox解决。因为Flexbox方便垂直居中内容,改变元素的视觉次序,在盒子里自动插入空白以及对齐元素,自动对齐元素间的空白 。
关于HTML5与响应式Web设计
- doctype声明,是我们告诉浏览器文档类型的手段。如果没有这一行,浏览器将不知道如何处理后面的内容。
<!DOCTYPE html>
- html是文档的根标签,了lang属性指 定了文档的语言。
<html lang="en">
- 字符编码
<meta charset="utf-8">
HTML5中新语义的元素
- <main>元素 :无论是页面中的主要内容,还是Web应用中的主要部分,都应该放到main元素中。
- <section>元素:素用于定义文档或应用中一个通用的区块。
- <nav>元素 :用于包装指向其他页面或同一页面中不同部分的主导航链接。
- <article>元素:用于包含一个独立的内容块。
- <aside>元素 :素用于包含与其旁边内容不相关的内容。
- <header>元素:用在站点页头作为“报头”,或者在 article>元素中用作 某个区块的引介区。
- <footer>元素:应该用于在相应区块中包含与区块相关的内容,可以包含指向其他文档的链 接,或者版权声明。
HTML5规范是不推荐使用h1到h6来标记标题和副标题的.
- 常用的HTML5文本级的元素有:
- < b>元素 加粗文本
- < em>元素 强调内容
- < i>元素 文本标为斜体;文本中标记出罕用的名字
- 响应式HTML5视频与内嵌框架
<iframe width="960" height="720" src="https://www.youtube.com/ watch?v=B1_N28DA3gY" frameborder="0" allowfullscreen></iframe>
关于CSS3新特性
- CSS 规则
.round { /* 选择符 */ border-radius: 10px; /* 声明 */ }
- 这条规则由选择符(.round)和声明(border-radius: 10px;)构成。声明又由属性 (border-radius:)和值(10px;)构成
- CSS3结构化伪类: last-child ;nth-child .
- 在CSS中定义RGB值
.redness { color: rgb(254, 2, 8); }
- HSL(Hue Saturation Brightness)
关于怎样在Web页面插入SVG
- 使用img 标签
<img src="mySconeVector.svg" alt="Amazing line art of a scone" />
- 使用object 标签
关于表单的小知识
1. 输入类型
- email 类型可以将输入设置为email的浏览器会期望用户输入符合电子邮箱的语法。
- number 类型用于应该包含数值的输入域支持该特性的浏览器期望输入一个数字。
- url 类型可以将输入设置为url类型,用于输入url地址。
- tel 类型设置一个输入框期望用户输入一个电话号码。
- range 类型用于应该包含一定范围内数字值的输入域。
- search 类型用于搜索域,比如站点搜索或 Google 搜索。
2. 表单属性
- placeholder 只需在input 元素加入placeholder属性,其属性值就会默认显示为占位符文本,输入框获取焦点时该文本会自动消失。当其失焦且没有文本被输入时,占位符文本就会重新出现。
- required 在input元素中添加布尔类型(意味着你可以添加该属性,也可以不添加)属性required,可表明该项为必填项。如果表单提交的时候,该必填项没有任何信息,浏览器会给出警示信息。
- autofocus HTML5的autofocus属性可以让表单在加载完成时即有一个表单域被默认选中,以便用户输入。
- pattern 属性规定用于验证 input 域的模式(pattern。
- novalidate 属性规定在提交表单时不应该验证 form 或 input 域.
- multipl 属性规定输入域中可选择多个值。
- min、max 和 step 属性,min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)。
- list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
- height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。
- autocomplete 属性 很多浏览器默认提供自动补全功能来辅助用户输入。以往用户可以在浏览器设置中打开或关闭这项功能
- form 属性规定输入域所属的一个或多个表单。
3. 表单元素
- datalist 元素定义下拉列表。
- keygen 元素定义生成密钥。
- output 元素用于不同类型的输出。