列表

列表

作用:布局内容排列整齐的区域。

列表分类:无序列表、有序列表、定义列表。

• 无序列表

  • 作用:布局排列整齐的不需要规定顺序区域。

  • 标签:ul嵌套 li，ul是无序列表，li是列表条目。

    <ul>
    	<li>第-项</i>
    	<li>第二项</li>
    	<li>第三项</i>
    </ul>
    

    注意事项:

    • ul 标签里面只能包裹 li 标签
    • li标签里面可以包裹任何内容

• 有序列表

  • 作用:布局排列整齐的需要规定顺序的区域。

  • 标签:ol嵌套 li，ol是有序列表，[i是列表条目。

    <ol>
    	<li>第-项</i>
    	<li>第二项</li>
    	<li>第三项</i>
    </ol>
    

  • 注意事项:

    • ol标签里面只能包裹 li 标签
    • li标签里面可以包裹任何内容

• 定义列表

  • 标签：dl嵌套 dt 和 dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情，

    <dl>
    	<dt>列表标题</dt>
    	<dd>列表描述/详情</dd>
    </dl>
    

    注意事项:

    • dl 里面只能包含dt 和 dd
    • dt 和 dd 里面可以包含任何内容

表格

标签:table 嵌套 tr，tr 嵌套 td /th。

标签名	说明
table	表格
tr	行
th	表头单元格
td	内容单元格

//默认没有边框，加边框的方式 border="1"
<table border="1">
    <tr>
        <th>品牌</th>
        <th>规格</th>
        <th>大小</th>
    </tr>
    <tr>
        <td>小米</td>
        <td>20*40</td>
        <td>很大</td>
    </tr>
</table>

• 表格标签
  作用:用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰（下面在浏览器中没啥效果）

标签名	含义	特殊说明
thead	表格头部	表格头部内容
tbody	表格主体	主要内容区域
tfoot	表格底部	总信息区域

合并单元格

作用:将多个单元格合并成一单元格，以合并同类信息。

合并单元格的步骤:

1. 明确合并的目标

2. 保留最左最上的单元格，添加属性(取值是数字，表示需要合并的单元格数量）

   • 跨行合并，保留最上单元格，添加属性rowspan
   • 跨列合并，保留最左单元格，添加属性 colspan

3. 删除其他单元格

<table border="1">
    <tr>
        <th>品牌</th>
        <th>规格</th>
        <th>大小</th>
    </tr>
    <tr>
        <td>小米</td>
        <td rowspan="2">20*40</td>
        <td>很大</td>
    </tr>
    <tr>
        <td>小米</td>
<!--        <td>20*40</td>-->
        <td>很大</td>
    </tr>
    <tr>
        <td>小米</td>
        <td colspan="3">20*40</td>
<!--        <td>很大</td>-->
    </tr>
</table>

表单

作用:收集用户信息。

使用场景:

• 登录页面
• 注册页面
• 搜索区域

input 标签基本使用

input 标签 type 属性值不同，则功能不同。

type 属性值	说明
text	文本框，用于输入单行文本
password	密码框
radio	单选框
checkbox	多选框
file	上传文件

<label>
   文本框： <input type="text"/>
</label>

input 标签占位文本

占位文本:提示信息。

<label>
   文本框： <input type="text" placeholder="请输入"/>
</label>

单选框 radio

属性名	作用	特殊说明
name	控件名称	控件分组，同组只能选中一个(单选功能)
checked	默认选中	属性名和属性值相同，简写为一个单词

<input type="radio" name="gender">男
<input type="radio" name="gender" checked>女

上传文件

默认情况下，文件上传表单控件只能上传一个文件添加multiple属性可以实现文件多选功能。

<input type="file" multiple>

多选框-checkbox

多选框也叫复选框。

默认选中:checked。

<input type="checkbox" checked>

下拉菜单

标签：select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。

<label>
    <select>
        <option>上海</option>
        <option selected>北京</option>
    </select>
</label>

文本域

作用:多行输入文本的表单控件。

标签: textarea，双标签。

<label>
    <textarea>默认文字</textarea>
</label>

label 标签

作用:网页中，谋个标签的说明文本。

经验:用label标签绑定文字和表单控件的关系，增大表单控件的点击范围

• 写法一

  • label 标签只包裹内容，不包裹表单控件

  • 设置 label 标签的 for 属性值 和表单控件的 id 属性值相同

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

• 写法二

  • 使用 label 标签包裹文字和表单控件，不需要属性

    <label><input type="radio">女</label>
    

提示:支持 label 标签增大点击范围的表单控件:文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等

按钮-button

<button type="">按钮</button>

type属性值:

type 属性值	说明
submit	提交按钮，点击后可以提交数据到后台(默认功能)
reset	重置按钮，点击后将表单控件恢复默认值
button	普通按钮，默认没有功能，一般配合JavaScript 使用

<form>
    <label>
        <input type="text"> 哈哈
    </label>
    <button type="reset">重置</button>
</form>

无语义的布局标签

作用: 布局网页(划分网页区域，摆放内容)

• div:独占一行

• span:不换行

  <!--div大盒子-->
  <div>div 标签，独占一行</div>
  <!--span小盒子-->
  <span>span 标签，不换行</span>
  

字符实体

作用:在网页中显示预留字符

显示结果	描述	实体名称
	空格
<	小于号	<
>	大于号	>

<div>
    <!-- 在代码中键盘空格，网页只能识别一个   -->
    打开很 快就啊&nbsp;&nbsp;&nbsp;好的卡号
</div>
&lt;p&gt;