Notas de lectura "Diseño de experiencia de front-end HTML5 + CSS3 práctica definitiva"

Descripción

Lea "La práctica definitiva del diseño de experiencias de front-end HTML5 + CSS3", autor Andy Clarke.

Capítulo 7 HTML directo

Elementos semánticos en 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选项 -->

Capítulo 8 Semántica y microformatos

El atributo rel especifica la relación entre el documento actual y el documento vinculado
Dividido en rel y <a> en <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表示链接的版权信息 -->

Ya sea que se trate de un vínculo o rel en a, consulte la URL a continuación para obtener más información.

rel en enlace rel en
un

Estructura
Después de leer la estructura del libro, personalmente lo entiendo como dividir el documento real, combinar cierta información a través de ciertas conexiones y luego formar un pequeño cuadrado tras otro. (Por supuesto, este proceso se logra mediante la organización de etiquetas html + el nombre de la clase). Los beneficios de esto son dos puntos: ① El código se ve limpio y fácil de leer. ②Intencionalmente, esta forma de escritura permite que la información se organice de una determinada manera, haciéndola más conveniente para la extracción externa.
Atributos de clase de microformato de uso común

说明：
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中划分出来做成摘要。

Capítulo 10 Conceptos básicos de CSS

Consultas de medios CSS

Es la capacidad de especificar el uso de diferentes hojas de estilo.

Por ejemplo, el código para distinguir la pantalla y la impresora es el siguiente

屏幕
<link rel="stylesheet" media="screen" href="screen.css>

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

Consulta de medios vinculados

不得不提的就是这种链接的媒体查询是在区分不同尺寸下使用不同的样式表，但是这样的这样也会额外增加请求次数，大大降低网站或者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">

Consulta incrustada

我们也可以使用@media插入一些额外的样式表，这样做虽然增大单个样式表的代码数量，但是可以减少请求次数，对web性能具有储金意义。

@media(max-width:980px){
  #header{
    height:50px
  }
}

当屏幕的尺寸<=980px的时候，id为header的元素的高度变成50px

Comience con el estilo más común

Deberíamos usar un estilo de diseño progresivo al desarrollar, comenzando con la compatibilidad más pequeña. Luego, debemos asegurarnos de que el estilo de escritura mantenga el mismo estilo y tono en diferentes interfaces receptivas. Este libro se clasifica de acuerdo con los siguientes 6 principios o 6 elementos.

resto || normalizar imagen de tabla de elemento de formulario de fuente de

estilo público en todo el sitio