Web前端从入门到精通（第二周）

二十一、嵌套列表

列表之间可以互相嵌套形成多层级列表。

练习：

二十二、表格标签

适合在网页当中显示大量数据。

• 表格所涉及到的相关标签：
  < table >：表格的最外层容器
  < tr >：定义表格行
  < th >：定义表头（通常表格都有个表头，代表具体的分类）
  < td >：定义表格单元
  < caption >：定义表格标题
  注：之间是有嵌套关系的，要符合嵌套规范。
  
• 语义化标签：< tHead >、< tBody >、< tFoot >（只是代表语义化，并不会影响网页效果；添加这三个语义化标签是为了使表格更加规范）
  
• 标签语义化：更符合HTML的规范。
  好处：有利于搜索引擎优化；有利于团队协作等。
• 注：在一个table当中，tBody是可以出现多次的，但是tHead、tFoot只能出现一次。

二十三、表格属性

• 常见的表格属性：
  border：表格边框
  cellpadding：单元格内的空间
  cellspacing：单元格之间的空间
  rowspan：合并行
  colspan：合并列
  align：左右对齐方式
  valign：上下对齐方式
  
  
• align：left、center、right
• valign：top、middle、bottom

二十四、表单input标签

表单在页面当中非常常用，比如输入框、复选框、单选框等等。

• < form >：表单的最外层容器
• < input >：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。
  
• 表单和表格的区别：表格是比较严格的，需要按照嵌套规范的，但是表单是不需要的，表单里面没有太多规范。
• input标签（单标签）有一个type属性，决定控件具体的样式
  
  
• 注：checked：在表单一开始就选中选项
  disabled：选项不可选中

二十五、表单相关标签

• < textarea >：多行文本框
  
• < select >、< option >：下拉菜单
  
  
• 注：调节初始选项，要使下面某项成为默认选项，在该项的option后加入selected。

• 注：size（单选）可以使下拉菜单具体显示几个；
  multiple可以多选。
• < input type=“file” >：只能选择一个文件。
• < input type=“file” multiple >：可以选择多个文件。
• < label >：辅助表单，能够让可选择的范围变大，从而提升用户体验。

二十六、表格表单组合实例

表格表单之间可以互相组合形成数据展示效果。

二十七、div与span

• div（块）：
  div全称division，“分割、分区”的意思，< div >标签用来划分一个区域，相当于一块区域容器，可以容纳段落、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在< div >标签中，< div >中还可以嵌套多层< div >,用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
• span（内联）：
  用来修饰文字的，div与span都是没有任何默认样式的，需要配合CSS才行。
  
  < div style=“border: 1px gray solid;” >：加边框
  < span style=“color:red”>web：加颜色

二十八、CSS语法格式

CSS基本格式

• 格式：选择器{属性1：值1；属性2：值2}
  
• 单位：px - >像素（pixel）、% ->百分比（例：外容器->600px 当前容器50%->300px）
  （屏幕的分辨率：横向的像素*纵向的像素）
• 基本样式：width（宽）、height（高）、background-color（背景色）
  
• CSS注释：/ * CSS注释的内容 * /；或者快捷键：shift+alt+a或ctrl+/

二十九、内联样式与内部样式

• 内联（行内、行间）样式：在html标签上添加style属性来实现的
• 内部样式：在< style >标签内添加的样式
  注：内部样式的优点，可以复用代码
  
  注释部分为内联样式，未注释部分为内部样式。
• 区别：内部样式的代码可以复用、符合W3C的规范标准，尽量让结构和样式分开处理。

三十、外部样式及两种写法

外部样式是通过引入一个单独的CSS文件，name.css

• 引入外部样式：
  < link >标签：link是当前页面与一个外部资源的引入关系。
  < link >标签有两个属性：rel：表示引入资源的类型，可通过rel来指定；href：引入外部资源的地址。
  llink的rel属性：https://www.w3school.com.cn/tags/att_link_rel.asp
  
  @imput
  
  注：这种方式有很多问题，不建议使用。
  link与@imput的区别：https://www.cnblogs.com/my–sunshine/p/6872224.html
  1.从属关系区别
  @import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
  2.加载顺序区别
  加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
  3.兼容性区别
  @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
  4.DOM可控性区别
  可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
  5.权重区别(该项有争议，下文将详解)
  link引入的样式权重大于@import引入的样式。

三十一、CSS颜色表示法

• 单词表示法：red、blue、green、yellow…
  
• 十六进制表示法
  十进制：0 1 2 3 4 5 6 7 8 9
  二进制：0 1表示
  十六进制：0 1 2 3 4 5 6 7 8 9 a b c d e f
  例：#000000(黑色）是最小值；#ffffff（白色）是最大值；#ff0000是红色
• RGB三原色表示法
  rgb(0,0,0)；
  例：rgb(0,0,0)是黑色，rgb(255,255,255)是白色
  取值范围：0~255
• 获取颜色的工具
  提取颜色的下载地址：https://www.baidufe.com/fehelper
  photoshop工具

三十二、背景样式

CSS背景样式：

• background-color：背景颜色
• background-image：背景图片
  url（背景地址)
  默认：会水平垂直都铺满背景图
• background-repeat：背景图片的平铺方式
  repeat-x x轴平铺
  repeat-y y轴平铺
  repeat（x,y 都进行平铺，默认值）
  no-repeat 都不平铺
• background-position：背景图片的位置
  x y：number（px、%） | 单词
  x：left、center、right
  y：top、center、bottom
• background-attachment：背景图随滚动条的移动方式
  scroll：默认值（背景位置是按照当前元素进行偏移的）
  fixed（背景位置是按照浏览器进行偏移的)

三十三、边框样式

CSS边框样式

• border-style：边框的样式
  solid：实线
  dashed：虚线
  dotted：点线
• border-width：边框的大小
  px…
• border-color：边框的颜色
  red #f00…
  
  边框也可以针对某一条边进行单独设置：border-left-style：中间是方向 left、right、top、bottom

三十四、边框实现三角形

transparent：透明颜色

三十五、family字体类型

CSS文字样式

• font-family：字体类型
  英文字体：Arial、‘Times New Roman’
  中文字体：微软雅黑、宋体
• 中文字体的英文名称
  微软雅黑：‘Microsoft YaHei’
  宋体：SimSun
• 衬线体与非衬线体
  
  左侧为衬线体，右侧为非衬线体。
• 注意事项：1.设置多字体的方式；2.引号的问题（字体中有空格必须加引号，无空格可不加引号）

三十六、字体大小粗细样式

• font-size：字体大小
  默认大小：16px
  
  写法：number(px) | 单词（small large…不推荐使用)
  注：字体大小一般为偶数。
• font-weight：字体粗细
  两种模式：正常的（normal）和加粗的（bold）
  写法：单词（normal、bold）| number（100 200…900，100到500是正常的，600到900是加粗的）
• font-style：字体样式
  两种模式：正常（normal）斜体（italic）
  写法：单词（normal、italic）
  注：oblique也表示斜体，用的比较少，一般了解即可。
  区别：1.italic 带有倾斜属性的字体才可以设置倾斜操作；2.oblique 没有倾斜属性的字体也可以设置倾斜操作。
• color：字体颜色

三十七、文本修饰与文本大小写

• text-decoration：文本装饰
  下划线：underline
  删除线：line-through
  上划线：overline
  不添加任何装饰：none
  注：添加多个文本修饰：line-through underline overline
• text-transform：文本大小写（针对英文段落）
  小写：lowercase
  大写：uppercase
  只针对首字母大写：capitalize

三十八、文本缩进与文本对齐

• text-indent：文本缩进
  首行缩进（空出两个字是32px）
  em单位：相对单位，1em永远都是跟字体大小相同
• text-align：文本对齐方式
  对齐方式：left、right、center、justify（两端点对齐）

三十九、文本的行高

• line-height：定义行高
  什么是行高：一行文字的高度。
  
  上边距=下边距
  默认行高：不是固定值，而是变化的。根据当前字体的大小在不断地变化。
  取值：1.number（px）| scale（比例值，跟文字大小成比例）

四十、文本间距与英文折行

• letter-spacing：定义字间距
• word-spacing：定义词间距（针对英文）
• 英文和数字不自动折行的问题：
  word-break：break-all；（非常强烈的折行）
  word-wrap：break-word；（不是非常强烈的折行，会产生一些空白区域）

四十一、CSS复合样式

一个CSS属性只控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫做复合样式。

• 复合样式
  复合的写法，是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border；有的是需要关心顺序的，例如font。
  1.background：red url() repeat 0 0;
  2.border：1px red solid；
  3.font：
  注：最少要有两个值 size family
  weight style size family √
  style weight size family √
  weight style size/line-height family √
• 注：尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式。

四十二、ID选择器及注意事项

• ID选择器
  css：#elem{}
  html：id=“elem”
  注：1.在一个页面中，ID值是唯一的。
  2.命名规范，字母、下划线、中划线、数字(命名的第一位不能是数字)。
  3.命名方式,驼峰式、下刻线式、 短线式。
  4.驼峰写法：searchButton（小驼峰）SearchButton（大驼峰）searchSmallButton

四十三、CLASS选择器及注意事项

• CLASS选择器
  css：. elem{}
  html：class=“elem”
  注：1. class选择器是可以复用的。
  2.可以添加多个class样式。
  3.多个样式的时候,样式的优先级根据CSS决定，而不是class属性中的顺序。
  4.标签+类的写法
  
  https://www.csdn.net/