前言
也是学上web了。
HTML实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
|
解释：
<!DOCTYPE html>声明为 HTML5 文档
什么是html
超文本标记语言: HyperText Markup Language
是一种标记语言，是一套标记标签
使用标记标签描述网页
html文档包含了html标签和文本内容，也叫做web页面
标签
<>
成对出现 如: <b> 和 </b>
第一个是开始标签，第二个是结束标签
<标签>内容</标签>
基础
标题
TML 标题（Heading）是通过<h1> - <h6> 标签来定义的。
（经过比较，h4和p标签大小类似，h5 h6比p还要小）
段落
<p>这是一个段落。</p>
链接
<a> </a>
<a href="https://www.runoob.com">这是一个链接</a>
|
href是属性
图像
<img src="/images/logo.png" width="258" height="39" />
|
属性
| 属性名 |
适用元素 |
说明 |
id |
所有元素 |
为元素指定唯一的标识符。 |
class |
所有元素 |
为元素指定一个或多个类名，用于 CSS 或 JavaScript 选择。 |
style |
所有元素 |
直接在元素上应用 CSS 样式。 |
title |
所有元素 |
为元素提供额外的提示信息，通常在鼠标悬停时显示。 |
data-* |
所有元素 |
用于存储自定义数据，通常通过 JavaScript 访问。 |
href |
<a>, <link> |
指定链接的目标 URL。 |
src |
<img>, <script>, <iframe> |
指定外部资源（如图片、脚本、框架）的 URL。 |
alt |
<img> |
为图像提供替代文本，当图像无法显示时显示。 |
type |
<input>, <button> |
指定输入控件的类型（如 text, password, checkbox 等）。 |
value |
<input>, <button>, <option> |
指定元素的初始值。 |
disabled |
表单元素 |
禁用元素，使其不可交互。 |
checked |
<input type="checkbox">, <input type="radio"> |
指定复选框或单选按钮是否被选中。 |
placeholder |
<input>, <textarea> |
在输入框中显示提示文本。 |
target |
<a>, <form> |
指定链接或表单提交的目标窗口或框架（如 _blank 表示新标签页）。 |
readonly |
表单元素 |
使输入框只读。 |
required |
表单元素 |
指定输入字段为必填项。 |
autoplay |
<audio>, <video> |
自动播放媒体。 |
onclick |
所有元素 |
当用户点击元素时触发 JavaScript 事件。 |
onmouseover |
所有元素 |
当用户将鼠标悬停在元素上时触发 JavaScript 事件。 |
onchange |
表单元素 |
当元素的值发生变化时触发 JavaScript 事件。 |
全局属性
特定元素属性
布尔属性
存在即true 不存在就false
例如：
<input type="text" disabled>
|
自定义属性
data-*
**data-***：用于存储自定义数据，通常通过 JavaScript 访问。
<div data-user-id="12345" data-role="admin">User Info</div>
|
（div 容器元素）
时间处理属性
<button onclick="alert('Button clicked!')">Click Me</button>
|
标题
搜索引擎使用标题为您的网页的结构和内容编制索引。
<hr> 标签在 HTML 页面中创建水平线。
段落
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签：
<p>这个<br>段落<br>演示了分行的效果</p>
|
文本格式化
HTML 文本格式化标签
HTML 文本格式化标签
| 标签 |
描述 |
|
定义粗体文本 |
|
定义着重文字 |
|
定义斜体字 |
|
定义小号字 |
|
定义加重语气 |
|
定义下标字 |
|
定义上标字 |
|
定义插入字 |
|
定义删除字 |
链接
链接属性
href 定义链接目标
target 打开方式
rel 链接与目标页面的关系
nofollow: 表示搜索引擎不应跟踪该链接，常用于外部链接。
noopener 和 noreferrer: 防止在新标签中打开链接时的安全问题，尤其是使用 target=”_blank” 时。
download 下载链接目标
title 额外信息（鼠标悬停显示的提示）
id 链接锚点
hreflang 链接的目标url语言
type MIME类型
class 类名
style 定义css样式
使用class的时候，可以在外部css文件定义一个样式模版，称之为class，然后在html使用，style就是比较简单的，直接在html定义样式
头部
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
title
元素:
<ul>
<li>定义了浏览器工具栏的标题</li>
<li>当网页添加到收藏夹时，显示在收藏夹中的标题</li>
<li>显示在搜索引擎结果页面的标题</li>
</ul>
<h2 id="HTML-head-元素"><a href="#HTML-head-元素" class="headerlink" title="HTML head 元素"></a>HTML head 元素</h2><table>
<thead>
<tr>
<th align="left">标签</th>
<th align="left">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><head></td>
<td align="left">定义了文档的信息</td>
</tr>
<tr>
<td align="left"><title></td>
<td align="left">定义了文档的标题</td>
</tr>
<tr>
<td align="left"><base></td>
<td align="left">定义了页面链接标签的默认链接地址</td>
</tr>
<tr>
<td align="left"><link></td>
<td align="left">定义了一个文档和外部资源之间的关系</td>
</tr>
<tr>
<td align="left"><meta></td>
<td align="left">定义了HTML文档中的元数据</td>
</tr>
<tr>
<td align="left"><script></td>
<td align="left">定义了客户端的脚本文件</td>
</tr>
<tr>
<td align="left"><style></td>
<td align="left">定义了HTML文档的样式文件</td>
</tr>
</tbody></table>
<h1 id="html-css"><a href="#html-css" class="headerlink" title="html css"></a>html css</h1><h2 id="内联样式"><a href="#内联样式" class="headerlink" title="内联样式"></a>内联样式</h2><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">style</span>=<span class="string">"color:blue;margin-left:20px;"</span>></span>这是一个段落。<span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure>
<h2 id="背景颜色"><a href="#背景颜色" class="headerlink" title="背景颜色"></a>背景颜色</h2><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">h2</span> <span class="attr">style</span>=<span class="string">"background-color:red;"</span>></span>这是一个标题<span class="tag"></<span class="name">h2</span>></span></span><br></pre></td></tr></table></figure>
<p>background-color:</p>
<h2 id="字体"><a href="#字体" class="headerlink" title="字体"></a>字体</h2><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">p</span> <span class="attr">style</span>=<span class="string">"font-family:arial;color:red;font-size:20px;"</span>></span>一个段落。<span class="tag"></<span class="name">p</span>></span></span><br></pre></td></tr></table></figure>
<h2 id="文本对齐方式"><a href="#文本对齐方式" class="headerlink" title="文本对齐方式"></a>文本对齐方式</h2><p>text-align</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line"><h1 style="text-align:center;">居中对齐的标题</h1></span><br></pre></td></tr></table></figure>
<h2 id="内部样式表"><a href="#内部样式表" class="headerlink" title="内部样式表"></a>内部样式表</h2><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span><span class="language-css"></span></span><br><span class="line"><span class="language-css"><span class="selector-tag">body</span> {<span class="attribute">background-color</span>:yellow;}</span></span><br><span class="line"><span class="language-css"><span class="selector-tag">p</span> {<span class="attribute">color</span>:blue;}</span></span><br><span class="line"><span class="language-css"></span><span class="tag"></<span class="name">style</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br></pre></td></tr></table></figure>
<h2 id="外部样式表"><a href="#外部样式表" class="headerlink" title="外部样式表"></a>外部样式表</h2><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">head</span>></span></span><br><span class="line"><span class="tag"><<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">type</span>=<span class="string">"text/css"</span> <span class="attr">href</span>=<span class="string">"mystyle.css"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">head</span>></span></span><br></pre></td></tr></table></figure>
<h1 id="图像-1"><a href="#图像-1" class="headerlink" title="图像"></a>图像</h1><p>alt 属性用来为图像定义一串预备的可替换的文本。</p>
<p>替换文本属性的值是用户定义的。</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line"><img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228"></span><br></pre></td></tr></table></figure>
<h1 id="表格"><a href="#表格" class="headerlink" title="表格"></a>表格</h1><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">table</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">thead</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>列标题1<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>列标题2<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">th</span>></span>列标题3<span class="tag"></<span class="name">th</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">thead</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tbody</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>行1，列1<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>行1，列2<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>行1，列3<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>行2，列1<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>行2，列2<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span>行2，列3<span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tbody</span>></span></span><br><span class="line"><span class="tag"></<span class="name">table</span>></span></span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">table</span> <span class="attr">border</span>=<span class="string">"1"</span>></span> </span><br></pre></td></tr></table></figure>
<p>边框</p>
<h1 id="列表"><a href="#列表" class="headerlink" title="列表"></a>列表</h1><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">ul</span>></span></span><br><span class="line"><span class="tag"><<span class="name">li</span>></span>Coffee<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"><<span class="name">li</span>></span>Milk<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"></<span class="name">ul</span>></span></span><br></pre></td></tr></table></figure>
<p>无序列表</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">ol</span>></span></span><br><span class="line"><span class="tag"><<span class="name">li</span>></span>Coffee<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"><<span class="name">li</span>></span>Milk<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"><span class="tag"></<span class="name">ol</span>></span></span><br></pre></td></tr></table></figure>
<p>有序列表</p>
<h1 id="区块"><a href="#区块" class="headerlink" title="区块"></a>区块</h1><h2 id="HTML-区块元素"><a href="#HTML-区块元素" class="headerlink" title="HTML 区块元素"></a>HTML 区块元素</h2><p>大多数 HTML 元素被定义为<strong>块级元素</strong>或<strong>内联元素</strong>。</p>
<p>块级元素在浏览器显示时，通常会以新行来开始（和结束）。</p>
<p>实例: <h1>, <p>, <ul>, <table></p>
<h2 id="HTML-内联元素"><a href="#HTML-内联元素" class="headerlink" title="HTML 内联元素"></a>HTML 内联元素</h2><p>内联元素在显示时通常不会以新行开始。</p>
<p>实例: <b>, <td>, <a>, <img></p>
<h2 id="div"><a href="#div" class="headerlink" title="div"></a>div</h2><p>块级元素</p>
<h2 id="span"><a href="#span" class="headerlink" title="span"></a>span</h2><p>内联元素</p>
<p>可用作文本容器</p>
<h1 id="表单"><a href="#表单" class="headerlink" title="表单"></a>表单</h1><ul>
<li><code><form></code> 元素用于创建表单，<code>action</code> 属性定义了表单数据提交的目标 URL，<code>method</code> 属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。</li>
<li><code><label></code> 元素用于为表单元素添加标签，提高可访问性。</li>
<li><code><input></code> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。<code>type</code> 属性定义了输入框的类型，<code>id</code> 属性用于关联 <code><label></code> 元素，<code>name</code> 属性用于标识表单字段。</li>
<li><code><select></code> 元素用于创建下拉列表，而 <code><option></code> 元素用于定义下拉列表中的选项。</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">form</span> <span class="attr">action</span>=<span class="string">"/"</span> <span class="attr">method</span>=<span class="string">"post"</span>></span></span><br><span class="line"> <span class="comment"><!-- 文本输入框 --></span></span><br><span class="line"> <span class="tag"><<span class="name">label</span> <span class="attr">for</span>=<span class="string">"name"</span>></span>用户名:<span class="tag"></<span class="name">label</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">id</span>=<span class="string">"name"</span> <span class="attr">name</span>=<span class="string">"name"</span> <span class="attr">required</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="comment"><!-- 密码输入框 --></span></span><br><span class="line"> <span class="tag"><<span class="name">label</span> <span class="attr">for</span>=<span class="string">"password"</span>></span>密码:<span class="tag"></<span class="name">label</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"password"</span> <span class="attr">id</span>=<span class="string">"password"</span> <span class="attr">name</span>=<span class="string">"password"</span> <span class="attr">required</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="comment"><!-- 单选按钮 --></span></span><br><span class="line"> <span class="tag"><<span class="name">label</span>></span>性别:<span class="tag"></<span class="name">label</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> <span class="attr">id</span>=<span class="string">"male"</span> <span class="attr">name</span>=<span class="string">"gender"</span> <span class="attr">value</span>=<span class="string">"male"</span> <span class="attr">checked</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">label</span> <span class="attr">for</span>=<span class="string">"male"</span>></span>男<span class="tag"></<span class="name">label</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> <span class="attr">id</span>=<span class="string">"female"</span> <span class="attr">name</span>=<span class="string">"gender"</span> <span class="attr">value</span>=<span class="string">"female"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">label</span> <span class="attr">for</span>=<span class="string">"female"</span>></span>女<span class="tag"></<span class="name">label</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="comment"><!-- 复选框 --></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">id</span>=<span class="string">"subscribe"</span> <span class="attr">name</span>=<span class="string">"subscribe"</span> <span class="attr">checked</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">label</span> <span class="attr">for</span>=<span class="string">"subscribe"</span>></span>订阅推送信息<span class="tag"></<span class="name">label</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="comment"><!-- 下拉列表 --></span></span><br><span class="line"> <span class="tag"><<span class="name">label</span> <span class="attr">for</span>=<span class="string">"country"</span>></span>国家:<span class="tag"></<span class="name">label</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">select</span> <span class="attr">id</span>=<span class="string">"country"</span> <span class="attr">name</span>=<span class="string">"country"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">"cn"</span>></span>CN<span class="tag"></<span class="name">option</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">"usa"</span>></span>USA<span class="tag"></<span class="name">option</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">option</span> <span class="attr">value</span>=<span class="string">"uk"</span>></span>UK<span class="tag"></<span class="name">option</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">select</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="tag"><<span class="name">br</span>></span></span><br><span class="line"></span><br><span class="line"> <span class="comment"><!-- 提交按钮 --></span></span><br><span class="line"> <span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"submit"</span> <span class="attr">value</span>=<span class="string">"提交"</span>></span></span><br><span class="line"><span class="tag"></<span class="name">form</span>></span></span><br></pre></td></tr></table></figure>
<ul>
<li>文本域</li>
</ul>
<p><code><input type="text"></code></p>
<ul>
<li>密码字段</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"password"</span>></span></span><br></pre></td></tr></table></figure>
<ul>
<li><p>单选按钮</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span>></span></span><br></pre></td></tr></table></figure>
</li>
<li><p>复选框</p>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span>></span></span><br></pre></td></tr></table></figure>
<ul>
<li><p>提交</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"submit"</span>></span></span><br></pre></td></tr></table></figure></li>
</ul>
<h1 id="框架"><a href="#框架" class="headerlink" title="框架"></a>框架</h1><p>ifname</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line"><iframe src="demo_iframe.htm" width="200" height="200"></iframe></span><br></pre></td></tr></table></figure>
<h1 id="脚本"><a href="#脚本" class="headerlink" title="脚本"></a>脚本</h1><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag"><<span class="name">script</span>></span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript"><span class="variable language_">document</span>.<span class="title function_">write</span>(<span class="string">"Hello World!"</span>);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag"></<span class="name">script</span>></span></span><br></pre></td></tr></table></figure>
<h1 id="字符实体"><a href="#字符实体" class="headerlink" title="字符实体"></a>字符实体</h1><p>在 HTML 中，某些字符是预留的。</p>
<p>在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。</p>
<p>如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。 字符实体类似这样：</p>
<p>&<em>entity_name</em>;</p>
<p>或</p>
<p>&#<em>entity_number</em>;</p>
<p>如需显示小于号，我们必须这样写：<code>< < <</code></p>
<h1 id="url"><a href="#url" class="headerlink" title="url"></a>url</h1><h2 id="URL-字符编码"><a href="#URL-字符编码" class="headerlink" title="URL 字符编码"></a>URL 字符编码</h2><p>URL 只能使用 <a target="_blank" rel="noopener" href="https://www.runoob.com/tags/html-ascii.html">ASCII 字符集</a>.</p>
<p>来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。</p>
<p>URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。</p>
<p>URL 不能包含空格。URL 编码通常使用 + 来替换空格。</p>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta"><i class="fas fa-circle-user fa-fw"></i>文章作者: </span><span class="post-copyright-info"><a href="http://example.com">tgrddf55</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta"><i class="fas fa-square-arrow-up-right fa-fw"></i>文章链接: </span><span class="post-copyright-info"><a href="http://example.com/2025/05/30/2025-05-30-html%E5%85%A5%E9%97%A8/">http://example.com/2025/05/30/2025-05-30-html入门/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta"><i class="fas fa-circle-exclamation fa-fw"></i>版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://example.com" target="_blank">tgrddf55's Blog</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/web/">web</a></div><div class="post_share"><div class="social-share" data-image="/image/45.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1.1.3/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1.1.3/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2025/05/30/2025-05-30-js%E5%85%A5%E9%97%A8/" title="js study"><img class="cover" src="/image/9.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">js study</div></div></a></div><div class="next-post pull-right"><a href="/2025/04/27/2025-04-27-IoT%E5%85%A5%E9%97%A8_DLINK815%E6%A0%88%E6%BA%A2%E5%87%BA%E6%BC%8F%E6%B4%9E%E5%A4%8D%E7%8E%B0/" title="IoT入门_DLINK815栈溢出漏洞复现"><img class="cover" src="/image/54.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">IoT入门_DLINK815栈溢出漏洞复现</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/2025/05/30/2025-05-30-js%E5%85%A5%E9%97%A8/" title="js study"><img class="cover" src="/image/9.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2025-05-30</div><div class="title">js study</div></div></a></div><div><a href="/2025/05/31/2025-05-31-css%E5%85%A5%E9%97%A8/" title="css study"><img class="cover" src="/image/41.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2025-05-31</div><div class="title">css study</div></div></a></div><div><a href="/2025/06/07/2025-06-07-php%E5%85%A5%E9%97%A8/" title="php study"><img class="cover" src="/image/33.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2025-06-07</div><div class="title">php study</div></div></a></div><div><a href="/2025/06/02/2025-06-02-web%E5%85%A5%E9%97%A8%E9%A2%98%E5%8D%95/" title="web入门题单"><img class="cover" src="/image/48.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2025-06-02</div><div class="title">web入门题单</div></div></a></div><div><a href="/2025/06/09/2025-06-09-sql%E5%85%A5%E9%97%A8/" title="sql study"><img class="cover" src="/image/36.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2025-06-09</div><div class="title">sql study</div></div></a></div><div><a href="/2025/06/13/2025-06-13-php%E5%BC%B1%E6%AF%94%E8%BE%83/" title="php弱比较"><img class="cover" src="/image/12.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2025-06-13</div><div class="title">php弱比较</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/imgs/tgrddf55.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">tgrddf55</div><div class="author-info__description">几时归去，做个闲人</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">60</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">29</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">6</div></a></div><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/tgrddf55" target="_blank" title="Github"><i class="fab fa-github" style="color: #24292e;"></i></a><a class="social-icon" href="https://space.bilibili.com/455700704" target="_blank" title="bilibili"><i class="fab fa-bilibili" style="color: #00aeff;"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">This is my Blog</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content is-expand"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%89%8D%E8%A8%80"><span class="toc-text">前言</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#HTML%E5%AE%9E%E4%BE%8B"><span class="toc-text">HTML实例</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A7%A3%E9%87%8A%EF%BC%9A"><span class="toc-text">解释：</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFhtml"><span class="toc-text">什么是html</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%87%E7%AD%BE"><span class="toc-text">标签</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%9F%BA%E7%A1%80"><span class="toc-text">基础</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%87%E9%A2%98"><span class="toc-text">标题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%AE%B5%E8%90%BD"><span class="toc-text">段落</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%93%BE%E6%8E%A5"><span class="toc-text">链接</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%BE%E5%83%8F"><span class="toc-text">图像</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%B1%9E%E6%80%A7"><span class="toc-text">属性</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%A8%E5%B1%80%E5%B1%9E%E6%80%A7"><span class="toc-text">全局属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%89%B9%E5%AE%9A%E5%85%83%E7%B4%A0%E5%B1%9E%E6%80%A7"><span class="toc-text">特定元素属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B8%83%E5%B0%94%E5%B1%9E%E6%80%A7"><span class="toc-text">布尔属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7"><span class="toc-text">自定义属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%97%B6%E9%97%B4%E5%A4%84%E7%90%86%E5%B1%9E%E6%80%A7"><span class="toc-text">时间处理属性</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%A0%87%E9%A2%98-1"><span class="toc-text">标题</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%AE%B5%E8%90%BD-1"><span class="toc-text">段落</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%96%87%E6%9C%AC%E6%A0%BC%E5%BC%8F%E5%8C%96"><span class="toc-text">文本格式化</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#HTML-%E6%96%87%E6%9C%AC%E6%A0%BC%E5%BC%8F%E5%8C%96%E6%A0%87%E7%AD%BE"><span class="toc-text">HTML 文本格式化标签</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#HTML-%E6%96%87%E6%9C%AC%E6%A0%BC%E5%BC%8F%E5%8C%96%E6%A0%87%E7%AD%BE-1"><span class="toc-text">HTML 文本格式化标签</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E9%93%BE%E6%8E%A5-1"><span class="toc-text">链接</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%93%BE%E6%8E%A5%E5%B1%9E%E6%80%A7"><span class="toc-text">链接属性</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%A4%B4%E9%83%A8"><span class="toc-text">头部</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#title"><span class="toc-text">title</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2025/06/27/2025-06-26-php%E5%8F%8D%E5%BA%8F%E5%88%97%E5%8C%96%E5%9F%BA%E7%A1%80/" title="php反序列化基础"><img src="/image/52.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="php反序列化基础"/></a><div class="content"><a class="title" href="/2025/06/27/2025-06-26-php%E5%8F%8D%E5%BA%8F%E5%88%97%E5%8C%96%E5%9F%BA%E7%A1%80/" title="php反序列化基础">php反序列化基础</a><time datetime="2025-06-26T16:00:00.000Z" title="发表于 2025-06-27 00:00:00">2025-06-27</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2025/06/26/2025-06-26-nodejs%E5%8E%9F%E5%9E%8B%E9%93%BE%E6%B1%A1%E6%9F%93/" title="nodejs原型链污染"><img src="/image/19.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="nodejs原型链污染"/></a><div class="content"><a class="title" href="/2025/06/26/2025-06-26-nodejs%E5%8E%9F%E5%9E%8B%E9%93%BE%E6%B1%A1%E6%9F%93/" title="nodejs原型链污染">nodejs原型链污染</a><time datetime="2025-06-25T16:00:00.000Z" title="发表于 2025-06-26 00:00:00">2025-06-26</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2025/06/26/2025-06-26-php%E4%BC%AA%E5%8D%8F%E8%AE%AE/" title="php伪协议"><img src="/image/17.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="php伪协议"/></a><div class="content"><a class="title" href="/2025/06/26/2025-06-26-php%E4%BC%AA%E5%8D%8F%E8%AE%AE/" title="php伪协议">php伪协议</a><time datetime="2025-06-25T16:00:00.000Z" title="发表于 2025-06-26 00:00:00">2025-06-26</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2025/06/14/2025-06-14-python_ssti/" title="python_ssti"><img src="/image/22.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="python_ssti"/></a><div class="content"><a class="title" href="/2025/06/14/2025-06-14-python_ssti/" title="python_ssti">python_ssti</a><time datetime="2025-06-13T16:00:00.000Z" title="发表于 2025-06-14 00:00:00">2025-06-14</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2025/06/13/2025-06-13-php%E5%BC%B1%E6%AF%94%E8%BE%83/" title="php弱比较"><img src="/image/12.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="php弱比较"/></a><div class="content"><a class="title" href="/2025/06/13/2025-06-13-php%E5%BC%B1%E6%AF%94%E8%BE%83/" title="php弱比较">php弱比较</a><time datetime="2025-06-12T16:00:00.000Z" title="发表于 2025-06-13 00:00:00">2025-06-13</time></div></div></div></div></div></div></main><footer id="footer" style="background-image: url('/image/45.jpg')"><div id="footer-wrap"><div class="copyright">©2020 - 2025 By tgrddf55</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js?v=4.13.0"></script><script src="/js/main.js?v=4.13.0"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0.33/dist/fancybox/fancybox.umd.min.js"></script><div class="js-pjax"></div><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span> 数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div><div id="local-search-stats-wrap"></div></div></div><div id="search-mask"></div><script src="/js/search/local-search.js?v=4.13.0"></script></div></div></body></html>