Day2:html和css

标题图

Day2:html和css

表格是一种常用的标签,表格结构,做到能够合并单元格.

表格的属性:

属性名	说明
`border`	设置表格的边框
`cellspacing`	设置单元格与单元格边框之间的空白间距
`cellpadding`	设置单元格内容与单元格边框之间的空白间距
`align`	设置表格在网页中的水平对齐方式
`width`	设置表格的宽度
`height`	设置表格的高度

如何创建表格:

<table>
  <tr>
   <td></td>
  </tr>
</table>

表格用table,tr代表表格中的一行,必须在table标签中,td用于表示表格中的单元格,<tr></tr>表格中的一行.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    <table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
        <caption>个人信息表</caption>  表格标题  
        <tr>  
            <th>姓名</th> 
            <th>性别</th>
            <th>电话</th>
        </tr>
        <tr>
            <td>dashu</td>
            <td>男</td>
            <td>123</td>
        </tr>
        <tr>
            <td>dashucoding</td>
            <td>男</td>
            <td>123456</td>
        </tr>   
    </table>
</body>
</html>

<thead></thead>用于定义表格的头部
<tbody></tbody>用于定义表格的主体

表格:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style>
         /*选择器 { 属性: 值; }  */
         th  {
            color: blue;
         }
         td {
            font-size: 14px;
         }
         tr {
            height: 30px;
         }
    </style>
</head>
<body>      
    <table border="1" cellpadding="0" cellspacing="0" width="550" align="center">
        <caption> <h3></h3> </caption>
        <thead>
            <tr>
                <th></th>
            </tr>
        </thead>
        
        <tbody>
            <tr>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

合并单元格:

跨行合并:rowspan
跨列合并:colspan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <table width="400" height="100" border="1">
        <tr>
            <td>123</td>
            <td>abc</td>
            <td>abc</td>
        </tr>
        <tr>
            <td colspan="2">123</td>
            <td></td>
        </tr>
        <tr>
            <td>123</td>
            <td>abc</td>
            <td>abc</td>
        </tr>
    </table>
    <table width="400" height="100" border="1">
        <tr>
            <td>123</td>
            <td>abc</td>
            <td rowspan="3">abc</td>
        </tr>
        <tr>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td>123</td>
            <td>abc</td>
        </tr>
    </table>
</body>
</html>

在表格中由行中的单元格组成,没有列元素.表达式由表单控件,提示信息,表单域组成.

input输入控件:</input/>但标签

扫描二维码关注公众号，回复： 4621470 查看本文章

// 表单
性别,生日,年月日,所在地区,婚姻状况,学历,月薪,手机号,昵称,喜欢类型,掌握介绍等.

属性	属性值	说明
`type`	`text`	单行文本输入框
`type`	`password`	密码输入框
`type`	`radio`	单选按钮
`type`	`checkbox`	复选框
`type`	`button`	普通按钮
`type`	`submit`	提交按钮
`type`	`reset`	重载按钮
`type`	`image`	图形形式的提交按钮
`type`	`file`	文件域
`name`	用户自定义	控件名称
`size`	正整数	`input`控件在页面中显示的宽度
`value`	用户自定义	控件的默认文本值
`checked`	`checked`	定义选择控制价默认被选择的项
'maxlength`	正整数	控件允许输入的最多字符数

label标签为input标签元素定义的标注.

<label for="id"> id </label>
<input type="radio" name="sex" id="me" value="id">

`textarea`控件-文本域

<textarea cols="每行中的字符数" rows="显示的行数">
 文本内容
</textarea>

<textarea name="textarea" id="" cols="30" rows="10">
</textarea>

下拉菜单

<select>
 <option>选项1</option>
 <option>选项2</option>
 <option>选项3</option>
</select>

<select></select>至少应包含一对<option></option>
在option中定义selected="selected"时,代表已经为选中项

创建表格

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

表格的标题： caption

表单域 - 实现用户信息的收集和传递

form标签被用于定义表单域

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

action为在表单收集到信息后,将信息传递给服务器进行处理,action属性是指定接收并处理表单数据的服务器的url地址.
method用于设置提交的方式,为get或post两种
name为指定的名称

input控件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dome</title>
</head>
<body>
    <table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
        <caption><h4 style="color: pink; font-size:25px;"></h4></caption>
        <tr height="60">
            <td>地区</td>
            <td><input type="text" value="北京" style="color: #ccc;" /></td>
        </tr>
        <tr height="60">
            <td>用户名</td>
            <td><input type="text" value="dashu" /></td>
        </tr>
        <tr height="60">
            <td>
                <label for="da">密码</label>
            </td>
            <td><input type="password" value="123" maxlength="6" id="da" /></td>
        </tr>
        <tr height="60">
            <td>年龄</td>
            <td>
                <select name="" id="">
                     <option value="">选择年份</option>  
                     <option value="">1990</option>  
                     <option value="">1991</option>  
                     <option value="">1992</option>  
                     <option value="">1993</option>  
                </select>
                <select name="" id="">
                     <option value="">选择月份</option> 
                     <option value="">1月份</option>  
                     <option value="">2月份</option>  
                     <option value="">3月份</option>  
                     <option value="">4月份</option>  
                     <option value="">5月份</option>  
                </select>
            </td>
        </tr>
        <tr height="60">
            <td>年龄</td>
            <td>
                <select name="" id="">
                     <option value="">籍贯</option>  
                     <option value="" selected="selected">北京</option>
                     <option value="">哈尔滨</option>
                     <option value="">青岛</option>  
                     <option value="">大连</option>  
                </select>
            </td>
        </tr>
        <tr height="60">
            <td>性别</td>
            <td style="color: blue;">
                男 <input type="radio"  name="sex"/>  
                女 <input type="radio" name="sex" checked="checked" /> 
                妖 <input type="radio" name="sex"/> 
            </td>
        </tr>
        
        <tr>
            <td></td>
            <td>
                <input type="button" value="注册">
                <input type="submit" value="提交">
                <input type="reset" value="重置">
                <input type="image" src="btn.png" />
            </td>
        </tr>
        <tr>
            <td>上传头像</td>
            <td>
                <input type="file" >
            </td>
        </tr>
        <tr>
            <td>给我留言</td>
            <td>
                <textarea name="" id="" cols="50" rows="10" style="color: #ccc;">不支持富文本
                </textarea>
            </td>
        </tr>
    </table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>
     <label>  用户名：<input type="text">  </label>
     <hr>
     <label for="pwd">
        123
     </label>
        用户名：<input type="text">
        密码：<input type="password" id="pwd">
</body>
</html>

表单域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>
    <form action="" method="post">
        用户名: <input type="text" name="User" value="用户名"> <br /> <br />
        密　码: <input type="password" name="psd"><br /> <br />
        密　码: <input type="password" name="psd2"><br /> <br />
        性别： <input type="radio" name="sex">
        <input type="submit" value="提交所填">
        <input type="reset" value="重新填写">
    </form>
</body>
</html>

样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>
    <hr>
    <p color="blue">文字</p>
</body>
</html>

html样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

css

内部样式表
外部样式表
内联样式

内部样式表

<head>
 <style type="text/css">
  选择器{属性:属性值;}
 </style>
</head>

行内式
<标签名 style="属性:属性值;"> 内容 </标签名>

外部样式表

<head>
 <link href="" type="text/css" rel="stylesheet"/>
</head>

css基础选择器

标签选择器
类选择器
多类名选择器
id选择器
id选择器和类选择器的区别
6.通配符选择器

标签选择器:

标签名{属性:属性值;}
元素名{属性:属性值;}

类选择器:

.类名{属性:属性值;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
    .ide {
        color: blue;
    }
    </style>
</head>
<body>
    <div class="ide">我是类选择器</div>
    <div>我是类选择器</div>
    <div>我是类选择器</div>
    <div>我是类选择器</div>
    <div>我是类选择器</div>
    <div class="ide">我是类选择器</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dome</title>
    <style> 
        span {  
            font-size: 150px;
        }
        .g { 
            color: blue;
        }
        .o {
            color: red;
        }
        .oo {
            color: orange;
        }
        .l {
            color: green;
        }
    </style>
</head>
<body>
    <span class="g">G</span>
    <span class="o">o</span>
    <span class="oo">o</span>
    <span class="g">g</span>
    <span class="l">l</span>
    <span class="o">e</span>
    <div class="nav"></div>
    <div class="ban"></div> 
</body>
</html>

总结

id用#
class用.

达叔小生：往后余生，唯独有你
You and me, we are family !
90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通
简书博客：达叔小生
https://www.jianshu.com/u/c785ece603d1

结语

下面我将继续对其他知识深入讲解，有兴趣可以继续关注
小礼物走一走 or 点赞

textarea控件-文本域

下拉菜单

结语

猜你喜欢

`textarea`控件-文本域