HTML常用标签(下)

pengyulove
195 阅读5分钟

表格标签

1. 主要作用：显示、展示数据

2. 基本语法

<table>
    <tr>
        <td>单元格内的文字</td>
        ...
    </tr>
    ...
</table>

<th>表示表头，会居中加粗

3. 表格属性

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

4. 表格结构标签

因为表格很长，为更好的表达表格语义，可以将表格分割成表格头部和表格主体两大部分，这样更好的分清表结构。
<thead></thead>用于用于定义表格的头部，<thead>内部必须拥有<tr>标签。
<tbody></tbody>用于用于定义表格的主体，放数据本体。

5. 合并单元格

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

6.总结

table标签 tr行标签 td单元格标签 th表头单元格标签 thead表格头部区域标签 tbody表格主题区域标签
相关属性：align、border、cellpadding、cellspacing、width
合并单元格：rowspan、colspan

列表标签

列表用于布局。列表特点整齐整洁有序，作为布局更自由方便。
根据使用情景可分为三大类：无序列表、有序列表和自定义列表。

1. 无序列表

<ul> 标签表示HTML页面中的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ul>
  • 无序列表的各个列表项之间没有顺序级别之分，是并列的。
  • <ul>中只能嵌套<li>，在<ul>标签里输入其他标签或文字是不被允许的。
  • <li>与<li>之间相当于一个容器，可以容纳所有元素。
  • 无序列表会带有自己的样式属性，但在实际使用中会用CSS来设置。

2. 有序列表

即为有排列顺序的列表，其各列表项会按照一定的顺序排列定义。 <ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签定义列表现。

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ol>
  • <ol>中只能嵌套<li>，在<ol>标签里输入其他标签或文字是不被允许的。
  • <li>与<li>之间相当于一个容器，可以容纳所有元素。
  • 无序列表会带有自己的样式属性，但在实际使用中会用CSS来设置。

3. 自定义列表

在HTML标签中，<dl>标签用于定义描述列表，该标签会与<dt>和<dd>一起使用。

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>
  • <dl>里面只能包含<dt>、<dd>
  • <dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。

表单标签

表单是为了收集用户信息。
一个完整的表单通常由表单域、表单控件（也称表单元素）和提示信息3个部分构成。

1. 表单域：包含表单元素的区域

<form>标签用于定义表单域，以实现用户信息的收集和传递；<form>会把它范围内的表单元素信息提交给服务器。

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

常用属性：

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

2. 表单控件（表单元素）

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

  1. input输入表单元素 （1）<input>标签用于收集用户信息。
    在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形势（可以是文本框、复选框、掩码后的文本控件、单选按钮、按钮）。

  • <input type="属性值" />

  • <input>标签为单标签。

  • type属性设置不同的属性值用于指定不同的控件类型。 | 属性值 | 描述 | | --- | --- | | button | 定义可点击按钮（多数情况由javasript启动）。 | | checkbox | 定义复选框。 | | file | 定义输入字段和“浏览”按钮，供文件上传。 | | hidden | 定义隐藏的输入字段。 | | image | 定义图像形式的提交按钮 | | password | 定义密码字段，该字段中的字符被掩码。 | | radio | 定义单选按钮。 | | reset | 定义重置按钮。重置按钮会清楚表单中的所有数据。 | | submit | 定义提交按钮，提交按钮会把表单数据发送到服务器。 | | text | 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符。 | | name | 定义input元素的名称。radio按钮必须定义相同的name名才能实现单选 | | value | 规定input元素的值。 | | checked | 规定此input元素首次加载时应当被选中。 | | maxlength |规定输入字段中的字符的最大长度。 |

  • name和value是每个表单元素都有的属性值，主要给后台人员使用。

  • name是表单元素的名字，要求单选按钮和复选按钮要有相同的name值

  • checked属性主要针对于单选按钮和复选框

  • maxlength是用户可以在表单元素输入的最大字符数，一般较少用。 （2） <label>标签：为input元素定义标注（标签）， 用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点转到或选择对应的表单元素上，用于增加用户体验。 语法：

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

核心： <label>标签的for属性应当与该元素的id属性相同。

  1. select下拉表单元素 使用场景：节约页面空间，用<select>标签控件定义下拉列表。
籍贯：
    <select>
        <option>湖南</option>
        <option>山东</option>
        <option selected="selected">北京</option>
    </select>
  • <select>里至少包含一对<option>
  • 在<option>中定义selected="selected"，当前项即为默认选中项。
  1. textarea文本域元素

当输入内容较多时，使用<textarea>标签定义多行文本输入。

<textarea rows="3" cols="20">
        文本内容
</textarea>

cols=“每行中的字符数”，rows=“显示的行数”，实际开发中不会使用，都是用CSS来改变大小。

综合案例

做一个注册表格。

查阅文档

百度： www.baidu.com
W3C：www.w3school.com.cn/
MDN：developer.mozilla.org/zh-CN/

avatar
文章
阅读
粉丝