web前端笔记1

最新推荐文章于 2024-07-14 11:42:14 发布

5zedkd

最新推荐文章于 2024-07-14 11:42:14 发布

阅读量394

点赞数 3

文章标签：笔记

本文链接：https://blog.csdn.net/jklhjh/article/details/137022107

版权

列表

有序列表

使用“ol”创建“有序列表”，使用“li”表示“列表项

<body>
    <ol >
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ol>
    <ol >
        <li>列表A</li>
        <ol >
            <li>列表a</li>
            <li>列表b</li>
            <li>列表c</li>
        </ol>
        <li>列表B</li>
        <li>列表C</li>
    </ol>
    <ol >
        <li>列表I</li>
        <ol>
            <li>列表i</li>
            <li>列表ii</li>
            <li>列表iii</li>
        </ol>
        <li>列表II</li>
        <li>列表III</li>
    </ol>
</body>

无序列表

<body>
    <ul >
        <li>圆点符号列表1</li>
        <li>圆点符号列表2</li>
        <li>圆点符号列表3</li>
    </ul>
    <ul >
        <li>空心符号列表1</li>
        <li>空心符号列表2</li>
        <li>空心符号列表3</li>
    </ul>
    <ul >
        <li>方形符号列表1</li>
        <li>方形符号列表2</li>
        <li>方形符号列表3</li>
    </ul>
</body>

自定义列表

<body>
    <dl>
        <dt></dt>
        <dd>xx</dd>
        <dd></dd>
    </dl>
</body>

表格

<body>
    <table width="600" border="4">
        <caption align="center">表格</caption>
        <tr bgcolor="red">
            <td>111</td>
            <td>112</td>
            <td>113</td>     
        </tr>
            
        <tr bgcolor="green">
            <td rowspan="2">211</td>
            <td align=left>212</td>
            <td align=right>213</td>
        </tr>
            
 
        <tr bgcolor="green">
            <td align=left>222</td>
            <td align=left>223</td>
        </tr>
 
        <tr bgcolor="blue">
            <td align=left>311</td>
            <td align=right>312</td>
            <td rowspan="2" align=right>313</td>
        </tr>
 
        <tr bgcolor="blue">
            <td align=right>321</td>
            <td align=left>322</td>
        </tr>
 
    </table>
    
</body>

图片&音频&视频&超链接

<body>
    1、阿卡贝拉阿卡贝拉(意大利:Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例:
</body>
 
<body>
    <a href="../前端/day3.16/代码/素材/Jewel - Stay Here Forever.flac" target="_blank" controls loop autoplay muted>阿卡贝拉.千与千寻<br></a>
</body>
 
<body>
    2、翻唱“翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带来不一样的风格。视频列举:
</body>
 
<body>
    <a href="../前端/day3.16/代码/素材/MV/Jewel-Stay Here Forever(高清.mp4)" target="_blank" controls loop autoplay muted>有一种悲伤<br></a>
</body>
 
<body>
    <img src="../图片/1.png" width="400px" height="225px">
    <img src="https://c-ssl.duitang.com/uploads/item/202007/02/20200702172644_G5APC.jpeg" width="400px" height="225px">
</body>
 
<body>
    <video src="../新建文件夹/电视剧/My Little Pony/S3/313.mp4" width="800px" height="450px" controls loop autoplay muted></video>
    <audio src="../图片/花房姑娘 - 崔健.mp3" controls loop autoplay muted></audio>
</body>

表单

<body>
    <form action="" method="post" enctype="multipart/form-data">
        昵称：<input type="text" placeholder="请输入你的名字" name="usename">
        <br />
        <br />
        密码：<input type="password" name="password" required>
        <br />
        <br />
        性别：<label><input type="radio" name="sex" value="nan">男</label>
        <input type="radio" name="sex" checked value="nv">女
        <br />
        <br />
        头像：<input type="file" multiple="multiple">
        <br />
        <br />
        邮箱：<input type="email">
        <br />
        <br />
        时间：<input type="time">
        <br />
        <br />
        颜色：<input type="color">
        <br />
        <br />
        以下人物你更喜欢谁？：
        <input type="checkbox" name="like">TS
        <input type="checkbox" name="like">RR
        <input type="checkbox" name="like">PP
        <input type="checkbox" name="like">RD
        <input type="checkbox" name="like">FS
        <input type="checkbox" name="like">AJ
        <button>点击</button>
    </form>
</body>

下拉框&文本域&框架标签

基本选择器
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: rgb(44, 6, 71);
        }
        a {
            color: rgb(232, 13, 31);
        }
 
        * {
            color: rgb(218, 215, 18);
        }
    </style>
<body>
    <a href="#">选择器</a>
    <div class="box1">选择器1</div>
    <div class="box1">选择器2</div>
    <div class="box1">选择器3</div>
    <div id="box2">选择器4</div>
</body>

包含选择器
子孙选择器
    <style>
        .a>li {
            color: rgb(241, 3, 43);
        }
    </style>
</head>
 
<body>
    <ul class="a">
        <li>大儿</li>
        <li>二儿</li>
        <ul>
            <li>孙</li>
        </ul>
    </ul>
    <div class="one">人</div>
</body>

逗号选择器
    <style>
        .a li,
        .one {
            color: rgb(45, 4, 116);
        }
    </style>
</head>
 
<body>
    <ul class="a">
        <li>大儿</li>
        <li>二儿</li>
        <ul>
            <li>孙</li>
        </ul>
    </ul>
    <div class="one">人</div>
</body>

属性选择器
    <style>
        input[type="password"] {
            background-color: aqua;
        }
        div[title] {
            background-color: pink;
        }
        input[type*="i"] {
            background-color: blueviolet;
        }
        input[type$="t"] {
            background-color: red;
        }
        .box1+p {
            background-color: blue;
        }
    </style>
</head>
 
<body>
    <div title="njdcndc">粉色</div>
    <div>无色</div>
    <input type="text">
    <input type="password">
    <input type="email">
    <div class="box1">无色</div>
    <p>蓝色</p>
    <p>无色</p>
</body>

其他伪类
    <style>
        ul li:nth-child(8) {
            background-color: pink;
        }
        li:nth-child(2n+1) {
            background-color: blue;
        }
        li:last-child {
            background-color: aqua;
        }
        ul li:first-child {
            background-color: aquamarine;
        }
        li:nth-of-type(3) {
            background-color: aqua;
        }
    </style>
</head>
 
<body>
    <ul>
        <li>我是1</li>
        <li>我是2</li>
        <p>我是谁？</p>
        <li>我是3</li>
        <li>我是i4</li>
        <li>我是5</li>
        <li>我是6</li>
        <li>我是7</li>
        <li>我是8</li>
        <li>我是9</li>
        <li>我是10</li>
        <li>我是11</li>
        <p>你是谁？</p>
    </ul>
</body>

伪元素选择器
    <style>
        ul li::before {
            content: "23333";
            width: 10px;
            height: 10px;
            background-color: rgb(238, 10, 48);
        }
        ul li::after {
            content: "-选我";
        }
        ul li::selection {
            background-color: rgb(9, 25, 126);
        }
    </style>
</head>
 
<body>
    <ul>
        <li>选我选我</li>
    </ul>
</body>

FONT
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: rgb(228, 11, 47);
            font-size: 12px;
            font-weight: 700;
            text-align: center;
            font-style: italic;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            line-height: 300px;
        }
        h1 {
            font-weight: bold;
        }
 
        p {
            font: italic 700 30px/40px "微雅软黑";
        }
    </style>
</head>
 
<body>
    <h1>标题</h1>
    <div>这是一个容器</div>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, eius id perferendis fugiat cumque deleniti
        deserunt voluptates repellat commodi inventore sit culpa expedita perspiciatis aspernatur sunt tempora placeat
        quos ipsam.
        Atque deserunt quis porro quibusdam quam natus. Dolore beatae a alias saepe deleniti quibusdam sit perferendis
        nihil et, non exercitationem, id officiis aut obcaecati delectus neque voluptatum? Iure, quia excepturi.
        Dolorem velit odit, eaque dolore aliquid vel vitae illo rem voluptatem odio quas perferendis molestias commodi
        officia incidunt quo voluptatum sunt cum ut sit est temporibus. Nesciunt beatae maxime reiciendis.
        Placeat eius non nostrum repellendus aperiam vitae enim alias laborum molestias, in, numquam, deleniti quam
        tempore iusto rem. Officia voluptatibus dolores qui adipisci ipsum earum quas magnam, architecto explicabo
        rerum!
        Provident, maiores. Ex assumenda et eaque consectetur, aliquam pariatur aut perferendis delectus repellat eos
        exercitationem nostrum animi earum nam quaerat fuga quidem a nobis eligendi culpa hic? Illo, nihil nesciunt!
    </p>
 
</body>

5zedkd

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
web前端笔记1

<dt></dt><dd></dd><thead><tr><th></th></tr></thead><tbody><tr><th></th></tr></tbody><tfoot><tr><th></th></tr></tfoot>表格
复制链接

扫一扫