Web

Web开发01

Posted by RyoCY on 2025-01-17
Estimated Reading Time 8 Minutes
Words 2k In Total
Viewed Times

HTML标签

标题

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。
<h1> 一般只使用一次，存放logo等重要信息。

字符实体

常见字符实体：
代码中敲出的空格，网页只识别一个。用字符实体实现多空格。

字符实体

内容

<p> 表示文本的一个段落。该元素通常表现为通过空行和/或首行缩进与相邻块分隔的文本块。

<hr> 表示段落级元素之间的主题转换，表现为水平线

<div> 流式内容的通用容器，用于划分网页区域，摆放内容。块级元素，独占一整行。

<span> 本身不具备特殊含义。可用于对元素进行编组，以便于添加样式（通过使用 class 或 id 属性），或共享属性值。行级元素，不会换行。

段落

<ul> 无序列表

<ol> 有序列表

<li> 列表项元素，必须包含在一个父元素中，如<ul>和<ol>

列表

<dl> 一个包含一组术语（使用 <dt> 元素指定）以及描述（由 <dd> 元素提供）的列表。通常用于展示词汇表或者元数据（键—值对列表）。

定义列表

文本格式化

<strong> 文本加粗，表示其内容十分重要、严肃或紧迫。

<em> 文本倾斜，标记出需要用户着重阅读的内容，可以嵌套。

<ins> 下划线，定义插入文档的文本。

<del> 删除线，定义已从文档中删除的文本。

<br> 换行

表格

<table> 表格元素

  1. 一个可选的 <caption> 元素

  2. 零个或多个的 <colgroup> 元素

  3. 一个可选的 <thead> 元素

  4. 下列任意一个：

    • 零个或多个 <tbody>
    • 零个或多个 <tr>
    • 一个可选的 <tfoot> 元素

<tr>元素定义了表格中的一行单元格。然后可以使用 <td>（数据单元格）和 <th>（标题单元格）元素的组合来建立该行的单元格。

<th>元素定义表格内的表头单元格。

  • scope定义了表头元素（在 <th> 中定义）关联的单元格。常见枚举值：

    • row：表头关联所属的行中所有的单元格。
    • col：表头关联所属的列中所有的单元格。

  • colspan 和 rowspan:一个非负整数值，指示表头单元格跨越或扩展多少列/行。默认值为 1。

    • 合并单元格时，在要合并的最左最上的单元格添加该属性

表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<table>
  <caption>
    表格的标题
  </caption>
  <thead>
    <tr>
      <th scope="col">Thead1</th>
      <th scope="col">Thead2</th>
      <th scope="col">Thead3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">表头1</th>
      <td>内容1</td>
      <td>内容2</td>
    </tr>
    <tr>
      <th scope="row">表头2</th>
      <td>内容3</td>
      <td>内容4</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">汇总行</th>
      <td>内容5</td>
    </tr>
  </tfoot>
</table>

表单

<input>：输入（表单输入）元素，不同 type 属性的值对应功能不同，如果未指定此属性，则采用的默认类型为 text。

  • text：文本框，用于输入单行文本。

  • password：密码框

  • radio：用于一个单选组中，其中包含一组描述一系列相关选项的单选按钮。

    • 一个单选按钮组由具有相同 name 属性的单选按钮组成。一旦单选按钮组被建立，选择那按钮组的任何单选按钮将会自动取消同组当前选择的任何按钮。
    • checked：布尔值属性，代表这个单选按钮是组中默认被选中的那个。

  • checkbox：复选框，允许在表格中选择单一的数值进行提交（或不提交）。默认情况下被呈现为激活时被选中（打勾）的方框。

    • 同样可以使用 checked

  • file：允许用户可以从他们的设备中选择一个或多个文件。可以用 accept 属性指定可接受的文件类型。

    • multiple 属性，可以指定一次选择多个文件。
    • 例如 accept="image/png, image/jpeg" 或 accept=".png, .jpg, .jpeg" ——接受 PNG 或 JPEG 文件。字符串 image/*，表示“任何图片文件”。

  • placeholder 属性是一个字符串，可向用户提供有关该字段中需要什么样的信息的简短提示。

<select> 嵌套 <option> 实现下拉菜单，在 <option> 中，selected 这个布尔属性存在时表明这个选项一开始就被选中。

下拉菜单

<textarea> 文本域，适用于允许用户输入大量自由格式文本的场景，例如评论。

<label> 元素（标签）表示用户界面中某个元素的说明，可以绑定文字与表单控件的关系，增大表单控件显示范围。

  • 方法一：将一个 <label> 和一个 <input> 元素匹配在一起，给 <input> 一个 id 属性。而 <label> 需要一个 for 属性，其值和 <input> 的 id 一样。

  • 方法二：将 <input> 直接放在 <label> 里，则不需要 for 和 id 属性，因为关联已隐含存在。

文本域

<button> 元素表示一个可点击的按钮，可以用在表单或文档其他需要使用简单标准按钮的地方。

  • type：button 的类型。可选值：

    • submit: 提交按钮，此按钮将表单数据提交给服务器。此值为默认值。
    • reset: 重置按钮，重置所有组件为初始值。
    • button: 普通按钮，没有默认行为。一般配合 JavaScript 使用。

<form> 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。

  • action：处理表单提交的 URL，即发送数据的地址。

  • method：浏览器使用这种 HTTP 方法来提交表单。

    • get（默认）：GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ? 作为分隔符，没有副作用时使用这个方法。

按钮

图片和多媒体

图片

1
<img src="favicon.png" alt="图片" title="favicon图片"/>

<img> 将一张图像嵌入文档。

  • src 属性是必须的，包含想嵌入的图片的路径。

  • alt 属性包含一条对图像的文本描述，图片无法显示时会显示该文本。

  • title 提示文本，鼠标悬停在图片上时显示

  • height width 图像的固有高度和宽度，以像素为单位。必须是没有单位的整数值。

超链接

1
2
3
<a href="https://www.xxx.com" target="_blank"> 新标签页打开xxx网页 </a>
<a href="./p">跳转相对于路径的 URL</a>
<a href="#">空链接</a>

<a> 可以通过它的 href 属性创建通向其它网页、文件、电子邮件地址、同一页面内的位置或任何其它 URL 的超链接。

  • target 属性指定在何处显示链接的 URL：_blank 通常在新标签页打开。

音频和视频

1
<audio src="/media/audio/xxx.mp3" controls loop></audio>

  • controls 如果声明该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。（HTML5中若属性值与属性名相同，可简写为一个单词）

  • loop布尔属性；如果声明该属性，将循环播放音频。

1
<video src="/media/video/xxx.mp4" controls loop></audio>

视频与音频类似

特色标签
Web
链友
ESC