HTML，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布局