html常用标签表单和表格等及css的简单入门

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html</title>
</head>
<body>

<!-- 表格table -->
<table border="1" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <th>name</th>
            <th>address</th>
        </tr>

        <tr>
            <td>jack</td>
            <td>shenzhen</td>
        </tr>

        <tr>
            <td>tom</td>
            <td>hangzhou</td>
        </tr>

        <tr>
            <td>lily</td>
            <td>chengdu</td>
        </tr>
    </tbody>
</table>
<br>
<!-- form表单 -->
<form action="http://www.baidu.com/" method="get">
    
    名字:<input type="text" name="username">
    密码:<input type="password" name="password">
    <br>

    爱好：
    <input type="checkbox" name="sports" value="zuqiu">足球
    <input type="checkbox" name="sports" value="basketball">篮球
    <input type="checkbox" name="sports" value="pingpang">乒乓球
    <br>
    性别：<input type="radio" name="gender" value="male">篮球
    <input type="radio" name="gender" value="female">篮球
    <br>
    你在哪
    <select>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="shenzhen">深圳</option>
        <option value="guangzhou">广州</option>
        <option value="hangzhou">杭州</option>
        <option value="chengdu">成都</option>
    </select>

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


<!-- 标题标签 -->

<h1>标题标题标题标题标题标题标题</h1>
<h2>标题标题标题标题标题标题标题</h2>
<h3>标题标题标题标题标题标题标题</h3>
<h4>标题标题标题标题标题标题标题</h4>
<h5>标题标题标题标题标题标题标题</h5>
<h6>标题标题标题标题标题标题标题</h6>

换行br<br>标签

hr横线标签<hr>

<div>
    div
    <span>span</span>
</div>


<!-- 标签列表 -->
<ul>
    <li>段落1</li>
    <li>段落2</li>
    <li>段落3</li>
</ul>

</body>
</html>
复制代码

 css

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css test</title>
    <style type="text/css">
        /* 标签选择器*/
        div{
            width: 200px;
            height: 150px;
            background: gray;
            margin-top: 20px;
        }

        .font-white{
            /*类选择器小数点开头*/
            color: white;
        }

        #box2{
            /* id选择器 # 开头
            id只能选择一个元素 */
            font-size:20px;
        }

        [name="password"]{
            /*属性选择器*/
            border: 1px solid blue;
        }

        [chinasoft="css_study"]{
            /*自定义属性选择器*/
            border: 1px solid yellow;
        }

    </style>
</head>
<body>
    <input type="text" class="input" name="username" chinasoft="css_study">
    <input type="text" name="password" class="input">
    <div class="font-white">一个没有样式的盒子</div>
    <div class="font-white" id="box2">一个没有样式的盒子</div>
    <div>一个没有样式的盒子</div>
</body>
</html>
复制代码

 

posted @   reblue520  阅读(406)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae