前端学习 20220824

:::

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

表格标签

代码语言：javascript复制

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

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

表格属性

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

属性名	属性值	描述
align	left/center/right	规定表格相对周围元素的对齐方式
border	1或""	规定表格单元是否拥有边框，默认为""，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度

合并单元格

合并方式

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

:::hljs-center

:::

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

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

合并单元格三部曲

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

列表标签

无序列表（重点）

代码语言：javascript复制

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

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

有序列表（理解）

代码语言：javascript复制

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

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

自定义列表（重点）

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

代码语言：javascript复制

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

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

表单标签

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

表单的组成

表单域

代码语言：javascript复制

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

常用属性

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

表单控件（表单元素）

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文本域元素

提示信息

容器表单表格前端数据

0 人点赞