前端学习---DAY4

最新推荐文章于 2024-07-30 16:49:30 发布

参宿七625

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量51

点赞数 1

文章标签：前端学习 html

本文链接：https://blog.csdn.net/qq_62452899/article/details/130835400

版权

列表标签

无序列表（常用）

ul 列表整体、li 每一项

默认最前面显示 ·

有序列表（偶尔）

ol 列表整体、li 每一项

默认最前面显示数字

注意：ul和ol只能包li，而li任意嵌套别的

自定义列表（底部导航）

dl整体、dt主题、dd主题的每一项内容

注意：dl只能包括dt、dd，而dt、dd任意嵌套别的

表格标签

table 表格整体、tr 表格每行、td 主题的每一项内容

注意：table可包含多个tr、tr可包含多个td、td包裹内容

相关属性：border边框宽度、width表格宽度、height表格高度

表格标题：caption表格大标题（表的最上面）、th表头单元格（每列第一行）

caption写在table内部、th写在tr内部用于替换td（th为加粗字体且自动居中！）

表格结构标签：thead表格头部、tbody表格主体、tfoot表格底部

注意：结构标签包裹tr标签、结构标签可以省略

合并单元格

rowspan左右合一：保留最左空，再合并

colspan上下合一：保留最上空，再合并

<td colspan="合并数量">合并后的字</td>

注意：同一个结构标签内部才能合并，不能跨thead、tbody、tfoot合并！

表单标签

input系列标签（注册页、登录页）

<input type="属性值">

type属性值	含义
text	文本框
password	密码框
radio	单选框
checkbox	多选框
file	上传文件
submit	提交按钮
reset	重置按钮
button	普通按钮（配合js加功能）

占位符（提示用户该位置应该输入什么）

<input type="属性值" placeholder="提示内容">

单选（一组的要用同一个代号）

<input type="radio" name="gender">男
<input type="radio" name="gender">女

如果有默认选中就加checked，以下为默认选女

<input type="radio" name="gender" checked>女

多选（同样可以默认选中）

<input type="checkbox" checked>

上传文件（一个正常写，多个文件就加multiple）

<input type="file" multiple>

按钮（submit、reset、button）

注意：

①使用按钮，要加表单域，不然系统不知道你要提交到哪，要在哪里重置

在最外层加上form

②前两个正常写，但是button直接写不显示，所以后面要接value

<body>
    <form action="">
        用户名：<input type="text"><br /><br />
        密&nbsp;&nbsp;&nbsp;码：<input type="password"><br /><br />
        <input type="submit">
        <input type="reset">
        <input type="button" value="普通按钮"><!--这个按钮的功能最后和js有关-->

    </form>
</body>

button标签（和上面几乎一样）

     <button>我是按钮</button>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button">普通按钮</button>

select系列（做下拉菜单）

注意，加selected的为默认选项

   <select>
            <option>椒麻鸡</option>
            <option selected>螺狮粉</option>
            <option>泡面</option>
            <option>小馄饨</option>
            <option>炸串拌饭</option>
        </select>

textarea系列（可以拖动的文本域）

       <textarea cols="60" rows="30"></textarea><!--以后和css有关-->

label系列（单项选择时原来只能点框，现在点旁边的字也可以选中了）

语义化标签（网站导航）

没有语义的布局标签（常用）

div：一行只显示一个、独占一行

span：一行可以显示多个

有语义的布局标签（移动端常用）

header网页头部、nav网页导航、footer网页底部、

aside网页侧边栏、section网页区块、article网页文章

总结

<body>
    <table border="10" width="200" height="10">
        <caption><strong>猫鸠成员表</strong></caption> <!--表格名称并且加粗了-->
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>爱好</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>cy</td>
                <td>man</td>
                <td>鸡叫</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>625</td>
                <td>woman</td>
                <td>吃猫鸠</td>
            </tr>
            <tr>
                <td>合并23</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td colspan="2">我合并了</td>
            </tr>
        </tfoot>

    </table>
</body>

<body>
    <form action="">
        用户名：<input type="text"><br /><br />
        密&nbsp;&nbsp;&nbsp;码：<input type="password"><br /><br />
        <input type="submit">
        <input type="reset">
        <input type="button" value="普通按钮"><!--这个按钮的功能最后和js有关-->
        <br /><br />
        <button>我是按钮</button>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button">普通按钮</button>
        <br /><br />
        <select>
            <option>椒麻鸡</option>
            <option selected>螺狮粉</option>
            <option>泡面</option>
            <option>小馄饨</option>
            <option>炸串拌饭</option>
        </select>
        <br /><br />
        <textarea cols="60" rows="30"></textarea><!--以后和css有关-->
        <br /><br />
        <input type="radio" name="gender" id="nv"><label for="nv">女</label>
        <br />
        <label><input type="radio" name="gender">女</label>

    </form>
</body>