Day2:html和css

Day2:htmlcss

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

表格的属性:

属性名

说明

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/>但标签

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

属性

属性值

说明

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

  1. 内部样式表
  2. 外部样式表
  3. 内联样式

内部样式表

<head>
 <style type="text/css">
  选择器{属性:属性值;}
 </style>
</head>
行内式
<标签名 style="属性:属性值;"> 内容 </标签名>

外部样式表

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

css基础选择器

  1. 标签选择器
  2. 类选择器
  3. 多类名选择器
  4. id选择器
  5. 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>

总结

  1. id#
  2. class.

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

结语

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券