学习表单标签与基础CSS标签

最新推荐文章于 2023-05-13 23:49:27 发布

小呆狸

最新推荐文章于 2023-05-13 23:49:27 发布

阅读量134

点赞数 1

分类专栏：学习文章标签： html5 css

本文链接：https://blog.csdn.net/weixin_44416290/article/details/118735906

版权

学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

表单用来收集用户信息，将收集到的信息反馈与服务器中

表单标签的语法结构是

<form>
    <input type=“text" placeholder="用于提示的语句" >
</form>

type用于定义输入框的类型

常用的有以下几类

文本框 text 密码框 password 提交框 submit 按钮 button 重置按钮 reset

除此以外还有value属性规定输入字段的初始值

<input type="submit" value="登&emsp;录" class="sty-sub">

基础的css标签

引入方式有三种方式

外部 CSS
内部 CSS
行内 CSS

外部 CSS

通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！

每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。

实例

外部样式在 HTML 页面 <head> 部分内的 <link> 元素中进行定义：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。

外部 .css 文件不应包含任何 HTML 标签。这是在实际开发中使用最为频繁的一种方式。

行内 CSS

行内样式（也称内联样式）可用于为单个元素应用唯一的样式。这种方式不能大量用于实际开发，代码臃肿，尽量不要使用。

内部 CSS

如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。

内部样式是在 head 部分的 <style> 元素中进行定义。

对背景颜色及色块大小与文字进行修饰

可以使用height 、font-size、font-family等进行修饰操作

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 100%;
        }
        .div1{
            height: 100px;
            background-color: aqua;
            color: bisque;
        }
        .div2{
            height: 60px;
            background-color:black ;
            color: white;
           line-height: 60px;
        }
        span{
            margin: 69px;
        }
        .div3{
            height: 430px;
            background-color: yellowgreen;
        }
        .div4{
            height: 280px;
            background-color:salmon;
        }
        .div5{
            height:300px ;
            background-color: pink;
        }
        .div6{
            height: 420px;
            background-color: purple;
        }
        .div7{
            height: 120px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2">
        <span>
            考试认证
        </span>
        <span>
            前端开发
        </span>
        <span>
            编程语言
        </span>
        <span>
            软件测试
        </span>
        <span>
            电商设计
        </span>
        <span>
            其他的课程
        </span>
        <span>
            新闻资讯
        </span>
        <span>
            人力资源
        </span>
        <span>
            联系我们
        </span>
    </div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
    <div class="div6"></div>
    <div class="div7"></div>
</body>
</html>

小呆狸

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习表单标签与基础CSS标签

表单用来收集用户信息，将收集到的信息反馈与服务器中表单标签的语法结构是<form> <input type=“text" placeholder="用于提示的语句" ></form>type用于定义输入框的类型常用的有以下几类文本框 text 密码框 password 提交框 submit 按钮 button 重置按钮 reset除此以外还有value属性规定输入字段的初始值<inp...
复制链接

扫一扫