HTML+CSS+javaScript基础知识(四)

时间:2021-12-27 14:32:10

1.<select>标签和<option>标签

select元素可以创建单选或多选菜单。option元素定义下拉列表中的一个选项(一个条目)。

浏览器将<option>标签中的内部作为<select>标签的菜单或是滚动列表中的一个元素显示。

option元素位于select元素内部。

代码如下:

<select>

<option>北京</option>

<option>天津</option>

<option>上海</option>

</select>

结果如下:

 HTML+CSS+javaScript基础知识(四)

图(1)结果

 

2.<textarea>标签

textarea元素定义多行的文本输入控件。可以通过rows和cols来设置textarea的宽和高

示例代码:

<textarea rows="10" cols="15" draggable="true">
这是一个多行文本输入控件。这是一个多行文本输入控件。
    这是一个多行文本输入控件。这是一个多行文本输入控件。
    这是一个多行文本输入控件。这是一个多行文本输入控件。
    这是一个多行文本输入控件。这是一个多行文本输入控件。
</textarea>

结果如下:

 HTML+CSS+javaScript基础知识(四)

图(2)结果

3<table>标签,<tr>标签及<td>标签

<table>标签定义表格,一个table元素由一个或多个tr,td组成。

tr元素代表行,td元素代表表格单元。

代码如下:

<table>
    <tr>
        <td>上课</td>
        <td>不上</td>
        <td>上课</td>
    </tr>
    <tr>
        <td>不上</td>
        <td>上课</td>
        <td>不上</td>
    </tr>
    <tr>
        <td>上课</td>
        <td>上课</td>
        <td>不上</td>
    </tr>
</table>

为了更直观的显示table,本人稍加了一些css样式,不过并不影响table的表达。运行结果如下:

 HTML+CSS+javaScript基础知识(四)

图(3)结果