HTML进阶标签

一，列表

列表分为：

  • 无序列表
  • 有序列表
  • 自定义列表

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

1.1 无序列表

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

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

1.2 有序列表

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

<ol>
    <li>第一项</li>
   	<li>第二项</li>
    <li>第三项</li>
</ol>

1.3 自定义列表

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

注意事项：

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

二，表格

2.1 表格基础使用

标签:

  • table 嵌套 tr
  • tr 嵌套 td / th.

image-20231126160725613

提示：在网页中，表格默认没有边框线，使用 border 属性可以为表格添加边框线。

表格大部分的样式都是通过css来控制的，但是一些基础的属性也可直接设置：

  • table的属性：
    • border：设置表格边框的宽度。
    • cellpadding：设置单元格的内边距。
    • cellspacing： 设置单元格之间的间距。
  • tr的属性：本来有align属性，但是在h5中被弃用了。
  • th/td的属性：
    • colspan：设置单元格横跨的列数。
    • rowspan：设置单元格横跨的行数。

2.2 表格结构标签

作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。说白了，给人看的，用来划分表格内容的含义。

image-20231126160931239

2.3 合并单元格

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

image-20231126161046450

步骤：

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

三，表单

作用：收集用户信息。

使用场景：

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

3.1 form标签

表单都需要使用form标签包裹起来，用来表示这个区域是表单区域，只有这样按钮功能才能使用，一些其他表单功能才能使用。

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

常用属性：

  • action：指定表单数据提交的目标 URL 或处理表单数据的脚本文件。

  • method： 指定表单数据的提交方法，常用的有 get 和 post。

    • get: 通过 URL 参数传递数据。
    • post: 将数据放在 HTTP 请求体中进行提交，更适合处理敏感信息。

  • name：为表单指定名称，以便在 JavaScript 或服务器端处理时引用。

  • target： 指定在提交表单后显示响应的位置，

    常用值有 _blank（在新窗口打开）和 _self（在当前窗口打开）。

  • enctype：指定在表单数据提交时使用的编码类型

    • application/x-www-form-urlencoded: 默认值，适用于简单的文本数据。
    • multipart/form-data: 用于上传文件等二进制数据。

  • autocomplete： 启用on 关闭off 提交记录。

3.2 input标签

<input> 标签是 HTML 中用于创建各种表单元素的主要标签之一。它通常用于接收用户的输入，具体的表单元素类型通过 type 属性指定。

对于大多数表单的标签，因为需要将数据提交给后端，故需要设置value和name两个属性值。

  • name：属性用于唯一标识表单中的各个字段，使得在提交表单时能够清楚地识别每个字段的值。在服务器端处理表单数据时，通过这些名称可以获取相应字段的值。

  • value：用于设置表单字段的默认值。这是在用户未输入任何值之前显示的值。用户可以选择保留这个值，也可以覆盖它。

    不同的type，value属性的作用是不同的：

    • 对于text，password，number，date，email，url等：value 用于设置文本输入框或密码框的默认值。
    • 对于radio，checkbox：value 用于指定用户在选择单选框或复选框时提交的值。
    • 对于submit，button和reset：value 用于设置提交按钮和重置按钮的显示文本。
    • 对于hidden： 用于设置隐藏字段的默认值，这个值在用户界面上是不可见的，但在提交表单时会被包括在表单数据中。
    • 对于search：用于设置默认在搜索框里面的内容。

input标签的tye属性值：

  • text --------- 默认文本

  • number-------文本内容为数字

  • email---------文本内容为邮箱

  • tel-------------文本内容为手机号码

  • url ------------文本内容为url

  • password ---------文本内容为密码

  • button---------按钮

  • submit---------提交按钮

  • reset-----------重置按钮

  • radio---------单选框

    单选框是根据name来分组的，name相同就是一组，故name属性是必须有的。

  • checkbox------多选框

  • file-------------上传文件

  • search-------搜索框

  • date------------日期选择器

  • color---------颜色选择器

  • hidden------隐藏表单

3.3 下拉菜单

标签：select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。selected代表默认选中。

<select>
    <option>菜单1</option>
    <option selected>菜单2</option>
    <option>菜单3</option>
    <option>菜单4</option>
</select>

3.4 文本域

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

标签：textarea，双标签。

文本域右下角有拖拽效果，需要用css禁用，且使用css来设置尺寸！

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

3.5 label标签

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

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

写法一：

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

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

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

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

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

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

3.6 按钮

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

type属性值：

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

<button> 和 <input type="button"> 都用于创建按钮，但它们之间有一些重要的区别。

  • button标签：

    1. 内容可变：

      <button> 元素的主要优势在于，它可以包含文本、图像、甚至其他 HTML 元素。这使得按钮的内容可以更加灵活，不仅仅是简单的文本。

    2. 触发 JavaScript 事件：

      <button> 元素更容易与 JavaScript 事件一起使用，因为你可以在按钮内部包含其他元素和事件处理程序。

    3. 默认类型为 submit：

      如果没有明确指定 type 属性，<button> 元素的默认类型是 submit。这意味着它在表单内会触发提交行为，除非你显式指定为 type="button"。

  • input标签的按钮：

    1. 简洁：

      <input type="button"> 元素是一个简洁的方式创建按钮。它通常用于创建基本的按钮，而不涉及复杂的内容。

    2. 默认类型为 button：

      <input type="button"> 的默认类型就是 button，因此它不会在表单内触发提交行为。这使得它更适合用于自定义的交互，而不会干扰表单的默认行为。

    3. 适用于简单场景：

      当你只需要一个简单的按钮，并且不需要包含复杂内容时，<input type="button"> 是一个简便的选择。

四，语义化的布局标签

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

  • div：独占一行
  • span：不换行
  • <header> 头部标签
  • <nav> 导航标签
  • main:定义文档的主要内容，通常用于包裹页面的主体部分。
  • <article> 内容标签
  • <section> 块级标签
  • <aside> 侧边栏标签
  • <footer> 尾部标签
image-20231126170156789

五，字符实体

在 HTML 中，某些字符是预留的。在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体

image-20231126220542591

六，iframe

通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。

<iframe></iframe>

常用属性：

  • src：指定框架里面网页的url

  • width和height：指定这个框架的宽高

配合超链接使用：

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

这样点击超链接即可实现刷新框架里面的网页内容。（这玩意不常用，知道有这么个玩意就好了）

​

posted @ 2024-08-22 14:01  wdadwa  阅读(8)  评论(0)    收藏  举报