Web前端学习

一 . 嵌套列表

 作用：列表之前可以互相嵌套成多层级的列表

二 . 表格标签

其间有嵌套关系，要符合嵌套规范

• <table>：表格的最外层容器
  

• <tr>：定义表格行
  

• <th>：定义表头
  

• <td>：定义表格单元
  

• <caption>：定义表格标题
  

• 语义化标签：<tHead>   <tBody>  <tFood>
               一次     可多次     一次             →在一个table中
  

  

三 . 表格属性

• border ：表格边框
• cellpadding ：单元格内空间
• cellspacing ：单元格之间的空间
• rowspan ：合并行
• colspan ：合并列
• align ：左右对齐方式
• valign ：上下对齐方式

四 . 表单标签

• <form> ： 表单的最外层容器
  

• <input> : 标签用于搜集用户信息，根据不用的type属性值，展示不同的控件，如输入框、密码框、复选框等
  

• <textarea>：多行文本框
  

• <select>、<option>:下拉菜单
  

• label

五 . 表格表单组合实例

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

六 . div与span

div（块）：div全称division，“分割、分区”的意思

<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>,用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。

soan（内联）:

用来修饰文字的，div与span都是没有任何默认形式的，需要配合css才行。

八 . css语法格式

格式：

选择器（属性1：值1；属性2：值2）

单位：

 px→像素（pixel）、%→百分比、
 外容器1→600px   当前容器 50%→300px；
 外容器2→400px   当前容器 50%→200px。

基本样式：

width、height、background—color

九 . 内联与内部样式

内联（行内、行间）样式

在html标签上添加style属性来实现的

内部样式

在<style>标签内添加的样式
注：内部样式的优点，可以复用代码

区别：内部样式的代码可以复用、复合w3c的规范标准，进行让结构和样式分开处理。

十 . 外部样式

引入一个单独的css文件，name、css
通过link标签引入外部资源、rel属性指定资源跟页面的关系，href属性资源的地址。
@import（这种方式有很多问题，不建议使用）

link与import的区别

十一 . css颜色表示法

1. 单词表示法：red blue green yellow …

2. 十六进制表示法：0 1 2 3 4 5 6 7 8 9 a b c d e f

3. rgb三原色表示法：rgb( 255,255,255)

    取值范围 0~255
   

十二 . 背景实现视觉差效果

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:（背景位置是按照浏览器进行偏移的）

十三 . 边框样式

border-style:边框样式

solid:实线
dashed:虚线
datted:点线

border-width:边框大小

 px...

border-color:边框颜色

red #f00 ...

边框可以对某一边进行单独设置：border-left-style（中间是方向：left、right、top、bottom）

十四 . family字体类型

英文字体：Arial,‘Times New Roman’
中文字体：微软雅黑、宋体
衬线体、非衬线体
注意点：
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也是表示斜体

十六 . 文本修饰与文本大小写

十七 . 文本缩进与文本对齐

text-indent：文本缩进

首行缩进
em单位：相对单位，1em永远都是跟字体大小相同

text-align: 文本对齐方式

对齐方式：left、right、center、justify（两端点对齐）

十八 . 文本的行高

十九 . 文本间距与英文折行

letter-spacing : 字之间的距离
word-spacing ：词之间的距离（针对英文段落的)

英文和汉字不自动折行的问题

• word-break:break-ali;(非常强烈的折行)
• word-wrap:break-word;(不是那么强烈的折行，会产生一些空白区域)

二十 . css复合样式

二十一 . ID选择器及注意事项

二十二 . class选择器及注意事项