<!-- 1.无序 ul:无序列表(只能包裹li标签) li:列表条目(可包裹任何内容)-->
    <ul>
        <li></li>
    </ul>

<!-- 2.有序 ol:有序列表(只能包裹li标签) li:列表条目(可包裹任何内容) -->
    <ol>
        <li></li>
    </ol>

<!-- 3.定义 dl:定义列表(只能含有dt和dd) dt:定义列表的标题 dd:定义列表的描述/详情（dt/dd里可包含任何内容） -->
    <dl>
        <dt></dt>
        <dd></dd>
    </dl>

表格

    <!-- table:表格 tr:行 th:表头单元格 td:内容单元格 (表格默认没有边框线，使用border属性为表格添加边框线)-->
    <!-- thead:表格头部内容 tbody:表格主体，主要内容区域 tfoot:表格底部，汇总信息区域 -->
    <!-- 合并表格单元格：保留最左最上的单元格，添加以下属性（取值是数字，表需要合并的单元格数量） 注意：不能跨表格结构标签合并单元格(thead,tbody,tfoot) -->
    <!-- 跨行合并：rowspan(保留最上单元格)  跨列合并：colspan(保留最左单元格) -->
    <table border="1">
        <tr>
            <td></td>
        </tr>
    </table>
    <table>
        <tr>
            <th></th>
        </tr>
    </table>

表单

<!--1. input -->
    <!-- input标签type属性值不同，则功能不同 -->
    <!-- type属性值 —— text:文本框，用于输入单行文本 password:密码框 radio:单选框 checkbox:多选框 file:上传文件 -->
    <!-- placeholder="" 占位文本：提示信息，文本款和密码框都可以使用-->
    <input type="" placeholder="">

    <!-- radio:单选框 name:控件名称，控制分组，同组只能选中一个(单选功能，自定义) checked:默认选中，属性名和属性值相同，简写为一个单词 -->
    <input type="radio" name="gender" checked>男
    <input type="radio" name="gender" >女

    <!-- chechbox:多选框  checked:默认选中，属性名和属性值相同，简写为一个单词-->
    <input type="checkbox" checked>敲代码

    <!-- file:上传文件 multiple:实现文件多选上传 -->
    <input type="file" multiple>

<!--2. 下拉菜单 -->
    <!-- select:下拉菜单整体 option:下拉菜单的每一项 selected属性：实现默认选中功能 -->
    <select>
        <option>上海</option>
        <option>北京</option>
        <option>深圳</option>
        <option selected>广州</option>
    </select>

<!--3. 文本域：多行输出文本的表单控件 -->
    <textarea>可填默认在文本域的提示文字</textarea>

<!--4. label:网页中，某个标签的说明文本，用label标签绑定文字和表单控件的关系，增大表单控件的点击范围 -->
    <!-- 支持label标签增大点击范围的表单控制件：文本框，密码框，上传文件，单选框，多选框，下拉菜单，文本域等等 -->
    <!-- 写法一：label标签只包裹内容，不包裹表单控件    设置label标签的for属性值和表单控件的id属性值相同 -->
    <input type="radio" id="man">
    <label for="man">男</label>
    <!-- 写法二：使用label标签包裹文字和表单控件，不需要属性 -->
    <label><input type="radio">女</label>

<!--5. button:按钮 -->
    <!-- type属性值 submit:提交按钮,点击后可以提交数据到后台(默认功能) reset:重置按钮,点击将表单控件恢复默认值 button:普通按钮,默认没有功能,一般配合JavaScript使用 -->
    <button type="">按钮</button>
    <!-- 按钮需要配合form标签(表单区域)使用才能实现对应功能 -->

<!--6. form:表单区域 action:发送数据的地址 -->
    <form action="">
        用户名: <input type="text">
        <br><br>
        密码: <input type="password">
        <br><br>

        <!-- 如果省略type属性,功能就是提交按钮 -->
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button">普通按钮</button>
    </form>

语义化

<!-- 无语义的布局标签:布局网页(划分网页区域,摆放内容) -->
    <div>div标签,独占一行</div>
    <span>span标签,不换行</span>

字符实体

<!--字符实体 &nbsp;空格    &lt小于号;    &gt;大于号 -->
    &nbsp;
    &lt;
    &gt;

Web前端基础——HTML总结1

标签

（1）排版标签

（2）多媒体标签

（3）嵌套关系标签

猜你喜欢