前端学习1——自学习梳理

作者：爱喝兽奶帝天荒 | 2024-07-28 08:13:20

踩

前端学习1——自学习梳理

HTML常见标签


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--span文本标签,划分空间-->
    <span style="color:red;font-size: 30px;">hello</span><span>demo666</span>              
    <!--标题标签-->
    <h1 style="color:yellow;">第一个标题</h1>
    <h2>第二个标题</h2>
    <h3>第三个标题</h3>
    <h4>第四个标题</h4>
    <h5>第五个标题</h5>
    <h6>第六个标题</h6>
    <!-- div竖着布局 -->
    <div>hello</div>
    <div>hello</div>
    <div>hello</div>  
    <!-- 段落标签 -->
    <p>demo</p>
    <p>demo</p>
    <p>demo</p>
    <!-- id class style 所有便签共有的属性-->
 
    <!-- 超链接标签 a href表示要跳转的资源-->
    <!-- _self本窗口打开(默认) _blank新窗口打开  写窗口名指定窗口打开 target="demo"-->
    <a href="https://www.baidu.com" target="demo">百度</a>  
    
    <!-- img图片便签 src资源路径(绝对/相对) -->
    <!--相对路径-->
    <!-- 兄弟关系 直接访问-->
    <!-- 叔侄关系 img/R-C.jpg-->
    <!-- 表兄弟关系 ../img/R-C.jpg-->
     <!-- alt 图片加载失败时会提示的文字 -->
    <img src="img/R-C.jpg" alt="这是一个星辰图片">
 
    <!-- 列表便签 ul li-->
    <ul>
        <li>事项1</li>
        <li>事项2</li>
        <li>事项3</li>
    </ul>
    
    <!-- 表格便签 table-->
    <!-- tr代表行 tb代表单元格 -->
    <!-- width="1000px" height="100px" -->
    <!-- 填充度 cellpadding="30px" -->
    <!-- 单元格间距 cellspacing="0" -->
    <!-- th代替td 加粗居中 -->
    <!-- thead tfoot tbody 将tr包围起来-->
    <table border="1" >
        <tr>
            <td>id</td>
            <td>name</td>
            <td>sex</td>
            <td>age</td>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>男</td>
            <td>18</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>男</td>
            <td>18</td>
        </tr>
    </table>
    <!-- iframe窗口便签 -->
    <!-- frameborder 页面嵌入的更融合-->
    <iframe src="https://www.bilibili.com/?ADTAG=search-zd" name="demo" width="800px" height="600px" frameborder="0"></iframe>
    <br><br>
    <!-- 收集用户信息便签 -->
    <!--  -->
    <input type="text">单行文本框
    <br><br>
    <input type="password">密码
    <br><br>
    <input type="date">日期
    <br><br>
    <input type="datetime-local">日期时间
    <br><br>
    <input type="file">文本选择器
    <br><br>
    <select>
        <option>数学</option>
    </select>
    <br><br>
    <input type="button" value="按钮">
 
    <br><br><br><br><br><br><br><br><br><br><br><br>
 
 
</body>
</html>

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】