什么是html?
- html (hyper text markup language)是超文本标记语言的缩写
- html 使用标记语言描述web页面的结构
- html 元素是html页面的构建块
- html 元素通过标签tag表示
- html 标签是“标题”、“段落”,“表格”等内容的一部分。
- 浏览器不显示html标签,但是使用它们来渲染页面内容。
一个简单的html文档
菜鸟笔记
这个是段落.
实例解析
声明定义这个文档是html5
元素是html页面的根元素
元素包含关于文档的元数据信息
</code> 元素为文档指定一个标题</li> <li><code><body></code> 元素包含可视化页面内容</li> <li><code><h1></code> 元素定义一个大的标题</li> <li><code><p></code> 元素定义一个段落</li> </ul> <h3>html 标签</h3> <p>html标签是被尖括号包围的元素名称</p> <pre data-language=html><code class="language-markup "><标签名称> 内容... </标签名称> </code></pre> <p>html标签通常成对出现,例如<code><p></code>和<code></p></code></p> <ul> <li>在这个标签对里,第一个是开始标签,第二个是结束标签</li> <li>结束标签和开始标签相同,但是在标签名称前面需要插入一个反斜线</li> <li>提示:开始标签页称为开标签,结束标签页称为闭标签</li> </ul> <blockquote><p> 提示:开始标签页称为开标签,结束标签页称为闭标签 </p></blockquote> <h3>浏览器</h3> <p>浏览器(例如:chrome,ie,firefox,safari)的作用是读取html文档并且显示他们。 浏览器不显示html标签,但是他们能决定怎么显示文档:</p> <p><img src="https://static.coonote.com/html-intro.png" alt="html 简介" /></p> <h3>html页面结构</h3> <p>下面是一个html页面的可视化结构</p> <p><img src="https://static.coonote.com/html_page_structure.png" alt="html页面结构" /></p> <blockquote><p> 注意:只有<body>里面的内容才会被显示在浏览器里面<br /> <code><!doctype></code> 声明 </p></blockquote> <p><code><!doctype></code>声明表示文档类型,并且帮助浏览器正确web页面。 它必须只能出现一次,并且在页面的顶部(html标签的前面) <code><!doctype></code>声明不区分大小写 <code><!doctype></code>声明如下:</p> <pre data-language=html><code class="language-markup "><!doctype html> </code></pre> <h3>html 版本</h3> <table class="table table-bordered"> <tbody> <tr> <th>版本</th> <th>年代</th> </tr> <tr> <td>html</td> <td>1991</td> </tr> <tr> <td>html 2.0</td> <td>1995</td> </tr> <tr> <td>html 3.2</td> <td>1997</td> </tr> <tr> <td>html 4.01</td> <td>1999</td> </tr> <tr> <td>xhtml</td> <td>2000</td> </tr> <tr> <td>html5</td> <td>2014</td> </tr> </tbody> </table> </article> </div> <div class="previous-next-links"> <div class="previous-design-link"><i style="font-size:16px;" class="fa fa-arrow-left" aria-hidden="true"></i> <a href="https://www.coonote.com/html/html-tutorial.html" rel="prev">html 教程</a></div> <div class="next-design-link"><a href="https://www.coonote.com/html/html-editor.html" rel="next">html 编辑器</a> <i style="font-size:16px;" class="fa fa-arrow-right" aria-hidden="true"></i></div> </div> <div class="note-rsp"> </div> </div> <div class="sidebar-note"> <div class="widget-navigation navi-tree"><h3><i class="fa fa-bars"></i> 笔记导航</h3> <ul> <li><a href="javascript:void(0);" class="tit">面试大全</a> <ul class="double-li"> <li><a title="leetcode 题解" href="//www.coonote.com/leetcode/leetcode-introduce.html">leetcode 题解</a></li> <li><a title="剑指offer" href="//www.coonote.com/offer/offer-topic.html">剑指offer</a></li> </ul> </li> <li><a href="javascript:void(0);" class="tit">服务器相关</a> <ul class="double-li"> <li><a title="linux 教程" href="//www.coonote.com/linux/linux-tutorial.html">linux 教程</a></li> <li><a title="docker 教程" href="//www.coonote.com/docker/docker-tutorial.html">docker 教程</a></li> <li><a title="http 教程" href="//www.coonote.com/http/http-tutorial.html">http 教程</a></li> <li><a title="shell 教程" href="//www.coonote.com/shell/shell-tutorial.html">shell 教程</a></li> <li><a title="tcp/ip 教程" href="//www.coonote.com/tcpip/tcpip-tutorial.html">tcp/ip 教程</a></li> <li><a title="lvs 简介" href="//www.coonote.com/lvs/lvs-introduct.html">lvs 教程</a></li> </ul> </li> <li><a href="javascript:void(0);" class="tit">数据库</a> <ul class="double-li"> <li><a title="mysql 教程" href="//www.coonote.com/mysql/mysql-tutorial.html">mysql 教程</a></li> </ul> </li> <li><a href="javascript:void(0);" class="tit">开发工具</a> <ul class="double-li"> <li><a title="git 教程" href="//www.coonote.com/git/git-tutorial.html">git 教程</a></li> <li><a title="markdown 教程" href="//www.coonote.com/markdown/markdown-tutorial.html">markdown 教程</a></li> <li><a title="svn 教程" href="//www.coonote.com/svn/svn-tutorial.html">svn 教程</a></li> <li><a title="vim 教程" href="//www.coonote.com/vim/vim-tutorial.html">vim 教程</a></li> <li><a title="vscode 教程" href="//www.coonote.com/vscode/vscode-tutorial.html">vscode 教程</a></li> </ul> </li> <li><a href="javascript:void(0);" class="tit">网站建设</a> <ul class="double-li"> <li><a title="wordpress 教程" href="//www.coonote.com/wordpress/wordpress-tutorial.html">wordpress 教程</a></li> </ul> </li> </ul> </div> </div> </section> <footer class="footer_cs"> <div class="footer-block"> <div class="footer-table"> <dl><dt>在线实例</dt> </dl> <dl><dt>随机文章</dt> <dd>·<a href="https://www.coonote.com/docker/docker-container-connection.html" title="docker 容器连接">docker 容器连接</a></dd> <dd>·<a href="https://www.coonote.com/python-note/etree-html.html" title="lxml库中etree.html()和etree.tostring()用法">lxml库中etree....</a></dd> <dd>·<a href="https://www.coonote.com/markdown/markdown-tutorial.html" title="markdown 教程">markdown 教程</a></dd> <dd>·<a href="https://www.coonote.com/docker-note/docker-compose-layout.html" title="docker compose编排容器">docker compo...</a></dd> <dd>·<a href="https://www.coonote.com/linux/linux-cmd-uucico.html" title="linux uucico命令">linux uucico...</a></dd> <dd>·<a href="https://www.coonote.com/note/dos-commad-summary.html" title="常见dos命令总结">常见dos命令总结</a></dd> <dd>·<a href="https://www.coonote.com/note/partition-and-barrel.html" title="什么是分区分桶?">什么是分区分桶?</a></dd> <dd>·<a href="https://www.coonote.com/os/what-is-coroutine.html" title="对协程的一点理解">对协程的一点理解</a></dd> </dl> <dl><dt>最新更新</dt> <dd>·<a href="https://www.coonote.com/redis-note/redis-cache-avalanche-penetration.html" title="关于redis缓存雪崩,穿透,击穿的介绍及ag真人游戏的解决方案">关于redis缓存雪崩,...</a></dd><dd>·<a href="https://www.coonote.com/python-note/python-os-sys.html" title="python中os模块和sys模块的区别">python中os模块和...</a></dd><dd>·<a href="https://www.coonote.com/python-note/python-ist-last-item.html" title="python中列表,元组,字典常用操作方法的总结">python中列表,元组...</a></dd><dd>·<a href="https://www.coonote.com/python-note/python-queue-operate.html" title="python队列操作">python队列操作</a></dd><dd>·<a href="https://www.coonote.com/git-note/git-resolve-code-conflicts.html" title="git解决代码冲突">git解决代码冲突</a></dd><dd>·<a href="https://www.coonote.com/docker/docker-basic-command.html" title="docker 基础命令">docker 基础命令</a></dd><dd>·<a href="https://www.coonote.com/docker/docker-resources.html" title="docker 资源汇总">docker 资源汇总</a></dd><dd>·<a href="https://www.coonote.com/docker/docker-cmd-manual.html" title="docker 命令大全">docker 命令大全</a></dd> </dl> <dl> <dt>站点信息</dt> <dd>·<a target="_blank" href="//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=1ba6uru6obcvs7qtuls8ufu2urg" rel="nofollow">意见反馈</a></dd> <dd>·<a target="_blank" href="//www.coonote.com/aboutus" rel="nofollow">关于ag真人试玩娱乐</a></dd> <dd>·<a target="_blank" href="//www.coonote.com/disclaimer" rel="nofollow">免责申明</a></dd> <dd>·<a target="_blank" href="//www.coonote.com/sitemap.xml" rel="nofollow">文章归档</a></dd> </dl> <div class="search-share"> <div class="app-download"> <div><strong>关注微信</strong></div> </div> <div class="share"><img width="160" height="150" src="//static.coonote.com/qrcode.jpg" /></div> </div> </div> </div> <div class="foot-link"> <a href="https://www.coonote.com/">算法题</a> | <a href="https://www.coonote.com/">面试题</a> | <a href="https://www.coonote.com/cplusplus-note/">c 笔记</a> | <a href="https://www.coonote.com/linux-note/">linux 笔记</a> | <a href="https://www.coonote.com/redis-note/">redis 笔记</a> | <a href="https://www.coonote.com/mysql-note/">mysql 笔记</a> | <a href="https://www.coonote.com/python-note/">python 笔记</a> | <a href="https://www.coonote.com/tcpip-note/">tcp/ip 笔记</a> | <a href="https://www.coonote.com/git-note/">git 笔记</a> | <a href="https://www.coonote.com/wordpress-note/">wordpress 笔记</a> | <a href="https://www.coonote.com/tool-manual/">工具使用</a> </div> <div class="ag真人试玩娱乐 copyright">ag真人试玩娱乐 copyright © 2020-now <strong><a href="//www.coonote.com/" target="_blank">菜鸟笔记</a></strong> <strong><a href="//www.coonote.com/" target="_blank">coonote.com</a></strong> all rights reserved. 备案号:<a target="_blank" rel="nofollow" href="https://beian.miit.gov.cn"><span>鄂icp备18029353号-2</span></a> <span style="color:#6f6f6f;"></span></div> </footer> <script> window.jsui={ www: 'https://www.coonote.com', uri: 'https://www.coonote.com/wp-content/themes/coonote', roll: ["1","2"], }; </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createelement("script"); hm.src = "https://hm.baidu.com/hm.js?b70af110144d61b1fc59737bd92fb9ef"; var s = document.getelementsbytagname("script")[0]; s.parentnode.insertbefore(hm, s); })(); </script> <script type='text/javascript' src='//apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js' id='bootstrap-js'></script> <script type='text/javascript' src='//www.coonote.com/wp-content/themes/coonote/js/loader.js' id='_loader-js'></script> </body> </html>