前端 HTML/CSS （三）

分手后的思念是犯贱 2022-12-30 13:43 13阅读 0赞

### 目录 ###

*   *   *   *  表格
             *  内框架
             *  表单
             *  无意义的标签
             *  CSS简介
             *  CSS基本语法
             *  CSS中的颜色
             *  CSS的使用方式

#### 表格 ####

`<td>`上面的属性：

*  `colspan`：规定单元格可以横跨的列数。
 *  `rowspan`：规定单元格可以竖跨的行数。

#### 内框架 ####

`<iframe>`标签，创建包含另外一个文档的内联框架。

*  src：载入框架时候要载入的文档的地址。
 *  width属性：设置iframe的宽度。
 *  height属性：设置iframe的高度。
 *  frameborder属性：规定是否显示边框，1为显示，0为不显示。
 *  name属性：规定这个iframe的名字，配合a标签的target使用。

`<iframe></iframe>`是一个双标签。iframe 里面的 border 是 iframeborder.

name 后面的属性值是自定义的。

如果要清除所有的框架那么需要给a链接的target属性设置`_top`值。表示的是在所有框架的最顶层打开。

`_parent`父层打开，`_top`最顶层打开。

#### 表单 ####

*  `<form>`标签：告诉浏览器这个双标签中包含的内容是表单的内容。
    
     *  method属性：提交数据的方法，默认的时候就是get可以指定为post，get 和 post不区分大小写。如果使用get提交数据那么提交的值将作为查询字符串，如果用的是post传递那么url和数据将会分开进行传输。
     *  action属性：表示的是提交到哪里。
 *  `<input />`标签：定义一个输入框
    
     *  type属性：输入框的类型（根据type的值来配合使用哪个属性）
        
         *  text值：表示一个文本输入框，可以让用户进行输入。
            
             *  name属性：该文本框传递到服务器上的标识。
             *  value属性：默认值。也就是文本框中默认显示的值。
             *  size：显示多少个字符，控制文本框宽度(一般不会用，但是我们可以使用CSS进行控制)。
             *  maxlength属性：表示最多可以输入多少个字符。maxlength设定的值可以在后台改掉，并可以成功提交所改的值。（最好的办法：前端认证+服务器认证）
             *  disabled：禁用。可以写为`disabled="disbaled"`，简写方式为disabled。
             *  readonly：一个只读框。值为`readonly="readonly"`可以简写为`readonly`
                
                readonly和disabled的共同点都是只读，不能修改。disabled掉的输入框它是不会将值传递到服务器的，而readonly的输入框可以将值传递到服务器。
         *  input里面的action默认为当前页面。
         *  password：表示一个密码框。
            
             *  name属性：该密码框传递到服务器上的标识。
                
                密码框传递值时，虽然看着是加密的但是传递到服务器端是明文的，所以还是需要重新加密。
         *  radio：表示一个单选框，只能选择一个。
            
            多个选择一个，多个单选框里name的值必须相同。
            
             *  name属性：传递到服务器上的标识。
         *  value属性：用来表示选中后要传递到服务器上的值。
            
             *  checked属性：默认选中。也可以直接写为`checked`。
            
            **注意：**
        
        1.  属于同一组单选框的多个name的值必须相同，否则不会出现单选效果。
        2.  如果有多个单选框使用了checked那么将会选中最后一个。
        
         *  checkbox：复选框，可以选择多个。
            
             *  name属性：传递到服务器上的标识。（如果多选框需要提交时，那么name=“值"中加一个”\[ \]"，如：name=hobby\[\]，这样每个值都能够成功提交。
             *  value：传递到服务器上的值。
         *  checked：默认选中。
        
        **注意：**
        
        1.  checked可以有多个。
        2.  checked在单选框中只能选择最后一个有效，即使你使用多个checked。
        3.  在复选框中可以使用多个checked，并且都有效。
     *  file，上传框
     *  submit：提交按钮
        
         *  value属性：表示按钮显示出来的值。
     *  label标签：为`<input />`标签定义标注
        
         *  for属性：利用for属性和指定的input进行绑定(用for的值和指定的input的id的值进行绑定)。

label 标签只包住input前面的汉字，不用包住input元素。
    
    
    * `select`标签：定义一个下拉列表。
    
    name属性：传递到服务器上的标识。
    
    disabled属性：禁用整个下拉列表。

`option`标签：用来定义列表中的每一项。

*  value属性：传递给服务器的值。
    
     *  disabled属性：将指定的option选项禁用。
     *  selected属性：默认选中某个option。
 *  `textarea`，文本域，用来输入大段的文字。
    
     *  name属性：传输的标识。

**注意：**

1. textarea的默认值应该在标记的中间（textarea没有value属性）。
    2. 如果textarea标记回车，输入的内容也会换行。

*  button标签：用来表示一个按钮
    
     *  type属性：定义按钮的类型：button、submit、reset。
    
    每个浏览器中默认的type属性的值不同，所以我们在使用时记着加上type="xxx"这样的话可以确保浏览器的统一。
    
     *  type如果为button仅仅表示纯“按钮”。
     *  type如果为submit表示“提交”。
     *  type如果为reset表示“重置”（这个值几乎不用）

#### 无意义的标签 ####

*  div，无意义的块状元素标签。
 *  span，无意义的行内元素标签。

#### CSS简介 ####

`CSS（cascading style sheet）`，层叠样式表，主要是控制网页的样式和布局，使样式、布局和标记能够分离的标记性语言。

随着人们审美观点的提高，现在网页中的CSS和HTML有着举足轻重的地位，他俩是配合使用的，分工明确的。

CSS3是CSS规范的最新版本，CSS2.1单一的规范，而CSS3被划分成几个模块组，每个模块组都有自己的规范。这样的好处就是整个CSS3的规范发布不会因为部分难缠的部分而影响其他模块的推进。

#### CSS基本语法 ####

李沛华有两个女朋友，他希望第一个女朋友的身高高一些（165CM），他希望第二个女朋友眼睛大一点。

女朋友1{
        身高：165CM; ----> 高跟鞋。
    }
    女朋友2{
    	眼睛：大一些;  -----> 割双眼皮。
    }

**CSS的本质就是选择，然后改变某个属性。**

*  选择
 *  改变属性

选择器{
        属性1:值1;
        属性2:值2;
        ......
        属性n:值n;
    }

*  选择器：告诉浏览器应该讲哪些样式作用于页面。
 *  声明：告诉浏览起如何渲染指定的对象，它由两部分组成属性、值。
    
     *  属性：属性是CSS预先定义的样式的选项。属性的名字由一个或多个单词组成。
     *  值：定义属性对应的参数。

**注意：**

1.  每个`属性/值`成对出现，后面要加上分号。
2.  web浏览器会忽略空格和回车。
3.  写的时候不要横着写。

为了更好的做实验：

*  HTML选择器（标签选择器），将`html标签名`作为选择符来使用。
 *  `font-size`，设置字体的大小，单位是PX。
 *  `color`，设置字体的颜色。

#### CSS中的颜色 ####

*  颜色的单词。
 *  十六进制的值，你注意一件事，因为总共是6位，每两位一组，如果每一组（红、绿、蓝）中的数字相同，可以缩写成3个字符。
    
    `#6600ff`，`#60f`
    
    `#ff4400`，`#f40`
    
    `#ff4200`，不能简写。
 *  rgb颜色值：格式:`rgb(红,绿,蓝)`值为`0~255`之间的值。
 *  rgba颜色值：格式:`rgba(红,绿,蓝,透明度)`值为`0~255`之间的值。透明度的值在01之间0为完全透明、值越大透明度越低。可以使用`.n`来表示小数的透明度。

#### CSS的使用方式 ####

*  内联方式：在html标签的中的style属性中设置css样式。
    
    格式：`<标签名 style="属性1:值1;属性2:值2;">被标记出来的内容</标签名>`
    
    特点：仅作用于本标签。
 *  内嵌方式：在head标签中的style标签中书写CSS
    
    格式：

*  特点：作用于当前整个页面。
    
    **注意：**
    
    1.  最后一个`属性:值`规则不用加上分号，但是强烈建议你加上。
    2.  声明CSS时，现在不需要包含type属性，以前是要包含的。`type="text/css"`
        
        `text/css`这个叫MIME类型。前面（text）是大类型，后面（css）是小类型。
 *  外部导入方式。。。。。。。。