前端学习 20220824

前端学习 20220824

:::

重点记住：空格、大于号、小于号

表格标签

<table>
    <!--thead和tbody标签是表格结构标签，用于划分表格区域-->
    <thead>
        <!--thead标签必须包含tr标签-->
         <tr>
            <!--表头单元格对内容进行加粗和居中处理-->
            <th>表头单元格</th>
        </tr>
    </thead>
    
    <tbody>
        <!--行标签-->
        <tr>
            <!--列标签-->
            <td>单元格内的文字</td>
            ...
        </tr>
        ...
    </tbody>
</table>

表格内容间可以有空格，但空格数量只渲染1个

表格属性

实际不常用，通常用CSS来控制。

合并单元格

合并方式

• 跨行合并：rowspan="合并单元格数"
• 跨列合并：colspan="合并单元格数"

:::hljs-center

:::

目标单元格（写合并代码）

• 跨行：最上方单元格为目标单元格，写合并代码
• 跨列：最左侧单元格为目标单元格，写合并代码

合并单元格三部曲

1. 先确定是跨行合并还是跨列合并；
2. 找到目标单元格，写上合并方式=合并的单元格数量；
3. 删除多余的单元格

列表标签

无序列表（重点）

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ul>

• <ul>标签里只能放<li>标签
• <li>标签相当于一个容器标签
• 无序列表带有自己的样式属性，使用CSS来设置

有序列表（理解）

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ol>

• <ol>标签里只能放<li>标签
• <li>标签相当于一个容器标签
• 有序列表带有自己的样式属性，使用CSS来设置

自定义列表（重点）

经常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
    ...
</dl>

• <dl>标签里只能包含<dt>和<dd>标签
• <dt>和<dd>标签数量没有限制，为并列关系

表单标签

表单的目的是为了收集用户信息。

表单的组成

• 表单域

<form action="url地址" method="提交方式" name="表单域名称">
    各种表单元素控件
</form>

常用属性

表单控件（表单元素）

• input输入表单元素

<input /> 为单标签元素 type属性： type值 描述 text 文本框 password 密码框 radio 单选按钮，name值必须相同才能实现多选一 checkbox 复选框，name值必须相同才能实现多选 button 可点击按钮（多数情况下用于通过JavaScript启动脚本） file 定义输入字段和“浏览按钮”，共文件上传 hidden 定义影藏的输入字段 image 定义图像形式的提交按钮 reset 定义重置按钮。重置按钮会清楚表单中的所有数据 submit 定义提交按钮。提交按钮会将表单数据发送的服务器 name属性：定义input元素的名字，值用户自定义 value属性：规定input元素的值，值用户自定义 checked属性：规定此input元素首次加载时被选中，值为checked maxlength属性：规定输入字段中的字符的最大长度，值为整数 <label>标签为input元素定义标注。可以绑定一个表单元素，当点击<label>标签内的文字时，浏览器会自动将焦点转到对应的表单元素上来增加用户体验 <label for="sex">男</label> <input type="radio" name="sex" id="sex" /> <label>标签的for属性应当与相关元素的id属性相同。

• select下拉表单元素
• textarea文本域元素

提示信息