目录

HTML5

HTML5介绍

HTML5的DOCTYPE声明

HTML5基本骨架

html标签

head标签

body标签

title标签

meta标签

在vscode中写出第一个小框架


HTML5

HTML5介绍

HTML5是用来描述网页的一种语言,被称为超文本标记语言。用HTML5编写的文件,后缀以.html结尾

HTML是一种标记语言,标记语言是一套标记标签。标签是由尖括号包围的关键字,例如:

标签有两种表现形式:

  1. 双标签,例如:
  2. 单标签,例如:

    HTML5基本骨架

    html标签

    定义 HTML 文档,这个元素我们浏览器看到后就明白这是个HTML文档了,所以你的其它元素要包裹在它里面,标签限定了文档的开始点和结束点。

    head标签

    head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

    body标签

    body 元素定义文档的主体。

    body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)

    它会直接在页面中显示出来,也就是用户可以直观看到的内容

     我会显示在浏览器中

    title标签

    1. 可定义文档的标题。
    2. 它显示在浏览器窗口的标题栏或状态栏上。
    3. </code>标签是<code></code>标签中唯一必须要求包含的东西,就是说写head一定要写title</li><li><code><title></code>的增加有利于SEO优化</li></ol><blockquote><p>SEO是搜索引擎优化的英文缩写。通过对网站内容调整,满足搜索引擎的排名需求</p></blockquote><pre><code class="language-html"><title>第一个页面 我会显示在浏览器中

      meta标签

      meta标签用来描述一个HTML网页文档的属性,关键词等,例如:charset="utf-8"是说当前使用的是utf-8编码格式,在开发中我们经常会看到utf-8,或是gbk,这些都是编码格式,通常使用utf-8

      itbaizhan

      在vscode中写出第一个小框架

      其实在vscode中框架不需要编写,只需要打出HTML就会自动生成一个基本的框架。

      先创建一个html文件,后缀为.html

      然后就会出现:

      在body中输入的内容可以直接在网页中显示出来。

      更详细的框架

         My Basic HTML5 Framework   

      Welcome to My Website

      About Us

      We are a passionate team...

      Our Services

      • Web Design
      • Graphic Design
      • Development

      © 2023 My Company. All rights reserved.

      1. :这是文档类型声明,指定了你在使用HTML5。

      2. 标签:用于设置字符编码和视口设置,确保网页在不同设备上显示正常。

      3. </code>标签:定义网页标题,显示在浏览器标签页上。</strong></p></li><li><p><strong><code></code>和<code></code>标签:用于引入外部样式表和JavaScript文件,这样可以将样式和脚本与HTML内容分离,使代码更有组织性。</strong></p></li><li><p><strong>页面主体部分包括<code></p><header></code>、<code><main></code>和<code></p><footer></code>:这些标签用于组织网页的头部、主体内容和页脚。</strong></p></li><li><p><strong>在主体中的<code></p><header></code>包含网页标题和导航菜单。</strong></p></li><li><p><strong><code><main></code>标签用于包含网页的主要内容,其中有两个<code></p><section></code>标签,每个标签包含一个标题和内容。</strong></p></li><li><p><strong>在页脚部分的<code></p><footer></code>标签中,显示版权信息。</strong></p></li></ol><p>在接下来的学习中,我们也将会以这个为模板对各个部分刨析学习。</p></article></div><div class="related-posts"><h2 class="related-posts-title"><i class="fab fa-hive me-1"></i>相关文章</h2><div class="row g-2 g-md-3 row-cols-2 row-cols-md-3 row-cols-lg-4"><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/13835/" title="文本生成图像工作简述4–扩散模型、自回归模型、生成对抗网络的对比调研" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/7c4a5d6654ba44e89be12c4df7563936.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/13835/" title="文本生成图像工作简述4–扩散模型、自回归模型、生成对抗网络的对比调研">文本生成图像工作简述4–扩散模型、自回归模型、生成对抗网络的对比调研</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/28995/" title="从CNN到Transformer:基于PyTorch的遥感影像、无人机影像的地物分类、目标检测、语义分割和点云分类" data-bg="https://img.maxssl.com/uploads/?url=https://img.maxssl.com/uploads/?url=https://csdnimg.cn/release/blog_editor_html/release2.3.6/ckeditor/plugins/CsdnLink/icons/icon-default.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/28995/" title="从CNN到Transformer:基于PyTorch的遥感影像、无人机影像的地物分类、目标检测、语义分割和点云分类">从CNN到Transformer:基于PyTorch的遥感影像、无人机影像的地物分类、目标检测、语义分割和点云分类</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/33262/" title="JS进阶——构造函数&数据常用函数" data-bg="${picture}"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/33262/" title="JS进阶——构造函数&数据常用函数">JS进阶——构造函数&数据常用函数</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/21647/" title="【工程报告】编程技术项目报告【编号:网页01号】" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/21647/" title="【工程报告】编程技术项目报告【编号:网页01号】">【工程报告】编程技术项目报告【编号:网页01号】</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/51032/" title="基于Python淘宝乐器销售数据可视化系统设计与实现(Django框架) 研究背景与意义、国内外研究现状" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/51032/" title="基于Python淘宝乐器销售数据可视化系统设计与实现(Django框架) 研究背景与意义、国内外研究现状">基于Python淘宝乐器销售数据可视化系统设计与实现(Django框架) 研究背景与意义、国内外研究现状</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/53219/" title="LangChain结合milvus向量数据库以及GPT3.5结合做知识库问答之二 —>代码实现" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/43e7a90e103b4f2c8d895037ed013ceb.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/53219/" title="LangChain结合milvus向量数据库以及GPT3.5结合做知识库问答之二 —>代码实现">LangChain结合milvus向量数据库以及GPT3.5结合做知识库问答之二 —>代码实现</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/42629/" title="Python基于Pytorch Transformer实现对iris鸢尾花的分类预测,分别使用CPU和GPU训练" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/247fe3387bcc40a087a6530d945f618c.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/42629/" title="Python基于Pytorch Transformer实现对iris鸢尾花的分类预测,分别使用CPU和GPU训练">Python基于Pytorch Transformer实现对iris鸢尾花的分类预测,分别使用CPU和GPU训练</a></h2></div></article></div><div class="col"><article class="post-item item-grid"><div class="tips-badge position-absolute top-0 start-0 z-1 m-2"></div><div class="entry-media ratio ratio-3x2"> <a target="" class="media-img lazy bg-cover bg-center" href="https://www.maxssl.com/article/38120/" title="<蓝桥杯软件赛>零基础备赛20周–第10周–二分" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/0a72333dbc7d4affa1a1fec9da4cc357.png"> </a></div><div class="entry-wrapper"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/38120/" title="<蓝桥杯软件赛>零基础备赛20周–第10周–二分"><蓝桥杯软件赛>零基础备赛20周–第10周–二分</a></h2></div></article></div></div></div></div><div class="sidebar-wrapper col-md-12 col-lg-3 h-100" data-sticky><div class="sidebar"><div id="recent-posts-4" class="widget widget_recent_entries"><h5 class="widget-title">最新关注</h5><ul><li> <a href="https://www.maxssl.com/article/57859/">【MySQL】InnoDB存储引擎</a></li><li> <a href="https://www.maxssl.com/article/57858/">DB-GPT:强强联合Langchain-Vicuna的应用实战开源项目,彻底改变与数据库的交互方式</a></li><li> <a href="https://www.maxssl.com/article/57857/">TigerBeetle:世界上最快的会计数据库</a></li><li> <a href="https://www.maxssl.com/article/57856/">【SQL server】玩转SQL server数据库:第三章 关系数据库标准语言SQL(二)数据查询</a></li><li> <a href="https://www.maxssl.com/article/57855/">马斯克400条聊天记录被法院公开,原来推特收购是在短信上谈崩的</a></li><li> <a href="https://www.maxssl.com/article/57854/">戏精摩根大通:从唱空比特币到牵手贝莱德</a></li></ul></div><div id="ri_sidebar_posts_widget-2" class="widget sidebar-posts-list"><h5 class="widget-title">热文推荐</h5><div class="row g-3 row-cols-1"><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/39051/" title="如何快速入行软件测试且拿到10K+?" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/a637fe605c8645c6b268806ba441efbe.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/39051/" title="如何快速入行软件测试且拿到10K+?">如何快速入行软件测试且拿到10K+?</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/34892/" title="3D模型渲染导致电脑太卡怎么办?" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/img_convert/5878b3dc2142a3d25f36dc57adb622b9.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/34892/" title="3D模型渲染导致电脑太卡怎么办?">3D模型渲染导致电脑太卡怎么办?</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/25017/" title="ElasticSearch:全文检索及倒排索引原理" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/37c43276a1b44f1d878d11919464a8ec.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/25017/" title="ElasticSearch:全文检索及倒排索引原理">ElasticSearch:全文检索及倒排索引原理</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/31275/" title="期货反手有几种做(期货里面什么叫反手)" data-bg="/wp-content/themes/ripro-v5/assets/img/thumb.jpg"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/31275/" title="期货反手有几种做(期货里面什么叫反手)">期货反手有几种做(期货里面什么叫反手)</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/7861/" title="python在centos下安装以及配置" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/c32caa7f265e4dab9c111e34a8c964a8.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/7861/" title="python在centos下安装以及配置">python在centos下安装以及配置</a></h2></div></div></article></div><div class="col"><article class="post-item item-list"><div class="entry-media ratio ratio-3x2 col-auto"> <a target="" class="media-img lazy" href="https://www.maxssl.com/article/53011/" title="创建oracle数据库到达梦数据库的dblink" data-bg="https://img.maxssl.com/uploads/?url=https://img-blog.csdnimg.cn/direct/d7b0c279a390455f9af86491d238c611.png"></a></div><div class="entry-wrapper"><div class="entry-body"><h2 class="entry-title"> <a target="" href="https://www.maxssl.com/article/53011/" title="创建oracle数据库到达梦数据库的dblink">创建oracle数据库到达梦数据库的dblink</a></h2></div></div></article></div></div></div></div></div></div></div></main><footer class="site-footer py-md-4 py-2 mt-2 mt-md-4"><div class="container"><div class="text-center small w-100"><div>Copyright © <script>today=new Date();document.write(today.getFullYear());</script> maxssl.com 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">浙ICP备2022011180号</a></div><div class=""><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7656930379472324" crossorigin="anonymous"></script></div></div></div></footer><div class="rollbar"><ul class="actions"><li><a target="" href="https://www.maxssl.com/" rel="nofollow noopener noreferrer"><i class="fas fa-home"></i><span></span></a></li><li><a target="" href="http://wpa.qq.com/msgrd?v=3&uin=6666666&site=qq&menu=yes" rel="nofollow noopener noreferrer"><i class="fab fa-qq"></i><span></span></a></li></ul></div><div class="back-top"><i class="fas fa-caret-up"></i></div><div class="dimmer"></div><div class="off-canvas"><div class="canvas-close"><i class="fas fa-times"></i></div><div class="logo-wrapper"> <a class="logo text" href="https://www.maxssl.com/">MaxSSL</a></div><div class="mobile-menu d-block d-lg-none"></div></div> <script></script><noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://www.maxssl.com/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script><script src='//cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js' id='jquery-js'></script> <script src='//cdn.bootcdn.net/ajax/libs/highlight.js/11.7.0/highlight.min.js' id='highlight-js'></script> <script src='https://www.maxssl.com/wp-content/themes/ripro-v5/assets/js/vendor.min.js' id='vendor-js'></script> <script id='main-js-extra'>var zb={"home_url":"https:\/\/www.maxssl.com","ajax_url":"https:\/\/www.maxssl.com\/wp-admin\/admin-ajax.php","theme_url":"https:\/\/www.maxssl.com\/wp-content\/themes\/ripro-v5","singular_id":"25188","post_content_nav":"0","site_notify_auto":"0","current_user_id":"0","ajax_nonce":"9bd8f072fc","gettext":{"__copypwd":"\u5bc6\u7801\u5df2\u590d\u5236\u526a\u8d34\u677f","__copybtn":"\u590d\u5236","__copy_succes":"\u590d\u5236\u6210\u529f","__comment_be":"\u63d0\u4ea4\u4e2d...","__comment_succes":"\u8bc4\u8bba\u6210\u529f","__comment_succes_n":"\u8bc4\u8bba\u6210\u529f\uff0c\u5373\u5c06\u5237\u65b0\u9875\u9762","__buy_be_n":"\u8bf7\u6c42\u652f\u4ed8\u4e2d\u00b7\u00b7\u00b7","__buy_no_n":"\u652f\u4ed8\u5df2\u53d6\u6d88","__is_delete_n":"\u786e\u5b9a\u5220\u9664\u6b64\u8bb0\u5f55\uff1f"}};</script> <script src='https://www.maxssl.com/wp-content/themes/ripro-v5/assets/js/main.min.js' id='main-js'></script> </body></html>