html基础

最新推荐文章于 2025-05-01 23:03:21 发布

alicca

最新推荐文章于 2025-05-01 23:03:21 发布

阅读量49

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.youkuaiyun.com/alicca/article/details/134201087

版权

本文详细介绍了HTML中的各种标签，如div和span的用法，img、a和锚点的使用，表格结构，无序和有序列表，自定义列表，以及表单元素如单选框、多选框和select的选择。还提供了一个实际的HTML表单案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一些标签

1. div和span

一个块级，后者内联

<div>
   <span></span>
   <span></span>
</div>

2 img标签

<img src="./1.jpg" alt="wrong" width="10px" height="10px">

3 a标签

<a href="#">null</a>

4 锚点 #+id

<div id="top">顶部</div>
<a href="#top">返回顶部</a>
<a href="./1.html#top>到链接外部顶部</a>

表格

表格：tr定义行，th表头，td单元格

<table border="1px">
        <th>
        <td>head1</td>
        <td>head2</td>
        <td>head3</td>
        </th>
        <tr>
            <td rowspan="2">1</td>
            <!-- 注意这里要先考虑你要的是几行几列的，然后被跨到的行或列就别写了 -->
            <td colspan="2">2</td>
            <!-- <td>3</td> -->
            <td>4</td>
        </tr>
        <tr>
            <!-- <td></td> -->
            <td>row3 1</td>
            <td>row3 2</td>
            <td>row3 3</td>
        </tr>
        <tr>
            <td>row4 1</td>
            <td>row4 2</td>
            <td>row4 3</td>
            <td>row4 4</td>
        </tr>
    </table>

无序列表

ul和li，有序列表ol和li。注意ul和li必须同时出现，ul里面只能有li，li里面什么都可以有

<ul type="circle">
   <li type="circle"></li>
   <li type="square"></li>
</ul>

有序列表

<ol type="A" start="3" reversed>
        <!-- start表示开始的位置，reversed表示倒序 -->
        <li>OH</li>
        <li>OH</li>
        <li>OH</li>
        <li>OH</li>
        <li>oh</li>
 </ol>

自定义列表

<dl>
    <dt>shanghai</dt>
    <dd>wenhua</dd>
    <dd>renwen</dd>
</dl>
<--dl里只能放dt和dd，但是dt和dd都是容器级别的标签，里面放什么都可以 -->

表单标签

-单选框

<label for="woman">女</label>
<input type ="radio" id="woman" name="sex" value="女">

<label for="man"></label>
<input type="radio" id="man" name="sex" value="女“>

<!-- name对于同一个radio单选框都要相同，label for后面要和对应的id相同 -->

-多选框

<label>兴趣爱好</label>
<label for="voll">排球</label>
<input type="checkbox" id="voll" name="interest" value="排球" checked="checked">

<label for="basket">篮球</label>
<input type="basketball" id="basket" name="interest" value="篮球">

 <!-- checked="checked“设置为开始的默认值 -->

除了textarea之外，其他都有value值，textarea可以通过控制cols="3", rows="30"来设置大小

-select

<form action="">
    <select id="unique">
    <label for="unique">选择的一些东西</label>
    <option></option>
    <optgroup label="同一类选项">
    <option selected="selected">aaa</option>
 <!-- 同样表示默认选项 -->
    </optgroup>
    </select>
</form>

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="">
        <h3>shenmegui</h3>

        <table width="500">
            <tr>
                <td>
                    <label>性别</label>
                </td>
                <td>
                    <label for="man">男</label>
                    <input type="radio" id="man" name="sex" value="男">
                    <img src="./1.jpg" alt="无法显示">

                    <label for="woman">女</label>
                    <input type="radio" id="woman" name="sex" value="女">
                    <img src="./2.jpg" alt="无法显示">

                </td>
            </tr>
            <tr>
                <td>
                    <label>生日</label>
                </td>
                <td>
                    <select>
                        <option selected="selected">--请选择年---</option>
                        <option>2001</option>
                        <option>2000</option>
                    </select>

                    <select>
                        <option selected="selected">--请选择月---</option>
                        <option>1</option>
                        <option>2</option>
                    </select>

                </td>
            </tr>
            <tr>
                <td>
                    <label>所在地区</label>
                </td>
                <td>
                    <textarea cols="30" rows="1">所在地区999</textarea>
                </td>
            </tr>
            <tr>
                <td>
                    <label>婚姻状况</label>

                </td>
                <td>
                    <input type="radio" id="no" name="marry" checked="checked">
                    <label for="no">未婚</label>

                    <input type="radio" id="yes" name="marry">
                    <label for="yes">已婚</label>
                </td>
            </tr>
            <tr>
                <td>
                    <label>学历</label>

                </td>
                <td>
                    <input type="text" value="博士后">
                </td>
            </tr>
            <tr>
                <td>
                    <label>喜欢的类型</label>
                </td>
                <td>
                    <label for="charming">charming</label>
                    <input type="checkbox" id="charming" name="type" checked="checked">
                    <label for="tiring">cute</label>
                    <input type="checkbox" id="tiring" name="type">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="introduction">自我介绍</label>

                </td>
                <td>
                    <textarea in="introduction" cols="30" rows="3">请输入自我介绍</textarea>
                    <!-- textarea没有value属性，text有 -->
                </td>
            </tr>
            <tr>
                <td>
                    <input type="submit" value="免费注册">

                </td>
            </tr>
            <tr>
                <td></td>
                <!-- ? -->
                <td>
                    <input type="checkbox" id="agree" value="我同意条款">
                    <label for="agree">我同意条款</label>

                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <a href="http://www.baidu.com">我是会员，立即登陆</a>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <h3>懂不了一点</h3>
                    <ul>
                        <li>what?</li>
                        <li>what?</li>
                        <li>what?</li>
                    </ul>
                </td>
            </tr>
        </table>
    </form>

</body>

</html>