首页 > 代码库 > 前端初步预习（4）

前端初步预习（4）

2024-09-06 17:22:08   220人阅读

第四天

是基础班的第一天

老师讲解的是表格（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）


联系
我们