第二周 前端知识总结

一.表格的建立与优化

表格的基本骨架如下

<table>     #定义表格的标签
    <tr>    #表格的行
        <td>#表格中的单元格
  
        </td>
    </tr>
</table>

优化标签主要有以下几种：

1.align：规定对齐方式

2.border：规定是否有边框（默认没有（""））1代表有边框

3.cellpadding：边缘线与内容之间的间隔（默认为1像素）

4.cellspacing：单元格之间的空白（默认为2像素）

5.width：表格宽度

6.rowspan：跨行合并   格式  <td rowspan="2"></td> 之后删除被合并的单元格

7：colspan：跨列合并

二：列表标签

2.1有序标签

<dl>
   <dt> 内容1 </dt>
   <dt> 内容2 </dt>
   <dt> 内容3 </dt>
   <dt> 内容4 </dt>
</dl>

2.2无序标签

<ul>
   <li> 内容1 </li>
   <li> 内容2 </li>
   <li> 内容3 </li>
   <li> 内容4 </li>
</ul>

2.3自定义列表

<dl>
   <dt> 内容1 </dt>
   <dd> 内容2 </dd>
   <dd> 内容3 </dd>
   <dd> 内容4 </dd>
</dl>

三：表单的建立与优化

首先需要<form> </form>来确定表单域（收集和传递数据）

3.1 type属性标签

3.1 button 定义按钮

3.2 checkbox 定义复选框

3.3 file定义输入字段和浏览按钮

3.4 hidden 影藏输入字段

3.5 image 提交图像按钮

3.6 password 密码字段

3.7radio 单选按钮

3.8 reset 重置按钮

3.9 submit 提交信息到达服务器

3.10 text 输入文本（默认20字符）

3.2 input属性按钮

3.1 name 定义input元素名称

3.2 value 定义值

3.3 checked 首次选中

3.4 maxlength 规定长度（字符）

四：css基础选择器（及引入方式）

4.1 标签选择器（直接修改所有该标签内的文本）

需要优化内容的标签名{
各种属性
}

4.2 类选择器（用时需 class=“id （可添加其他属性，为多类名选择器）”调用）

.自定义名称{
各种属性
}

4.3 id选择器（一次性使用）（使用格式为#id=“id”）

#自定义名称{
各种属性
}

4.4 通配符选择器（选择所有标签，无需调用）

*{
各种属性
}

4.5 后代选择器

元素1 元素2{
样式说明
}

选择元素1中所有的元素2的内容

4.6 子选择器

元素1>元素2{
样式说明
}

元素1与元素2必须是父子关系

以上为行内样式表

外部样式表：

先建立一个后缀名为.css的文件

在使用<link rel="stylesheet' herf="css文件路径">

五：字体属性

5.1 font-family 修改字体（font-family:"字体名称"；）

5.2 font-size 字体大小 （font-size：**px；）

5.3 font-weight 字体粗细 （400=normal=不加粗）（700=bold）

5.4 font-style 是否倾斜 （italic=斜体）（normal=正常）

5.5 font 复合属性顺序必须为4,3,2,1，中间用空格隔开（必须有1,2否则无效）

六：文本属性

6.1   text-align 文本对齐方式

6.2 text-decoration 装饰文本 

      6.2.1 none 无装饰线

      6.2.2 underline 下划线

      6.2.3 overline 上划线

      6.2.4 line-through 删除线

6.3 text-indent 文本缩进（可用**px 像素） （可用**em文字大小）

6.4 line-height 行间距（**px）