Web前端续写

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

Web 前端基础续写

---

一、嵌套列表

列表之间可以互相嵌套形成多层次列表
代码如下（示例）：

无序列表 有序列表 定义列表都可以写成嵌套列表，定义列表更容易写成嵌套列表

二、表格标签

1.表格基本标签

<table> : 表格的最外层容器
<tr> : 定义表格行
<th> : 定义表头
<td> : 定义表格单元
<caption> : 定义表格标题
注：之前具有嵌套关系，要符合嵌套规范

2.语义化标签

<tHead> : 包住<tr>标签，只能存在一个
<tBody> : 包住<th> and <td>标签，能存在多个
<tFoot> ：只能出现一次

三、表格属性

border : 表格边框 (table标签中)
cellpadding ：单元格内的空间 (table标签中)
cellspacing ： 单元格之间的空间 (table标签中)
rowspan ：合并行 （td th 标签中）
colspan ：合并列 （td th 标签中）
align ： 左右对齐方式（td th 标签中）         left        center        right
valign ： 上下对齐方式 （td th 标签中）          top        middle          bottom

四、表单标签

<form> : 表单的最外层容器
<input> : 用于搜集用户的信息，根据不同的type属性值，展示不同的控件，如输入框 、密码框、复选框等

1.type属性

type是<input>的属性

text : 普通的文本输入框
password : 密码输入框
checkbox : 复选框
radio : 单选框
file : 上传文件
submit : 提交按钮
reset : 重置按钮

表单没有严格的嵌套规范

2.单选框单选？

给所需要的单选框代表的<input>标签添加相同的属性以及属性值，让电脑知道所选的单选框为相同的类型。这样就可实现单选框单选。

3.上传地址

地址放在<form>标签中，为此标签的action属性。

4.复选框默认值

在复选框对应的<input>标签中添加“checked”,即默认此值已被选中

5.复选框禁止选中

在复选框对应的<input>标签中添加“disabled”,即此值不可被选中

6.placeholder 提示效果

让原本空白的输入框、密码框等，显示出提示内容，且不妨碍填写信息

7.多行文本框

标签为<textarea>(双标签）

8. 下拉菜单

<select>:外层标签，双标签
在<select>中添加size属性，size可以使下拉菜单显示的项数具体到几个。
在<select>中添加multiple属性，可以使下拉菜单变成多选，可以进行多选操作。
<option>:内标签，双标签
在<option>标签内添加selected属性，使标签对应的值成为默认值。
还可以添加**<disabled>**属性，禁止选中。

9.辅助表单label

label标签可以扩大点击有效范围
“id“属性对应for标签

五、表格表单组合

六、div与span

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

span(内联）：对文字进行修饰的内敛。用来修饰文字的，div和span都是没有任何默认样式的，需要配合CSS才行。

七、CSS基础语法

格式：选择器{属性1 ： 值1 ；属性2 ： 值2 }
单位：px->像素（pixel)、%->百分比
基本样式：width(宽）、height（高）、background-color（背景色）
CSS注释：/ * CSS注释的内容 * /

CSS样式的引入方式

1.内联样式
(style属性)

2.内部样式
（style标签）

（蓝色部分为内部样式）

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

3.外部样式
引入一个单独的CSS文件，name.css
通过link标签引入外部资源，rel属性：规定当前文档与被链接文档之间的关系，href属性：资源的地址
或通过@import方式引入外部样式（这种方式有很多问题,不建议使用）

八、CSS中的颜色表示法

1.单词表示法：red bule green yellow
2.十六进制表示法：#0000000（黑色） #ffffff（白色）
3.rgb三原色表示法：rgb（255、255、255）；取值范围0~255
提取颜色的下载地址：FE
提取颜色也可以用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 | 单词

x : left、right、center
y : top、bottom、center

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

十一、CSS文字样式

1.font-family:字体类型

英文字体 ： Arial 、 ‘Times New Roman’
中文字体 ： 微软雅黑、宋体
衬线体   非衬线体

中文字体的英文名称

微软雅黑：‘Microsoft YaHei’
宋体 ： SimSun

字体多选

注意点：
1.多个字体类型的设置目的：英文和中文对应字体不一样
2.引号的添加的目的： 如果英文字体名称中间有空格，两边需要添加引号

2.font-size : 字体大小

默认：16px(字体大小一般为偶数）
写法：number(px) | 单词（ small large…不推荐使用）

3.font-weight：字体粗细

模式：正常（normal)、加粗（bold）
写法：单词（normal、 bold) | number ( 100、200…900,100到500都是正常，600到900都是加粗）

4.font-style: 字体样式

模式：  正常（ normal ）     斜体（ italic )
写法：单词 （normal、 italic)
注：oblique也是表示斜体，用的较少，一般了解即可
区别：1.italic 带有倾斜属性的字体才可以设置倾斜操作
           2.oblique 没有倾斜属性的字体也可以设置倾斜操作

5.color：字体颜色

十二、CSS段落样式

1.text-decoration:文本装饰

下划线：underline
删除线： line-through
上划线： overline
不添加任何装饰：none

（添加多个文本修饰）

2.text-transform: 文本大小写（针对英文段落）

小写：lowercase
大写：uppercase
只针对首字母：capitalize

3.text-indent:文本缩进

首行缩进 （默认一个字大小为16px）
em单位：相对单位，1em永远和字体大小相同

4.text-align:文本对齐方式

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

5.line-height:定义行高

行高：上边距+ 字体高度 +下边距
默认行高：不是固定的，不断变化的。跟随字体的变化不断变化。
取值：number:px
             scale:比例值，与文字大小成比例

6.letter-spacing:字之间的间距

word-spacing:词之间的间距（针对英文段落）

7.英文和数字不自动折行的问题

1.word-break : break-all;(非常强烈的折行）
2.word-wrap : break-word;(不是那么强烈的折行，会产生一些空白区域）

十三、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 size/line-height family

一个CSS属性只控制一种样式，叫做单一样式
    一个CSS属性控制多种样式，叫做复合样式
注：尽量不要混写，如果非要混写，先写复合样式，再写单一样式。这样单一样式才不会被覆盖掉。

十四、CSS选择器

1.ID选择器

格式：CSS：#elem{}
         HTML：id=“elem”
注：
1.在一个页面中，ID值是唯一的。出现多次是不符合规范的。
2.命名规范，字母_-数字（命名的第一位不能是数字）。
3.命名方式：驼峰式:searchButton(小驼峰） SearchButton(大驼峰） searchSmallButton
                     下划线式:search_small_button
                     短线式:search-small-button

2.CLASS选择器

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