浅学HTML

浅学HTML

Jexi Jiang Lv3
  2022-11-05 21:22:58 2022-11-05 21:22:58 Created   2024-01-16 09:22:39 2024-01-16 09:22:39 Updated      677 Words  2 Mins  

初步了解

  • HTML :hyper text markup language（超文本==标记==语言）
  • 目前最新版本：HTML5+CSS3
  • W3C : world wide web consortium(万维网联盟)
  • .org结尾代表开源的意思
  • 使用emmet插件：！+tab可自动生成一个html结构(需要中文)

学习使用常见的HTML标签

什么是HTML标签

  • HTML 标签是由尖括号包围的关键词，比如
  • HTML 标签通常是成对出现的，比如 ** **和

HTML标签有哪些

  • 声明为 HTML5 文档（又叫web 页面）

  • 元素是 HTML 页面的根元素

  • 元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。（通常需要定义此格式避免输出中文乱码）

  • </strong> 元素描述了文档的标题</p> </li> <li><p><strong><body></strong> 元素包含了可见的页面内容</p> </li> <li><p>**<style>**元素可以引入css</p> </li> <li><p><strong><h1></strong> 元素定义一个大标题</p> <ul> <li>**<h2>**二级标题</li> <li>**<h3>**三级标题</li> <li>**<h6>**最多可以定义六级标题</li> </ul> </li> <li><p><strong><p></strong> 元素定义一个段落</p> </li> <li><p>**<a>**元素定义了一个链接</p> </li> <li><p>**<img>**元素定义了一个图像</p> </li> <li><p>**<br>**元素表示换行</p> </li> <li><p>**<div>**元素定义 HTML 文档中的一个区域部分</p> </li> <li><p>**<botton>**元素定义一个按钮</p> </li> <li><p>**<b>**元素可让字体加粗</p> </li> </ul> <h3 id="HTML标签和元素有何区别"><a href="#HTML标签和元素有何区别" class="headerlink" title="HTML标签和元素有何区别"></a>HTML标签和元素有何区别</h3><ul> <li>元素会包含开始标签与结束标签，例如：<p>这是一个段落。</p></li> </ul> <h3 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h3><ul> <li><p>不要忘记结束标签</p> <ul> <li><p><~/>尖括号内加个斜杠表示结束</p> </li> <li><p><strong>结束标签可避免未知的错误</strong></p> </li> </ul> </li> <li><p>养成好习惯，使用小写标签</p> </li> </ul> <h2 id="学习理解标签中的块级元素与内联元素"><a href="#学习理解标签中的块级元素与内联元素" class="headerlink" title="学习理解标签中的块级元素与内联元素"></a>学习理解标签中的块级元素与内联元素</h2><h3 id="块级元素"><a href="#块级元素" class="headerlink" title="块级元素"></a>块级元素</h3><h5 id="什么是块级元素"><a href="#什么是块级元素" class="headerlink" title="什么是块级元素"></a>什么是块级元素</h5><ul> <li>块级元素显示时会以新行开始或结束</li> </ul> <h5 id="块级元素有哪些"><a href="#块级元素有哪些" class="headerlink" title="块级元素有哪些"></a>块级元素有哪些</h5><ul> <li><strong><div></strong></li> <li><strong><h1></strong></li> <li><strong><p></strong></li> </ul> <h3 id="内联元素"><a href="#内联元素" class="headerlink" title="内联元素"></a>内联元素</h3><h5 id="什么是内联元素"><a href="#什么是内联元素" class="headerlink" title="什么是内联元素"></a>什么是内联元素</h5><ul> <li>内联元素显示时通常不会以新行开始</li> </ul> <h5 id="内联元素有哪些"><a href="#内联元素有哪些" class="headerlink" title="内联元素有哪些"></a>内联元素有哪些</h5><ul> <li><strong><a></strong></li> <li><strong><b></strong></li> <li><strong><br></strong></li> <li><strong><img></strong></li> </ul> <h3 id="二者联系"><a href="#二者联系" class="headerlink" title="二者联系"></a>二者联系</h3><ul> <li>大多数html元素可以被分为块级元素和内联元素</li> </ul> <h2 id="学习HTML标签的样式"><a href="#学习HTML标签的样式" class="headerlink" title="学习HTML标签的样式"></a>学习HTML标签的样式</h2><ul> <li><p>html标题</p> <ul> <li><code><h1>这是标题</h1></code></li> </ul> </li> <li><p>html段落</p> <ul> <li><code><p>这是段落</p></code></li> </ul> </li> <li><p>html链接</p> <ul> <li><code><a href="https://github.com/ntgeek/2022-Geek">这是一个链接</a></code><ul> <li>href 属性：描述了链接的目标</li> </ul> </li> </ul> </li> <li><p>html图像</p> <ul> <li><p><code><img src="图片地址" alt="图片描述" width="304" height="228"></code></p> <ul> <li><p>src属性是引入图片的地址</p> </li> <li><p>alt 属性用来为图像定义一串预备的可替换的文本。</p> </li> <li><p>之后两个属性设置了图片的宽度与高度</p> </li> </ul> </li> <li><p>背景图片</p> <ul> <li><pre><code class="HTML"><style> body{ background-size: 125%; background-image:url('https://pic.3gbizhi.com/2019/0930/20190930040036442.jpg'); } </style> </code></pre> <p>(摘自制作页面中的代码片段)</p> </li> </ul> </li> </ul> </li> </ul> </div> <div class="post-copyright-info w-full my-8 px-2 sm:px-6 md:px-8"> <div class="article-copyright-info-container"> <ul> <li><strong>Title:</strong> 浅学HTML</li> <li><strong>Author:</strong> Jexi Jiang</li> <li><strong>Created at :</strong> 2022-11-05 21:22:58</li> <li> <strong>Updated at :</strong> 2024-01-16 09:22:39 </li> <li> <strong>Link:</strong> https://milefer7.github.io/Jaxi-Jiang-Blog/2022/11/05/浅学HTML/ </li> <li> <strong> License: </strong> This work is licensed under <a class="license" target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0">CC BY-NC-SA 4.0</a>. </li> </ul> </div> </div> <ul class="post-tags-box text-lg mt-1.5 flex-wrap justify-center flex md:hidden"> <li class="tag-item mx-0.5"> <a href="/Jaxi-Jiang-Blog/tags/HTML/">#HTML</a>  </li> </ul> <div class="article-nav my-8 flex justify-between items-center px-2 sm:px-6 md:px-8"> <div class="article-prev border-border-color shadow-redefine-flat shadow-shadow-color-2 rounded-medium px-4 py-2 hover:shadow-redefine-flat-hover hover:shadow-shadow-color-2"> <a class="prev" rel="prev" href="/Jaxi-Jiang-Blog/2023/01/08/python%E7%AC%94%E8%AE%B0/" > <span class="left arrow-icon flex justify-center items-center"> <i class="fa-solid fa-chevron-left"></i> </span> <span class="title flex justify-center items-center"> <span class="post-nav-title-item">python笔记</span> <span class="post-nav-item">Prev posts</span> </span> </a> </div> <div class="article-next border-border-color shadow-redefine-flat shadow-shadow-color-2 rounded-medium px-4 py-2 hover:shadow-redefine-flat-hover hover:shadow-shadow-color-2"> <a class="next" rel="next" href="/Jaxi-Jiang-Blog/2022/11/03/git%E4%BD%BF%E7%94%A8%E5%BF%83%E5%BE%97/" > <span class="title flex justify-center items-center"> <span class="post-nav-title-item">git使用心得</span> <span class="post-nav-item">Next posts</span> </span> <span class="right arrow-icon flex justify-center items-center"> <i class="fa-solid fa-chevron-right"></i> </span> </a> </div> </div> <div class="comment-container px-2 sm:px-6 md:px-8 pb-8"> <div class="comments-container mt-10 w-full "> <div id="comment-anchor" class="w-full h-2.5"></div> <div class="comment-area-title w-full my-1.5 md:my-2.5 text-xl md:text-3xl font-bold"> Comments </div> <div id="gitalk-container"></div> <script data-swup-reload-script src="//cdn.staticfile.org/gitalk/1.8.0/gitalk.min.js"></script> <script data-swup-reload-script> function loadGitalk() { let __gitalk__pathname = decodeURI(location.pathname); const __gitalk__pathnameLength = __gitalk__pathname.length; const __gitalk__pathnameMaxLength = 50; if (__gitalk__pathnameLength > __gitalk__pathnameMaxLength) { __gitalk__pathname = __gitalk__pathname.substring(0, __gitalk__pathnameMaxLength - 3) + '...'; } try { Gitalk && new Gitalk({ clientID: 'f521075bf18f5720b0b8', clientSecret: 'dda4aa3c41d71263939f577dd2640ed5dd9f4b1d', repo: 'Blog_gitalk', owner: 'Milefer7', admin: ['Milefer7'], id: __gitalk__pathname, language: 'en', proxy: 'https://github.com/login/oauth/access_token' }).render('gitalk-container'); } catch (e) { window.Gitalk = null; } } if ('true') { const loadGitalkTimeout = setTimeout(() => { loadGitalk(); clearTimeout(loadGitalkTimeout); }, 1000); } else { window.addEventListener('DOMContentLoaded', loadGitalk); } </script> </div> </div> </div> <div class="toc-content-container"> <div class="post-toc-wrap"> <div class="post-toc"> <div class="toc-title">On this page</div> <div class="page-title">浅学HTML</div> <ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%9D%E6%AD%A5%E4%BA%86%E8%A7%A3"><span class="nav-text">初步了解</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%AD%A6%E4%B9%A0%E4%BD%BF%E7%94%A8%E5%B8%B8%E8%A7%81%E7%9A%84HTML%E6%A0%87%E7%AD%BE"><span class="nav-text">学习使用常见的HTML标签</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFHTML%E6%A0%87%E7%AD%BE"><span class="nav-text">什么是HTML标签</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML%E6%A0%87%E7%AD%BE%E6%9C%89%E5%93%AA%E4%BA%9B"><span class="nav-text">HTML标签有哪些</span></a></li></ol></li></ol> </div> </div> </div> </div> </div> </div> <div class="main-content-footer"> <footer class="footer mt-5 py-5 h-auto text-base text-third-text-color relative border-t-2 border-t-border-color"> <div class="info-container py-3 text-center"> <div class="text-center"> © <span>2023</span> - 2024  <i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 0.5s; color: #f54545"></i>  <a href="/Jaxi-Jiang-Blog/">Jexi Jiang</a> </div> <script data-swup-reload-script src="https://cn.vercount.one/js"></script> <div class="relative text-center lg:absolute lg:right-[20px] lg:top-1/2 lg:-translate-y-1/2 lg:text-right"> <span id="busuanzi_container_site_uv" class="lg:!block"> <span class="text-sm">VISITOR COUNT</span> <span id="busuanzi_value_site_uv"></span> </span> <span id="busuanzi_container_site_pv" class="lg:!block"> <span class="text-sm">TOTAL PAGE VIEWS</span> <span id="busuanzi_value_site_pv"></span> </span> </div> <div class="relative text-center lg:absolute lg:left-[20px] lg:top-1/2 lg:-translate-y-1/2 lg:text-left"> <span class="lg:block text-sm">POWERED BY <?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="relative top-[2px] inline-block align-baseline" version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1rem" height="1rem" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path fill="#0E83CD" d="M256.4,25.8l-200,115.5L56,371.5l199.6,114.7l200-115.5l0.4-230.2L256.4,25.8z M349,354.6l-18.4,10.7l-18.6-11V275H200v79.6l-18.4,10.7l-18.6-11v-197l18.5-10.6l18.5,10.8V237h112v-79.6l18.5-10.6l18.5,10.8V354.6z"/></svg><a target="_blank" class="text-base" href="https://hexo.io">Hexo</a></span> <span class="text-sm lg:block">THEME <a class="text-base" target="_blank" href="https://github.com/EvanNotFound/hexo-theme-redefine">Redefine v2.6.0</a></span> </div> <div> Blog up for <span class="odometer" id="runtime_days" ></span> days <span class="odometer" id="runtime_hours"></span> hrs <span class="odometer" id="runtime_minutes"></span> Min <span class="odometer" id="runtime_seconds"></span> Sec </div> <script data-swup-reload-script> try { function odometer_init() { const elements = document.querySelectorAll('.odometer'); elements.forEach(el => { new Odometer({ el, format: '( ddd).dd', duration: 200 }); }); } odometer_init(); } catch (error) {} </script> </div> </footer> </div> </div> <div class="post-tools"> <div class="post-tools-container"> <ul class="article-tools-list"> <!-- TOC aside toggle --> <li class="right-bottom-tools page-aside-toggle"> <i class="fa-regular fa-outdent"></i> </li> <!-- go comment --> <li class="go-comment"> <i class="fa-regular fa-comments"></i> </li> </ul> </div> </div> <div class="right-side-tools-container"> <div class="side-tools-container"> <ul class="hidden-tools-list"> <li class="right-bottom-tools tool-font-adjust-plus flex justify-center items-center"> <i class="fa-regular fa-magnifying-glass-plus"></i> </li> <li class="right-bottom-tools tool-font-adjust-minus flex justify-center items-center"> <i class="fa-regular fa-magnifying-glass-minus"></i> </li> <li class="right-bottom-tools tool-dark-light-toggle flex justify-center items-center"> <i class="fa-regular fa-moon"></i> </li> <!-- rss --> <li class="right-bottom-tools tool-scroll-to-bottom flex justify-center items-center"> <i class="fa-regular fa-arrow-down"></i> </li> </ul> <ul class="visible-tools-list"> <li class="right-bottom-tools toggle-tools-list flex justify-center items-center"> <i class="fa-regular fa-cog fa-spin"></i> </li> <li class="right-bottom-tools tool-scroll-to-top flex justify-center items-center"> <i class="arrow-up fas fa-arrow-up"></i> <span class="percent"></span> </li> </ul> </div> </div> <div class="image-viewer-container"> <img src=""> </div> <div class="search-pop-overlay"> <div class="popup search-popup"> <div class="search-header"> <span class="search-input-field-pre"> <i class="fa-solid fa-keyboard"></i> </span> <div class="search-input-container"> <input autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="Search..." spellcheck="false" type="search" class="search-input" > </div> <span class="popup-btn-close"> <i class="fa-solid fa-times"></i> </span> </div> <div id="search-result"> <div id="no-result"> <i class="fa-solid fa-spinner fa-spin-pulse fa-5x fa-fw"></i> </div> </div> </div> </div> </main> <script src="/Jaxi-Jiang-Blog/js/libs/Swup.min.js"></script> <script src="/Jaxi-Jiang-Blog/js/libs/SwupSlideTheme.min.js"></script> <script src="/Jaxi-Jiang-Blog/js/libs/SwupScriptsPlugin.min.js"></script> <script src="/Jaxi-Jiang-Blog/js/libs/SwupProgressPlugin.min.js"></script> <script src="/Jaxi-Jiang-Blog/js/libs/SwupScrollPlugin.min.js"></script> <script src="/Jaxi-Jiang-Blog/js/libs/SwupPreloadPlugin.min.js"></script> <script> const swup = new Swup({ plugins: [ new SwupScriptsPlugin({ optin: true, }), new SwupProgressPlugin(), new SwupScrollPlugin({ offset: 80, }), new SwupSlideTheme({ mainElement: ".main-content-body", }), new SwupPreloadPlugin(), ], containers: ["#swup"], }); </script> <script src="/Jaxi-Jiang-Blog/js/tools/imageViewer.js" type="module"></script> <script src="/Jaxi-Jiang-Blog/js/utils.js" type="module"></script> <script src="/Jaxi-Jiang-Blog/js/main.js" type="module"></script> <script src="/Jaxi-Jiang-Blog/js/layouts/navbarShrink.js" type="module"></script> <script src="/Jaxi-Jiang-Blog/js/tools/scrollTopBottom.js" type="module"></script> <script src="/Jaxi-Jiang-Blog/js/tools/lightDarkSwitch.js" type="module"></script> <script src="/Jaxi-Jiang-Blog/js/layouts/categoryList.js" type="module"></script> <script src="/Jaxi-Jiang-Blog/js/tools/localSearch.js" type="module"></script> <script src="/Jaxi-Jiang-Blog/js/tools/codeBlock.js" type="module"></script> <script src="/Jaxi-Jiang-Blog/js/layouts/lazyload.js" type="module"></script> <script src="/Jaxi-Jiang-Blog/js/tools/runtime.js"></script> <script src="/Jaxi-Jiang-Blog/js/libs/odometer.min.js"></script> <link rel="stylesheet" href="/Jaxi-Jiang-Blog/assets/odometer-theme-minimal.css"> <script src="/Jaxi-Jiang-Blog/js/libs/Typed.min.js"></script> <script src="/Jaxi-Jiang-Blog/js/plugins/typed.js" type="module"></script> <div class="post-scripts" data-swup-reload-script> <script src="/Jaxi-Jiang-Blog/js/tools/tocToggle.js" type="module"></script> <script src="/Jaxi-Jiang-Blog/js/layouts/toc.js" type="module"></script> <script src="/Jaxi-Jiang-Blog/js/plugins/tabs.js" type="module"></script> </div> </body> </html>