HTML

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





AI智能生成

HTML，全称超文本标记语言（HyperText Markup Language），是一种用于创建和构建网页的标准标记语言。它允许将文本、图片、视频、链接等元素组织成网页，以在浏览器中显示。HTML使用一系列成对出现的标签来定义元素，例如用于定义段落，<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元素，如段落（``）、标题（`<h1>`-`<h6>`）、链接（`<a>`）和图像（`<img>`），可以丰富页面的内容。通过在`<head>`部分添加更多`<link>`或`<script>`标签，可以引入CSS样式表和JavaScript文件，进一步提高页面的功能性和交互性。

标签

点开慢慢找

段落标签 `` 是HTML中用于定义段落的元素。这个标签是块级元素，通常用于组织和展示文本内容。它具有一些重要的特征和使用上的注意点： ### 基本用法 - **定义文本段落：** `` 标签用来将文本内容组织成独立的段落。浏览器会自动在段落前后添加一定的垂直间距（上下边距），以区分不同的段落。 - **示例代码：** `This is a paragraph.` 显示为一个段落。 ### 特性 - **自动的空间处理：** 浏览器会自动处理段落之间的空间，通常在段落之前和之后提供一定的间距，从而无需手动添加额外的空行来区分段落。 - **块级元素：** `` 是一个块级元素，这意味着它会自动开始于新行，并且其后的内容也会在新行开始，占据父容器的整个宽度。 - **内联元素与内容：** `` 标签内部可以包含文本和其他内联元素，如 `<a>`, ``, ``, `` 等，但不推荐直接嵌套其他块级元素。 ### 样式化 - **CSS样式：** 可以通过CSS来定制段落的样式，包括字体、颜色、大小、行间距、文本对齐方式等。例如，`<p style="text-align: center; color: blue;">This is a centered, blue paragraph.` 将段落中的文本居中并设置为蓝色。 - **默认样式：** 默认情况下，段落的样式会受到浏览器默认样式表的影响，这可能导致在不同浏览器中看起来略有差异。因此，开发者经常使用CSS重置（reset）或规范化（normalize）样式表来统一不同浏览器中的默认样式。 ### 语义化 - **语义重要性：** 使用 `` 标签对内容进行段落划分不仅有助于提高网页的可读性，还有助于搜索引擎优化（SEO），因为它为文本内容提供了清晰的结构和语义。 总的来说，`` 标签是HTML中用于文本内容组织的基本元素之一，它通过简单的标记提供了文本段落的语义化表示，同时也支持通过CSS进行丰富的样式定义。在开发Web页面时，合理使用 `` 标签可以提高内容的可读性和结构性。

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

<hr/>

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

字体样式

字体样式标签 包括  (粗体),  (斜体),  (强调，通常表现为斜体), 和  (重要性强调，通常表现为粗体)。 用途与区别：  和  主要用于改变文本的样式，而  和  含有语义的重要性，表示文本的强调或重要性。 推荐： 为了更好的可访问性和语义化，推荐使用  和  表达强调和重要性。

div和span

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

img

<img> 标签 <img> 标签用于在HTML文档中嵌入图像。它是一个空标签，意味着它不需要闭合标签。<img> 标签的主要属性包括： src（必需）: 指定图像文件的路径。这可以是相对路径、绝对路径或完整的URL。 alt（推荐）: 提供图像的替代文本，以便图像无法显示时（如加载失败或文本浏览器使用）提供信息。这对于提高可访问性和SEO非常重要。 title: 提供当鼠标悬停在图像上时显示的文本。 width 和 height: 指定图像的宽度和高度，可以是像素值或百分比。如果不指定，图像将以其原始尺寸显示。

<img src="image.jpg" alt="描述性文本" title="鼠标悬停显示文本" width="500" height="300">

资源路径

用相对路径，绝对路径换机器就找不到文件了 具体看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>`**：分别用于表示独立的内容（如图表、照片、代码列表等）及其标题。 - **``**：用于表示需要突出显示或高亮的文本。 - **`<time>`**：表示日期或时间，可以是具体的时刻或持续的时间段。 - **`<summary>`** 和 **`<details>`**：`<details>` 用于创建一个可折叠的内容区域，而 `<summary>` 提供了可见的标题。 其他 - **`<dialog>`**：定义对话框或窗口。

注释

特殊符号

小于号 (<): &lt; 或 &#60; 大于号 (>): &gt; 或 &#62; 和号 (&): &amp; 或 &#38; 双引号 ("): &quot; 或 &#34; 单引号 ('): &apos; (HTML5中引入) 或 &#39; 空格 (非断行空格): &nbsp; 或 &#160;

版权符号 (©): &copy; 或 &#169; 注册商标符号 (®): &reg; 或 &#174; 商标符号 (™): &trade; 或 &#8482; 度数符号 (°): &deg; 或 &#176; 乘号 (×): &times; 或 &#215; 除号 (÷): &divide; 或 &#247; 加号 (+): &#43; (加号通常不需要特殊编码，除非用在URL中) 减号/破折号 (–): &ndash; (短破折号) 或 &mdash; (长破折号)；&#8211; 和 &#8212; 分别对应 不等号 (≠): &ne; 或 &#8800; 小于等于号 (≤): &le; 或 &#8804; 大于等于号 (≥): &ge; 或 &#8805; 无穷大符号 (∞): &infin; 或 &#8734; 微笑符号 (☺): &#9786; 或 &#x263A; 心形符号 (♥): &hearts; 或 &#9829; 希腊字母α (α): &alpha; 或 &#945; (类似地，其他希腊字母也有对应的实体) 欧元符号 (€): &euro; 或 &#8364; 英镑符号 (£): &pound; 或 &#163; 日元符号 (¥): &yen; 或 &#165;

列表

无序

有序

列表标签（双）

现在都用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

<form action="/submit-form" method="POST">   <label for="name">姓名：</label>   <input type="text" id="name" name="user_name">      <label for="email">电子邮件：</label>   <input type="email" id="email" name="user_email">      <input type="submit" value="提交"> </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>标签定义选项。

注意事项

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

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

<div class="nav"></div>

.nav

默认是div标签

<div id="banner"></div>

#banner

ul>li#two