day05：字体样式、表格、表单及一系列使用

最新推荐文章于 2023-10-06 11:52:57 发布

dongys_z

最新推荐文章于 2023-10-06 11:52:57 发布

阅读量111

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/weixin_44248980/article/details/119349961

版权

web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、字体样式设置

1.字体大小:默认16px 最小8px

font-size: 22px;

2.字体颜色:color

color: #3850ff;

3.字体粗细默认600 最大900 最小200 bolder加粗

font-weight: 400;

font-weight: bolder;

4.字体样式

font-style: italic;

5.字体

font-family: Arial, Helvetica, sans-serif;

另外：

i标签：斜体

b标签：加粗

u标签：下划线

二、表格的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <table border="1" cellspacing="0">
        <thead>
            <tr>
                <th>电影</th>
                <th>电视剧</th>
                <th>综艺</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">悬崖之上</td>
                <td colspan="2">琅琊榜</td>
                <!-- <td>奔跑吧兄弟</td> -->
            </tr>
            <tr>
                <!-- <td>天堂的张望</td> -->
                <td>觉醒年代</td>
                <td>极限挑战</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

三、表单

1.action:后台地址

method:请求方式 get/post

get:会明文展示(拼在网站上) 不够安全更快捷

post:不会明文更安全传入内容比较大(比如上传文件)

name:给后台传值的描述(kety 键)

placeholder:提示文字

value:默认值

2.文本输入框

<input type="text" name="username" placeholder="请输入用户名">

<input type="password" value="dys" name="password">

3.提交按钮

<input type="submit">

4.readonly只读 disabled 不可读也不可写

<input type="text" disabled>

5.单选框

<input type="radio" name="gender">

<input type="radio" name="gender">

6.多选框

<p>兴趣爱好:</p>
<span>看书</span>
<input type="checkbox">
<span>学习</span>
<input type="checkbox">
<span>睡觉</span>
<input type="checkbox">

7.文件上传

<input type="file" >

8.重置按钮

<input type="reset">

9.按钮标签

<input type="button" value="我是一个普通的按钮">

<button>我也是个按钮</button>

10.下拉选择框

<select name="" id="">
        <option value="">---请选择---</option>
        <option value="" selected>10~20岁</option>
        <option value="">20~80岁</option>
    </select>

11.可输入区域

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

12.隐藏域

<input type="hidden" value="123" >

五、表达元素样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
       span{
           display: inline-block;
           width: 200px;
           height: 24px;
           border-radius: 1px solid darkgray;
           
       }
       input{
            border-radius: 5px;
       }
       img{
           width: 20px;
           margin-top: 2px;
       }
       .fl{
           float: left;
       }
    </style>
</head>
<body>
    <span>
        <input class="fl" type="text">
        <img class="fl" src="img/语音.png">
    </span>
</body>
</html>

dongys_z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day05：字体样式、表格、表单及一系列使用

一、字体样式设置1.字体大小:默认16px最小8pxfont-size:22px;2.字体颜色:colorcolor:#3850ff;3.字体粗细默认600最大900最小200bolder加粗font-weight:400;font-weight:bolder;4.字体样式font-style:italic;5.字体font-family:Arial,Helvetica,sans-serif;另外：...
复制链接

扫一扫