HTML基础（2）

最新推荐文章于 2024-08-05 22:35:13 发布

justin164

最新推荐文章于 2024-08-05 22:35:13 发布

阅读量183

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/u010631183/article/details/77897616

版权

HTML基础（2）：简单标签的属性

本文列举一些常用基本的标签及其属性，一般来说就需要记住，而不常用的一些属性及标签则可以用手册或者在w3cschool上查询。

一般从布局上说标签大致分为行级标签、块级标签、行内块级标签、行级标签没有宽高，块级标签有宽高占整行，行内块级标签有宽高但不占整行。

常用的块级标签有：div标签、p标签、ul li标签、ol li标签、dl dt dd标签、h1~h6标签、pre标签、tabel标签等等。
常用的行级标签有：a标签、img标签、span标签、br标签、input标签、textarea标签等等。
这些常用的标签都可以通过css3样式来转换，块级标签可以转换为行级，也可以转换为行内块级以用来应对不同的使用场景。
无一例外的这些常用的标签都有宽(width)、高(height)、边框(border)、背景(backgroung)、等等一些属性，这些属性的设置可以有三个地方进行设置，分别称为，行内式、内联式、外联式、行内式顾名思义就是写在标签内的对应的想要改变某个标签的样式就在该标签开始的那个尖括号内改变这些属性，而内联式一般则是写在head标签内title标签下面的然后属性设置必须写在style标签内，这样浏览器才可以识别并加载，外联式则是写在html文件外部的然后通过link标签链接到html并使用它们的优先级分别是行内式>内联式>外联式。可以设置的属性是很多的有的比较有趣可以上w3cschool查看，有的标签属性可以简单的做出一些动画的效果，很是强大。
基础表单效果图

这个是一个基础的表单代码做出来的效果当然不能跟后台交互使用，作为初学者用来熟悉代码和锻炼布局还是有用的。下面的该表单的代码部分。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                font-size: 14px;
                outline: none;
            }

            #box {
                margin: 0 auto;
                height: 530px;
            }

            tr {
                height: 35px;
            }


            tr td:first-child {
                text-align: right;
                width: 120px;
            }

            #las {
                text-align: center;
            }
        </style>
    </head>

    <body>
        <fieldset id="">
            <legend>请输入如下信息然后进行注册</legend>
            <form action="" id="">
                <table border="" cellspacing="1" cellpadding="1" id="box">
                    <tr>
                        <td>用户名:</td>
                        <td><input type="text" /></td>
                    </tr>
                    <tr>
                        <td>密码:</td>
                        <td><input type="password" /></td>
                    </tr>
                    <tr>
                        <td>确认密码:</td>
                        <td><input type="password" /></td>
                    </tr>
                    <tr>
                        <td>性别:</td>
                        <td><input type="radio" name="sex" />男<input type="radio" name="sex" />女</td>
                    </tr>
                    <tr>
                        <td>性别(可以点文字选择):</td>
                        <td>
                            <fieldset id="" style="width:100px;">
                                <legend>请选择性别</legend>
                                <input type="radio" id="man" name="se" /><label for="man">男</label>
                                <input type="radio" id="woman" name="se" /><label for="woman">女</label>
                            </fieldset>
                        </td>
                    </tr>
                    <tr>
                        <td>城市:</td>
                        <td>
                            <select name="">
                                <option>广州</option>
                                <option selected="selected">云南</option>
                                <option>深圳</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>城市所在区域:</td>
                        <td>
                            <select name="">
                                <option>天河区</option>
                                <option selected="selected">越秀区</option>
                                <option>白云区</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>交友目标:</td>
                        <td>
                            <select name="" size="3">
                                <option>同行</option>
                                <option>普通朋友</option>
                                <option>爱人</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>爱好:</td>
                        <td>
                            <input type="checkbox" />足球
                            <input type="checkbox" />篮球
                            <input type="checkbox" />乒乓球
                        </td>
                    </tr>
                    <tr>
                        <td>照片上传:</td>
                        <td><input type="file" /></td>
                    </tr>
                    <tr>
                        <td>自我介绍:</td>
                        <td><textarea name="" rows="6" cols="40" style="resize: none;"></textarea></td>
                    </tr>
                    <tr>
                        <td colspan="2" id="las">
                            <input type="button" value="确定" style="border: 1px solid #adadad; cursor: pointer;"/>
                            <input type="reset" value="清空" style="border: 1px solid #adadad; cursor: pointer;"/>
                            <input type="submit" value="提交查询" />
                        </td>
                    </tr>
                </table>
            </form>
        </fieldset>
    </body>
</html>