HTML 标签·下(笔记)
in HTML笔记 with 0 comment

HTML 标签·下(笔记)

in HTML笔记 with 0 comment

表格标签

表格的主要作用

表格主要用于显示、展示数据,可以让数据的显示非常的规整。

表格的基本语法

表格框架:

<table>
    <tr>
        <td>单元格文字</td>
        ……
    </tr>
    ……
</table>

其中,<tr>是行标签,<td>是单元格标签,再加上表头单元格标签<th>

表格属性

属性名属性值描述
alignleft,center,right表格元素的对齐方式
border1 或 ""表格边框有无,默认为 "" ,表示没有边框
cellpadding像素值规定单元格之间的空白,默认为 1px
cellspacing像素值规定单元格之间的空白,默认为 2px
width像素值 或 百分比规定表格的宽度

表格结构标签

使用场景:表格可能很长,为了更好的表示表格的语义,可以将表格分割成 表格头部 和 表格主体 两大部分。
在表格标签中,分别使用 <thead> 标签表示表格的头部区域,<tbody> 表示表格的主体区域,这样可以更好的分清表格结构。

合并单元格

合并单元格的方式:

  1. 跨行合并:rowspan = "合并单元格的个数"。
  2. 跨列合并:colspan = "合并单元格的个数"。
    目标单元格:
  3. 跨行:最上测单元格为目标单元格,写合并代码。
  4. 跨列:最左侧单元格为目标单元格,写合并代码。

列表标签

表格是用来显示数据的,列表是用来布局的。
列表最大的特点就是整齐、整洁、有序,用列表布局会更加自由和方便。
根据使用场景的不同,列表可以分为三大类:无序列表、有序列表、自定义列表。

无序列表 <ul>

无序列表的基本结构:

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    ……
</ul>

注意:

  1. 无序列表各个列表项之间没有顺序级别之分,是并列的。
  2. <ul></ul> 中只能嵌套 <li></li> ,在 <ul></ul> 中输入其他标签或文字的做法是不被允许的。
  3. <li></li> 之间是一个容器,可以容纳任何元素。

有序列表 <ol>

有序列表的基本结构:

<ol>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    ……
</ol>

注意:

  1. <ol></ol> 中只能嵌套 <li></li> ,在 <ol></ol> 中输入其他标签或文字的做法是不被允许的。
  2. <li></li> 之间是一个容器,可以容纳任何元素。
  3. 有序列表带有自己的样式属性,实际使用时可以使用 CSS 设置。

自定义列表 <dl>

在 HTML 标签中,<dl> 标签用于自定义描述列表(或定义列表),该标签与 <dt> (定义项目/名字)和 <dd> (描述每一个项目/名字)一起使用。
自定义列表的基本结构:

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

注意:

  1. <dl></dl> 中只能包含 <dl></dl><dd></dd>
  2. <dl></dl><dd></dd>个数没有限制,通常是一个<dl></dl> 对应多个<dd></dd>

表单标签

使用表单的目的是为了收集用户信息
在 HTML 中,一个完整的表单通常由 表单域、表单控件(表单元素)、提示信息 三个部分组成。

表单域

表单域 是一个包含表单元素的区域。
在 HTML 中,<form>用于定义表单域。
表单域的基本结构:

<form action = "地址" method = "提交方式(get/post)" name = "表单域名称">
    各类表单控件
</form>

表单元素

在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的内容控件。

<input> 输入表单元素

<input> 标签中,包含一个 type 属性,根据不同的 type 属性值,输入字段拥有很多种形式(如文本、复选框、掩码后的文本控件、单选框、按钮等)。
举例:

<input type = "属性值" />

其中 type 属性的属性值及其描述如下:

属性值描述
button定义可点击按钮
checkbox定义复选框
file定义输入字段和“浏览”按钮,供文件上传
hidden定义隐藏的输入字段
image定义图像形式的提交按钮
password定义密码字段。该字段中的字符被掩码(******
radio定义单选按钮
reset定义重置按钮
submit定义提交按钮
text定义单行的输入字段,默认宽度为 20 个字符

除以上部份外,<input>标签还可以包括以下的属性:

属性属性值描述
name自定义定义 input 元素名称
value自定义规定 input 元素的值
checkedchecked规定此 input 元素首次加载时应当被选中
maxlength正整数规定输入字段中的字符最大长度

注意:

  1. name 是表单元素的名字,其中 单选按钮 和 复选按钮 必须有相同的 value 值。
  2. checked 主要针对 单选框 和 复选框,用于默认选择。

<label> 定义标签

<label> 标签为 input 元素定义标注。
<label> 标签用于绑定一个表单元素,当点击 <lable> 标签内的文本时,会自动聚焦到对应的表单元素上,增强用户体验。
语法规范:

<label for = "sex">男</label>
<input type = "radio" name = "sex" id = "sex" />

注意:

  1. <label> 不是 <lable> (重要)

<select> 下拉表单元素

下拉列表,不多解释。
语法规范:

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ……
</select>

注意:

  1. <select> 中至少包含一对 <option>
  2. <option> 中定义 select = "selected" 时,可以设置当前项为默认项。

<textarea> 文本域元素

多行文本输入,不多解释。
语法规范:

<textarea row = "3" cols = "20">
    默认文本内容
</textarea>

注意:

  1. row 显示几行,cols 每行显示多少字(一般来说,使用 CSS 来实现)。

留言: