基础知识
简介
.html 和 .htm 两种后缀名没有区别.
示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
|
注意, 只有 <body> 区域才会在浏览器中显示.
<!DOCTYPE> 声明有助于浏览器中正确显示网页 (其不区分大小写). 如:
一些标签
HTML 标签对大小写不敏感, 但一般还是写小写标签.
标题:
1
2
3
| <h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
|
段落:
1
2
| <p>这是一个段落。</p>
<p>这是另外一个段落。</p>
|
链接:
1
| <a href="https://www.runoob.com">这是一个链接</a>
|
a 指 anchor, 用于跳转.
图像:
1
| <img decoding="async" src="/images/logo.png" width="258" height="39" />
|
换行;
一些属性
属性和属性值也是大小写不敏感, 但推荐小写.
href (hypertext reference) 属性, 指定一个链接:
1
| <a href="http://www.runoob.com">这是一个链接</a>
|
大多数元素具有的属性;
| 属性 |
描述 |
| class |
定义类名 (一个或多个) |
| id |
定义唯一 id |
| style |
规定行内样式 |
| title |
额外信息 |
标题
<hr> 可创建水平线, 用于分隔内容. 如:
1
2
3
4
5
| <p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
|
注释写法:
注意 , HTML 中的所有连续空格或空行都被算作一个空格.
格式化文本
| 标签 |
描述 |
<b> ` |
定义粗体文本 |
<em> |
定义着重文字 |
<i> |
定义斜体字 |
<small> |
定义小号字 |
<strong> |
定义加重语气 |
<sub> |
定义下标字 |
<sup> |
定义上标字 |
<ins> |
定义插入字 |
<del> |
定义删除字 |
<code> |
定义计算机代码 |
<kbd> |
定义键盘码 |
<samp> |
定义计算机代码样本 |
<var> |
定义变量 |
<pre> |
定义预格式文本 |
<abbr> |
定义缩写 |
<address> |
定义地址 |
<bdo> |
定义文字方向 |
<blockquote> |
定义长的引用 |
<q> |
定义短的引用语 |
<cite> |
定义引用、引证 |
<dfn> |
定义一个定义项目 |
头部
可以在头部中添加的标签有:
, <style>, <meta>, <link>, <script>, <noscript> 和 <base>.</p>
<p><code><link></code> 定义了文档与外部资源之间的关系. 如:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">head</span>></span><br><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"mystyle.css"</span>></span><br><span class="hljs-tag"></<span class="hljs-name">head</span>></span><br></code></pre></td></tr></table></figure>
<h2 id="CSS"><a href="#CSS" class="headerlink" title="CSS"></a>CSS</h2><p>最好用外部文件.</p>
<h2 id="区块"><a href="#区块" class="headerlink" title="区块"></a>区块</h2><p>块级元素在浏览器显示时, 通常会以新行来开始 (和结束).</p>
<p>内联元素在显示时通常不会以新行开始.</p>
<h1 id="技巧"><a href="#技巧" class="headerlink" title="技巧"></a>技巧</h1><h2 id="中文网页"><a href="#中文网页" class="headerlink" title="中文网页"></a>中文网页</h2><p>需要使用 <code><meta charset="utf-8"></code> 或者 <code><meta charset="gbk"></code></p>
</div>
<hr/>
<div>
<div class="post-metas my-3">
<div class="post-meta mr-3 d-flex align-items-center">
<i class="iconfont icon-category"></i>
<span class="category-chains">
<span class="category-chain">
<a href="/categories/Web/" class="category-chain-item">Web</a>
</span>
</span>
</div>
</div>
<div class="license-box my-3">
<div class="license-title">
<div>HTML-基础知识</div>
<div>http://example.com/2023/04/15/HTML-基础知识/</div>
</div>
<div class="license-meta">
<div class="license-meta-item">
<div>作者</div>
<div>Jie</div>
</div>
<div class="license-meta-item license-meta-date">
<div>发布于</div>
<div>2023年4月15日</div>
</div>
<div class="license-meta-item">
<div>许可协议</div>
<div>
<a target="_blank" href="https://creativecommons.org/licenses/by/4.0/">
<span class="hint--top hint--rounded" aria-label="BY - 署名">
<i class="iconfont icon-by"></i>
</span>
</a>
</div>
</div>
</div>
<div class="license-icon iconfont"></div>
</div>
<div class="post-prevnext my-3">
<article class="post-prev col-6">
<a href="/2023/04/27/Perl-Try-Tiny-%E6%A8%A1%E5%9D%97/" title="Perl-Try-Tiny-模块">
<i class="iconfont icon-arrowleft"></i>
<span class="hidden-mobile">Perl-Try-Tiny-模块</span>
<span class="visible-mobile">上一篇</span>
</a>
</article>
<article class="post-next col-6">
<a href="/2023/04/15/Perl-Curses-%E6%A8%A1%E5%9D%97/" title="Perl-Curses-模块">
<span class="hidden-mobile">Perl-Curses-模块</span>
<span class="visible-mobile">下一篇</span>
<i class="iconfont icon-arrowright"></i>
</a>
</article>
</div>
</div>
<article id="comments" lazyload>
<script type="text/javascript">
Fluid.utils.loadComments('#comments', function() {
var light = 'github-light';
var dark = 'github-dark';
var schema = document.documentElement.getAttribute('data-user-color-scheme');
if (schema === 'dark') {
schema = dark;
} else {
schema = light;
}
window.UtterancesThemeLight = light;
window.UtterancesThemeDark = dark;
var s = document.createElement('script');
s.setAttribute('src', 'https://utteranc.es/client.js');
s.setAttribute('repo', 'zKurisu/comments-utterances');
s.setAttribute('issue-term', 'pathname');
s.setAttribute('label', 'utterances');
s.setAttribute('theme', schema);
s.setAttribute('crossorigin', 'anonymous');
document.getElementById('comments').appendChild(s);
})
</script>
<noscript>Please enable JavaScript to view the comments</noscript>
</article>
</article>
</div>
</div>
</div>
<div class="side-col d-none d-lg-block col-lg-2">
<aside class="sidebar" style="margin-left: -1rem">
<div id="toc">
<p class="toc-header"><i class="iconfont icon-list"></i> 目录</p>
<div class="toc-body" id="toc-body"></div>
</div>
</aside>
</div>
</div>
</div>
<a id="scroll-top-button" aria-label="TOP" href="#" role="button">
<i class="iconfont icon-arrowup" aria-hidden="true"></i>
</a>
<div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">搜索</h4>
<button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<input type="text" id="local-search-input" class="form-control validate">
<label data-error="x" data-success="v" for="local-search-input">关键词</label>
</div>
<div class="list-group" id="local-search-result"></div>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="footer-inner">
<div class="footer-content">
<a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Jie</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Orkarin</span></a>
</div>
<div class="statistics">
<span id="busuanzi_container_site_pv" style="display: none">
总访问量
<span id="busuanzi_value_site_pv"></span>
次
</span>
<span id="busuanzi_container_site_uv" style="display: none">
总访客数
<span id="busuanzi_value_site_uv"></span>
人
</span>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.js" ></script>
<link rel="stylesheet" href="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.css" />
<script>
NProgress.configure({"showSpinner":false,"trickleSpeed":100})
NProgress.start()
window.addEventListener('load', function() {
NProgress.done();
})
</script>
<script src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js" ></script>
<script src="https://lib.baomitu.com/twitter-bootstrap/4.6.1/js/bootstrap.min.js" ></script>
<script src="/js/events.js" ></script>
<script src="/js/plugins.js" ></script>
<script src="https://lib.baomitu.com/typed.js/2.0.12/typed.min.js" ></script>
<script>
(function (window, document) {
var typing = Fluid.plugins.typing;
var subtitle = document.getElementById('subtitle');
if (!subtitle || !typing) {
return;
}
var text = subtitle.getAttribute('data-typed-text');
typing(text);
})(window, document);
</script>
<script src="/js/img-lazyload.js" ></script>
<script>
Fluid.utils.createScript('https://lib.baomitu.com/tocbot/4.18.2/tocbot.min.js', function() {
var toc = jQuery('#toc');
if (toc.length === 0 || !window.tocbot) { return; }
var boardCtn = jQuery('#board-ctn');
var boardTop = boardCtn.offset().top;
window.tocbot.init({
tocSelector : '#toc-body',
contentSelector : '.markdown-body',
headingSelector : CONFIG.toc.headingSelector || 'h1,h2,h3,h4,h5,h6',
linkClass : 'tocbot-link',
activeLinkClass : 'tocbot-active-link',
listClass : 'tocbot-list',
isCollapsedClass: 'tocbot-is-collapsed',
collapsibleClass: 'tocbot-is-collapsible',
collapseDepth : CONFIG.toc.collapseDepth || 0,
scrollSmooth : true,
headingsOffset : -boardTop
});
if (toc.find('.toc-list-item').length > 0) {
toc.css('visibility', 'visible');
}
});
</script>
<script src=https://lib.baomitu.com/clipboard.js/2.0.10/clipboard.min.js></script>
<script>Fluid.plugins.codeWidget();</script>
<script>
Fluid.utils.createScript('https://lib.baomitu.com/anchor-js/4.3.1/anchor.min.js', function() {
window.anchors.options = {
placement: CONFIG.anchorjs.placement,
visible : CONFIG.anchorjs.visible
};
if (CONFIG.anchorjs.icon) {
window.anchors.options.icon = CONFIG.anchorjs.icon;
}
var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
var res = [];
for (var item of el) {
res.push('.markdown-body > ' + item.trim());
}
if (CONFIG.anchorjs.placement === 'left') {
window.anchors.options.class = 'anchorjs-link-left';
}
window.anchors.add(res.join(', '));
});
</script>
<script>
Fluid.utils.createScript('https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.js', function() {
Fluid.plugins.fancyBox();
});
</script>
<script>Fluid.plugins.imageCaption();</script>
<script>
if (!window.MathJax) {
window.MathJax = {
tex : {
inlineMath: { '[+]': [['$', '$']] }
},
loader : {
load: ['ui/lazy']
},
options: {
renderActions: {
insertedScript: [200, () => {
document.querySelectorAll('mjx-container').forEach(node => {
let target = node.parentNode;
if (target.nodeName.toLowerCase() === 'li') {
target.parentNode.classList.add('has-jax');
}
});
}, '', false]
}
}
};
} else {
MathJax.startup.document.state(0);
MathJax.texReset();
MathJax.typeset();
MathJax.typesetPromise();
}
</script>
<script src="https://lib.baomitu.com/mathjax/3.2.1/es5/tex-mml-chtml.js" ></script>
<script src="/js/local-search.js" ></script>
<script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>
<!-- 主题的启动项，将它保持在最底部 -->
<!-- the boot of the theme, keep it at the bottom -->
<script src="/js/boot.js" ></script>
<noscript>
<div class="noscript-warning">博客在允许 JavaScript 运行的环境下浏览效果更佳</div>
</noscript>
</body>
</html>