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

时间：2021-11-30 06:57:48
<!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>

相关文章