HTML

2024-05-05 09:47:39   0  举报





AI智能生成

HTML，全称超文本标记语言（HyperText Markup Language），是一种用于创建和构建网页的标准标记语言。它允许将文本、图片、视频、链接等元素组织成网页，以在浏览器中显示。HTML使用一系列成对出现的标签来定义元素，例如<p>用于定义段落，<img>用于插入图片。HTML文件的后缀通常为.html或.htm。通过CSS（级联样式表），可以进一步修饰和布局HTML元素。此外，JavaScript可以添加交互性，使网页更加动态和功能丰富。

html

前端开发

作者其他创作

大纲/内容

基础结构

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>

</html>
一切靠开头+Tab补全

<!DOCTYPE html>不是HTML标签

charset 字符集，这句必须写不然会乱码，储存各种文字， GB2312 简体中文， BIG5繁体中文，GBK 简体+繁体 utf-8万国码

这段HTML代码提供了一个简单的网页框架。下面是对其中每个标签及其属性的详解：

1. `<!DOCTYPE html>`: 这是一个文档类型声明（DTD），用于告知浏览器该页面使用的是HTML5标准。它不是一个HTML标签；它是一个指令，告诉浏览器页面的HTML版本。

2. `<html lang="en">`: 这是根元素标签，表示整个HTML文档的开始和结束。`lang="en"`属性指定了页面内容的主要语言是英语（en），有助于搜索引擎优化和屏幕阅读器。

3. `<head>`: 此标签内包含了文档的元数据，如字符集声明、文档标题、链接到外部资源等。不包含任何可视化内容。

4. `<meta charset="UTF-8">`: 这个`<meta>`标签定义了文档的字符编码。`charset="UTF-8"`指定使用UTF-8字符编码，这是一种广泛使用的国际字符集，可以表示任何字符。

5. `<meta name="viewport" content="width=device-width, initial-scale=1.0">`: 另一个`<meta>`标签，用于为移动设备设置视口。`name="viewport"`表示这是关于视口的设置。`content="width=device-width, initial-scale=1.0"`指定视口宽度应与设备的屏幕宽度相等，并且页面的初始缩放比例为1.0。这有助于确保网页在移动设备上正确显示。

6. `<title>Document</title>`: 定义了文档的标题，这个标题会显示在浏览器窗口或标签页上。在这里，文档的标题被设置为“Document”。

7. `<body>`: 此标签内包含了所有可见的页面内容。例如文本、图片、视频、表格、链接等。在这个例子中，`<body>`标签内是空的，因为示例代码没有包含实际的内容。

整个HTML结构非常基础，为创建更复杂的网页内容提供了框架。通过在`<body>`标签内添加其他HTML元素，如段落（`<p>`）、标题（`<h1>`-`<h6>`）、链接（`<a>`）和图像（`<img>`），可以丰富页面的内容。通过在`<head>`部分添加更多`<link>`或`<script>`标签，可以引入CSS样式表和JavaScript文件，进一步提高页面的功能性和交互性。

标签

点开慢慢找

<p>

段落标签 `<p>` 是HTML中用于定义段落的元素。这个标签是块级元素，通常用于组织和展示文本内容。它具有一些重要的特征和使用上的注意点：

### 基本用法

- **定义文本段落：** `<p>` 标签用来将文本内容组织成独立的段落。浏览器会自动在段落前后添加一定的垂直间距（上下边距），以区分不同的段落。
- **示例代码：** `<p>This is a paragraph.</p>` 显示为一个段落。

### 特性

- **自动的空间处理：** 浏览器会自动处理段落之间的空间，通常在段落之前和之后提供一定的间距，从而无需手动添加额外的空行来区分段落。
- **块级元素：** `<p>` 是一个块级元素，这意味着它会自动开始于新行，并且其后的内容也会在新行开始，占据父容器的整个宽度。
- **内联元素与内容：** `<p>` 标签内部可以包含文本和其他内联元素，如 `<a>`, `<span>`, `<strong>`, `<em>` 等，但不推荐直接嵌套其他块级元素。

### 样式化

- **CSS样式：** 可以通过CSS来定制段落的样式，包括字体、颜色、大小、行间距、文本对齐方式等。例如，`<p style="text-align: center; color: blue;">This is a centered, blue paragraph.</p>` 将段落中的文本居中并设置为蓝色。
- **默认样式：** 默认情况下，段落的样式会受到浏览器默认样式表的影响，这可能导致在不同浏览器中看起来略有差异。因此，开发者经常使用CSS重置（reset）或规范化（normalize）样式表来统一不同浏览器中的默认样式。

### 语义化

- **语义重要性：** 使用 `<p>` 标签对内容进行段落划分不仅有助于提高网页的可读性，还有助于搜索引擎优化（SEO），因为它为文本内容提供了清晰的结构和语义。

总的来说，`<p>` 标签是HTML中用于文本内容组织的基本元素之一，它通过简单的标记提供了文本段落的语义化表示，同时也支持通过CSS进行丰富的样式定义。在开发Web页面时，合理使用 `<p>` 标签可以提高内容的可读性和结构性。

<br/>

换行标签 <br/>
用途： <br/> 标签用于在文本中插入一个换行，而不开始新的段落。
特点：是一个空标签，意味着它不需要闭合（HTML5中写作<br>也是可接受的）。
示例：使用<br>在诗或地址中分行是很常见的。

<hr/>

水平线标签 <hr/>
用途： <hr/> 标签用来在页面上插入一个水平线，通常表示段落或章节的分隔。
特点：也是一个空标签，可以用来提供视觉上的分隔，也可能具有语义上的意义，标示文档中的不同部分。
样式：可以通过CSS样式化，比如改变颜色、宽度或边框样式。

字体样式

字体样式标签
包括 <b> (粗体), <i> (斜体), <em> (强调，通常表现为斜体), 和 <strong> (重要性强调，通常表现为粗体)。

用途与区别： <b> 和 <i> 主要用于改变文本的样式，而 <em> 和 <strong> 含有语义的重要性，表示文本的强调或重要性。
推荐：为了更好的可访问性和语义化，推荐使用 <em> 和 <strong> 表达强调和重要性。

div和span

<div> 和 <span>
<div>：是一个块级容器，常用于布局或组织页面中的大块内容。默认情况下，它会占据完整的宽度。
<span>：是一个内联容器，用于对文本的一部分或文档的一小块进行组织或样式化，而不引起文本断行或新的块级结构。

img

<img> 标签
<img> 标签用于在HTML文档中嵌入图像。它是一个空标签，意味着它不需要闭合标签。<img> 标签的主要属性包括：

src（必需）: 指定图像文件的路径。这可以是相对路径、绝对路径或完整的URL。
alt（推荐）: 提供图像的替代文本，以便图像无法显示时（如加载失败或文本浏览器使用）提供信息。这对于提高可访问性和SEO非常重要。
title: 提供当鼠标悬停在图像上时显示的文本。
width 和 height: 指定图像的宽度和高度，可以是像素值或百分比。如果不指定，图像将以其原始尺寸显示。

资源路径

用相对路径，绝对路径换机器就找不到文件了
具体看team

<a> 标签
<a> 标签用于创建链接，允许用户点击从一个页面跳转到另一个页面。它的主要属性包括：

href（必需）: 指定链接的目标URL。这可以是一个绝对URL或一个相对URL。
target: 指定如何打开链接的文档。常用值包括 _blank（在新窗口或标签页中打开）、_self（在相同的框架或窗口中打开，这是默认行为）、_parent（在父框架中打开），以及 _top（在整个窗口中打开）。
title: 提供链接的额外信息，当鼠标悬停在链接上时显示。
rel: 定义当前文档和链接文档之间的关系。例如，rel="nofollow" 用于告诉搜索引擎不跟踪该链接。

nav

为网页提供一个导航链接的区域。
有助于改善网站的结构，使内容对于屏幕阅读器和搜索引擎更友好。

语义标签

结构性语义标签
- **`<header>`**：定义文档或部分的页眉。
- **`<footer>`**：定义文档或部分的页脚。
- **`<nav>`**：定义导航链接的部分。
- **`<section>`**：定义文档中的一个区段，通常包含标题。
- **`<article>`**：定义独立的、自成一体的内容，例如博客帖子或新闻文章。
- **`<aside>`**：定义和页面内容稍微独立的内容，如侧栏。
- **`<main>`**：定义文档的主要内容。每个文档中 `<main>` 标签应该是唯一的。

文本级语义标签
- **`<figure>`** 和 **`<figcaption>`**：分别用于表示独立的内容（如图表、照片、代码列表等）及其标题。
- **`<mark>`**：用于表示需要突出显示或高亮的文本。
- **`<time>`**：表示日期或时间，可以是具体的时刻或持续的时间段。
- **`<summary>`** 和 **`<details>`**：`<details>` 用于创建一个可折叠的内容区域，而 `<summary>` 提供了可见的标题。

其他
- **`<dialog>`**：定义对话框或窗口。

注释

特殊符号

小于号 (<): < 或 <
大于号 (>): > 或 >
和号 (&): & 或 &
双引号 ("): " 或 "
单引号 ('): ' (HTML5中引入) 或 '
空格 (非断行空格):   或  

版权符号 (©): © 或 ©
注册商标符号 (®): ® 或 ®
商标符号 (™): ™ 或 ™
度数符号 (°): ° 或 °
乘号 (×): × 或 ×
除号 (÷): ÷ 或 ÷
加号 (+): + (加号通常不需要特殊编码，除非用在URL中)
减号/破折号 (–): – (短破折号) 或 — (长破折号)；– 和 — 分别对应
不等号 (≠): ≠ 或 ≠
小于等于号 (≤): ≤ 或 ≤
大于等于号 (≥): ≥ 或 ≥
无穷大符号 (∞): ∞ 或 ∞
微笑符号 (☺): ☺ 或 ☺
心形符号 (♥): &hearts; 或 ♥
希腊字母α (α): α 或 α (类似地，其他希腊字母也有对应的实体)
欧元符号 (€): € 或 €
英镑符号 (£): £ 或 £
日元符号 (¥): ¥ 或 ¥

列表

无序

有序

列表标签（双）

现在都用ul无序列表，少有用ol有序列表的

定义

<dl>
<dt>HTML</dt>
<dd>超文本标记语言，用于创建网页。</dd>
<dt>CSS</dt>
<dd>层叠样式表，用于设置HTML元素的布局和外观。</dd>
</dl>

table

<table border="1"> 
  <caption>课程表</caption> 
  <thead> 
    <tr> 
      <th>时间/日期</th> 
      <th>星期一</th>
      <th>星期二</th>
      <th>星期三</th>
      <th>星期四</th>
      <th>星期五</th>
    </tr>
  </thead>
  <tbody> 
    <tr> 
      <td>9:00-10:00</td> 
      <td>数学</td>
      <td>物理</td>
      <td>英语</td>
      <td>体育</td>
      <td>化学</td>
    </tr>
    <tr> 
      <td>10:00-11:00</td>
      <td>地理</td>
      <td>历史</td>
      <td>生物</td>
      <td>美术</td>
      <td>音乐</td>
    </tr>
  </tbody>
  <tfoot> 
    <tr>
      <td colspan="6">注：每天课程可能根据实际情况有所调整</td> 
    </tr>
  </tfoot>
</table>

表格标签（双）

<table>标签：表示一个表格
<tr>标签：表示表格中的一行
<th>标签：表示表格中的表头
<td>标签：表示表格中的列

表单标签（双）

**<form>**标签表示表单标签，定义整体的表单区域

提交

action属性设置表单数据提交地址

method属性设置表单提交的方式，一般有“GET”方式和“POST”方式, 不区分大小写

属性

name属性设置表单元素的名称，该名称是提交数据时的参数名

value属性设置表单元素的值，该值是提交数据时参数名所对应的值

**<label>**标签表示表单元素的文字标注标签，定义文字标注

**<input>**标签表示表单元素的用户输入标签，定义不同类型的用户输入数据方式

type属性
type="text" 定义单行文本输入框
type="password" 定义密码输入框
type="radio" 定义单选框
type="checkbox" 定义复选框
type="file" 定义上传文件
type="submit" 定义提交按钮
type="reset" 定义重置按钮
type="button" 定义一个普通按钮

**<textarea>**标签表示表单元素的多行文本输入框标签定义多行文本输入框

**<select>**标签表示表单元素的下拉列表标签定义下拉列表

**<option>标签与<select>**标签配合，定义下拉列表中的选项

form

基础属性

action: 指定处理表单数据的服务器URL。当表单提交时，表单数据会发送到这个URL。
method: 定义提交表单时使用的HTTP方法（如GET或POST）。GET方法通过URL传递数据，适用于搜索查询或任何不涉及敏感信息的请求。POST方法通过HTTP请求的body传递数据，适用于需要增加安全性的情况，如用户登录。
enctype: 当你使用POST方法并且表单包含文件上传时，这个属性必须被设置为multipart/form-data。
name: 为表单指定一个名称，这对于脚本和CSS很有用。
target: 指定提交表单后，响应返回的位置。比如，_blank会在新窗口打开响应结果。

输入类型

<input>: 最常用的表单元素，有多种类型，如text、password、radio、checkbox、submit等。
<textarea>: 用于多行文本输入。
<button>: 定义可点击的按钮，可用于提交表单或其他文档中的脚本。
<select>: 创建下拉列表。内部使用<option>标签定义选项。

注意事项

表单控件（如<input>、<select>等）需要具有name属性，这样它们的值才会被包含在提交给服务器的数据中。
使用<label>标签提高可访问性，for属性应与对应输入控件的id属性值匹配，以建立关联。
确保表单的设计和实现考虑到了可用性和无障碍性，如合理使用<fieldset>和<legend>标签对相关的表单控件进行分组和描述。

input

type

text: 默认类型。用于接受单行文本输入。适用于输入姓名、电子邮件地址（如果不需要验证格式）等。
password: 用于输入密码。输入的字符会被遮蔽，通常显示为圆点或星号。
submit: 创建一个提交按钮，用于提交表单到服务器。
reset: 创建一个重置按钮，将表单中的所有字段重置为其初始值。
radio: 创建单选按钮。同一表单中，具有相同 name 属性的多个单选按钮属于同一组，只能选择一个选项。
checkbox: 创建复选框，允许用户从多个选项中选择多个选项。
file: 允许用户选择一个或多个文件从其设备上传到服务器。
hidden: 创建一个隐藏的输入字段，用户不可见，常用于存储不需要用户修改的数据，如用户ID或会话ID。
email: 用于输入电子邮件地址，具有基本的格式验证（例如，必须包含 @ 符号）。
date: 允许用户选择一个日期。显示为日期选择器。
number: 用于输入数字，可以设置最小值、最大值和步长。
url: 用于输入网址，具有基本的格式验证。
range: 创建一个滑块，允许用户指定一个范围内的值。
color: 允许用户选择颜色。

基本属性

name: 定义输入字段的名称，这是提交表单数据到服务器时使用的名称。
value: 指定输入字段的初始值。
placeholder: 提供一个提示信息，显示在输入字段为空时的文本框内。
required: 指定表单字段必须填写才能提交表单。
disabled: 禁用输入字段，禁用的字段不会被表单提交。
readonly: 将输入字段设置为只读，用户不能修改值，但只读字段会被表单提交。
maxlength: 限制文本字段中字符的最大数量。
min 和 max: 对于数字输入，定义了允许的最小值和最大值。
step: 对于数字输入，定义了合法数字间的间隔。
pattern: 为输入字段定义一个正则表达式，用户输入的数据必须匹配这个模式才能提交表单。

accept (type="file"): 定义上传文件时允许的文件类型，如 image/*，audio/* 或具体的文件类型如 .pdf。
capture (type="file"): 在移动设备上使用时，直接使用相机或麦克风捕获文件。
min 和 max (type="number", type="range", type="date" 等): 定义数字或日期输入的最小值和最大值。
step (type="number", type="range", type="date" 等): 定义合法数字间的步长，比如，设置为 2 表示只接受偶数。

autocomplete: 控制浏览器自动完成功能。设置为 on 可以启用自动完成，off 则禁用。这对于表单如登录信息或地址很有用，但对于敏感信息如密码和信用卡号应谨慎使用。
autofocus: 页面加载时自动聚焦到该输入字段。一个页面中只能有一个元素具有此属性。
form: 指定 <input> 元素所属的一个或多个 <form> 元素。这允许你将输入字段放置在文档中的 <form> 元素外部，而仍然属于该表单。
formaction: 为提交按钮定义一个特定的URL，当点击提交按钮时覆盖 <form> 元素的 action 属性。
formenctype: 当表单被提交时，覆盖 <form> 的 enctype 属性。对于 type="submit" 的按钮特别有用，用于指定提交表单数据的 MIME 类型。
formmethod: 为特定的 <input type="submit"> 定义提交表单时使用的HTTP方法（GET 或 POST），覆盖 <form> 元素的 method 属性。
formnovalidate: 声明提交表单时不应验证 <input> 元素。适用于 type="submit" 的按钮。
formtarget: 为 type="submit" 的 <input> 元素定义一个响应打开的位置，覆盖 <form> 元素的 target 属性。
list: 指定一个 <datalist> 元素的 id，为输入提供预定义的选项列表。这对于 type="text" 输入类型非常有用。
multiple: 允许用户选择或输入多个值（如，文件上传或电子邮件输入时）。
pattern: 定义一个正则表达式，用户必须输入匹配该模式的数据才能提交表单。这对于自定义数据格式验证非常有用。
size: 指定可视宽度，以字符为单位。这不会限制可以输入的字符数，只影响显示大小。

属性

emmet语法

10个div

div*10

div>span

div+span

.nav

默认是div标签

#banner

ul>li#two

#demo$*5

<div>hello world</div>