第二周（21-45）-CSDN博客

<table border="1" cellpadding="30" cellspacing="30">
     <tHead>
            <tr><th colspan="">姓名</th>
                <th>年纪</th>
                <th>性别</th>
            </tr>
 
<tBody>
<tr><td>Durant</td>
    <td>10</td>
    <td>男</td>

3.1 表单标签

<form> 表单最外层容器

<input（单标签）> 用于收集用户信息，根据不同的type属性值，展现不同的控件如：输出框、密码框、复选框......

type属性含义

text 普通的文本输入框

password 密码输入框 placeholder="请输入内容"（框内文字）

<form>
        <h1>输入框</h1>
        <input type="text" placeholder="请输入内容">
        <h1>密码框</h1>
        <input type="password">
    </form>

checkbox 复选框（checked默认选择）

radio 单选框（name="gender"将几组数据化为一组）

<form action="提交地址"> 
      <h1>输入框</h1>
        <input type="text" placeholder="请输入内容">
        <h1>单选</h1>
        <input type="radio" name="gender"> 123       <!-- name="gender"可以把几组选项分为一组 -->
        <input type="radio" name="gender"> 234
        <input type="radio" name="gender"> 567  <!--  （只能选择其中一项） -->
        <h1>复选</h1>
        <input type="checkbox" checked>24
        <input type="checkbox"checked>25
        <input type="checkbox"checked>26
        <input type="checkbox">27
        <input type="checkbox">27
        <input type="checkbox">28

file 上传文件

submit 提交按钮

reset 重置按钮

<h1>上传文件</h1>
        <input type="file">
        <h1>提交和重置</h1>    
        <input type="submit">
        <input type="reset">

<textarea cols="列数" rows="行数"> 多行文本框（双标签）

下拉菜单： <select> (双标签) 、<option>(双标签)

<select>
            <option selected(默认选择） disabled(禁止选择)>请选择</option> 
            <option>北京</option> 
            <option>上海</option> 
            <option>重庆</option>
        </select>

 <select size="3">

<select size="3" multiple（多选）>

二、CSS基础语法

1.1 格式：选择器{属性1：值1；属性2：值2} （span、div）

height：高单位 px（pixel）

width：宽 % 百分比

background-color：背景颜色

<div style="width:100%;height:100px;background-color:aqua">文字</div>

1.2 CSS的引入方式

内联样式 style属性

内部样式 style标签

1.3引入一个单独的css文件 <link>标签：引入外部资源

rel属性：指定资源跟页面的关系

href="网址"引入资源的地址

<link rel="stylesheet" href="网址">

2.1 CSS颜色引入

单词：red blue green yellow...

<div style=background-color:blue>颜色</div>

 <style> div {background-color:blue;} </style>
    <div> 123 </div>

十六进制：0123456789abcdef 例：#000000-#ffffff

 <div style=background-color:#b92121>颜色</div>

rgb三原色 ：rgb（0，0，0）取值范围：0~255

 <style> div {background-color:rgb(234, 212, 111);} </style>
    <div> 123 </div>

2.2 提取网址颜色

FE助手（页面取色工具）只能提取网页中的颜色

Photoshop(拾取器) 可以提取本地颜色

三、CSS背景样式

1.1 background-color：背景颜色

background-image：url（./照片地址）背景图（默认铺满背景图）

background-repeat 平铺方式

（repeat-x：x轴平铺 repeat-y：y轴平铺 repeat(x,y)：全平铺 no repeat ：不平铺）

background-position ：x y 或 left、center、right ; top、center、bottom 背景位置

background-attachment:scroll（相对于背景颜色） fixed（相对于浏览器）背景图随滚动条移动的方式

<style>
div {width:300px;height:300px;
      background-color:rgb(234, 212, 111); 
      background-image:url(图片地址 ); 
      background-repeat:repeat-x
      background-posotion:100px 50px 
    }
   </style>
<div> 123 </div>

2.2 CSS边框样式

border-style ：边框的样式（ border-方向-style：solid） left、right、top、bottom针对一条边
solid：实线
dashed：虚线
dotted：点线
border-width ：边框的大小（单位px）

border-color ：边框的颜色透明颜色：transparent

2.3 CSS文字样式

font-family ：字体类型（英文中文） div{ font-family：字体，字体...}

衬线体（有衬头）非衬线体（较平滑）当字体名称有空格时需要添加引号

font-size ：字体大小
默认大小：16px
写法：number(px)或单词字体大小一般为偶数

font-weight ：字体粗细
两种模式：正常（normal）、加粗（bold）
写法：单词（normal、bold）或number（100~500正常，600~900加粗）
font-style ：字体样式

正常（normal）、斜体（italic）

写法：单词（normal、italic）

italic 带有倾斜属性的字体才可以设置倾斜操作

oblique没有倾斜属性的字体也可以设置倾斜操作
color ：字体颜色

3.1 CSS段落样式

text-decoration ：文本装饰（添加多个文本修饰时用空格符号隔开）
下划线：underline
删除线：line-through
上划线：overline
不添加任何装饰：none

text-transform ：文本大小写（只针对英文段落）
小写：lowercase
大写：yppercase
只针对首字母大写：capitalize

text-indent ：文本缩进例：{ text-indent：2em； }
首行缩进（px、em）
em单位：相对单位，1em永远都是跟字体大小相同

text-align ：文本对齐方式
对齐方式：left、right、center、justify（左、右、中、两端点对齐）

line-height ：定义行高例： line-height ：2
定义：一行文字的高度，上边距和下边距的等价关系
默认行高：不是固定值，而是变化的。根据当前字体的大小在不断的变化

取值：number: 数字px scale: 比例值，与文字大小成比例

3.2 文本间距与英语折行

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

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

折行英文和数字不自动折行的问题
word-break : break-all;(非常强烈的折行）

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

四、CSS复合样式

1.1 复合的写法

  是通过空格的方式实现的。复合写法有的是不需要关心顺序（background、border;有的是需要关心顺序，例如：fontbackground : red url() repeat 0 0; border : 1px red solid;）
font :（最少要有两个值size family
          weight style size family
         style weight size family
          weight size/line-height family）

一个CSS属性只控制一种样式，叫做单一样式

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

2.2 CSS选择器

ID选择器
格式：CSS：#elem{}
HTML：id=“elem”

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