首页 > 其他分享 >HTML,CSS简单命令操作

HTML,CSS简单命令操作

时间:2024-03-28 09:29:34浏览次数:24  
标签:none width title height 命令 HTML background display CSS

  • HTML、HTML5
  1. 标题标签、段落标签

<h1 id="title" class="title"> 标题 </h1>

<p> 第一个段落 </p>

  1. 水平线

<hr>

  1. 按钮标签

<button>按钮</button>

给按钮添加属性(效果:点击按钮则变换)

注:点击效果也涉及了JavaScript

<!-- 给按钮添加属性,使点击按钮使标题变biao dom操作 -->

    <div id="btn" class="title">按钮</div>

    <script>

        var btn = document.getElementById('btn')

        btn.addEventListener("click", function () {

            var title = document.getElementById("title")

            var a = document.getElementsByClassName("title")

            title.innerHTML = "biao"

            // console.log(a)

        })

    </script>

  1. a标签定义链接

<a href="https://www.baidu.com/">点击百度一下</a>

  1. 图片

相对路径:相对于当前文件获取路径

"./":代表目前所在的目录。

"../":代表上一层目录。

以"/"开头:代表根目录。

<img src="./111.jpg" alt="图片信息有误" title="图片">

绝对路径:主页上的文件或目录在硬盘上真正的路径

  1. 不产生新的空格换行

<p>懒洋洋<br>在睡觉</p>

  1. Input 各项表单命令

<form action="">

        <!-- 点击用户名即可输入 -->

        <label for="user">用户名: </label>

        <!-- 类型 文本输入框  value一开始就有值,控制文本框本内容  placeholder无内容是提示的信息-->

        <input type="text" name="user" id="user" value="javas" placeholder="请输入用户名">

        <input type="password" name="psd" id="" placeholder="请输入密码">

        <!-- 换行 -->

        <br>

        <!-- 点击男女即可选中 相同name属性只能选择其一-->

        <input type="radio" name="gender" id="male" value="male"><label for="male">男</label>

        <input type="radio" name="gender" id="female" value="female"><label for="female">女</label>

        <br>

        <!-- checked默认选中 属性和属性值一致时候可以直接写属性-->

        <input type="checkbox" name="hobby" value="shi" id="" checked>网球

        <!-- checked默认选中 -->

        <input type="checkbox" name="" id="" checked="checked">乒乓球

        <input type="checkbox" name="" id="">足球

        <br>

<br>

        <!-- 区域 -->

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

        <br>

        <!-- 提交按钮 -->

        <input type="submit" name="" id="">

        <!-- 重置 -->

        <input type="reset" name="" id="">

        <!-- 图片提交按钮 src -->

        <input type="image" name="" id="" src="../img/111.jpg" height="50" width="50">

        <!-- 选择文件 -->

        <input type="file" name="" id="">

</form>

  

  1. 表格

<!-- border边框 内边距 外边距 -->

    <table border="1" cellpadding="10" cellspacing="0">

        <caption>标题</caption>

        <tr>

            <!-- 表头th -->

            <td></td>

            <th title="我是B">B</th>

            <th>C</th>

        </tr>

        <!-- 行 -->

        <tr>

            <!-- 列 -->

            <td rowspan="2">name</td>

            <td colspan="2">id</td>

           

        </tr>

        <tr>

           

            <td>20</td>

            <td>21</td>

        </tr>

        <tr>

            <td>xjh</td>

            <td>18</td>

            <td>21</td>

        </tr>

    </table>

<table >

        <!-- 行 -->

        <tr>

            <!-- 列 -->

            <td>name</td>

            <td>id</td>

            <td>age</td>

        </tr>

        <tr>

            <td>whl</td>

            <td>20</td>

            <td>21</td>

        </tr>

        <tr>

            <td>xjh</td>

            <td>18</td>

            <td>21</td>

        </tr>

    </table>


  1. li标签

<ul type="square">

        <!-- 列表项必须嵌套在li标签里面 -->

        <li>

            <div>

                <a href="">aaa</a>

                <img src="ccc" alt="bbb">

            </div>

        </li>

        <li>item1</li>

        <li>item2</li>

    </ul>

    <ul type="1" start="2">

        <!-- 列表项必须嵌套在li标签里面 -->

        <li>

            <div>

                <a href="">aaa</a>

                <img src="ccc" alt="bbb">

            </div>

        </li>

        <li>item1</li>

        <li>item2</li>

    </ul


  1. 输入框

<form action="" align="left">

        <p>姓名:

            <input type="text" name="username" value="是否有名字">

//value是默认值

        </p>

        <p>登录名:

            <input type="text">(可包含a-z,0-9和下划线)

        </p>

        <p>密码:

            <input type="password">(至少包含6个字符)

        </p>

        <p>确认密码:

            <input type="password">

        </p>

        <p>性别:

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

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

        </p>

        <p>爱好:

            <input type="checkbox">运动

            <input type="checkbox">聊天

            <input type="checkbox">玩游戏

        </p>

        <p>职业:

            <select name="" id="">

                <option value="">工程师</option>

                <option value="">老师</option>

                <option value="">医生</option>

            </select>

           

</p>

        <textarea name="" id="" cols="50" rows="10">淘宝平台服务协议</textarea>

        <p>

            <input type="checkbox" name="" id="">已阅读条款

        </p>

        <input type="reset">//重置

        <input type="submit">//提交

    </form>

最大字符数、不能直接修改都在html5里面,新添加属性

<!-- maxlength文本框中输入最大字符数 readonly,disabled不能直接修改 -->

    <input type="text" maxlength="11" readonly="">

    <input type="text" disabled="">

    <input type="text" autofocus="">

   

时间

<!-- 时间 -->

    <p>

        <time datetime="2024-12-11">2024-12-11</time>

    </p>

如何去掉<a>的下划线:

对超链接下划线设置 使用代码"text-decoration"

语法: 

text-decoration : none || underline || blink || overline || line-through

text-decoration参数: 

none :  无装饰

blink :  闪烁

underline :  下划线

line-through :  贯穿线

overline :  上划线

  • css、css3

设置样式的变化需要在<style></style>标签里面来写内容

1. :hover在鼠标移到链接上时添加的特殊样式

 <style>

        .box1 {

            display: none;

        }

        .title:hover+div {

            display: none;

        }

        .titl1{

            display: none;

        }

        .box2:hover .titl1 {

            display: block;

        }

    </style>

</head>

<body>

    <div>

        <!-- 放上鼠标才会显示,兄弟选择器+ -->

        <p class="title">标题</p>

        <div class="box1">段落</div>

        <div class="box1">段落</div>

    </div>

    <!-- 放上鼠标才会显示,后代选择器 . -->

    <div class="box2">

        <p>标题111</p>

        <hr>//分隔线

        <p class="titl1">段落111</p>

    </div>

</body>

</html>

2.link元素用于链接css样式

3.选择器在我的css博客中有具体解释

4.盒模型

边框border

内边距padding

外边距margin、

下面是我利用边框内部特点做出来的松树三角形,代码和效果图如下:

  1. 浮动:脱离文档流

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>3.18讲课内容</title>

    <style>

        .box {

            width: 500px;

            height: 500px;

            background: red;

        }

        /* 浮动:脱离文档流 */

        .box1 {

            width: 100%;

            background: blue;

        }

        .box1 p {

            width: 33%;            

            float: left;

            text-align: center;

        }

        /* 清除浮动 包裹在一个父空间里面*/

        .clear::after {

            content: "";

            display: block;

            clear: both;

        }

        .box2 {

            width: 150px;

            height: 150px;

            background: green;

            /* float: left; */

        }

        /* 脱离文档流 */

        .box3 {

            width: 200px;

            height: 200px;

            background: purple;

            float: right;

        }

        .box4 {

            width: 300px;

            height: 300px;

            background: black;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="box1 clear">

            <p>1111111111111111111111</p>

            <p>2</p>

            <p>3</p>

        </div>

        <div class="box2"></div>

        <!-- <div class="box3"></div> -->

        <!-- <div class="box4"></div> -->

        <!-- <div class="box1"></div> -->

    </div>

</body>

</html>


  1. 定位

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>css定位练习</title>

    <style>

        .box1{

            width: 200px;

            height: 200px;

            background-color: red;

            /* 相对定位 */

            position: relative;

            top: 50px;

            left: 50px;

        }

        .box2{

            width: 150px;

            height: 150px;

            background-color: green;

        }

        .box3{

            width: 100px;

            height: 100px;

            background-color: purple;

        }

    </style>

</head>

<body>

    <div class="box1"></div>

    <div class="box2"></div>

    <div class="box3"></div>

</body>

</html>


  1. flex布局

相对于浮动和定位来说更方便,但是flex布局不能层叠

在我前面的flex布局

标签:none,width,title,height,命令,HTML,background,display,CSS
From: https://blog.csdn.net/x5634649464664/article/details/137097872

相关文章

  • kafka命令工具创建查看topic信息
    转载:https://www.jianshu.com/p/6cf6c7f208c9 1、创建topic./bin/kafka-topics.sh--bootstrap-serverlocalhost:9092--create--topicfirst--partitions1--replication-factor1./bin/kafka-topics.sh--create--bootstrap-serverlocalhost:9092--replication-fa......
  • 自制lilypond中文命令包,包含音阶、调式、和弦、分解、节奏等基础板块
    可以使用中文命令打lilypond,包括输出音阶、调式、和弦、和弦分解、节奏等,示例如下  下面是示例文件,按需要删除%号\version"2.24.0"\language"english"\include"Chinesecommands.ly"{%大调与小调\音阶c'4\大调%\音阶c'4\小调%教会调......
  • 在 Windows Server 2022 系统中,你可以使用一些组合命令结合系统自带的工具来实现文件
    在WindowsServer2022系统中,你可以使用一些组合命令结合系统自带的工具来实现文件夹同步。以下是一个示例组合命令,结合Robocopy和TaskScheduler来实现文件夹同步:使用Robocopy进行文件夹同步:Robocopy是Windows自带的一个命令行工具,用于复制大量文件和文件夹。你可......
  • shell命令解释器
    shell:壳,命令解释器,负责解析用户输入的命令。命令分类①内知命令(shell内置),shell为了完成自我管理和基本的管理,不同的shell内置不同的命令,但是大部分都差不多。②外置命令,在文件系统的某个目录下,有个与命名名称相同的文件。查看命令分类:type命令typecd共有三种类型:fi......
  • 【HTML】标签学习 (上.4)
    (注:续接【HTML】标签学习(上.3))(大家好哇,今天我们将继续来学习HTML的相关知识,大家可以在评论区进行互动答疑哦~加油!......
  • HTML 简介
    ​ HTML(HyperTextMarkupLanguage,中文:超文本标记语言)是一种用于创建网页结构和内容的标记语言。它由一系列标签组成,这些标签描述了网页中的各个元素和其它相关信息。通过使用HTML标签和属性,开发人员可以定义文本、图像、链接、表格、表单等元素,并控制它们的外观和行为。本文主......
  • Docker基本命令
    Docker基本命令......
  • 增强的python控制windows命令行程序
    之前写过一篇关于python控制命令行的程序:python控制windows命令行程序使用之后发现,对于普通内置dos命令没有问题,但是对于有些控制台程序没有作用,比如python程序,就捕获不到输出信息.经过查阅相关资料,发现有些控制台程序需要真正的终端才能够正常运行.windows有一个......
  • Python学习——访问命令行参数、标准输入输出
    一、sys模块    通过sys.argv()函数访问命令行参数,sys.argv()生成的是一个列表,argv[0]访问脚本,argv[1]访问第一个参数,argv[2]访问第二个参数。例1、通过调用命令行参数n,生成n个随机数。#访问命令行importsys,randomn=int(sys.argv[1])#调用命令行第一个参数,即n......
  • 强力工具(欢迎fork):Java版本的Sybase ASE ISQL命令行
    \1.背景曾经,经常遇到有人问,Sybase(ASE,国内基本上把以前的SybaseASE数据库简称为Sybase数据库,现在官方已经叫做SAPASE,在我看来无所谓。只要大家知道它是哪个数据库就行了。)数据库有没有短小点的命令行工具。我说,昨个短小法?SybaseASE确实自带一个isql命令行,功能也很......