HTML下

HTML下

一、表格标签

1、表格的主要作用

表格主要用来显示、展示数据，因为它可以让数据显示的非常规整，可读性非常好

特别是后台展示数据的时候，能够熟练运用表格就显得很重要，总的来说，表格不

是用来布局的，是用来展示数据的

2、表格的基本语法

    <table>

        <tr>

            <td>单元格中的文字</td>

        </tr>

    </table>

（1）<table></table>用于定义表格的标签

（2）<tr></tr>用于定义表格中的行，必须嵌套在<table></table>标签中

（3）<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中

3、表头单元格标签

一般表头单元格位于表格的第一行，表头单元格中的内容加粗据中显示

<th>标签表示HTML表格的表头的单元格(table head)

<table>

        <tr>

            <th>单元格中的文字</th>

        </tr>

    </table>

4、表格属性

表格属性实际上我们不常用，我们基本上都是通过css设置 

5、表格结构标签

因为表格很长，为了更好的表示表格的语义，可以将表格分为表格头部和表格主题两大部分

在表格标签中，分别用：<thead></thead>表示头部区域，<tbody></tbody>表示主体区域

这样更好的分清表格结构

6、合并单元格

合并单元格的方式：

*跨行合并：rowspan=“单元格的个数”

*跨列合并：colspan=“单元格的个数”

目标单元格：

*跨行：以最上面的单元格为目标单元格

*跨列：以最左面的单元格为目标单元格

合并单元格三部曲：

（1）先确认是跨行合并还是跨列合并

（2）找到目标单元格，写上合并方式=合并单元格的个数

（3）删除多余的单元格

二、列表标签

表格是用来显示数据的，列表是用来布局的

列表最大的特点就是整齐、整洁、有序，它作为布局更加自由、方便

根据使用场景不同，列表分为三大类：无序列表、有序列表和自定义列表

 

 

 

 

 

 

1、无序列表

<ul>标签表示HTML中的无序列表，一般使用项目符号呈现列表项，而列表项用

<li>标签定义

无序列表的语法如下：

<ui>

      <li>列表项1</li>

<li>列表项2</li>

<li>列表项3</li>

</ui>

注意点：

（1）无序列表之间各个表项之间没有顺序级别之分，它们是并列的

（2）<ui></ui>中只能嵌套<li></li>标签，虽然写其他的标签和文字也展示，但是不专业

是不被允许的

（3）<li>与</li>之间相当于一个容器，是可以放任何标签和文字的

（4）无序列表会带有自己的样式属性，但在实际应用中，我们会在css中设置

2、有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义

<ol>标签定义有序列表列表排序以数字来排序，使用<li>标签定义列表项

有序列表的语法如下：

    <ol>

        <li>列表项1</li>

        <li>列表项2</li>

        <li>列表项3</li>

    </ol>

注意点：

（1）<ui></ui>中只能嵌套<li></li>标签，虽然写其他的标签和文字也展示，但是不专业

是不被允许的

（2）<li>与</li>之间相当于一个容器，是可以放任何标签和文字的

（3）无序列表会带有自己的样式属性，但在实际应用中，我们会在css中设置

3、自定义列表

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

在HTML中用<dl>标签定义自定义列表，与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)

一起使用

基本语法如下：

    <dl>

        <dt>名词2</dt>

        <dd>名词2解释</dd>

        <dd>名词2解释2</dd>

    </dl>

注意点：

（1）<dl>和</dl>之间只能包含<dt></dt>和<dd></dd>，虽然写其他的标签和文字也展示，但是不专业

是不被允许的

（2）<dt>和<dd>个数没有限制，通常一个<dt>对应多个<dd>

三、表单标签

1、为什么要使用表单

使用表单目的是收集用户的数据

在网页中，我们也需要跟用户进行交互收集用户资料，此时就需要表单

2、表单的组成

一个完整的表单通常由表单域、表单控件(也称表单元素)和提示信息三部分组成

 

 

 

3、表单域

表单域是一个包含表单元素的区域

在HTML中，<form>用于定义表单域，以实现用户信息的收集和传递

<form>会把它范围内的表单信息提交给服务器

    <form action="url地址" method="提交方式" name="表单域名称">

        各种表单元素控件

    </form>

 

4、表单控件

在表单域中可以定义各种表单元素(表单控件)，这些表单元素就是允许用户在表单中输入

或者选择的内容控件

我们会讲：

（1）input输入表单元素

（2）select下拉表单元素

（3）textarea文本域元素

5、input表单元素

在英文单词中，input是输入的意思，在表单元素中<input>标签用于收集用户信息

在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种

形式(可以是文本框、复选框、掩码后的文本控件、单选按钮、按钮)

<input type=“属性值” />

注意点：

（1）<input />标签为单标签

（2）type属性设置不同的属性值用指定不同的控件类型

type属性值及描述如下：

 

<input>标签的其他属性

注意：

（1）name和value是每个表单元素都有的属性值，主要给后端使用

（2）name属性表示表单元素的名称，要求单选框和复选框的name值相同

（3）checked的属性主要针对单选框和复选框，主要作用就是打开页面，可以默认选中某些表单元素

（4）maxlength属性主要规定在输入框最大可以输入的多少字符，一般很少用

6、label标签

<label>标签为input标签定义标注

<label>用于绑定一个表单元素，当点击label标签中的文本时，浏览器会自动的将焦点转到

或者选择对应的表单元素上，用来增加用户体验

语法如下

    <label for="user">用户名：</label> 

    <input type="text" id="user" />

注意点：

Label标签的for属性的值要个相关表单元素的id属性的值一样

7、select表单元素

在页面中，如果有多个选项让用户选择，并且想节约空间，我们就可以用<select>标签定义下拉列表

语法如下：    <select>

        <option>安徽</option>

        <option>河南</option>

        <option>北京</option>

        <option>上海</option>

    </select>

注意：

（1）<select>中至少包含一对option选项

（2）在<option>中添加selected=“selected”，当前项为默认选项

8、textarea表单元素

当我们要输入较多文本的时候，我们就不能用文本框了，就要用<textarea>标签

在表单元素中，textarea标签用来定义多行输入的控件

使用多文本控件，就可以输入更多的内容，该控件多见于留言板和评论

语法如下：    <form>

        简介：<textarea cols="20" rows="10"></textarea>

    </form>

注意：

（1）通过<textarea>标签创建多行文本输入

（2）cols=“每行最多输入的字符数” rows=“有多少行”，我们在实际开发中不使用

通常是css改变大小