web第10-12章总结

第十章

1. div元素用于将相关的元素归组在一起，放在逻辑区中。创建逻辑区有助于标识主内容区以及页面的页眉和页脚。
2. 可以使用div元素将需要共同样式的元素归组在一起。
3. 使用嵌套div元素为文件增加更多结构，有利于保证结构清晰或者方便增加样式。但是除非需要，不要过多地增加结构。
4. 对div增加样式：#elixirs h2.Latte{ color: green; }
5. width属性设置一个元素内容区宽度。
6. 一个元素的总宽度=内容区宽度+内边距宽度+边框宽度+外边距宽度。
7. text-align是块元素的一个属性，用来将块元素中的所有内容对齐，可以居中（center），左对齐或右对齐，这个属性可以由所有嵌套的块元素继承。
8. 可以使用子孙选择器来选择嵌套在其他元素中的元素，画出HTML树，找出想选择的元素。#elixirs h2{color：black；}这个规则指出要选择id为elixirs的div的所有子孙h2元素。
9. 子孙选择器会选择一个元素中嵌套的所有h2，不论嵌套得多深。
10. 可以对相关属性使用快捷方式 ，如padding：0px 20px 30px 20px；顺序为上右下左 。
11. 内外边距，边框，背景和字体属性都可以用快捷方式指定。
12. span和div元素类似，只是用于把内联元素和文本归组到一起。
13. 有些元素有不同的状态，例如a元素，主要状态包括未访问的链接：link，已访问的链接：visited，悬停状态：hover。可以用伪类单独指定各个状态的样式。
14. 层叠：按照作者，读者，浏览器对规则排序。特定性：id>类/伪类>元素名。

十一章

1. 浏览器使用流在页面上放置元素。块元素从上向下流，各元素之间有一个换行。默认每个块元素会占浏览器窗口的整个宽度。
2. 内联元素在块元素内部从左上方流向右下方。如果需要多行，浏览器会换行，在垂直方向上扩展外围块元素，来包含这些内联元素。
3. 并排放置两个内联元素：间距=外边距a+外边距b
   上下放置两个块元素：外边距=a>b?a:b。
4. 浮动元素会从正常流中取出，浮动到左边或右边。浮动元素放在块元素之上，不会影响正常的页面流。但内联元素会围绕这个浮动元素。
5. 浮动元素必须有特定的宽度，不能设置为auto。
6. clear属性：块元素左右不能有浮动元素。
7. 流体布局是指，扩展浏览器窗口时，页面中的内容会扩展以适应页面。冻结布局是指，内容宽度固定，缺点：不能有效利用浏览器宽度。
8. 凝胶布局：内容宽度固定，外边距扩展收缩，更美观。（margin-left：auto；margin-right：auto）
9. position属性：static，absolute，fixed（固定），relative。
10. 静态定位是默认方式，将元素放在页面的正常流中，绝对定位允许将元素放在页面上的任何位置，默认相对于页面边界来设置。
11. 绝对定位元素使用z-index属性分层放置，z-index越大，说明离你越近。
12. 固定定位元素相对于浏览器窗口定位，页面滚动时，固定定位元素不动，其他元素正常滚动。
13. 相对定位元素首先正常流入页面，然后按指定量偏移，从而留出他们原先所在的空间。其中的上下左右是指正常流中该元素位置的偏移量。
14. CSS表格显示允许按一种表格布局来摆放元素。使用时要分别对应表格，行，单元格的块元素，通常都是div元素。要建立多栏布局，而且内容栏均匀，表格显示是一个很好的布局策略。#tableContainer{display：table；border-spacing：10 px；}为表格中的单元格增加10像素的边框间距。
15. vertical-align：top；向上对齐。

第十二章

1. h5为html增加了很多新元素。
2. section元素：指示这是由相关内容构成的一个结构明确的区块。
3. article元素：独立于页面的其余内容，用于类似博客帖子，论坛帖子和新闻报道等独立的内容。
4. aside元素：用于表示不作为页面主内容的次要内容，如插图和边栏。
5. nav用于组织网站导航链接。

`<nav>      
<ul>
  <li class="selected"><a href="mission.html">mission</a></li>
  <li><a href="test.html">test</a></li>
  <li><a href="">yue</a></li>
  <li><a href="">yang</a></li>
</ul>
</nav> `

6. header元素：将标题，logo和署名等通常放在页面或区块最上方的内容组织在一起。
7. footer元素：将诸如文档信息，法律措辞和版权说明等通常放在页面或区块最下方的内容组织在一起。
8. time元素：用来标记时间和日期。<time datetime="2020-08-03">3/8/2020</time>
9. div元素仍然用于建立结构，它通常将元素组织在一起来指定样式，或者有些内容可能不适合放在h5中那些与结构相关的新元素中，这时可以用div创建结构。
10. 较早的浏览器不支持h5元素。
11. 视频编码是用来创建视频文件的编码，常见的编码包括h.264、Vp8和Theora。
12. 视频容器文件包含视频、音频和元数据。流行的容器格式包括MP4、OGG和Webm。
13. video用于为页面增加视频

<video controls autoplay width="512" height="288" >
<source src="20185799 岳洋.mp4" type='video/mp4;codecs="avc1.42E01E,mp4a.40.2"'>
<source src="20185799 岳洋.webm" type='video/webm;codecs="vp8,vorbis"'>
<source src="20185799 岳洋.ogv" type='video/ogg;codecs="theora,vorbis"'>
<p>Sorry,your browser doesn't support the video element</p>
</video>

controls属性播放器提供控件；autoplay属性，页面加载视频就会开始播放；poster属性，提供海报图像（视频封面）。

14. mark元素：突出文本；audio：包含声音内容；progress：显示任务完成进度；meter：显示某个范围的度量；canvas：显示用js绘制的图像和动画；figure：用来定义类似照片、图表甚至代码清单等独立的内容。