首页 > 代码库 > 前端初步预习(4)

前端初步预习(4)

第四天

是基础班的第一天

老师讲解的是表格(table){<tr>行, <td>列(列可以加入其它标签:例如<h1>标题标签)}

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>
  • table的属性:

           border:表格边框

             width:给表格设置宽

            height:给表格设置高

      cellspacing:单元格之间的空隙

     sellpadding:单元格边框和内容的空白

 

表格其它标签(以下都是双标签)

<th>起表头作用

<thead>用来存放表头

<tbody>用来存放表格内容

<caption>表格标题

 

表单 (from)

输入框:input   ,   设置提示语:placeholder    ,   默认值:value   ,    类型:type

<form>
    <p>用户名:<input type="text" placeholder="请输入用户名"></p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;码:<input type="password" placeholder="请输入密码"></p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;别:<input type="radio" name="sex"><input type="radio" name="sex"></p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;好:<input type="checkbox" name="one">吃饭<input type="checkbox" name="two">睡觉<input type="checkbox" name="three">打豆豆</p>
    <p>出生日期:<select name="nian">
    <option value="">1990</option>
    <option value="">1991</option>
    <option value="">1992</option>
    <option value="">1993</option>
    <option value="">1994</option></select><select name="yue">
    <option value="">1</option>
    <option value="">2</option>
    <option value="">3</option>
    <option value="">4</option>
    <option value="">5</option></select><select name="nian">
    <option value="">30</option>
    <option value="">29</option>
    <option value="">28</option>
    <option value="">27</option>
    <option value="">26</option></select></p>
    <p>自我评价:<textarea cols="50" rows="10"></textarea></p>
    <p><a href="#">注册</a>&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" name=""></p>
</form>

 

  • input系列

type{text文本,password密码,button按钮,cheakbox复选框,radio单选框,submit提交,reset重置,textarea文本域{cols宽,rows高},

         image图片按钮)

 

下拉框内容写在<option>中

下拉默认值设置:selected="selected"

单选默认值设置:checked="checked"(name="名字"设置一样,形成互斥效果)

多选默认值设置:checked="checked"

 

div(块级元素)

布局标签,默认占一整行,作为容器布局的时候使用

span

可一行排列多个,大小由内容决定

css:层叠样式表

作用:美化页面

写在<head>中  <style>样式 </style>

  • 书写方式

行内式:样式写在同行内:例<div style="color:red;"></div>

外联式:<link rel="stylesheet" herf="xxx.css"

内联式:样式写在同一页的<style></style>

  •  语法结构:

选择器{

         属性:属性值;(!!!每个属性都有相对应的值)

}

 

color

 

英文表示:red......十六进制颜色表示法:color:#RRGGBB; (两位红色,两位绿色,两位蓝色)

三原色:红,绿,蓝

 

color:rgb(225,225,o)

可用数字最大为255,最小为0,超出以255处理

可用百分比 最小0%,最大为100%

前端初步预习(4)