读书笔记之《前端体验设计HTML5+CSS3终极修炼》

说明

阅读《前端体验设计HTML5+CSS3终极修炼》，作者Andy Clarke.

第七章 直击HTML

HTML中的语义元素 <section> <!--当整个文档中些部分能够成为独立的一部分同时独立之后也能够清晰的表达其包含的信息，这个时候就可以使用section标签--> <article> <!--article和section有一定的相似性，但是不同之处在于article更多的是包含一篇文章或者是一个故事，当然他也是独立存在的，section是页面中的一部分--> <!-- section里面可以有多个article，表示文档的一部分中含有好几个独立的故事 --> <!-- article里面可以有多个section，表示一篇文章或者一篇故事中含有多个独立的部分 --> <header> <!--作为整页，它可以是这篇文档的开头标志信息，又或者作为section和article这种独立区域的引言--> <footer> <!--使用footer主要是用来做页脚定义元信息，比如在页脚中加入版权信息。当然footer也是可以在上诉的两个独立的区域使用--> <aside> <!--使用aside来描述和文章相关，但是对于理解文章又不是很重要的部分，比如一篇文章主题是描述一本书，而aside可以用来描述这一本书的作者信息--> <nav> <!--无论是用来做顶部导航，侧边栏导航，这种快速跳转的集中区域就是使用nav标志--> <figure>和<figcaption> <!--当我们使用图片时候，对图片进行图注，可以使用这两个标签组合进行实现--> <figure> <img src=""> <figcaption>我是图注</figcaption> </figure> <time> <!--记录时间可以使用time标签，他是一个行内元素--> <input>专题 <input type="email"> <!-- email用来填写邮件--> <input type="url"> <!-- url用来填写网址 --> <input type="tel"> <!-- tel用来填写电话 --> <input type="search"> <!-- search用来填写网址 --> <input type="search" autocomplete="on"> <!-- autocomplete使用来自动补全 --> <input type="number"> <!-- number用来填写数字 --> <input type="number" placeholder="我是占位符"> <!-- 占位符 --> <input type="text" list="detectives"> <datalist id = "detectives"> <option value = "Mike Hammer">Mike Hammer</option> </datalist> <!-- 说白了就是输入框和下拉选择的相结合，也就是让用户既能够使用到手动输入，也能够享受到我们为用户定义好的建议 --> <input type="number" id="book" min="1"> <!--表示限制的最大数量，相应的还有一个max选项 -->

第八章 语义化和微格式

rel 属性规定当前文档与被链接文档之间的关系分为<link>中rel与<a>的 <!-- link中的rel --> <link rel="stylesheet" href = "screen.css" media="screen"></link> <!-- 这个stylesheet时表示文档的外部样式表。 --> <link rel="alternate" href = "article.rss" type="application/rss+xml"></link> <!-- 这个alternate时表示文档的替代版本（比如打印页、翻译或镜像）。这里的例子是连接RSS的提要 --> <!-- a中的rel --> <!-- <a> 标签的 rel 属性用于指定当前文档与被链接文档的关系。只有在使用了 href 属性才能使用 rel属性 --> <a href="http://creativecommons.org/licenses/by-sa/4.0" ref="license"></a> <!-- 这里的license表示链接的版权信息 --> 无论是link还是a中的rel，更多信息请查阅下方网址

link中的rel a中的rel

结构化 读完书上的结构化，我个人理解为，把实际的文档进行拆分，通过一定的联系，把一些信息组合起来，然后形成一个又一个的小方块。（当然这个过程中是通过html标签组织+class类名来实现）这样做的好处有2点:①代码看起来整洁，便于人的阅读。②故意这样的书写方式，让信息有一定的组织方式进行组合，外部提取更加方便。

常用的微格式class属性

说明： h-* 根元素 dt-* 把一个元素解释成日期或者时间 e-* 把HTML包括进一个元素 p-* 表示一段纯文本元素 u-* 表示一个url元素 例子： h-card 微格式卡片的根 p-name 人名 p-given-name 名 p-family-name 姓氏 u-url 链接 u-photo 照片链接 p-org 起源、公司 p-street-address 街道 p-locality 城市 p-postal-code 邮编 p-country-name 国家 p-tel 电话 dt-bday 生日 p-sex 性别 h-event 微格式事件的根 p-summary 表示的是事件的摘要，不过当我们的摘要包裹着很多的段落的时候，我们可以把这些标题，段落，列表或者其他任何元素放到一个section中划分出来做成摘要。

第十章 CSS基础

CSS媒体查询

就是指定使用不同样式表的能力

例如区别屏幕和打印机的代码如下

屏幕 <link rel="stylesheet" media="screen" href="screen.css> 打印机 <link rel="stylesheet" media="print" href="screen.css>

链接媒体查询

不得不提的就是这种链接的媒体查询是在区分不同尺寸下使用不同的样式表，但是这样的这样也会额外增加请求次数，大大降低网站或者app的性能 <link rel="stylesheet" media="screen and (min-width:48rem)" href="medium.css"> <link rel="stylesheet" media="screen and (min-width:64rem)" href="large.css">

嵌入式查询

我们也可以使用@media插入一些额外的样式表，这样做虽然增大单个样式表的代码数量，但是可以减少请求次数，对web性能具有储金意义。 @media(max-width:980px){ #header{ height:50px } } 当屏幕的尺寸<=980px的时候，id为header的元素的高度变成50px 从最普通的样式开始

我们在开发时候应该使用递进式的布局样式，从最小的兼容开始。 然后我们要确定书写的样式在不同的响应式界面下保持相同的风格和基调。本书中是根据以下6个原则，或者说6个元素进行归类。

rest||normalise 全站页面公共样式 字体 表单元素 表格 图像