《Head First HTML与CSS》草稿（11~14）

时间：2021-08-12 11:52:47 收藏：0 阅读：23

<div> 用于将页面划分为逻辑区或逻辑分组，可作为”逻辑容器“、”图形容器“
- 是一个纯粹的结构，在页面中没有”外观“或默认样式
- 是一个块元素
width 指定内容区的宽度
盒子模型的总宽度（元素的宽度）包括内容区的宽度、左右内边距的宽度、边框的宽度、左右外边距的宽度
一个块元素的默认宽度是 auto ，即延伸占满可用的空间
指定宽度可以指定一个具体的大小，通过像素指定或者指定一个百分数，使用百分数时，宽度计算元素所在容器宽度的一个百分比
一个元素的高度是默认的： auto ，浏览器在垂直方向上会延伸内容区，使所有内容都可见，一般不用指定元素的高度，用默认的 auto 就好
text-align 只能在块元素上设置，适用于任何类型的内联元素对齐，直接在内联元素（如 <img>）上使用时不起作用

子孙选择器：只想选择某些元素的子孙元素（以选择一个 id 为 elixirs 的 <div>中的 <h2> 为例）

 1 /*
 2    格式：
 3      父元素名 子元素名{
 4             ......
 5     }    
 6 */  
 7 
 8 
 9 #elixirs h2{
10     color:black;           //指定elixirs <div> 中的所有 <h2> 的颜色为黑色
11 }

上面的例子中，无论 <div> 中的 <h2> 被嵌套的有多深（孩子、孙子、曾孙、......），都会被全部选择

 1                 <div id="elixirs">
 2             <h2>孩子</h2>
 3             <h3>Lemon Breeze</h3>
 4             <p>
 5                 <div id="a">
 6                     <h2>孙子1</h2>
 7                     <div id="aa">
 8                         <h2>曾孙1</h2>
 9                     </div>
10                 </div>
11 
12                 <blockquote>          //在这里， <blockquote> 中的 <h2>与 <div> 中的 <h2>有同样的效果
13                     <h2>孙子2</h2>
14                     <blockquote>
15                         <h2>曾孙2</h2>
16                     </blockquote>
17                 </blockquote>
18              </p>
19         </div>

选择elixirs <div> 的直接孩子

1 #elixirs>h2{
2     color:black;
3 }

选择elixirs <div> 中的 <blockquote>中的子孙

1 #elixirs blockquote h2{
2     color:black;
3 }

子孙选择器按照元素的嵌套顺序一层一层地选择元素，所以在没有使用 id 属性时，可直接使用各层的元素名作为选择器名

line-height
- 可以对其直接使用一个数，而不是一个相对度量（em或%），使用数字1表示行高设置为自身字体大小（而不是继承而来的字体大小）的1倍
- 取值为 normal 时，允许浏览器选择一个适当的行高大小，通常根据字体来确定

内/外边距的简写

内/外边距的简写
普通写法	简写
padding/margin-top: 0px; padding/margin-right: 20px; padding/margin-bottom: 30px; padding/margin-left: 10px;	padding/margin: 0px 20px 30px 10px; (按照上、右、下、左的顺序)
padding/margin-top: 20px; padding/margin-right: 20px; padding/margin-bottom: 20px; padding/margin-left: 20px;	padding/margin: 20px;
padding/margin-top: 0px; padding/margin-right: 20px; padding/margin-bottom: 0px; padding/margin-left: 20px;	padding/margin: 0px 20px; （针对上和下、左和右相同的情况）

边框、背景的简写：各个属性的值的顺序可以任意
字体的简写
<span> 创建内联元素的逻辑分组
可以给内联元素设置宽度，但在这些元素定位之前，看不到任何效果
给内联元素四周都增加外边距时，只能看到左边和右边会增加空间，增加上边和下边的内边距时，不会影响包围它的其他内联元素间距，内边距会与其他内联元素重叠
图像与其他内联元素稍有不同，其宽度、内外边距更像块元素的相应属性

一个链接（<a>）可以有多种状态：可能未访问、已访问或者处于悬停状态（还有其他状态），如何根据其状态指定样式呢——需要用到伪类（Pseudo-class）：

 1 a:link{
 2     color:green;                  //处于未访问状态的链接
 3 }    
 4 
 5 a:visited{
 6     color:red;                      //已访问过的链接
 7 }    
 8  
 9 a:hover{
10      color:yellow;                 //鼠标悬停时的链接
11 }
12 
13 a:focus{
14     color:blue;                      //按下Tab键将交点放在链接上时的链接
15 }    
16 
17 a:active{
18     color:black;                    //第一次单击一个链接时的链接
19 }

链接可以处于多种状态，要按规则的顺序来确定应用哪个样式，一般认为适当的顺序是：link、visited、hover、focus、active

关于伪类（Pseudo-class）:

理解：可以对伪类指定样式，但没有在HTML中真正输入这些伪类
浏览器会在后台向伪类中增加和删除元素，根据状态指定不同的样式

伪类还能处理其他元素，如 <blockquote>

1 blockquote:first-child{
2     ......                         //选择 <blockquote> 中的第一个段落
3 }    
4 
5 blockquote:last-child{
6     ......                        //选择 <blockquote> 中的最后一个段落
7 }

关于样式表，你需要知道：
- 作者（你）可以为自己的页面创建样式表（优先级最高）
- 读者（用户）可以创建自己的样式表，当你没有为元素定义样式时，就使用读者创建的样式表（次之）【如果读者在一个属性声明后加上"!important"，他就能覆盖你的样式，即优先级比你高】
- 浏览器本身会维护一组默认样式表，前两者都没有定义样式表时，就使用默认的样式表（再次之）
另外，可以有多个选择器应用到同一个元素
如何确定到底使用哪个样式（层叠的作用）：
- 层叠
- 计算一个选择器的特定性
- 可以把上面得到的特定性数当作正真的数比较大小从而确定他们的特定性
- 完成特定性排序时，先按作者、读者、浏览器的顺序对规则排序，然后在各个类别中再按特定性排序，对于有相同特性的元素，根据样式表中的顺序在次进行排序（最下面的优先级最高）
- 类似 "h1,h2{ ...... }" 的规则可分别把 h1 和 h2 看作两个独立的规则
- 关于 !important ：
```
1 h1{
2     font-size:200%
3 !important;                           //这会覆盖作者的样式
4 }    
```
- 给一个例子：
- “层叠”的含义：之所以选择“层叠”这个名字，是因为来自多个样式表的样式都“层叠”在页面上，对各个元素应用最特定的样式
流（Flow）
- 浏览器从HTML文件最上面开始，从上到下沿着元素流逐个显示遇到的各个元素，块元素会占满页面的整个宽度，从上向下流，每个块元素之间加一个换行；内联元素从左向右流，水平方向各个元素挨着摆放，直到没有更多空间位置，剩下的内容会放在下一行，整体上从左上流向右下，对于文本内容（一行文本被当作一个内联元素），浏览器会将其分解为适当大小的内联元素以适应给定的空间。
- 浏览器会根据元素类型对外边距做不同的处理
  - 内联元素：水平放置，使用它们的各自的外边距来计算它们之间的距离
  - 块元素：上下放置，把它们共同的外边距折叠在一起，取两者中的较大的外边距作为它们之间的距离
内联元素可以设置外边距，但通常不设置，除了 <img>
只要两个垂直外边距碰在一起，它们就会折叠，即使是一个元素嵌套在另一个元素里面，如果外面的元素有边框，边框会将外边距隔开，就不会折叠
对于所有浮动元素都有一个要求：必须有一个宽度（width），不能设置为 auto
如何浮动元素

right 元素流入页面时，在该元素的右边不允许有浮动内容
left ......
both ......
......

浮动元素漂浮在页面上，其外边距不会碰到正常流中的元素的外边距，所以它们不会重叠
在某些功能受限的浏览器（如移动设备、屏幕阅读器等）中（相当于不加载样式表），页面会按照我们写页面时的顺序显示元素，这并不是我们想要的结果
流体布局（liquid layouts）与冻结布局（frozen layouts）
- 流体布局：调整浏览器宽度，布局会扩展，填满整个浏览器
- 冻结布局：与流体布局相反，锁定元素，将布局冻结在页面上，使设计保持原样
凝胶布局（Jello）
- 锁定页面中内容区的宽度，并居中显示
- 具体做法：将整个页面的全部内容放在一个 <div> 中，设置宽度并设置左右外边距为 auto （浏览器会确定正确的外边距，并确保左右外边距相同）
定位（position）
- absolute 绝对定位，相对于离它最近的父元素（一般是 <html> ，除非自己指定父元素）指定一个绝对位置
  - 一个元素绝对定位时，浏览器会将其从流中完全删除，然后将这个元素放置在 top 和 right （或 bottom 和 left ）指定的位置上
```
1 #sidebar{
2     position:absolute;
3     top:100px;
4     right:100px;
5     width:400px
6 }    
```
  - 流中的元素不会将其内联内容围绕在一个绝对定位元素周围
  - 一个元素可以放在另一个绝对定位元素上面，每个定位元素都有一个 z-index 属性，会指定它在一个虚拟z轴上的位置，越上面的元素，z-index 值越大
  - 可以对任何元素指定绝对定位，包括块元素和内联元素
  - 绝对定位元素指定宽度不是必须的，可以指定，也可不指定
  - 块元素在不指定宽度时默认会占满这个浏览器的宽度
  - 指定位置时，可以使用像素，还可以使用百分数，使用百分数时（相对于浏览器的百分之多少的位置），位置随浏览器窗口大小改变而改变，布局更灵活
  - z-index 属性通常用于CSS高级用法中
- fixed 固定定位，相对于浏览器窗口
  - 将元素放在相对于浏览器窗口（视窗）的一个位置上，而不是相对于页面边界
  - 固定元素永远不会移动，不会随页面的滚动而移动
  - 视窗是页面的可见部分：对一个元素的位置设置负值可以让其在屏幕上消失，但它仍在页面上
- relative 相对定位，相对于其外围包含的元素来定位
  - 元素正常流入页面，但显示之前进行偏移
  - 常用于更高级的定位和特殊效果
- 定位的位置可以使用负值来得到某些超出屏幕的特效效果
- 4种定位方式可结合使用，如一个 <div> 嵌套另一个 <div> 时，对父 <div> 使用相对定位（其仍在流中），然后子 <div> 可以相对父 <div> 使用绝对定位

现代浏览器的一个新特性：CSS表格，可用其轻松地创建多栏设计

对于CSS表格，其中的单元格包含一个HTML 块元素
表格会自动扩展来适应单元格宽度和高度

基本结构（以一个1行2列的表格为例）

 1         <div id="tableContainer">          //整个表格
 2             <div id="tableRow">          //表格的一行
 3                 <div id="main">          //表格的一行中的第一列
 4                     ......                       //单元格内容
 5                 </div>
 6                 <div id="sidebar">      //表格的一行中的第二列
 7                     ......                     //单元格内容
 8                 </div>
 9             </div>
10         </div>

为各个元素指定CSS样式，创建表格显示

 1 div#tableContainer{
 2     display: table;           //像表格一样摆放 tableContainer <div>
 3     border-spacing: 10px;     //单元格边框间距，可取代元素的外边距
 4     ......
 5 }
 6 div#tableRow{
 7     display: table-row;        //显示为表格的行
 8     ......
 9 }
10 #main{
11     display: table-cell;          //显示为单元格
12     vertical-align: top;         //单元格中的内容相对于单元格上边对齐
13     ......
14 }
15 #sidebar{
16     display: table-cell;
17     vertical-align: top;
18     ......
19 }

元素外边距不会与边框间距（bordr-spacing）折叠，

CSS 表格显示与 HTML 表格
- HTML 表格是建立数据的结构，CSS 表格显示只是创建某种表现布局的一种方法
vertical-align 单元格的垂直对齐方式
- top 顶端对齐
- middle 中间对齐，默认的对齐方式
- bottom 底端对齐
一个单元格中放多少内容由你自己决定，并不会有什么影响
用 width 属性设置各个列的宽度，使用百分数设置时，应确保各个列的百分比相加为100%
HTML 应当负责为内容建立结构，而 CSS 负责处理布局
为保持程序的可读性，换行是必要的，但对于 <img> 来说有点多余，换行会让两个 <img> 之间产生间隙
z-index 有最大值，但用不到
并非每个元素都有 z-index ，只有使用CSS绝对定位、相对定位、固定定位的元素有 z-index
将图像作为链接时，默认会有一个边框，可以使用 border:none 来去掉边框
CSS 中，要求关闭 text-decoration 使用边框来建立链接的下划线
现代 HTML
- <header> 放在页面顶部的内容，或者放在页面某个区块的顶部
- <nav> 所包含的内容将作为页面的导航链接
- <article> 表示页面中一个独立的组成部分，如一个博客帖子、用户论坛帖子或新闻报道
- <time> 包含一个日期或时间或同时包含日期和时间
- <aside> 包含的内容是对页面内容的补充，如插图或边栏
- <section> 一个主题性的内容分组，通常包含一个首部（header），可能还有一个底部（footer）
- <video> 为页面增加视频媒体
- <footer> 放在页面底部的内容，或者放在页面某个区块的底部
为有 id 的元素指定选择器名时，元素名和 id 之间不能出现空格，如：section#main{ ...... }，不能是 section #main{ ...... }
<section> 通常用于组织相关的内容，<article> 通常用于组织独立的内容

<time>

datetime 属性：如果元素内容没有采用官方Internet 日期/时间格式来写，就必须有 datetime 属性，如:

1 ......
2 
3 
4 <time datetime = "2021-8-10">Tuesday</time>
5 <!-- 指定日期的官方 Internet 格式，包括年、月、日、24小时制表示的时间，也可只指定其中的几项，可以指定如上所示
6         元素内容可以是日期时间或与之相关的文本-->
7 
8 
9 ......

如果在日期、时间后面有个 "z" ，表示UTC时间（UTC = GMT）

属性 list-style-type 用于设置列表项的项目符号，例如，值为 none 时，删除项目符号
display:inline; 去掉元素前后的回车
<video>的一些属性
- controls 如果有 controls 属性，会提供一些控件，如播放/暂停、全屏等，可以控制视频和音频的播放
  - 是一个“布尔属性”，没有值
  - 有这个属性时，浏览器会为视频显示内置的控件，不同的浏览器显示的控件不同
- autoplay 如果有 autoplay 属性，页面加载时视频或音频会自动播放
  - “布尔属性”，没有值
  - 加载页面时一旦有了足够的数据就开始播放
- src 视频所在的位置
- poster 海报图像，视频未播放时显示
  - 通常，浏览器会将视频的第一帧显示为海报
  - 通过 poster 属性可以指定你想显示的海报
- width/height 指定视频显示区的宽度/高度
  - 海报图或视频会按照你设置的宽度和高度保持宽高比缩放
  - 视频或海报放大时，会在上下或左右加黑边来适应显示区大小
- id 指定一个 id
- preload
  - 控制视频如何加载
  - 大多数情况下浏览器会根据是否设置 autoplay 以及用户带宽来选择加载多少视频
  - 可以设置的值：
    - none 用户真正“播放”视频之前不下载视频
    - metadata 下载视频元数据，但不下载视频内容
    - auto 让浏览器决定
- loop
  - “布尔属性”，自动重播视频
视频格式
- 一个视频文件包含两部分：视频部分和音频部分，每个部分都使用一种特定类型的编码类型编码
- 包装视频和音频以及元数据信息的文件称为“容器”，“容器”也有不同的格式和格式名
- 主要有3种视频编码格式：
- HTML 5 规范允许采用任何视频格式，具体哪些格式由浏览器实现来确定
- 在 <video> 中可以提供一组不同格式的视频
```
1 <video controls autoplay width="" height="">
2     <source src = "xxxxx.mp4">
3     <source src = "xxxxx.webm">
4     <source src = "xxxxx.ogv">
5     <p>Sorry, your brower doesn‘t support the video element.</p>
6 </video>
7 
8 
9 
```
- 编解码器（codec）是用来对一种视频或音频编码完成编码或解码的软件，如H.264、VP8、Theora、AAC、Vorbis等
- 还可给出关于视频文件的MIME类型和编解码器来给浏览器确定是否可以播放视频提供帮助：
```
1 <source src = "xxxx.ogv" type = ‘video/ogg;codecs = "theora,vorbis"‘>
2 
3 //注意： type属性两边是单引号
```
Content Delivery Network, CDN（内容分发网络）
对于 Flash 视频，要使用 <object>元素
<mark> 突出显示某些文本
<audio> 在页面中包含声音内容
<meter> 显示某个范围的度量
<canvas> 在页面中显示用JavaScript绘制的图像和动画
<figure> 定义类似照片、图像、代码清单等独立的内容
<progress> 显示任务的完成进度
CSS 表格显示只是用于建立布局，与内容本身无关
<table> 专门用于标记表格数据
- 基本结构
```
 1 <table>                                     //<table> 标记开始整个表格
 2     <tr>                                     //<tr>指定一个行
 3     <th>City</th>
 4     <th>Date</th>
 5     <th>Temperature</th>            //<th>指定表头中的单元格
 6     <th>Altitude</th>
 7     <th>Population</th>
 8     <th>Diner Rating</th>
 9     </tr>
10     <tr>
11     <td>Walla Walla,WA</td>     //<td>是表格中的一个数据单元格
12     <td>June 15th</td>
13     <td>75</td>
14     <td>1,204ft</td>
15     <td>29,686</td>
16     <td>4/5</td>
17     </tr>
18     <tr>
19     <td>Magic City,ID</td>
20     <td>June 25th</td>
21     <td>74</td>
22     <td>5,312ft</td>
23     <td>50</td>
24     <td>3/5</td>
25     </tr>
26 </table>
```
- 要列出所有数据单元格，即使它们的内容为空，否则表格就不能正常地排列对齐
- 将表头单元格（<th>）作为每行中的第一项，可使表格的表头出现在左侧
- 用表格建立布局是很老套的方式，而且很难维护，不如使用 CSS表格显示的方式建立布局
- 表格由行中的数据单元格组成，列隐含地定义在行中
- 浏览器默认用粗体显示表头单元格中的内容
- 为表格增加一个标题：<cpation> ，浏览器默认把标题放在表格的上方，可以通过CSS指定标题的位置
- 表格单元格有内边距和边框，但不能设置各个单元格的外边距，而要为整个表格设置一个边框间距
- 不能单独控制各个表格单元格的边框间距
- border-spacing 允许我们在水平和垂直方向上设置不同的边框间距，例如：设置10px的水平边框间距和30px的垂直边框间距：border-spacing:10px 30px
- 单元格之间的空间称为边框间距（border-spacing）
- border-collapse:collapse; 可将紧挨的边框合并为一个边框，即折叠边框

nth-child伪类

其状态是一个元素相对于它的兄弟元素的数字顺序

用法举例：为表格的奇数行和偶数行指定不同的颜色

td:nth-child(even){
      background-color:red;          //偶数行为红色          
}    

td:nth-child(odd){
      background-color:green;            //奇数行为绿色
}    

//还可使用数字n指定简单的表达式
td:nth-child(2n){
      background-color:yello;  
}    
td:nth-child(2n+1){
      background-color:black;  
}

让单元格跨越多行：在 <td> 中使用 rowspan 属性指定要跨越的行数，并删除它们所替换的那些 <td>（同一列中的）
让单元格跨越多列：在 <td> 中使用 colspan 属性指定要跨越的列数，并删除同一行中的表格数据元素
一个 <td> 可以同时跨行和跨列
表格可以嵌套
为列表增加样式
- list-style-type 设置项目符号的样式，常见的几种项目符号如下：
  - disc 默认样式
  - circle
  - square
  - none 删除列表标记
- list-style-image 指定列表项目标记图像，通过url指定
- 利用list-style-type还可控制一个有序列表的标记,常见的值:
  - decimal 十进制数
  - upper-alpha 大写字母
  - lower-alpha 小写字母
  - upper-roman 大写罗马数字
  - lower-roman 小写罗马数字
- list-style-position
  - inside 标记在列表项里(在列表项盒子的边框里),文本在标记下面回绕
  - outside 标记在列表项外面(在列表项盒子的边框外),文本本身回绕
表单:一个包含输入域的web页面,用户输入数据提交后,浏览器将数据打包发送给服务器,服务器上的脚本处理数据后返回一个页面
- <input type = "text">
  - 是一个void元素
  - 文本输入,用于输入一行文本,有相关属性可以设置最大字符个数和宽度
  - maxlength 属性限制能输入的最多字符数
- <input type = "submit">
  - 提交按钮,点击后将表单发送到服务器脚本进行处理
  - 是一个void元素
  - value 属性指定按钮上显示的名字
- <input type = "radio">
  - 单选按钮
  - 相关的单选按钮共用一个名字
- <input type = "checkbox">
  - 复选框
  - 相关的一组复选框共用一个名字
- <select> 与<option>结合使用创建下拉菜单
  - 增加属性 multiple 成为一个多选菜单，按下 ctrl 可选择多个选项
- <textarea> 多行文本输入
  - rows 文本区高度
  - cols 文本区宽度
  - 键入的文本没有限制
- tel输入: <input type = "tel">
- url输入: <input type = "url">
必须知道服务器脚本希望我们使用哪些元素,并相应地编写表单
为各个元素指定 name 属性,提交表单时,连同这个名字发送到服务器
<input> 是一个内联元素
可访问性
- 使用 <label> 元素标记标签来为页面结构提供更多信息
```
1 /*首先为元素增加 id 属性*/
2 <input type="text" name="hotornot" value="hot" id="hot">
3 
4 /*然后增加一个<label>，设置其 for 属性为相应的 id*/
5 <label for="not">not</label>
```
- 默认地，标签与普通文本看上去并没有什么不同，不过在可访问性方面有很大不同
- 任何表单控件都可以使用 <label> 元素
- 标签可以放在与它关联的控件的前面或后面，只要 for 属性的值与 id 匹配，标签放在哪里并不重要
-

表单中的其他元素

<fieldset> 将公共元素组织在一起（与 <legend> 配合使用）

<legend> 为一个组提供一个标签

1             <fieldset id="">
2                 <legend>Condiments</legend>
3                     <input type="checkbox" name="spice" id="salt" value="salt"/>
4                     <label for="salt">Salt</label><br>
5                     <input type="checkbox" name="spice" id="pepper" value="pepper"/>
6                     <label for="pepper">Pepper</label><br>
7                     <input type="checkbox" name="spice" id="garlic" value="garlic"/>
8                     <label for="garlic">Garlic</label><br>
9             </fieldset>

技术分享图片

<input type="password" >
<input type="file"> (必须使用post方法)

<input> 元素可增加 placeholder 属性为输入增加一个文本提示，单击文本域时，占位文本会消失，占位值不会作为控件值提交
所有表单控件都可增加 required 属性，它是一个布尔属性，设置了这个属性的控件，如果没有输入值，就无法正常提交表单，并会出现一个错误提示（“请填写此字段”）
如果表单数据是私有的，或者数据很多，如使用了 <textarea> 或 <input type="file"> 应当使用POST方式提交表单
对于可以加书签（对提交表单后的结果页面加标签，如服务器脚本返回一个搜索结果列表，如果对这些结果加标签，就能直接查看这些结果，不用再填写表单）的请求，要使用GET方式提交表单
将文本放在<textarea> 中时，会成为文本区控件的默认文本
通常会使用CSS表格显示布局来建立表单的布局

更多高级主题
- 更多CSS 选择器
- 开发商特定的 CSS 属性
- CSS 变换和过渡
- 交互性——JavaScript
- HTML5 API 和 Web 应用
- 创建 Web 页面的工具
- XHTML5
- 服务器端脚本
- 音频

原文：https://www.cnblogs.com/zk-blog-2021-6-11/p/15109630.html