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

时间  2020-07-27
标签 html 经常 使用 标签 表单 表格 css 简单 入门 栏目 HTML 繁體版
原文   原文链接 
<!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>

 csscss

<!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>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程