Description
- Read "The Ultimate Practice of Front-end Experience Design HTML5+CSS3", author Andy Clarke.
Chapter 7 Direct HTML
- Semantic elements in 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选项 -->
Chapter 8 Semanticization and Microformats
- The rel attribute specifies the relationship between the current document and the linked document
- Divided into rel and <a> in <link>
<!-- 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表示链接的版权信息 -->
- Whether it is link or rel in a, please refer to the URL below for more information
-
Structure
After reading the structure of the book, I personally understand it as dividing the actual document, combining some information through certain connections, and then forming one small square after another. (Of course, this process is achieved through html tag organization + class name) The benefits of this are two points: ① The code looks neat and easy to read. ②Intentionally, this way of writing allows information to be organized in a certain way, making it more convenient for external extraction. -
Commonly used microformat class attributes
说明：
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中划分出来做成摘要。
Chapter 10 CSS Basics
- CSS media queries
Is the ability to specify the use of different style sheets
For example, the code to distinguish screen and printer is as follows
屏幕
<link rel="stylesheet" media="screen" href="screen.css>
打印机
<link rel="stylesheet" media="print" href="screen.css>
Linked media query
不得不提的就是这种链接的媒体查询是在区分不同尺寸下使用不同的样式表，但是这样的这样也会额外增加请求次数，大大降低网站或者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">
Embedded query
我们也可以使用@media插入一些额外的样式表，这样做虽然增大单个样式表的代码数量，但是可以减少请求次数，对web性能具有储金意义。
@media(max-width:980px){
#header{
height:50px
}
}
当屏幕的尺寸<=980px的时候，id为header的元素的高度变成50px
- Start with the most common style
We should use a progressive layout style when developing, starting with the smallest compatibility. Then we have to make sure that the style of writing maintains the same style and tone under different responsive interfaces. This book is categorized according to the following 6 principles, or 6 elements.
rest||normalise site
-wide public style
font
form element
table
image