深入理解块级元素

简介

1 .内容模型。通常块级元素可能包含内联元素和其他块级元素。通常块级元素创建比内联元素更大的结构
2 .默认情况下，块级元素总是从新行开始，但是内联元素可以再一行中的任何位置开始
3 .注意html4的块级和内联元素的分类在html5被一种更加复杂的内容类别所取代
4 .在css的flow layout中指定，块级元素占据其父元素的整个水平空间，垂直空间等于其内容的高度，从而创建一个块
5 .块级元素总是从新行开始并占据可用的全部宽度，尽可能向右和向左延伸
6 .块级元素只能出现在body元素内
7 .默认情况下，块级元素只能从新行开始，但是内联元素可以再一行中的任意位置开始

全部列表

address

1 .表示其中的html提供了某个人或某个组织的联系信息
2 .可以是真实地址，url，电子邮箱，电话号码，社交媒体账号，地理坐标等
3 .用法说明

抖音只用了footer

4 .元素不能包含除联系信息之外的任何信息，比如出版日期。这个应该在time中
5 .address元素可以放在footer元素之中
6 .当一个元素和联系信息无关的任意地址的话，使用p元素而不是address元素。
7 .注意，还是语义化的问题，虽然看起来只是使用了i或者em元素的默认样式来渲染其中的文本，但是当处理联系信息时使用它更为合适，因为他表示了额外的语义

article

1 .表示文档，页面，应用或网站中的独立结构，他的意义就是成为可独立分配的可服用的结构。
2 .看起来像是一个组件最外面的一层
3 .使用说明

1 .每个article通常包括标题h1-h6作为article的子元素
2 .当article元素嵌套使用的时候，则该元素代表与外层元素有关的文章。例如代表博客评论的article元素可嵌套在代表博客文章的article里面
3 .article元素的作用信息可以通过address元素提供，但是不适用于嵌套的article元素
4 .article元素的发布日期和时间可以通过time元素的update属性表示

4 .用法示例

<article class="film_review">
  <header>
    <h2>Jurassic Park</h2>
  </header>
  <section class="main_review">
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <article class="user_review">
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-16 19:00">May 16</time>
          by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-17 19:00">May 17</time>
          by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on
      <time datetime="2015-05-15 19:00">May 15</time>
      by Staff.
    </p>
  </footer>
</article>

aside

1 .表示一个和其余页面内容几乎无关系的部分，被认为可以是独立该内容的一部分并且可以被单独拆分出来而整体不会受影响。通常是侧边栏或者标注框

blockquote

1 .代表其中的文字是引用内容，通常在渲染的时候会有一定的缩进。是从其他地方引用的大段文字。
2 .如果文字是来自网络，还要在cite属性上加上地址

<figure>
    <blockquote cite="https://www.huxley.net/bnw/four.html">
        <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
    </blockquote>
    <figcaption>—Aldous Huxley, <cite>Brave New World</cite></figcaption>
</figure>

3 .属性

1 .cite:是一个标注引用的信息的来源文档或者相关信息的url。通常用来描述能够解释引用文字的上下文或者引用的信息

4 .使用备注

1 .如果要修改引用备注的缩进距离，使用margin-left,margin的缩写
2 .这里他为啥要这么说，而不是使用text-indent呢
3 .在长引用里面加一个较短引用使用q标签

details

1 .和summary元素组合起来，点击展示的一种操作，有点像是抽屉

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

style里面竟然还可以加style样式

2 .detail只有两个状态，展开和收起。默认出于关闭，鼠标点击小部件，或者聚焦的时候按下空格键，抽屉就会打开。键盘这个操作是一般组件所没有的
3 .没有内置方法来做打开和收起的动画之间的过度
4 .事件

1 .toggle事件
detail.addEventListener('toggle',event=>{
  if(detail.open){
} else{

}
})

5 .兼容性就是ie完全不支持

dialog

1 .表示对话框或者其他交互式组件，例如可以关闭的警报，检查器或者子窗口
2 .tabindex属性不能在这里使用
3 .属性

1 .open:表示对话框处于活动状态并且可以与之交互。如果open未设置该属性，则不向用户显示对话框。推荐使用.show()，.showModal()方法来渲染对话框，而不是open属性

4 .ie还是不支持
5 .实用性

1 .这里的只是有一个居中的效果，也没有遮罩。title，footer，还是需要自己显示
2 .有点中看不中用的感觉

dd，dl，dt

1 .和列表相关，用来描述列表
2 .这个元素只能作为描述列表元素的子元素出现，并且必须跟着一个dt元素

image.png

div

1 .通用型的流内容容器，在不使用css的情况下，其对内容或布局没有任何影响
2 .使用备注：

1 .div元素应该在没有任何其他语义元素的时候在使用，比如article，nav

fieldset

1 .用来对表单元素中的控制元素进行分组，也包括label元素
2 .checkbox最外面包一个这个,或者你想要的一类选择用这个包起来

fieleset 最后展示

3 .使用备注

1 .fieldset将一个html表单的一部分分成一组，内置了一个lengend元素作为fieldset的标题

4 .属性

1 .disabled:如果设置了这个bool属性，fieldset所有子代表单控件也会集成这个属性。这意味着他们不可编辑，也不会随着form一起提交，也不会收到任何浏览器事件。但是一般不会加在这个上面吧
2 .form:
3 .name:元素组的名称

5 .看描述感觉也是很鸡肋，难道这个也有针对辅助系统的特殊优化么？

figcaption，figure

1 .figure元素代表一段独立的内容，经常和figcaption配合使用，并且作为一个独立的引用单元。
2 .经常是在文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或其他页面时不会影响到主体

image.png

3 .使用说明

1 .通常，figure是图像，插图，图表，代码片段。感觉以后的第三方库中都用这个装算了
2 .通过在其中插入figcaption作为第一个或者走后一个字元素。可以将副标题与figure元素相关联。途中找到的第一个figcaption元素限制为图的标题
3 .代码
<figure>
  <figcaption>Get browser details using <code>navigator</code>.</figcaption>
  <pre>
function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName;
  txt+= "Browser Name: " + navigator.appName;
  txt+= "Browser Version: " + navigator.appVersion ;
  txt+= "Cookies Enabled: " + navigator.cookieEnabled;
  txt+= "Platform: " + navigator.platform;
  txt+= "User-agent header: " + navigator.userAgent;
}</pre>
</figure>
4 .引用内容
<figure>
  <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
  <blockquote>If debugging is the process of removing software bugs,
  then programming must be the process of putting them in.</blockquote>
</figure>

5 .图像
<!-- Just an image -->
<figure>
  <img
  src="https://developer.mozilla.org/static/img/favicon144.png"
  alt="A robotic monster over the letters MDN.">
</figure>

<!-- Image with a caption -->
<figure>
  <img
  src="https://developer.mozilla.org/static/img/favicon144.png"
  alt="A robotic monster over the letters MDN.">
  <figcaption>MDN Logo</figcaption>
</figure>

footer

1 .footer表示最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者，版权数据或者文档相关的链接等信息
2 .一个页脚通常包含该章节，版权数据或者文档相关的链接等信息

form

1 .表示文档中的一个区域，此区域包含交互控件，用于向web服务器提交信息

h1-h6

1 .规定了标题的6个不同级别的标题，h1最高，h6最低
2 .使用要点

1 .不要为了减小标题的字体而使用低级别的标题，而是使用font-size属性
2 .避免跳过某级标题，始终要从h1开始，接下来是h2等等
3 .使用section元素时，避免在同一个页面重复使用h1,h1被用于表示页面的标题，其他的标题应该一律从h2开始。或者说在使用section的时候，每一个都配一个h2元素

4 .屏幕阅读器的一种常见导航技术是生成分段内容列表并使用他来确定页面的布局。

header

1 .注意这个和页面的head元素的区别
2 .header元素用于展示介绍性的内容，通常包含一组介绍性的或是辅助导航的使用元素。
3 .包含一些标题元素，但是也可能包含其他元素，比如logo,搜索框，作者名称，等等
4 .页面的header
5 .文章的header

<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>Posted on Wednesday, 4 October 2017 by Jane Smith</p>
  </header>
  <p>We live on a planet that's blue and green, with so many things still unseen.</p>
  <p><a href="https://janesmith.com/the-planet-earth/">Continue reading....</a></p>
</article>

hgroup

1 .已经被从html5规范里面删除
2 .好像是用来控制生成渲染大纲：代表文档章节所属的多级别的目录，它将多个<h1>至<h6>的子元素组装到一起
3 .这里要看辅助功能要怎么操作

hr

1 .表示段落级元素之间的主体转换，比如故事中的场景的改变，或者一个章节的主题的改变.
2 .之前原来的使用好像就是把他当做了下划线
3 .在早期的css版本中，他是一个水平线。现在仍然表现为水平线，但是目前被定义为语义上的，而不是表现层面上的。所以如果想要画一条横线的时候，需要使用适当的css样式来修饰
4 .属性：虽然有一些属性，但是好像都要被删除.也就是说表现上的属性要全都交给css来做

li，ul,ol

1 .li表示列表里面的条目，必须包含在一个父元素里面，有序列表是ol,无序列表式ul,或者菜单.
2 .li属性

1 .value:只能是数字，对于menu,和ul无效，表示为有序条目的序号，ol的实际渲染会根据这个属性重排，并不一定完全按照输入时候的顺序。menu是一个实验中的功能，这里先不讨论
2 .

main

1 .main元素呈现了文档的body或应用的主体部分。
2 .使用说明

1 .main应该是独一无二的，任何同时存在于任一系列文档中相同，重复的内容，比如侧边栏，导航栏，版权信息，网站logo，搜索框，都不应该被包含在其中
2 .main不会对文档的大纲有影响，不会影响DOM的页面结构概念，仅有提供信息的作用

nav

1 .目标是为了在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单,目录和索引
2 .这个可以用来做面包屑组件的dom结构

nav{
      border-bottom: 1px solid black;
    }
    .crumb ol{
      list-style: none;
      padding-left: 0;
    }
    .crumb{
      display: inline-block;
    }
    .crumb a::after{
      display: inline-block;
      color:#000;
      content: ">";
      font-size: 80%;
      font-weight: bold;
      padding:0 3px;
    }
<nav class="crumbs">
    <ol>
        <li class="crumb"><a href="#">Bikes</a></li>
        <li class="crumb"><a href="#">BMX</a></li>
        <li class="crumb">Jump Bike 3000</li>
    </ol>
</nav>

<h1>Jump Bike 3000</h1>
<p>This BMX bike is a solid step into the pro world. It looks as legit as it rides and is built to polish your skills.</p>

image.png
他自己的官网就是这样设计的，优秀啊

3 .并不是所有的链接都必须使用nav元素，他只是用来将一些热门的链接放入导航栏，例如footer元素就常用来在页面底部包含一个不常用到的，没必要加入nav的链接列表。
4 .一个网页也可能包含有多个nav元素，例如一个网站外的导航列表，另一个是本页面内的导航列表
5 .

p

1 .表示文本的一个段落，通常表现为一整块与相邻文本分离的文本，或者以垂直的空白隔离或以首行缩进
2 .

pre

1 .表示预定格式文本。该元素中的文本会按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符也会被显示出来。
2 .你输入什么文本，就会展示什么文本，有点像字符画，之前实现过一个版本，那个好像是不停的用空格实现的

section

1 .表示一个包含在html文档中的独立部分，他没有更具体的语义元素来表示，一般来说会有一个标题
2 .导航菜单会放到nav里面，但是一些搜索结果列表或者地图显示及其他控件没有特定元素，可以放在section里面
3 .如果元素的内容作为一个独立的有意义的集合，article元素是更好的选择。这里的有意义指的是什么？
4 .使用说明

1 .section里面一般包含一个标题h1-h6来作为子节点来辨识每一个esection
2 .如果section元素的内容可以单独在多个地方使用，应该用article而不是section
3 .不要把section元素作为普通的容器来使用，这是div的用法，特别是当容器仅仅是为了添加class来美化样式的时候
4 .一个section应该出现在文档大纲中，比如一个新模块的开始

table

1 .table表示表格数据，通过二维数据表，表示信息
2 .兼容性到是一片绿
3 .但是大规模的列表，明显是虚拟列表配合div比较舒服啊
4 .腾讯文档感觉走的就是我想走的路子，具体的渲染交给canvas，ui用html结构，这都不是走虚拟列表的路子,他连doc这个用的都是canvas来操作.高端

main

1 .存放每个页面独有的内容。每个页面上只能使用一次main，并且直接位于bodu里面，最好不要放到其他元素里面
2 .article和section的关系。可以以标题开头，把一篇article分成若干部分并分别置于不同的section中，也可以把一个区段section分成若干部分并分别置于不同的article钟，取决于上下文中