HTML&CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class类选择器</title>
    <style type="text/css">
        .class03,#id003{
            color: blue;
            font-size: 20px;
            border: yellow 1px solid;
        }
        .class01{
            color: blue;
            font-size: 30px;
            border: 1px solid yellow;
        }
        .class02{
            color: gray;
            font-size: 26px;
            border: 1px solid red;
        }
        #id001{
            color: blue;
            font-size: 30px;
            border: 1px yellow solid;
        }
        #id002{
            color: red;
            font-size: 20px;
            border: 5px blue dotted;
        }
        div{
            border: 1px solid yellow;
            color: blue;
            font-size: 30px;
            width: 300px;
            height: 300px;
            background-color: green;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
        table{
            border: 1px red solid;
            border-collapse: collapse;
        }
        td{
            border: 1px red solid;
        }
        a{
            text-decoration: none;
        }
        ul{
            list-style: none;
        }
        span{
            border: 5px dashed blue;
            color: yellow;
            font-size: 20px;
        }
    </style>
</head>
<body>
<!--        id只能有一个id,类可以有多个类-->
        <div>1落霞与孤鹜齐飞,秋水共长天一色</div>
        <span>2落霞与孤鹜齐飞,秋水共长天一色</span>
        <div id="id001">3落霞与孤鹜齐飞,秋水共长天一色</div>
<!--        <div id="id002">4落霞与孤鹜齐飞,秋水共长天一色</div>-->
        <div class="class01">5落霞与孤鹜齐飞,秋水共长天一色</div>
        <div class="class02">6落霞与孤鹜齐飞,秋水共长天一色</div>
        <span class="class02">7落霞与孤鹜齐飞,秋水共长天一色</span>
        <span class="class01">8落霞与孤鹜齐飞,秋水共长天一色</span>
        <span class="class03">9落霞与孤鹜齐飞,秋水共长天一色</span>
        <span id="id002">9落霞与孤鹜齐飞,秋水共长天一色</span>
        <div class="class03">9落霞与孤鹜齐飞,秋水共长天一色</div>
<!--        <span id="id003">10落霞与孤鹜齐飞,秋水共长天一色</span>-->
        <div id="id003">11落霞与孤鹜齐飞,秋水共长天一色</div>

        <ul>
            <li>111111111111</li>
            <li>111111111111</li>
            <li>111111111111</li>
            <li>111111111111</li>
        </ul>
        <table>
            <tr>
                <td>1.1</td>
                <td>1.1</td>
                <td>1.1</td>
            </tr>
        </table>
        <a href="http://www.baidu.com">baidu</a>
        <div>woshi div</div>
        <div style="border: 1px solid red;">div标签1</div>
        <div style="border: 1px solid red;">div标签2</div>
        <span style="border: 1px solid red;">span标签1</span>
        <span style="border: 1px solid red;">span标签2</span>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web002</title>
</head>
<body>
    我是&lt;br&gt;标签<br/>
    国哥好&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;帅啊
<!--    标题使用 <h1> 至 <h6> 标签进行定义。<h1> 定义最大的标题。<h6> 定义最小的标题。-->
    <h1 align="left">标题1</h1>
    <h2 align="center">标题2</h2>
    <h3 align="right">标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
    <h7>标题7</h7>
    <a href="http://localhost:8080">百度</a>
    <a href="http://localhost:8080" target="_self">百度_self</a>
    <a href="http://localhost:8080" target="_blank">百度_blank</a>
    <img src=".././picture/01.jpg" width="200" height="260" border="1" alt="Meinv"/>
<table align="center" border="1" width="300" height="300" cellspacing="0">
    <tr>
        <th>1.1</th>
        <th>1.2</th>
        <th>1.3</th>
    </tr>
    <tr>
        <th>2.1</th>
        <th>2.2</th>
        <th>2.3</th>
    </tr>
    <tr>
        <th>3.1</th>
        <th>3.2</th>
        <th>3.3</th>
    </tr>

</table>
<table width="500" height="500" cellspacing="0" border="1" align="center">
    <tr>
        <td colspan="2">1.1</td>
        <td>1.3</td>
        <td>1.4</td>
        <td>1.5</td>
    </tr>
    <tr>
        <td rowspan="2">2.1</td>
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
    </tr>
    <tr>
        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
        <td>3.5</td>
    </tr>
    <tr>
        <td>4.1</td>
        <td>4.2</td>
        <td>4.3</td>
        <td colspan="2" rowspan="2">4.4</td>
    </tr>
    <tr>
        <td>5.1</td>
        <td>5.2</td>
        <td>5.3</td>
    </tr>
</table>
    <iframe src="web002.html" width="500" height="400" name="abc">web002</iframe>
    <br/>
    <ul>
        <li><a href="web002.html" target="abc">web002</a></li>
    </ul>
    <ul>
        <li>赵四</li>
        <li>刘能</li>
        <li>赵沈阳</li>
        <li>赵小宝</li>
    </ul>
    <form action="http://localhost:8080" method="post">
        <input type="hidden" name="action" value="login"/>
        <h1 align="center">用户注册</h1>
        <table align="center">
            <tr>
                <td>用户名称:</td>
                <td>
                    <input type="text" name="username" value="默认值"/>
                </td>
            </tr>
            <tr>
                <td>用户密码:</td>
                <td><input type="password" name="password" value="abc"/> </td>
            </tr>
            <tr>
                <td>性别:</td>
                <td>
                    <input type="radio" name="sex" value="boy"/><input type="radio" name="sex" value="gril" checked="checked"/></td>
            </tr>
            <tr>
                <td>兴趣爱好</td>
                <td>
                    <input name="hobby" type="checkbox" checked="checked" value="java"/>Javaa
                    <input name="hobby" type="checkbox" value="js"/>JavaScript
                    <input name="hobby" type="checkbox" value="cpp"/>C++
                </td>
            </tr>
            <tr>
                <td>国籍:</td>
                <td>
                    <select name="country">
                        <option value="none">--请选择国籍--</option>
                        <option value="en" selected="selected">中国</option>
                        <option value="usa">美国</option>
                        <option value="jp">日本</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>自我评价:</td>
                <td><textarea name="desc" rows="10" cols="20">我才是默认值</textarea> </td>
            </tr>
            <tr>
                <td><input type="reset"></td>
                <td align="center"><input type="submit"></td>
            </tr>
        </table>
    </form>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值