html常用知识总结

PeaceCode

已于 2022-04-22 00:30:36 修改

阅读量190

点赞数

文章标签： html

于 2022-04-21 14:13:57 首次发布

本文链接：https://blog.csdn.net/weixin_50238437/article/details/124320539

版权

这篇文章针对常用的html知识做了总结，文章只涵盖了部分内容

文章目录

表格
表单

表格

基本使用

<body>
    <!-- 设置 border="1" 那么td和table就会有边框，不加的话就变成了没有边框的表格 -->
    <!-- 设置 border-collapse: collapse; 你就可以看到一个正常的表格了-->
    <table border="2"  style="border-collapse: collapse;">
        <!-- caption 是表格的标题，会展示在表格的正上方 -->
        <caption>我的标题</caption>
        <tr>
            <!-- th 是表头，大多数浏览器会把表头显示为粗体居中的文本 -->
            <th>Heading</th>
            <th>Another Heading</th>
        </tr>
        <tr>
            <!-- 直接通过width设置宽度 -->
            <td width="100">row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>
</body>

跨行或跨列

<body>
    <h4>横跨两列的单元格：</h4>
    <table border="1">
        <tr>
            <th>姓名</th>
            <!-- 占两列的位置 -->
            <th colspan="2">电话</th>
        </tr>
        <tr>
            <td>Bill Gates</td>
            <td>555 77 854</td>
            <td>555 77 855</td>
        </tr>
    </table>

    <h4>横跨两行的单元格：</h4>
    <table border="1">
        <tr>
            <th>姓名</th>
            <td>Bill Gates</td>
        </tr>
        <tr>
            <!-- 占两行的位置 -->
            <th rowspan="2">电话</th>
            <td>555 77 854</td>
        </tr>
        <tr>
            <td>555 77 855</td>
        </tr>
    </table>
</body>

单元格边距

  <h4>带有 cellpadding：</h4>
    <table border="1" cellpadding="100">
        <tr>
            <td>First</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>Second</td>
            <td>Row</td>
        </tr>
    </table>

表格的背景图

<!-- 图片作为背景 -->
 <table border="1" background="./image/selfpic.jpg">
    <tr>
        <td>First</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>Row</td>
    </tr>
</table>


<!-- 单纯的背景色 -->
<table border="1" bgcolor="red">
    <tr>
        <td>你好</td>
        <td>你好</td>
    </tr>
</table>

 <h4>单元表格设置背景：</h4>
    <table border="1">
        <tr>
            <td bgcolor="red">First</td>
            <td>Row</td>
        </tr>
        <tr>
            <td background="./image/selfpic.jpg">
                Second</td>
            <td>Row</td>
        </tr>
    </table>

表格单元中排列内容

 <table width="400" border="1">
        <tr>
            <th align="left">消费项目....</th>
            <th align="right">一月</th>
            <th align="right">二月</th>
        </tr>
        <tr>
            <td align="left">衣服</td>
            <td align="right">$241.10</td>
            <td align="right">$50.20</td>
        </tr>
    </table>

表格中的标签

 <table border="1">
        <tr>
            <td>
                <p>这是一个段落。</p>
                <p>这是另一个段落。</p>
            </td>
            <td>这个单元包含一个表格：
                <table border="1">
                    <tr>
                        <td>A</td>
                        <td>B</td>
                    </tr>
                    <tr>
                        <td>C</td>
                        <td>D</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

表单

基本使用

<!-- 默认是 发get请求 -->
    <!-- 提交的数据是input标签里面的name属性 -->
    <!-- 如果省略 action 属性，则将 action 设置为当前页面。 -->
    <!-- target="_blank" 表示提交数据后将在新的浏览器标签页打开 -->
    <form action="http://localhost:3000" method="GET" target="_blank">
        <!-- 文本 -->
        <input type="text" name="firstname">

        <!-- 单选框 需要是设置的 name一样-->
        <input type="radio" name="sex" value="male" checked>Male
        <br>
        <input type="radio" name="sex" value="female">Female

        <!-- 文本域 -->
        <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>

        <!-- 提交按钮 -->
        <input type="submit">

        <!-- 按钮 -->
        <button type="button" onclick="alert('Hello World!')">Click Me!</button>

        <!-- 密码 -->
        <input type="password" name="psw">

        <!-- 复选框 -->
        <input type="checkbox" name="vehicle" value="Bike">I have a bike
        <input type="checkbox" name="vehicle" value="Car">I have a car

        <!-- number类型 -->
        <!-- step="10" 	规定输入字段的合法数字间隔。 -->
        <input type="number" name="quantity" min="1" max="5" step="10">

        <!-- data类型 -->
        <!-- 并且下面也规定了最小与最大输入日期 -->
        <input type="date" name="bday" max="1979-12-31" min="2000-01-02">

        <!-- color类型 -->
        <input type="color" name="favcolor" value="#ff0000">

        <!-- range类型 -->
        <input type="range" name="points" min="0" max="10">

        <!-- month类型 -->
        <input type="month" name="bdaymonth">

        <!-- week类型 -->
        <input type="week" name="week_year">

        <!-- time类型 -->
        <input type="time" name="usr_time">

        <!-- datetime类型 -->
        <input type="datetime" name="bdaytime">

        <!-- datetime-local类型 -->
        <input type="datetime-local" name="bdaytime">

        <!-- email类型 -->
        <input type="email" name="email">

        <!-- 文件类型 -->
        <input type="file">
    </form>

表单域

  <form action="">
        <fieldset>
            <!-- 表单域的标题 -->
            <legend>Personal information:</legend>
            First name:<br>
            <input type="text" name="firstname" value="Mickey">
        </fieldset>
    </form>

下拉菜单

<form action="/demo/demo_form.asp">
        <!-- 将下面的 cars 作为 key，选中的对应 value作为value提交到服务器-->
        <select name="cars">
            <option value="volvo">Volvo</option>
            <!-- selected 表示默认选中 -->
            <option value="saab" selected>Saab</option>
            <option value="fiat">Fiat</option>
            <option value="audi">Audi</option>
        </select>
    </form>

h5新增

<form action="/demo/demo_form.asp">
        <!-- datalist可以为input标签提供下列选择菜单 -->
        <!-- <input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。 -->
        <input list="browsers" name="browser">
        <datalist id="browsers">
            <option value="Internet Explorer">
            <option value="Firefox">
            <option value="Chrome">
            <option value="Opera">
            <option value="Safari">
        </datalist>
        <input type="submit">
    </form>