20210708

20210708笔记

1 列表

1.1 无序列表

<ul>：定义无序列表，并且只能包含<li>子元素。
<li>：定义列表项，可以包含与<div>完全类似的内容，所以可以包含较多类型的子元素。

<ul>
    <li></li>
    <li>
    	<ul>
            <li></li>
        </ul>
    </li>
    <li></li>
</ul>
	

1.2有序列表

• 所有特性基本与ul 一致。

• 但是实际工作中， 较少用 ol ，因此我们用一句话来总结下 ol：

• 有序列表中默认的type类型是数字，而且是从1开始的。它有两个属性：type、start。

• type：有五个属性值：1、a、A、i、I(罗马数字)，表示列表前缀的格式；

• start：属性值位数字， 表示从type类型的第几个数字开始，比如当你选的type=“a”,start=“3”。

<ol type="a" start="3">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ol>

1.3自定义列表

<dl>：定义列表
<dt>：定义 标签定义了定义列表中的项目(术语)
<dd>：定义描述

<dl>
    <dt>质数</dt>
    <dd>质数又称素数。一个大于1的自然数，除了1和它自身外，不能被其他自然数整除的数叫做质数。</dd>
</dl>

1.4 列表总结

标签名	定义	说明
	无序标签	里面只能包含li 没有顺序，我们以后布局中最常用的列表
	有序标签	里面只能包含li 有顺序， 使用情况较少
	自定义列表	里面有2个兄弟， dt 和 dd

2 表格

表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。

2.1 创建表格

1.table用于定义一个表格。

2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。

3.td /td：用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对 <tr> </tr>中包含几对<td></td>，就表示该行中有多少列（或多少个单元格）。

注意：

1. <tr></tr>中只能嵌套<td></td>

2. <td></td>标签，他就像一个容器，可以容纳所有的元素

2.2 表格属性

2.3 表格结构

元素	描述
<caption>	定义表格标题。
<thead>	定义表格的页眉，用于定义表格的头部。用来放标题之类的东西
<tbody>	定义表格的主体。
<tfoot>	定义表格的页脚，放表格的脚注之类
<th>	定义表格的表头。
<tr>	定义表格的行。
<td>	定义表格单元格。

   <table>
        <caption>表格标题</caption>
        <thead>
            <tr>
                <th>表头</th>
                <th>表头</th>
                <th>表头</th>
                <th>表头</th>
                <th>表头</th>
                <th>表头</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>表尾</td>
                <td>表尾</td>
                <td>表尾</td>
                <td>表尾</td>
                <td>表尾</td>
                <td>表尾</td>
            </tr>
        </tfoot>
    </table>

2.4 合并单元格

跨行合并：rowspan（竖着）=“合并单元格的个数”

跨列合并：colspan（横着）=“合并单元格的个数”

合并单元格的思想：

将多个内容合并的时候，就会有多余的东西，把它删除。例如把 3个 td 合并成一个， 那就多余了2个，需要删除。

合并的顺序 先上、先左

border-collapse是表格的css样式：设置表格的边框是否被合并为一个单一的边框（细线表格）。

属性	属性值
separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

3 表单

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

3.1 input控件

type 属性

• 这个属性通过改变值，可以决定了你属于那种input表单。
• 比如 type = ‘text’ 就表示 文本框 可以做 用户名， 昵称等。
• 比如 type = ‘password’ 就是表示密码框 用户输入的内容 是不可见的。

用户名: <input type="text" /> 
密  码：<input type="password" />

value属性值（实际值）

用户名:<input type="text"  name="username" value="请输入用户名"> 

• value 默认的文本值。 有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置。

在开发过程中，我们在设置输入框的默认值的时候会用到另外一个属性是：（文本提示信息，占位功能）

<input name="keyword" type="text" value="" placeholder="请输入您要搜索的宝贝"/>

3.1.1 radio(单选按钮)

radio标签中有<input type="radio" name="单选按钮所在的组名" value="单选按钮的取值" checked="checked"/>其中，单选按钮之间的name值必须一致。

小提示：

<input type=radio value="1" name="sex">男
<input type=radio value="2" name="sex">女

这样的话,在接收的页面你就可以做判断了，如果是sex传递过来是1的话，性别就是:男，如果是2。

name属性

用户名:<input type="text"  name=“username” />  

name表单的名字， 这样，后台可以通过这个name属性找到这个表单。 页面中的表单很多，name主要作用就是用于区别不同的表单。

• name属性后面的值，是我们自己定义的。
• radio 如果是一组，我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦

<input type="radio" name="sex"  />男
<input type="radio" name="sex" />女

• name属性，我们现在用的较少， 但是，当我们学ajax 和后台的时候，是必须的。

checked属性

• 表示默认选中状态。 较常见于 单选按钮和复选按钮。

性    别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女 

上面这个，表示就默认选中了 男 这个单选按钮

3.1.2 checkbox（复选框）

<!-- 一组复选框的name指必须相同 -->
    <label>爱好:
        <input type="checkbox" name="hobby">唱
        <input type="checkbox" name="hobby">跳
        <input type="checkbox" name="hobby" checked>rap
        <input type="checkbox" name="hobby">篮球
    </label>

3.1.3 表单域

常用属性：

1. Action
   在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
2. method
   用于设置表单数据的提交方式，其取值为get或post。
   普及：GET和POST是什么？HTTP协议中的两种发送请求的方法。
   HTTP是什么？超文本传输协议（Hyper Text Transfer Protocol，HTTP）是关于数据如何在万维网中如何通信的协议。
3. name
   用于指定表单的名称，以区分同一个页面中的多个表单。

注意： 每个表单都应该有自己表单域。

form标签上定义请求类型的是哪个属性？定义请求地址的是哪个属性？

form表单定义请求类型的是 method 属性 ， 定义请求地址的是 action属性

textarea控件

• 出现横向（水平）滚动条
  IE 中默认情况下就会有横向滚动条；Firefox、Chrome 默认没有横向滚动条，要当内容超过 textarea 宽度后，才会出现。

• 出现垂直方向上的滚动条
  默认如果超过垂直设定的高度就会出现滚动条。

• 设定文本域不可以调节宽度

  resize:none;
  

3.4 下拉菜单

3.4.1 select标签的属性

属性	值	描述
name	text	定义下拉列表的名称。
disabled	disabled	当该属性为 true 时，会禁用下拉列表。
multiple	multiple	当该属性为 true 时，可选择多个选项。
size	number	规定下拉列表中可见选项的数目。

使用select控件定义下拉菜单的基本语法格式如下：

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

注意：

<select></select>中至少应包含一对<option></option>。

3.4.2 option的标签属性(熟练)

属性	值	描述
disabled	disabled	规定此选项应在首次加载时被禁用。
selected	selected	规定选项（在首次显示在列表中时）表现为选中状态。
value	text	定义送往服务器的选项值。

option的value的值的作用是什么？

value 属性规定在表单被提交时被发送到服务器的值。

开始标签 与结束标签 之间的内容是浏览器显示在下拉列表中的内容，而 value 属性中的值是表单提交时被发送到服务器的值。

**注意：**如果没有规定 value 属性，选项的值将设置为 标签中的内容。

3.4.3 optgroup的标签属性（了解）

标签经常用于把相关的选项组合在一起。

如果你有很多的选项组合, 你可以使用 标签能够很简单的将相关选项组合在一起。

属性	值	描述
disabled	disabled	规定禁用该选项组。
label	text	为选项组规定描述。

<select>
  <optgroup label="河南省">
    <option value="zhengzhou">郑州</option>
    <option value="jiaozuo">焦作</option>
  </optgroup>
  <optgroup label="河北省">
    <option value="shijiazhuang">石家庄</option>
    <option value="handan">邯郸</option>
  </optgroup>
</select>

总结

今天主要学习了列表、表格、表单的一些知识，列表包括有无序列表：其中ul标签中只能放li；有序列表：与无序列表基本一致，但是实际工作中， 较少用 ol ，它有两个属性：type、start，type：有五个属性值：1、a、A、i、I(罗马数字)，表示列表前缀的格式，start:表示列表的起始位置，值为数字。自定义列表：包含dl：定义列表、dt：定义列表项、dd：列表项描述，三个标签，dl和dt、dd是父子关系，dt和dd是兄弟关系。表格学习了表格的创建，表格中的标签：table（表格）、caption（表格标题）、thead、tbody、tfoot、tr（行）、th（表头哦）、td（每一行的列，包含在tr中，一个tr中有几对td就表示这一行有几列），表格的属性有：border、cellspacing、cellpadding、width、height、align.合并单元格： 跨行合并：rowspan（竖着）=“合并单元格的个数” 跨列合并：colspan（横着）=“合并单元格的个数” 表单：input、type、value、redio、name、checkbox、checked。