静态资源Html基础语法

最新推荐文章于 2022-08-02 09:39:22 发布

陪雨岁岁年年

最新推荐文章于 2022-08-02 09:39:22 发布

阅读量104

点赞数

分类专栏： Web核心

本文链接：https://blog.csdn.net/m0_47649585/article/details/119087524

版权

Web核心专栏收录该内容

22 篇文章 0 订阅

订阅专栏

1.div划分【样式控制】

<style>
 div {
            /*显示边框*/
            border: 1px solid pink;

            /*宽度 占用屏幕的60%*/
            width: 60%;

            /*高度 500像素*/
            height: 500px;

            /*边框外边距*/
            margin: auto;
            
            /*文字居中*/
            text-align: center;
            /*height: 500px;*/
            /*line-height: 500px;*/
        }
        </style>

2.div浮动样式

<style>
    div {
        border:1px solid pink;
    }
    .left {
        width: 20%;
        height: 500px;
        float: left;
    }
    .center {
        width: 60%;
        height: 500px;
        float: left;
    }
    .right {
        width: 19%;
        height: 500px;
        float: left;
    }
    .footer {
        clear: both;
        text-align: center;
        background-color: blueviolet;
    }
</style>

3.图片插入

<body>
<!--同文件下直接拆入图片，同级不同文件则进入上一层
再写入图片文件夹名称/图片名称-->
<!--图片标签:<imgp属性:-->
<!--        src-图片的路径-->
<!--        title-鼠标悬浮时显示的内容-->
<!--        alt-图片找不到时显示的内容-->
<!--        width-图片的宽度-->
<!--        height-图片的高度-->
 <img src="../images/1.jpg" title="广告" alt="图片找不到啦" width="150px" height="150px"/>
 <img src="https://img2.baidu.com/it/u=143818365,1814365001&fm=26&fmt=auto&gp=0.jpg" width="200px"/>
</body>

4.超链接

<style>
        a {
            /*去掉超链接的下划线*/
            text-decoration: none;
            /*超链接的颜色*/
            color: black;
        }

        /*鼠标悬浮的样式控制*/
        a:hover {
            color: red;
        }
    </style>

5.添加背景图片

<style>
        body {
            background: url("../images/2051454.jpg");
        }
    </style>

6.表单的相关标签

<body>
<!--
       action="#":指定跳转路径
       表单项标签：<label>  表单元素说明
       属性：for属性，属性值必须和表单项标签id属性值一致

       表单项标签：<input>   多种类型数据
       属性：
           type-数据类型
           id-唯一标识
           name-提交服务器的标识
           value-默认的数据值
           placeholder-默认的提示信息
           required-是否必须

       按钮标签：<button>
       属性：
           type-按钮的类型(submit提交、reset重置、button普通按钮)
   -->
    <form action="#" method="get" autocomplete="off">
        <label for="usename">用户名：</label>
   <input type="text" id="usename" name="usename" placeholder="请在此处输入用户名" required/>

        <label for="password">密码</label>
   <input type="password" id="password" name="password" placeholder="请在此处输入用户名" required/>

        <label for="tel">密码</label>
   <input type="tel" id="tel" name="tel" placeholder="请在此处输入电话号码"/>

        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button">按钮</button>
    </form>
</body>

7.其他表单的相关标签

<body>
<!--
    下拉列表标签：<select>
    列表项标签：<option>
    列表项分组标签：<optgroup>   属性：label设置分组名称

    文本域标签：<textarea>
    属性：
        rows-行数
        cols-列数
-->
<form action="#" method="get" autocomplete="off">
    所在城市：<select name="city">
    <option>---请选择城市---</option>
    <optgroup label="直辖市">
        <option>北京</option>
        <option>上海</option>
    </optgroup>
    <optgroup label="省会市">
        <option>杭州</option>
        <option>武汉</option>
    </optgroup>
</select>
    <br/>

    个人介绍：<textarea name="desc" rows="5" cols="20"></textarea>

    <button type="submit">提交</button>
    <button type="reset">重置</button>
</form>
</body>

陪雨岁岁年年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
静态资源Html基础语法

1.div划分【样式控制】<style> div { /*显示边框*/ border: 1px solid pink; /*宽度占用屏幕的60%*/ width: 60%; /*高度 500像素*/ height: 500px; /*边框外边距*/ margin: auto;
复制链接

扫一扫