ruoneo
/
blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
4 Commits
1 Branch
0 Tags
18 MiB
 
 
 
Tag: Branch: Tree: main
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'main'
${ noResults }
blog/public/2017/09/23/HTML/index.html

615 lines
29 KiB
Raw Permalink Blame History Escape

<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>HTML | 水榭听泉</title><meta name="keywords" content="前端"><meta name="author" content="Ruoneo"><meta name="copyright" content="Ruoneo"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="快速入门 1.新建文本文件，后缀名改为 .html&#x2F;.htm 2.编写 HTML结构标签 3.在&lt;body&gt;中使用&lt;h1&gt;定义标题字体 4.使用&lt;img&gt;标签定义图片 5.保存后，使用浏览器打开该文件 标签 描述 &lt;HTML&gt; 定义 HTML 文档 &lt;head&gt; 定义关于文档的信息 &lt;title&gt; 定义文">
<meta property="og:type" content="article">
<meta property="og:title" content="HTML">
<meta property="og:url" content="https://ismaxu.com/2017/09/23/HTML/index.html">
<meta property="og:site_name" content="水榭听泉">
<meta property="og:description" content="快速入门 1.新建文本文件，后缀名改为 .html&#x2F;.htm 2.编写 HTML结构标签 3.在&lt;body&gt;中使用&lt;h1&gt;定义标题字体 4.使用&lt;img&gt;标签定义图片 5.保存后，使用浏览器打开该文件 标签 描述 &lt;HTML&gt; 定义 HTML 文档 &lt;head&gt; 定义关于文档的信息 &lt;title&gt; 定义文">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg">
<meta property="article:published_time" content="2017-09-23T08:04:00.000Z">
<meta property="article:modified_time" content="2022-08-27T14:55:18.156Z">
<meta property="article:author" content="Ruoneo">
<meta property="article:tag" content="前端">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg"><link rel="shortcut icon" href="/img/avatar.jpg"><link rel="canonical" href="https://ismaxu.com/2017/09/23/HTML/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
root: '/',
algolia: undefined,
localSearch: {"path":"/search.xml","preload":false,"languages":{"hits_empty":"找不到您查询的内容：${query}"}},
translate: undefined,
noticeOutdate: undefined,
highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
copy: {
success: '复制成功',
error: '复制错误',
noSupport: '浏览器不支持'
},
relativeDate: {
homepage: false,
post: false
},
runtime: '',
date_suffix: {
just: '刚刚',
min: '分钟前',
hour: '小时前',
day: '天前',
month: '个月前'
},
copyright: undefined,
lightbox: 'fancybox',
Snackbar: undefined,
source: {
justifiedGallery: {
js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
}
},
isPhotoFigcaption: false,
islazyload: true,
isAnchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
title: 'HTML',
isPost: true,
isHome: false,
isHighlightShrink: false,
isToc: true,
postUpdate: '2022-08-27 22:55:18'
}</script><noscript><style type="text/css">
#nav {
opacity: 1
}
.justified-gallery img {
opacity: 1
}
#recent-posts time,
#post-meta time {
display: inline !important
}
</style></noscript><script>(win=>{
win.saveToLocal = {
set: function setWithExpiry(key, value, ttl) {
if (ttl === 0) return
const now = new Date()
const expiryDay = ttl * 86400000
const item = {
value: value,
expiry: now.getTime() + expiryDay,
}
localStorage.setItem(key, JSON.stringify(item))
},
get: function getWithExpiry(key) {
const itemStr = localStorage.getItem(key)
if (!itemStr) {
return undefined
}
const item = JSON.parse(itemStr)
const now = new Date()
if (now.getTime() > item.expiry) {
localStorage.removeItem(key)
return undefined
}
return item.value
}
}
win.getScript = url => new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = url
script.async = true
script.onerror = reject
script.onload = script.onreadystatechange = function() {
const loadState = this.readyState
if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
script.onload = script.onreadystatechange = null
resolve()
}
document.head.appendChild(script)
})
win.activateDarkMode = function () {
document.documentElement.setAttribute('data-theme', 'dark')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
}
}
win.activateLightMode = function () {
document.documentElement.setAttribute('data-theme', 'light')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
}
}
const t = saveToLocal.get('theme')
if (t === 'dark') activateDarkMode()
else if (t === 'light') activateLightMode()
const asideStatus = saveToLocal.get('aside-status')
if (asideStatus !== undefined) {
if (asideStatus === 'hide') {
document.documentElement.classList.add('hide-aside')
} else {
document.documentElement.classList.remove('hide-aside')
}
}
const detectApple = () => {
if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
document.documentElement.classList.add('apple')
}
}
detectApple()
})(window)</script><meta name="generator" content="Hexo 6.2.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/img/avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">64</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">26</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">4</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/messageboard/"><i class="fa-fw fas fa-comment-dots"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/links/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">水榭听泉</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="/messageboard/"><i class="fa-fw fas fa-comment-dots"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/links/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">HTML<a class="post-edit-link" href="https://git.ismaxu.com/ruoneo/hexo-generator/src/branch/main/source/_posts/HTML.md" title="编辑" target="_blank"><i class="fas fa-pencil-alt"></i></a></h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2017-09-23T08:04:00.000Z" title="发表于 2017-09-23 16:04:00">2017-09-23</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-08-27T14:55:18.156Z" title="更新于 2022-08-27 22:55:18">2022-08-27</time></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">899</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>3分钟</span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="快速入门">快速入门</h2>
<p>1.新建文本文件，后缀名改为 .html/.htm</p>
<p>2.编写 HTML结构标签</p>
<p>3.在&lt;body&gt;中使用&lt;h1&gt;定义标题字体</p>
<p>4.使用&lt;img&gt;标签定义图片</p>
<p>5.保存后，使用浏览器打开该文件</p>
<table>
<thead>
<tr>
<th>标签</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>&lt;HTML&gt;</td>
<td>定义 HTML 文档</td>
</tr>
<tr>
<td>&lt;head&gt;</td>
<td>定义关于文档的信息</td>
</tr>
<tr>
<td>&lt;title&gt;</td>
<td>定义文档的标题</td>
</tr>
<tr>
<td>&lt;body&gt;</td>
<td>定义文档的主体</td>
</tr>
</tbody>
</table>
<h2 id="基础标签">基础标签</h2>
<table>
<thead>
<tr>
<th>标签</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>&lt;h1&gt;  ~ &lt;h6&gt;</td>
<td>定义标题，h1最大，h6最小</td>
</tr>
<tr>
<td>&lt;font&gt;</td>
<td>定义文本的字体、字体尺寸、字体颜色</td>
</tr>
<tr>
<td>&lt;b&gt;</td>
<td>定义粗体文本</td>
</tr>
<tr>
<td>&lt;i&gt;</td>
<td>定义斜体文本</td>
</tr>
<tr>
<td>&lt;u&gt;</td>
<td>定义文本下划线</td>
</tr>
<tr>
<td>&lt;center&gt;</td>
<td>定义文本居中</td>
</tr>
<tr>
<td>&lt;p&gt;</td>
<td>定义段落</td>
</tr>
<tr>
<td>&lt;br&gt;</td>
<td>定义折行</td>
</tr>
<tr>
<td>&lt;hr&gt;</td>
<td>定义水平线</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>HTML 原代码</th>
<th>显示结果</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>&amp;lt;</td>
<td>&lt;</td>
<td>小于号或显示标记</td>
</tr>
<tr>
<td>&amp;gt ;</td>
<td>&gt;</td>
<td>大于号或显示标记</td>
</tr>
<tr>
<td>&amp;amp;</td>
<td>&amp;</td>
<td>可用于显示其它特殊字符</td>
</tr>
<tr>
<td>&amp;quot;</td>
<td>“</td>
<td>引号</td>
</tr>
<tr>
<td>&amp;reg;</td>
<td>®</td>
<td>已注册</td>
</tr>
<tr>
<td>&amp;copy;</td>
<td>©</td>
<td>版权</td>
</tr>
<tr>
<td>&amp;trade;</td>
<td>™</td>
<td>商标</td>
</tr>
<tr>
<td>&amp;nbsp;</td>
<td></td>
<td>不断行的空白</td>
</tr>
</tbody>
</table>
<h2 id="图片、音频、视频标签">图片、音频、视频标签</h2>
<table>
<thead>
<tr>
<th>标签</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>&lt;img&gt;</td>
<td>定义图片</td>
</tr>
<tr>
<td>&lt;audio&gt;</td>
<td>定义音频</td>
</tr>
<tr>
<td>&lt;video&gt;</td>
<td>定义视频</td>
</tr>
</tbody>
</table>
<ul>
<li>
<p>img：定义图片</p>
<ul>
<li>src：规定显示图像的 URL</li>
<li>height：定义图像的高度</li>
<li>width：定义图像的宽度</li>
</ul>
</li>
<li>
<p>audio：定义音频。支持的音频格式：MP3、WAV、OGG</p>
<ul>
<li>src：规定音频的 URL</li>
<li>controls：显示播放控件</li>
</ul>
</li>
<li>
<p>video：定义视频。支持的音频格式：MP4, WebM、OGG</p>
<ul>
<li>src：规定视频的 URL</li>
<li>controls：显示播放控件</li>
</ul>
</li>
</ul>
<h3 id="超链接标签">超链接标签</h3>
<table>
<thead>
<tr>
<th>标签</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>&lt;a&gt;</td>
<td>定义超链接，用于链接到另一个资源</td>
</tr>
</tbody>
</table>
<ul>
<li>href：指定访问资源的URL</li>
<li>target：指定打开资源的方式
<ul>
<li>_self:默认值，在当前页面打开
<ul>
<li>_blank：在空白页面打开</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="列表标签">列表标签</h3>
<table>
<thead>
<tr>
<th>标签</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>&lt;ol&gt;</td>
<td>定义有序列表</td>
</tr>
<tr>
<td>&lt;ul&gt;</td>
<td>定义无序列表</td>
</tr>
<tr>
<td>&lt;li&gt;</td>
<td>定义列表项</td>
</tr>
</tbody>
</table>
<ul>
<li>type：设置符号的类型</li>
</ul>
<h3 id="表格标签">表格标签</h3>
<table>
<thead>
<tr>
<th>标签</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>&lt;table&gt;</td>
<td>定义表格</td>
</tr>
<tr>
<td>&lt;tr&gt;</td>
<td>定义行</td>
</tr>
<tr>
<td>&lt;td&gt;</td>
<td>定义单元格</td>
</tr>
<tr>
<td>&lt;th&gt;</td>
<td>定义表头单元格</td>
</tr>
</tbody>
</table>
<ul>
<li>
<p>table：设置符号的类型</p>
<pre><code> * table：定义表格
* width：宽度
* border：边框
* cellpadding：定义内容和单元格的距离
* cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
* bgcolor：背景色
* align：对齐方式
* tr：定义行
* bgcolor：背景色
* align：对齐方式
* td：定义单元格
* colspan：合并列
* rowspan：合并行
* th：定义表头单元格
* &lt;caption&gt;：表格标题
</code></pre>
</li>
</ul>
<h3 id="布局标签">布局标签</h3>
<table>
<thead>
<tr>
<th>标签</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>&lt;div&gt;</td>
<td>定义 HTML 文档中的一个区域部分，经常与 CSS 一起使用，用来布局网页</td>
</tr>
<tr>
<td>&lt;span&gt;</td>
<td>用于组合行内元素。</td>
</tr>
</tbody>
</table>
<h3 id="表单标签">表单标签</h3>
<table>
<thead>
<tr>
<th>标签</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>&lt;form&gt;</td>
<td>定义表单</td>
</tr>
<tr>
<td>&lt;input&gt;</td>
<td>定义表单项，通过type属性控制输入形式</td>
</tr>
<tr>
<td>&lt;label&gt;</td>
<td>为表单项定义标注</td>
</tr>
<tr>
<td>&lt;select&gt;</td>
<td>定义下拉列表</td>
</tr>
<tr>
<td>&lt;option&gt;</td>
<td>定义下拉列表的列表项</td>
</tr>
<tr>
<td>&lt;textarea&gt;</td>
<td>定义文本域</td>
</tr>
</tbody>
</table>
<h4 id="type取值">type取值</h4>
<table>
<thead>
<tr>
<th>type 取值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>text</td>
<td>默认值。定义单行的输入字段</td>
</tr>
<tr>
<td>password</td>
<td>定义密码字段</td>
</tr>
<tr>
<td>radio</td>
<td>定义单选按钮</td>
</tr>
<tr>
<td>checkbox</td>
<td>定义复选框</td>
</tr>
<tr>
<td>file</td>
<td>定义文件上传按钮</td>
</tr>
<tr>
<td>hidden</td>
<td>定义隐藏的输入字段</td>
</tr>
<tr>
<td>submit</td>
<td>定义提交按钮，提交按钮会把表单数据发送到服务器</td>
</tr>
<tr>
<td>reset</td>
<td>定义重置按钮，重置按钮会清除表单中的所有数据</td>
</tr>
<tr>
<td>button</td>
<td>定义可点击按钮</td>
</tr>
</tbody>
</table>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://ismaxu.com">Ruoneo</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://ismaxu.com/2017/09/23/HTML/">https://ismaxu.com/2017/09/23/HTML/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </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="https://ismaxu.com" target="_blank">水榭听泉</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%89%8D%E7%AB%AF/">前端</a></div><div class="post_share"><div class="social-share" data-image="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/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="/2017/10/02/JavaScript/"><img class="prev-cover" src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.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">JavaScript</div></div></a></div><div class="next-post pull-right"><a href="/2017/09/10/HTML&amp;CSS/"><img class="next-cover" src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.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">HTML&amp;CSS</div></div></a></div></nav><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div><div id="comment-switch"><span class="first-comment">Twikoo</span><span class="switch-btn"></span><span class="second-comment">Gitalk</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div><div><div id="gitalk-container"></div></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="/img/avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Ruoneo</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">64</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">26</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">4</div></a></div><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/ruoneo" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:xum321@gmail.com" target="_blank" title="Email"><i class="fas fa-envelope"></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">感谢来访。希望这里有对你有帮助的内容。</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"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8"><span class="toc-number">1.</span> <span class="toc-text">快速入门</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9F%BA%E7%A1%80%E6%A0%87%E7%AD%BE"><span class="toc-number">2.</span> <span class="toc-text">基础标签</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%BE%E7%89%87%E3%80%81%E9%9F%B3%E9%A2%91%E3%80%81%E8%A7%86%E9%A2%91%E6%A0%87%E7%AD%BE"><span class="toc-number">3.</span> <span class="toc-text">图片、音频、视频标签</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%B6%85%E9%93%BE%E6%8E%A5%E6%A0%87%E7%AD%BE"><span class="toc-number">3.1.</span> <span class="toc-text">超链接标签</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%97%E8%A1%A8%E6%A0%87%E7%AD%BE"><span class="toc-number">3.2.</span> <span class="toc-text">列表标签</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%A1%A8%E6%A0%BC%E6%A0%87%E7%AD%BE"><span class="toc-number">3.3.</span> <span class="toc-text">表格标签</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B8%83%E5%B1%80%E6%A0%87%E7%AD%BE"><span class="toc-number">3.4.</span> <span class="toc-text">布局标签</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE"><span class="toc-number">3.5.</span> <span class="toc-text">表单标签</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#type%E5%8F%96%E5%80%BC"><span class="toc-number">3.5.1.</span> <span class="toc-text">type取值</span></a></li></ol></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 no-cover"><div class="content"><a class="title" href="/2024/07/06/git%E5%B1%80%E5%9F%9F%E7%BD%91%E9%83%A8%E7%BD%B2%E6%96%B9%E6%B3%95/" title="git局域网部署方法">git局域网部署方法</a><time datetime="2024-07-06T08:13:10.000Z" title="发表于 2024-07-06 16:13:10">2024-07-06</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/09/25/%E5%85%B3%E4%BA%8EPyQt%E7%9A%84connect%E4%BC%A0%E5%85%A5lambda%E5%87%BD%E6%95%B0%E4%BD%9C%E4%B8%BA%E5%8F%82%E6%95%B0%E8%B0%83%E7%94%A8%E6%A7%BD%E5%87%BD%E6%95%B0%E7%9A%84%E4%B8%80%E7%82%B9%E6%80%9D%E8%80%83/" title="关于PyQt的connect传入lambda函数作为参数调用槽函数的一点思考">关于PyQt的connect传入lambda函数作为参数调用槽函数的一点思考</a><time datetime="2023-09-25T13:53:35.000Z" title="发表于 2023-09-25 21:53:35">2023-09-25</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2022/03/30/%E5%A4%8D%E4%B9%A05/" title="Spring注解">Spring注解</a><time datetime="2022-03-30T07:22:16.000Z" title="发表于 2022-03-30 15:22:16">2022-03-30</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2022/03/30/%E5%A4%8D%E4%B9%A04/" title="Spring">Spring</a><time datetime="2022-03-30T02:23:10.000Z" title="发表于 2022-03-30 10:23:10">2022-03-30</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2022/03/22/MultiDTI_%20drug%E2%80%93target%20interaction%20prediction%20based%20on%20multi-modal%20representation%20learning%20to%20bridge%20the%20gap%20between%20new%20chemical/" title="MultiDTI_ drug–target interaction prediction based on multi-modal representation learning to bridge the gap between new chemical">MultiDTI_ drug–target interaction prediction based on multi-modal representation learning to bridge the gap between new chemical</a><time datetime="2022-03-22T06:29:57.000Z" title="发表于 2022-03-22 14:29:57">2022-03-22</time></div></div></div></div></div></div></main><footer id="footer" style="background: color(orange)"><div id="footer-wrap"><div class="copyright">&copy;2024 By Ruoneo</div><div class="footer_custom_text"><div><a target="_blank" rel="noopener" href="https://beian.miit.gov.cn"><img class="icp-icon"><span>豫ICP备 2022020326号</span></a>&nbsp|&nbsp<a target="_blank" rel="noopener" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41020202000143"><span>豫公网安备 41020202000143号</span></a></div></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><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><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></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="/js/search/local-search.js"></script><div class="js-pjax"><script>(()=>{
const init = () => {
twikoo.init(Object.assign({
el: '#twikoo-wrap',
envId: 'https://tk.ismaxu.com',
region: '',
onCommentLoaded: function () {
btf.loadLightbox(document.querySelectorAll('#twikoo .tk-content img:not(.tk-owo-emotion)'))
}
}, null))
}
const getCount = () => {
const countELement = document.getElementById('twikoo-count')
if(!countELement) return
twikoo.getCommentsCount({
envId: 'https://tk.ismaxu.com',
region: '',
urls: [window.location.pathname],
includeReply: false
}).then(function (res) {
countELement.innerText = res[0].count
}).catch(function (err) {
console.error(err);
});
}
const runFn = () => {
init()
}
const loadTwikoo = () => {
if (typeof twikoo === 'object') {
setTimeout(runFn,0)
return
}
getScript('https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js').then(runFn)
}
if ('Twikoo' === 'Twikoo' || !false) {
if (false) btf.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo)
else loadTwikoo()
} else {
window.loadOtherComment = () => {
loadTwikoo()
}
}
})()</script><script>function addGitalkSource () {
const ele = document.createElement('link')
ele.rel = 'stylesheet'
ele.href= 'https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.css'
document.getElementsByTagName('head')[0].appendChild(ele)
}
function loadGitalk () {
function initGitalk () {
var gitalk = new Gitalk(Object.assign({
clientID: 'f9bab17720653ab07b39',
clientSecret: 'e77fbcac5c4043ddf8d845aee7d6d5f118f607e2',
repo: 'ruoneo-comment-repo',
owner: 'ruoneo',
admin: ['ruoneo'],
id: '4d8105d2b52a45e0a027f5fd75123479',
updateCountCallback: commentCount
},null))
gitalk.render('gitalk-container')
}
if (typeof Gitalk === 'function') initGitalk()
else {
addGitalkSource()
getScript('https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.js').then(initGitalk)
}
}
function commentCount(n){
let isCommentCount = document.querySelector('#post-meta .gitalk-comment-count')
if (isCommentCount) {
isCommentCount.innerHTML= n
}
}
if ('Twikoo' === 'Gitalk' || !false) {
if (false) btf.loadComment(document.getElementById('gitalk-container'), loadGitalk)
else loadGitalk()
} else {
function loadOtherComment () {
loadGitalk()
}
}</script></div></div></body></html>