小白学习HTML 进阶语法

进阶语法

列表

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

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

无序列表

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

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

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
  ...
</ul>

• 第一项
• 第二项
• 第三项

ul标签中只能包裹li标签，但是li标签中可以包裹任何标签

有序列表

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

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

1. 第一项
2. 第二项
3. 第三项
4. ...

1. 第一项
2. 第二项
3. 第三项
4. ...

定义列表

标签：dl嵌套dt和dd，dl是定义列表，dt是其标题，dd是其描述

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

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

列表标题

列表描述

列表描述2

...

表格

网页中的表格和excel表格类似

标签：table嵌套tr，tr嵌套td/th，tr是一行，th是表头，td是内容，border表示添加边框线

姓名	语文	数学
99	100	88

合并单元格

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

合并单元格的步骤：

1. 明确合并的目标
2. 保留最左最上的单元格，添加属性（表示需要合并的单元格数量）
   • 跨行合并，保留最上单元格，添加属性rowspan
   • 跨列合并，保留最左单元格，添加属性colspan
3. 删除其它单元格

<table>
    <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 col="3">全市第一</td>
    </tr>
</table>

姓名	语文	数学	总分
张三	99	100	199
李四	98		198
总结	全市第一

表单

作用：收集用户信息

使用场景：

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

input标签基本使用

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

<input type="...">

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

文本框：

密码框：

input标签占位文本

<input type="..." placeholder="...">

单选框radio

将name相同的放在一起，实现单选功能，使用checked表示默认选中

男

女

上传文件-file

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

<input type="file" multiple>

多选框-checkbox

同radio，使用checked表示默认选中

男

女

人妖

下拉菜单

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

<select>
    <option>北京</option>
    <option>上海</option>
    <option selected>成都</option>
    <option>深圳</option>
</select>

文本域标签

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

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

默认提示文字

label标签

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

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

• 写法一

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

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

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

• 写法二

  • 使用label标签包裹表单控件和内容

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

按钮-button

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

使用form标签<form></form>嵌套表单的所有控件，按钮才有作用

type属性	说明
submit	提交按钮，点击后可以提交到后台
reset	重置按钮，点击后将表单控件恢复默认
button	普通按钮，默认没有功能

提交

重置

按钮