HTML
2024-05-05 09:47:39 0 举报AI智能生成
登录查看完整内容
HTML，全称超文本标记语言（HyperText Markup Language），是一种用于创建和构建网页的标准标记语言。它允许将文本、图片、视频、链接等元素组织成网页，以在浏览器中显示。HTML使用一系列成对出现的标签来定义元素，例如<p>用于定义段落，<img>用于插入图片。HTML文件的后缀通常为.html或.htm。通过CSS（级联样式表），可以进一步修饰和布局HTML元素。此外，JavaScript可以添加交互性，使网页更加动态和功能丰富。
作者其他创作
大纲/内容
<!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=\
<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\
基础结构
<p>
换行标签 <br/>用途： <br/> 标签用于在文本中插入一个换行，而不开始新的段落。特点： 是一个空标签，意味着它不需要闭合（HTML5中写作<br>也是可接受的）。示例： 使用<br>在诗或地址中分行是很常见的。
<br/>
水平线标签 <hr/>用途： <hr/> 标签用来在页面上插入一个水平线，通常表示段落或章节的分隔。特点： 也是一个空标签，可以用来提供视觉上的分隔，也可能具有语义上的意义，标示文档中的不同部分。样式： 可以通过CSS样式化，比如改变颜色、宽度或边框样式。
<hr/>
字体样式
<div> 和 <span><div>： 是一个块级容器，常用于布局或组织页面中的大块内容。默认情况下，它会占据完整的宽度。<span>： 是一个内联容器，用于对文本的一部分或文档的一小块进行组织或样式化，而不引起文本断行或新的块级结构。
div和span
<img> 标签<img> 标签用于在HTML文档中嵌入图像。它是一个空标签，意味着它不需要闭合标签。<img> 标签的主要属性包括：src（必需）: 指定图像文件的路径。这可以是相对路径、绝对路径或完整的URL。alt（推荐）: 提供图像的替代文本，以便图像无法显示时（如加载失败或文本浏览器使用）提供信息。这对于提高可访问性和SEO非常重要。title: 提供当鼠标悬停在图像上时显示的文本。width 和 height: 指定图像的宽度和高度，可以是像素值或百分比。如果不指定，图像将以其原始尺寸显示。
<img src=\"image.jpg\" alt=\"描述性文本\" title=\"鼠标悬停显示文本\" width=\"500\" height=\"300\">
用相对路径，绝对路径换机器就找不到文件了具体看team
资源路径
img
<a> 标签<a> 标签用于创建链接，允许用户点击从一个页面跳转到另一个页面。它的主要属性包括：href（必需）: 指定链接的目标URL。这可以是一个绝对URL或一个相对URL。target: 指定如何打开链接的文档。常用值包括 _blank（在新窗口或标签页中打开）、_self（在相同的框架或窗口中打开，这是默认行为）、_parent（在父框架中打开），以及 _top（在整个窗口中打开）。title: 提供链接的额外信息，当鼠标悬停在链接上时显示。rel: 定义当前文档和链接文档之间的关系。例如，rel=\"nofollow\" 用于告诉搜索引擎不跟踪该链接。
a
为网页提供一个导航链接的区域。有助于改善网站的结构，使内容对于屏幕阅读器和搜索引擎更友好。
结构性语义标签- **`<header>`**：定义文档或部分的页眉。- **`<footer>`**：定义文档或部分的页脚。- **`<nav>`**：定义导航链接的部分。- **`<section>`**：定义文档中的一个区段，通常包含标题。- **`<article>`**：定义独立的、自成一体的内容，例如博客帖子或新闻文章。- **`<aside>`**：定义和页面内容稍微独立的内容，如侧栏。- **`<main>`**：定义文档的主要内容。每个文档中 `<main>` 标签应该是唯一的。文本级语义标签- **`<figure>`** 和 **`<figcaption>`**：分别用于表示独立的内容（如图表、照片、代码列表等）及其标题。- **`<mark>`**：用于表示需要突出显示或高亮的文本。- **`<time>`**：表示日期或时间，可以是具体的时刻或持续的时间段。- **`<summary>`** 和 **`<details>`**：`<details>` 用于创建一个可折叠的内容区域，而 `<summary>` 提供了可见的标题。其他- **`<dialog>`**：定义对话框或窗口。
语义标签
nav
<!-- 这是一个注释 -->
<!--这是一个多行注释它包含了多行文本-->
注释
小于号 (<): < 或 <大于号 (>): > 或 >和号 (&): & 或 &双引号 (\"): " 或 "单引号 ('): ' (HTML5中引入) 或 '空格 (非断行空格): 或  
版权符号 (©): © 或 ©注册商标符号 (®): ® 或 ®商标符号 (™): ™ 或 ™度数符号 (°): ° 或 °乘号 (×): × 或 ×除号 (÷): ÷ 或 ÷加号 (+): + (加号通常不需要特殊编码，除非用在URL中)减号/破折号 (–): – (短破折号) 或 — (长破折号)；– 和 — 分别对应不等号 (≠): ≠ 或 ≠小于等于号 (≤): ≤ 或 ≤大于等于号 (≥): ≥ 或 ≥无穷大符号 (∞): ∞ 或 ∞微笑符号 (☺): ☺ 或 ☺心形符号 (♥): ♥ 或 ♥希腊字母α (α): α 或 α (类似地，其他希腊字母也有对应的实体)欧元符号 (€): € 或 €英镑符号 (£): £ 或 £日元符号 (¥): ¥ 或 ¥
特殊符号
<ul> <li>项目一</li> <li>项目二</li> <li>项目三</li></ul>
无序
<ol> <li>第一步</li> <li>第二步</li> <li>第三步</li></ol>
有序
现在都用ul无序列表，少有用ol有序列表的
列表标签（双）
<dl> <dt>HTML</dt> <dd>超文本标记语言，用于创建网页。</dd> <dt>CSS</dt> <dd>层叠样式表，用于设置HTML元素的布局和外观。</dd></dl>
定义
列表
<table border=\"1\"> <!-- 创建一个表格，border属性定义表格边框的宽度 --> <caption>课程表</caption> <!-- 提供表格的标题或说明。这个标签位于<table>标签内部的最前面。 --> <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> <!-- colspan属性表示单元格横跨的列数 --> </tr> </tfoot></table>
<table>标签：表示一个表格 <tr>标签：表示表格中的一行 <th>标签：表示表格中的表头 <td>标签：表示表格中的列
表格标签（双）
action属性 设置表单数据提交地址
提交
name属性 设置表单元素的名称，该名称是提交数据时的参数名
value属性 设置表单元素的值，该值是提交数据时参数名所对应的值
属性
**<form>**标签 表示表单标签，定义整体的表单区域
**<label>**标签 表示表单元素的文字标注标签，定义文字标注
type属性type=\"text\" 定义单行文本输入框type=\"password\" 定义密码输入框type=\"radio\" 定义单选框type=\"checkbox\" 定义复选框type=\"file\" 定义上传文件type=\"submit\" 定义提交按钮type=\"reset\" 定义重置按钮type=\"button\" 定义一个普通按钮
**<input>**标签 表示表单元素的用户输入标签，定义不同类型的用户输入数据方式
**<textarea>**标签 表示表单元素的多行文本输入框标签 定义多行文本输入框
**<option>标签与<select>**标签配合，定义下拉列表中的选项
**<select>**标签 表示表单元素的下拉列表标签 定义下拉列表
表单标签（双）
table
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>标签对相关的表单控件进行分组和描述。
注意事项
<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>
form
text: 默认类型。用于接受单行文本输入。适用于输入姓名、电子邮件地址（如果不需要验证格式）等。password: 用于输入密码。输入的字符会被遮蔽，通常显示为圆点或星号。submit: 创建一个提交按钮，用于提交表单到服务器。reset: 创建一个重置按钮，将表单中的所有字段重置为其初始值。radio: 创建单选按钮。同一表单中，具有相同 name 属性的多个单选按钮属于同一组，只能选择一个选项。checkbox: 创建复选框，允许用户从多个选项中选择多个选项。file: 允许用户选择一个或多个文件从其设备上传到服务器。hidden: 创建一个隐藏的输入字段，用户不可见，常用于存储不需要用户修改的数据，如用户ID或会话ID。email: 用于输入电子邮件地址，具有基本的格式验证（例如，必须包含 @ 符号）。date: 允许用户选择一个日期。显示为日期选择器。number: 用于输入数字，可以设置最小值、最大值和步长。url: 用于输入网址，具有基本的格式验证。range: 创建一个滑块，允许用户指定一个范围内的值。color: 允许用户选择颜色。
type
accept (type=\"file\"): 定义上传文件时允许的文件类型，如 image/*，audio/* 或具体的文件类型如 .pdf。capture (type=\"file\"): 在移动设备上使用时，直接使用相机或麦克风捕获文件。min 和 max (type=\"number\
name: 定义输入字段的名称，这是提交表单数据到服务器时使用的名称。value: 指定输入字段的初始值。placeholder: 提供一个提示信息，显示在输入字段为空时的文本框内。required: 指定表单字段必须填写才能提交表单。disabled: 禁用输入字段，禁用的字段不会被表单提交。readonly: 将输入字段设置为只读，用户不能修改值，但只读字段会被表单提交。maxlength: 限制文本字段中字符的最大数量。min 和 max: 对于数字输入，定义了允许的最小值和最大值。step: 对于数字输入，定义了合法数字间的间隔。pattern: 为输入字段定义一个正则表达式，用户输入的数据必须匹配这个模式才能提交表单。
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: 指定可视宽度，以字符为单位。这不会限制可以输入的字符数，只影响显示大小。
基本属性
<form> <input type=\"text\" name=\"username\" placeholder=\"用户名\" required> <input type=\"password\" name=\"password\" required> <input type=\"email\" name=\"email\" placeholder=\"电子邮件\"> <input type=\"submit\" value=\"提交\"></form>
input
点开慢慢找
标签
div*10
10个div
div>span
<div><span></span></div>
div+span
<div></div><p></p>
默认是div标签
.nav
<div class=\"nav\"></div>
#banner
<div id=\"banner\"></div>
ul>li#two
<ul> <li id=\"two\"></li></ul>
#demo$*5
<div id=\"demo5\"></div><div id=\"demo5\"></div><div id=\"demo5\"></div><div id=\"demo5\"></div><div id=\"demo5\"></div>
div{hello world}
<div>hello world</div>
div{$}*5
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
emmet语法
HTML
0 条评论
回复 删除
下一页
