HTML 标签入门
学习 HTML 最好的方式就是边学边做实验
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>
指定文档类型为HTML5
<!DOCTYPE html>
为文档设定主语言
<html lang="zh-CN">
几个元素
- 元素是 HTML 页面的根元素
- 元素包含了文档的元（meta）数据
- 元素包含了可见的页面内容
HTML 头部
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head>
部分资料来自：head标签里有什么
元素</h4><pre><code class="lang-html"><title>网页标题</title>
</code></pre>
<ul>
<li>网页标题</li><li>添加书签时作为书签名</li><li>搜索引擎的搜索结果</li></ul>
<p><a name="20363c37"></a></p>
<h4 id="ah9jom"><a name="ah9jom" class="reference-link"></a><span class="header-link octicon octicon-link"></span><meta> 元素</h4><blockquote>
<p><strong><meta> 元素用于描述元数据</strong></p>
</blockquote>
<p>**<br />关于meta元素的更多内容，可以查看：<a rel="nofollow" href="https://www.yuque.com/gangafengliu/frontend-rookie/html-meta">HTML常用meta标签总结</a></p>
<p><a name="f218d439"></a></p>
<h4 id="1bygkg"><a name="1bygkg" class="reference-link"></a><span class="header-link octicon octicon-link"></span>为站点增加自定义图标</h4><pre><code class="lang-html"><link rel="shortcut icon" href="img/favicon.jpg" type="image/x-icon">
</code></pre>
<p><a name="08d59ff3"></a></p>
<h4 id="b6gozm"><a name="b6gozm" class="reference-link"></a><span class="header-link octicon octicon-link"></span>在HTML中使用CSS和JavaScript</h4><pre><code class="lang-html"><link rel="stylesheet" href="my-css-file.css">
</code></pre>
<blockquote>
<ul>
<li><code>rel="stylesheet"</code>：这是文档的样式表</li><li><code>href="my-css-file.css"</code>：样式表文件的路径</li></ul>
</blockquote>
<pre><code class="lang-html"><script src="my-js-file.js"></script>
</code></pre>
<blockquote>
<ul>
<li><code><script></code>应放在尾部，确保在加载脚本之前浏览器已经解析了HTML内容</li></ul>
</blockquote>
<hr>
<p><a name="4acfad3e"></a></p>
<h3 id="ogg12"><a name="ogg12" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML 章节标签</h3><p><a name="5f0affa3"></a></p>
<h4 id="e4rp7e"><a name="e4rp7e" class="reference-link"></a><span class="header-link octicon octicon-link"></span>标题 <h1> ~ <h6></h4><ul>
<li>定义标题</li></ul>
<pre><code class="lang-html"><h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</code></pre>
<p><a name="675f2ee6"></a></p>
<h4 id="8lzork"><a name="8lzork" class="reference-link"></a><span class="header-link octicon octicon-link"></span>区域 <section></h4><ul>
<li>定义一块区域（章节、头部、底部等）</li></ul>
<pre><code class="lang-html"><section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
</code></pre>
<p><a name="c9a58579"></a></p>
<h4 id="e04s33"><a name="e04s33" class="reference-link"></a><span class="header-link octicon octicon-link"></span>文章 <article></h4><ul>
<li>定义独立的内容（论坛帖子、博客文章、新闻故事、评论）</li></ul>
<pre><code class="lang-html"><article>
<h1>Internet Explorer 9</h1>
<p> Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>
</article>
</code></pre>
<p><a name="8d0de356"></a></p>
<h4 id="bdr30s"><a name="bdr30s" class="reference-link"></a><span class="header-link octicon octicon-link"></span>段落 <p></h4><ul>
<li>定义段落</li></ul>
<pre><code class="lang-html"><p>这是一个段落。</p>
</code></pre>
<p><a name="f88058ff"></a></p>
<h4 id="67r4sb"><a name="67r4sb" class="reference-link"></a><span class="header-link octicon octicon-link"></span>页眉 <header></h4><ul>
<li>定义文档或文档一部分区域的页眉</li></ul>
<pre><code class="lang-html"><header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
</code></pre>
<p><a name="816a917d"></a></p>
<h4 id="f5cts3"><a name="f5cts3" class="reference-link"></a><span class="header-link octicon octicon-link"></span>页脚 <footer></h4><ul>
<li>定义文档或文档一部分区域的页脚</li></ul>
<pre><code class="lang-html"><footer>
<p>©</p>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01"></time></p>
</footer>
</code></pre>
<p><a name="6440ee20"></a></p>
<h4 id="azhp6n"><a name="azhp6n" class="reference-link"></a><span class="header-link octicon octicon-link"></span>主要内容 <main></h4><ul>
<li>指定文档的主体内容（是唯一的）</li></ul>
<pre><code class="lang-html"><main>
<p>这是主体内容</p>
</main>
</code></pre>
<p><a name="89801b0d"></a></p>
<h4 id="1u5ma1"><a name="1u5ma1" class="reference-link"></a><span class="header-link octicon octicon-link"></span>旁支内容 <aside></h4><ul>
<li>定义<article>标签外的内容</li></ul>
<pre><code class="lang-html"><aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
</code></pre>
<p><a name="6b6ca421"></a></p>
<h4 id="ey2n09"><a name="ey2n09" class="reference-link"></a><span class="header-link octicon octicon-link"></span>划分 <div></h4><ul>
<li>用于组合块级元素，以便通过 CSS 来对这些元素进行格式化</li></ul>
<pre><code class="lang-html"><div style="color:#0000FF">
<h3>这是一个在 div 元素中的标题。</h3>
<p>这是一个在 div 元素中的文本。</p>
</div>
</code></pre>
<hr>
<p><a name="97aa8e4f"></a></p>
<h3 id="2szcgs"><a name="2szcgs" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML 全局属性</h3><blockquote>
<p>所有标签都具有的属性</p>
</blockquote>
<table>
<thead>
<tr>
<th style="text-align:center">属性</th>
<th style="text-align:center">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center">class</td>
<td style="text-align:center">元素的类名</td>
</tr>
<tr>
<td style="text-align:center">contenteditable</td>
<td style="text-align:center">是否可以编辑元素的内容</td>
</tr>
<tr>
<td style="text-align:center">hidden</td>
<td style="text-align:center">对元素进行隐藏</td>
</tr>
<tr>
<td style="text-align:center">id</td>
<td style="text-align:center">元素唯一的id</td>
</tr>
<tr>
<td style="text-align:center">style</td>
<td style="text-align:center">元素的行内样式</td>
</tr>
<tr>
<td style="text-align:center">tabindex</td>
<td style="text-align:center">Tab键控制次序</td>
</tr>
<tr>
<td style="text-align:center">title</td>
<td style="text-align:center">元素的额外信息</td>
</tr>
</tbody>
</table>
<hr>
<p><a name="4bf794ab"></a></p>
<h3 id="3555b8"><a name="3555b8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML 默认样式</h3><ul>
<li><p><strong>不同浏览器拥有各自的默认样式</strong></p>
<blockquote>
<p><a rel="nofollow" href="https://segmentfault.com/a/1190000011611140">浏览器默认值汇总</a></p>
</blockquote>
</li><li><p><strong>在Chrome中查看默认样式</strong>
<br />Chrome开发者工具 —> Elements —>Styles —> user agent stylesheet</p>
</li><li><strong>CSS reset</strong><blockquote>
<p><a rel="nofollow" href="https://www.yuque.com/xiuran/front-end/gug0go">CSS Reset（CSS重置） - 徐任达</a></p>
</blockquote>
</li></ul>
<hr>
<p><a name="69d71e37"></a></p>
<h3 id="2lbovp"><a name="2lbovp" class="reference-link"></a><span class="header-link octicon octicon-link"></span>HTML 内容标签</h3><p><a name="98c880f9"></a></p>
<h4 id="a0liej"><a name="a0liej" class="reference-link"></a><span class="header-link octicon octicon-link"></span>有序列表 <ol> + <li></h4><pre><code class="lang-html"><ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</code></pre>
<p><a name="aae36b07"></a></p>
<h4 id="76y96h"><a name="76y96h" class="reference-link"></a><span class="header-link octicon octicon-link"></span>无序列表 <ul> + <li></h4><pre><code class="lang-html"><ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
</code></pre>
<p><a name="4f4a3d82"></a></p>
<h4 id="1q5ac0"><a name="1q5ac0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>描述列表 <dl> + <dt> + <dd></h4><pre><code class="lang-html"><dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</code></pre>
<p><a name="4c8ce281"></a></p>
<h4 id="98jk8"><a name="98jk8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>预格式化文本 <pre></h4><ul>
<li>保留空格和换行符，字体等宽</li></ul>
<pre><code class="lang-html"><pre>
此例演示如何使用 pre 标签
对空行
和 空格
进行控制
</pre>
</code></pre>
<p><a name="7a8d71ee"></a></p>
<h4 id="b1205w"><a name="b1205w" class="reference-link"></a><span class="header-link octicon octicon-link"></span>水平线 <hr></h4><pre><code class="lang-html"><hr>
</code></pre>
<p><a name="Y5qPt"></a></p>
<h4 id="20cji8"><a name="20cji8" class="reference-link"></a><span class="header-link octicon octicon-link"></span> </h4><p><a name="g4CIT"></a></p>
<h4 id="4rz8kr"><a name="4rz8kr" class="reference-link"></a><span class="header-link octicon octicon-link"></span>换行 <br></h4><pre><code class="lang-html"><br>
</code></pre>
<p><a name="69a9f3d1"></a></p>
<h4 id="b91h4x"><a name="b91h4x" class="reference-link"></a><span class="header-link octicon octicon-link"></span>超链接 <a></h4><pre><code class="lang-html"><a href="http://www.google.com">访问谷歌</a>
</code></pre>
<p><a name="74f7f3bf"></a></p>
<h4 id="4n3zqp"><a name="4n3zqp" class="reference-link"></a><span class="header-link octicon octicon-link"></span>强调文本 <em></h4><ul>
<li>偏重语气的强调<pre><code class="lang-html"><em>强调文本</em>
</code></pre>
<a name="f1ec24f4"></a><h4 id="27p02g"><a name="27p02g" class="reference-link"></a><span class="header-link octicon octicon-link"></span>重要文本 <strong></h4><pre><code class="lang-html"><strong>加粗文本</strong>
</code></pre>
<a name="b35704e0"></a><h4 id="8ecw70"><a name="8ecw70" class="reference-link"></a><span class="header-link octicon octicon-link"></span>代码 <code></h4><pre><code class="lang-html"><code>一段代码</code>
</code></pre>
<a name="e8479fd4"></a><h4 id="4beap9"><a name="4beap9" class="reference-link"></a><span class="header-link octicon octicon-link"></span>短引用 <q></h4><pre><code class="lang-html"><p>孔子云：<q>知知而知之，不治而不知，是知也。</q></p>
</code></pre>
<a name="e5684e1b"></a><h4 id="8hhizz"><a name="8hhizz" class="reference-link"></a><span class="header-link octicon octicon-link"></span>块引用 <blockquote></h4>```html
<p>孔子云：<blockquote site="www.baidu.com">
</li></ul>
<p><pre>
知知而知之，不治而不知，是知也。
有朋自远方来，不亦乐乎！
</pre>
</blockquote>
</p>
```</p>
<p>部分资料来源：<a rel="nofollow" href="https://jirengu.com/">饥人谷</a> - <a rel="nofollow" href="https://github.com/FrankFang">方方老师</a></p>
若有收获，就点个赞吧
0 人点赞
