HTML入门二

HTML标签--续

 列表

列表介绍

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

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

 无序列表

无序列表作用：布局排列整齐的不需要规定顺序的区域。

标签：ul嵌套li，ul是无序列表，li是列表条目

注：

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

<!--无序列表-->
<ul>
  <li>1233211234567</li>
  <li>无序列表第二项</li>
  <li>无序列表第三项</li>
</ul>

有序列表

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

标签：ol嵌套li，ol是有序列表，li是列表条目

注：

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

<!--有序列表-->
<ol>
  <li>有序列表第一项</li>
  <li>有序列表第二项</li>
</ol>

定义列表 

标签：dl嵌套dt和dd，

dl是定义列表,

dt是定义列表的标题，

dd是定义列表的描述/详情。

注：

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

<!--定义列表-->
<dl>
  <dt>服务中心</dt>
  <dd>申请售后</dd>
  <dd>售后政策</dd>
  <dt>线下门店</dt>
  <dd>小米之家</dd>
  <dd>哈基米之家</dd>
</dl>

 运行结果

 表格

表格介绍

网页中的表格与Excel表格类似，用来展示数据

标签: table嵌套tr,tr嵌套td或th。

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

注：

在网页中表格默认没有边框线，使用border属性可以为表格添加边框线，border属性值为1则为添加边框线 

<table border ="1">
  <tr>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
    <th>总分</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>99</td>
    <td>100</td>
    <td>199</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>98</td>
    <td>100</td>
    <td>198</td>
  </tr>
  <tr>
    <td>总结</td>
    <td>全市第一</td>
    <td>全市第一</td>
    <td>全市第一</td>
  </tr>
</table>

 表格结构标签

作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。

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

 合并单元格

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

步骤：

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

                               --跨行合并，保留最上单元格，添加属性rowspan

                               --跨列合并，保留最左单元格，添加属性colspan

     3.删除其他单元格

• <table border ="1">
    <tr>
      <th>姓名</th>
      <th>语文</th>
      <th>数学</th>
      <th>总分</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>99</td>
      <td rowspan="2">100</td>
      <td>199</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>98</td>
      <td>198</td>
    </tr>
    <tr>
      <td>总结</td>
      <td colspan="3">全市第一</td>
    </tr>
  </table>

 

 表单

表单介绍

作用：收集用户信息

使用场景：

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

标签：form，input，label，button，textarea

 input标签

写法：<input type="...">

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

type属性值	说明
text	文本框，用于输入单行文本，输入什么显示什么
password	密码框，输入什么都是以 点 的形式显示
radio	单选框
checkbox	多选框
file	上传文件

 input标签占位文本

占位文本：提示信息；

文本框和密码框都可以使用

<input type="text" placeholder="提示信息">

<input type="password" placeholder="提示信息">

<input type="text" placeholder="请输入用户名"><br><br>
<input type="password" placeholder="请输入密码">

 

 单选框radio

常用属性：

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

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

 

 多选框

多选框也叫复选框。

默认选中：checked

<!--多选框默认-->
兴趣爱好:
<input type="checkbox">敲代码
<input type="checkbox" checked>打三国杀
<input type="checkbox" checked>打无畏契约

 

 上传文件-file

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

<input type="file" multiple>

 

<!--上传多个文件-->
<input type="file" multiple>

 下拉菜单

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

对option增加selected表明默认显示此项，不加则表明默认显示第一个

<!--下拉菜单-->
<select>
  <option>北京</option>
  <option>武汉</option>
  <option>天津</option>
  <option selected>定州</option>
  <option>南京</option>
</select>

 

文本域-textarea 

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

标签textarea,双标签

<textarea>默认显示文字</textarea>

一般用CSS设置文本域的尺寸

<!--文本域-->
<textarea>请输入评论</textarea><br><br>

 

 label标签

作用：网页中，某个标签的说明文本。

一般用label标签绑定文字和表单控件的关系，增大表单控件的点击范围。

写法一：

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

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

写法二:

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

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

<!--label标签 --增大点击范围 -->
<input type="radio" id="men" name="gender">
<label for="men">男</label>
<label>
  <input type="radio" name="gender">女
</label>

 按钮-button

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

type属性值：

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

 注：button的功能只能在其所在的<form></form>中实现

<form action="">
  <input type="text" placeholder="请输入用户名">
  <input type="password" placeholder="请输入密码"><br>
  <!--点击按钮button-->
  <!--button的type属性默认就是submit，不输入也是这个-->
  <button type="submit">提交</button>
  <button type="reset">重置</button>

 

无语义的布局标签

 作用：布局网页（划分网页区域，摆放内容）

• div:独占一行
• span：不换行

都是双标签。

 HTML字符实体

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

显示结果	描述	实体名称
	空格	&nbsp
<	小于号	&lt;
>	大于号	&gt;