Html 语法学习笔记一
作者：jiankunking
一、HTML文档的基本结构
HTML部分：每个HTML文档必须以打开HTML标记开始，以关闭HTML标记结束 说明其间内容为HTML格式文档。
HEAD头部分：此部分包含文档的标题、文档使用的脚本、样式表定义等信息，还可以包含搜索工具和索引所要的其他信息。头部分必须包含在
标记对中
其间包含的文字是该HTML的主题，会显示在窗口的TITLE栏位。
标记，此标记可以设置网页的编码、自动刷新网页、设置网页的过期值
META标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的
标记和
标记之间，它的信息只有在网页的源代码里面才可以看到，在网页里面是看不到的，但是一般情况下我们都能够感受到它的存在。meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级等。所以应该给每页加一个meta值。 META标签分两大部分：HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME)。</p><p>1、＜meta name="Generator" contect=""＞用以说明生成工具（如Microsoft FrontPage 4.0）等；2、＜meta name="KEYWords" contect=""＞向搜索引擎说明你的网页的关键词；多个关键字之间有“,”间隔3、＜meta name="DEscription" contect=""＞告诉搜索引擎你的站点的主要内容；4、＜meta name="Author" contect="你的姓名"＞告诉搜索引擎你的站点的制作的作者；</p><p>正文部分 <BODY></BODY> 其间说明HTML文件的主体内容。</p><p>二、具体语法</p><p>1、 <font> 规定文本的字体、字体尺寸、字体颜色。</p><p>2、 <p> 标签定义段落。</p><p>p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。</p><p>3、<h></p><p><h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。 由于h元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。</p><p>延伸阅读：允许的段落用法</p><p>可以只在块（block）内指定段落，也可以把段落和其他段落、列表、表单和预定义格式的文本一起使用。总的来讲，这意味着段落可以在任何有合适的文本流的地方出现，例如文档的主体中、列表的元素里，等等。</p><p>从技术角度将，段落不可以出现在头部、锚或者其他严格要求内容必须只能是文本的地方。实际上，多数浏览器都忽略了这个限制，它们会把段落作为所含元素的内容一起格式化。</p><p>4、 <hr></p><p><hr> 标签在 HTML 页面中创建一条水平线。</p><p>水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。</p><p>5、<blockquote> 标签定义块引用。</p><p><blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。</p><p>6、<pre></p><p>pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 <pre> 标签的一个常见应用就是用来表示计算机的源代码。 可以导致段落断开的标签（例如标题、<p> 和 <address> 标签）绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的。 pre 元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如 <a> 标签）放到 <pre> 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。</p><p>7、ul 标签 -- 代表HTML无序列表</p><p>ul标签是成对出现的,以<ul>开始,</ul>结束 每一列使用<li>标签定义,每一列使用一个点作为开头</p><p>8、<ol> 标签定义有序列表。</p><p>9、<dl> 标签</p><p><dl> 标签定义了定义列表（definition list）。 <dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。</p><p>
<strong>版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。</strong>
</p></div>
<div class="article_footer clear">
<div class="fr tag">标签：<a href="https://www.finclip.com/news/tags-81.html">网页</a>
</div>
<div class="bdsharebuttonbox fl share">
<div class="share-widget fl">
<div class="social-share" data-sites="wechat,weibo, qq, qzone"></div>
</div>
</div>
</div>
<!-- 广告位ad4 -->
<div class="post-navigation clear">
<div class="post-previous fl">
<span>上一篇:</span><a href="https://www.finclip.com/news/f/21172.html">Netty分布式ByteBuf使用的回收逻辑剖析</a>
</div>
<div class="post-next fr">
<span>下一篇:</span><a href="https://www.finclip.com/news/f/21174.html">HTML meta refresh 刷新与跳转(重定向)页面</a>
</div>
</div>
</div>
<div class="related_article">
<div class="box_title clear">
<span><i class="icon fa fa-paper-plane"></i>相关文章</span>
</div>
<div class="related_list clear">
<article class="fl">
<div class="related_img"><a href="https://www.finclip.com/news/f/87992.html"><img src="https://www.finclip.com/news/zb_users/cache/ly_autoimg/o/ODc5OTI.jpg"></a></div>
<div class="related_detail">
<h3><a href="https://www.finclip.com/news/f/87992.html" title="轻量级前端框架助力开发者提升项目效率与性能">轻量级前端框架助力开发者提升项目效率与性能</a></h3>
<div class="meta">
<span><i class="fa fa-eye"></i>885</span>
<span><i class="fa fa-clock-o"></i>2022-10-16</span>
</div>
</div>
</article>
<article class="fl">
<div class="related_img"><a href="https://www.finclip.com/news/f/87990.html"><img src="https://www.finclip.com/news/zb_users/cache/ly_autoimg/o/ODc5OTA.jpg"></a></div>
<div class="related_detail">
<h3><a href="https://www.finclip.com/news/f/87990.html" title="前端移动端框架如何推动数字化转型与创新发展">前端移动端框架如何推动数字化转型与创新发展</a></h3>
<div class="meta">
<span><i class="fa fa-eye"></i>885</span>
<span><i class="fa fa-clock-o"></i>2022-10-16</span>
</div>
</div>
</article>
<article class="fl">
<div class="related_img"><a href="https://www.finclip.com/news/f/87925.html"><img src="https://www.finclip.com/news/zb_users/cache/ly_autoimg/o/ODc5MjU.jpg"></a></div>
<div class="related_detail">
<h3><a href="https://www.finclip.com/news/f/87925.html" title="探索小游戏大厅的多样性与未来发展趋势">探索小游戏大厅的多样性与未来发展趋势</a></h3>
<div class="meta">
<span><i class="fa fa-eye"></i>885</span>
<span><i class="fa fa-clock-o"></i>2022-10-16</span>
</div>
</div>
</article>
</div>
</div>
<div id="comment" class="post-comment clearfix sb br mt">
<p id="comments-title" class="c-title mb bn"><span><i class="fa fa-pencil"></i> 发表评论</span></p>
<div class="compost">
<form id="frmSumbit" target="_self" method="post" action="https://www.finclip.com/news/zb_system/cmd.php?act=cmt&postid=21173&key=b89efe2d42f6b3ea9d04e4c43d91b07a">
<input type="hidden" name="inpId" id="inpId" value="21173"/>
<input type="hidden" name="inpRevID" id="inpRevID" value="0"/>
<div class="com-name">
<a rel="nofollow" id="cancel-reply" href="#comments" style="display:none;">取消回复</a>
</div>
<div class="com-info">
<ul>
<li>
<span class="hide" for="author"></span>
<input class="ipt" type="text" name="inpName" id="inpName" value="" tabindex="2" placeholder="昵称(必填)">
</li>
<li>
<span class="hide" for="author"></span>
<input class="ipt" type="text" name="inpEmail" id="inpEmail" value="" tabindex="3" placeholder="邮箱">
</li>
<li>
<span class="hide" for="author"></span>
<input class="ipt" type="text" name="inpHomePage" id="inpHomePage" value="" tabindex="4" placeholder="网址">
</li>
</ul>
</div>
<div class="com-box">
<textarea placeholder="来都来了，说点什么吧..." class="textarea" name="txaArticle" id="txaArticle" cols="5" rows="5" tabindex="1"></textarea>
</div>
<div class="com-info"><button class="com-submit br brightness" name="sumbit" type="submit" tabindex="5" onclick="return zbp.comment.post()">发布评论</button></div>
</form>
</div> <div class="comment-list mt">
<p class="no-comment"><i class="iconfont icon-sofa"></i> 暂时没有评论，来抢沙发吧~</p> <span id="AjaxCommentBegin"></span>
<div class="pagination pagination-multi">
<ul>
</ul>
</div>
<span id="AjaxCommentEnd"></span>
</div>
</div>
</div>
</div>
<div class="sidebar">
<div id="divPrevious" class="part clear previous">
<div class="top">
<h3 class="title">最近发表</h3>
</div>
<div class="side divPrevious"><ul><li><a title="洞察探索如何利用兼容微信生态的小程序容器，实现跨平台开发，助力金融和车联网行业的数字化转型。" href="https://www.finclip.com/news/f/88017.html">洞察探索如何利用兼容微信生态的小程序容器，实现跨平台开发，助力金融和车联网行业的数字化转型。</a></li>
<li><a title="洞察企业如何通过FinClip提升跨平台小程序加载效率，适应多样化市场需求" href="https://www.finclip.com/news/f/88016.html">洞察企业如何通过FinClip提升跨平台小程序加载效率，适应多样化市场需求</a></li>
<li><a title="洞察提升小程序标签管理，实现高效的金融行业数字化转型" href="https://www.finclip.com/news/f/88014.html">洞察提升小程序标签管理，实现高效的金融行业数字化转型</a></li>
<li><a title="洞察如何通过ios app灵活实现微信小程序的跨平台管理" href="https://www.finclip.com/news/f/88013.html">洞察如何通过ios app灵活实现微信小程序的跨平台管理</a></li>
<li><a title="洞察如何利用第三方app跳转到微信小程序提升企业运营效率" href="https://www.finclip.com/news/f/88012.html">洞察如何利用第三方app跳转到微信小程序提升企业运营效率</a></li>
<li><a title="洞察探索小程序支付功能实现的最佳策略，如何通过FinClip技术简化支付流程并提升用户体验，助力企业数字化转型" href="https://www.finclip.com/news/f/88011.html">洞察探索小程序支付功能实现的最佳策略，如何通过FinClip技术简化支付流程并提升用户体验，助力企业数字化转型</a></li>
<li><a title="洞察探索如何利用 FinClip 提供的跨平台小程序技术，实现高效的支付管理与合规运营" href="https://www.finclip.com/news/f/88010.html">洞察探索如何利用 FinClip 提供的跨平台小程序技术，实现高效的支付管理与合规运营</a></li>
<li><a title="如何借助FinClip提升App小程序支付的敏捷性和合规性？" href="https://www.finclip.com/news/f/88009.html">如何借助FinClip提升App小程序支付的敏捷性和合规性？</a></li>
<li><a title="在数字化转型中，企业如何通过小程序支付提升客户体验和运营效率？" href="https://www.finclip.com/news/f/88008.html">在数字化转型中，企业如何通过小程序支付提升客户体验和运营效率？</a></li>
<li><a title="小程序开发设计在提升企业数字化转型效率中的关键作用" href="https://www.finclip.com/news/f/88007.html">小程序开发设计在提升企业数字化转型效率中的关键作用</a></li>
</ul></div>
</div>
<div id="newmodule" class="part clear 更多内容">
<div class="top">
<h3 class="title">更多内容</h3>
</div>
<div class="side newmodule"><ul><ul class="hot_posts"> <li><h4><a href="https://www.finclip.com/news/category-2.html" title="小程序SDK">小程序SDK</a></h4></li><li><h4><a href="https://www.finclip.com/news/category-3.html" title="Finclip技术文档">Finclip技术文档</a></h4></li><li><h4><a href="https://www.finclip.com/news/category-4.html" title="小程序开发">小程序开发</a></h4></li><li><h4><a href="https://www.finclip.com/news/category-5.html" title="小程序容器">小程序容器</a></h4></li><li><h4><a href="https://www.finclip.com/news/category-6.html" title="小程序框架">小程序框架</a></h4></li><li><h4><a href="https://www.finclip.com/news/category-7.html" title="Finclip小程序平台">Finclip小程序平台</a></h4></li><li><h4><a href="https://www.finclip.com/news/category-8.html" title="Finclip用户投稿">Finclip用户投稿</a></h4></li><li><h4><a href="https://www.finclip.com/news/category-9.html" title="车联网">车联网</a></h4></li></ul></ul></div>
</div>
<div id="tuijianwenzhang" class="part clear 推荐文章">
<div class="top">
<h3 class="title">推荐文章</h3>
</div>
<div class="side tuijianwenzhang"><ul><ul class="hot_posts"> <li><h4><a href="https://www.finclip.com/news/f/9435.html" title="小程序SDK是什么意思？小程序sdk和插件有什么区别？">小程序SDK是什么意思？小程序sdk和插件有什么区别？</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/58967.html" title="小程序支付功能怎么实现？一篇详细教程来了！">小程序支付功能怎么实现？</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/58064.html" title="企业app开发（企业app开发定制外包）">企业app开发流程是什么？</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/52142.html" title="app运营模式框架（app运营体系搭建）">app运营模式有哪些？</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/21082.html" title="小程序成为多社交平台引流利器,小程序多端引流怎么做">小程序多端引流怎么做？</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/48029.html" title="小程序生态分析（小程序经济环境分析）">小程序生态分析的机会和威胁</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/54499.html" title="flutter 小程序（flutter 小程序方案）">Flutter入门这一篇效率文章就够了</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/39393.html" title="原生与跨平台解决方案分析,跨平台软件开发技术方案">原生与跨平台解决方案分析,跨平台软件开发技术方案</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/58899.html" title="热更新技术：让软件更新变得更加轻松快速">热更新技术：让软件更新变得更加轻松快速</a></h4></ul></ul></div>
</div>
<div id="jiejuefangan" class="part clear 解决方案">
<div class="top">
<h3 class="title">解决方案</h3>
</div>
<div class="side jiejuefangan"><ul><ul class="hot_posts"> <li><h4><a href="https://www.finclip.com/solutions/bank" title="银行解决方案">银行解决方案</a></h4></li><li><h4><a href="https://www.finclip.com/solutions/broker" title="证券解决方案">证券解决方案</a></h4></li><li><h4><a href="https://www.finclip.com/solutions/internet" title="互联网解决方案">互联网解决方案</a></h4></li><li><h4><a href="https://www.finclip.com/solutions/oa" title="政企OA解决方案">政企OA解决方案</a></h4></li><li><h4><a href="https://www.finclip.com/solutions/technology" title="科技解决方案">科技解决方案</a></h4></li><li><h4><a href="https://www.finclip.com/solutions/car" title="智能车载解决方案">loT解决方案</a></h4></li><li><h4><a href="https://www.finclip.com/solutions/zerotrust" title="信任解决方案">信任解决方案</a></h4></li></ul></ul></div>
</div>
<div id="hot_posts" class="part clear hot_posts">
<div class="top">
<h3 class="title">热评文章</h3>
</div>
<ul class="hot_posts"><li><h4><a href="https://www.finclip.com/news/f/21046.html" title="AppCan:基于混合模式的移动应用开发,移动混合模式应用开发方案">AppCan:基于混合模式的移动应用开发,移动混合模</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/7989.html" title="Hybrid App混合模式开发的了解">Hybrid App混合模式开发的了解</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/5713.html" title="小程序容器技术助力券商数字营销突围，小程序容器化的意义">小程序容器技术助力券商数字营销突围，小程序容器化的意</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/14756.html" title="用mpvue开发微信小程序基础知识（vue.js开发微信小程序）">用mpvue开发微信小程序基础知识（vue.js开发</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/33154.html" title="小程序多端框架全面测评对比，强烈推荐！">小程序多端框架全面测评对比，强烈推荐！</a></h4></li><li><h4><a href="https://www.finclip.com/news/f/69022.html" title="券商app架构 - 解析券商应用程序的构建与设计">券商app架构 - 解析券商应用程序的构建与设计</a></h4></li></ul> </div>
<div id="sidebar_ad" class="part clear sidebar_ad">
<div class="part sidebar_ad"><div class="active"><a href='http://www.finclip.com/?channel=jtseo' target='_blank'><img style='width:100%;height:100%' src='https://www.finclip.com/news/zb_users/upload/2022/11/%E4%B8%80%E7%AB%AF%E5%BC%80%E5%8F%91%EF%BC%8C%E8%B7%A8%E7%AB%AF%E8%BF%90%E8%A1%8C-370_680.png'></a><br></div></div>
</div> </div>
</div>
</section>
</div>
<footer class="p-footer">
<div class="contant_box">
<div class="discover_tmt">
<div class="text_box">
<h5 class="" style="margin-bottom: 5px; margin-right: 5px;"><a href="https://www.finclip.com/" title="Finclip小程序容器技术" style="text-align: left;">小程序容器技术</a></h5>
<a href="https://www.finclip.com/product/wxsupport/" title="微信生态支持" target="_blank" style="text-decoration: none; color: black; margin-right: 5px;" onmouseover="this.style.textDecoration='underline'; this.style.color='blue'" onmouseout="this.style.textDecoration='none'; this.style.color='black'" onclick="this.style.textDecoration='underline'; this.style.color='blue'">微信生态支持</a>
<a href="https://www.finclip.com/product/management" title="小程序生命周期管理" target="_blank" style="text-decoration: none; color: black; margin-right: 5px;" onmouseover="this.style.textDecoration='underline'; this.style.color='blue'" onmouseout="this.style.textDecoration='none'; this.style.color='black'" onclick="this.style.textDecoration='underline'; this.style.color='blue'">小程序生命周期管理</a>
<a href="https://www.finclip.com/product/developertools" title="开发生态工具完善" target="_blank" style="text-decoration: none; color: black; margin-right: 5px;" onmouseover="this.style.textDecoration='underline'; this.style.color='blue'" onmouseout="this.style.textDecoration='none'; this.style.color='black'" onclick="this.style.textDecoration='underline'; this.style.color='blue'">开发生态工具完善</a>
<a href="https://www.finclip.com/product/sdk" title="小程序SDK" target="_blank" style="text-decoration: none; color: black; margin-right: 5px;" onmouseover="this.style.textDecoration='underline'; this.style.color='blue'" onmouseout="this.style.textDecoration='none'; this.style.color='black'" onclick="this.style.textDecoration='underline'; this.style.color='blue'">小程序SDK</a>
<a href="https://www.finclip.com/technology-alliance-partner" title="技术生态" target="_blank" style="text-decoration: none; color: black; margin-right: 5px;" onmouseover="this.style.textDecoration='underline'; this.style.color='blue'" onmouseout="this.style.textDecoration='none'; this.style.color='black'" onclick="this.style.textDecoration='underline'; this.style.color='blue'">技术生态</a>
</div> </div>
<div class="collaboration_box">
<h5>交流与合作</h5>
<div class="text_box">
<a href="#" title="地址">地址：深圳市福田区凯丰路 10号 国际金融科技城 19层</a>
<a href="#" title="电话">电话：0755-86967467</a>
<a href="#" title="邮箱">邮箱：contact@finogeeks.com</a>
</div> </div>
<div class="we_img_box clear">
<div class="img_box">
<img src="https://www.finclip.com/news/zb_users/theme/zblog5_news/image/ewm.png" alt="" class="hover_tmt">
</div>
</div>
</div>
<p class="info"> <a href="https://beian.miit.gov.cn" target="_blank" rel="nofollow">粤ICP备2023123045号-2 </a>
<span>
<a href="#"></a></span>
</p>
</footer>
<div id="backtop" class="backtop">
<div class="bt-box top">
<i class="fa fa-angle-up fa-2x"></i>
</div>
</div>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?b724df561c68ae808f6c323456db4430";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script>
(()=>{const e="https://analyze.jiasou.cc/api/v1/page_view/report/",n="a92e22b2e862418c89a0fb0e07e0b287";let t=null;const o=new Proxy({},{get:(e,n)=>localStorage.getItem(window.btoa(n)),set:(e,n,t)=>!!t&&(localStorage.setItem(window.btoa(n),t),!0)});new Promise((t=>{if(o.fingerprint)t();else{const a=function(){var e={};if(e.userAgent=navigator.userAgent||"",e.plugins=[],navigator.plugins&&navigator.plugins.length>0)for(var n=0;n<navigator.plugins.length;n++){var t={name:navigator.plugins[n].name||"",filename:navigator.plugins[n].filename||"",description:navigator.plugins[n].description||""};e.plugins.push(t)}e.languages=navigator.languages||[navigator.language||""],e.timezone=(new Date).getTimezoneOffset(),e.screenResolution={width:window.screen.width||0,height:window.screen.height||0,pixelDepth:window.screen.pixelDepth||0,colorDepth:window.screen.colorDepth||0};var o=document.createElement("canvas").getContext("2d"),a=[],i=["monospace","sans-serif","serif"];for(n=0;n<i.length;n++){var r=i[n];o.font="12px "+r,o.measureText("abcdefghijklmnopqrstuvwxyz0123456789").width>0&&a.push(r)}return e.fonts=a,e.cookieEnabled=navigator.cookieEnabled||!1,e.localStorage=void 0!==window.localStorage,e.sessionStorage=void 0!==window.sessionStorage,e.doNotTrack="1"===navigator.doNotTrack||"1"===window.doNotTrack||"1"===navigator.msDoNotTrack||"yes"===navigator.doNotTrack,e}();fetch(`${e}u/`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({key:n,f:window.btoa(JSON.stringify(a))})}).then((e=>{console.debug("browser fingerprint sent"),200===e.status&&e.json().then((e=>{console.debug("browser fingerprint received",e),o.fingerprint=e.fp,t()}))}))}})).then((()=>{e&&o.fingerprint&&fetch(e+`?${new URLSearchParams({token:n}).toString()}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({c:window.btoa(JSON.stringify({u:o.fingerprint,l:window.location.href,r:document.referrer}))})}).then((e=>{200==e.status&&e.json().then((e=>{e.track_id&&(t=e.track_id)}))}))})),window.addEventListener("beforeunload",(async n=>{t&&fetch(e+`?${new URLSearchParams({track_id:t}).toString()}`,{method:"GET",headers:{"Content-Type":"text/plain"},keepalive:!0}),n.returnValue=""}))})();
</script><script language="javascript" src="https://www.finclip.com/news/zb_users/plugin/ZF_ad/js/index.js?id=741"></script>
<script language="javascript" src="https://www.finclip.com/news/zb_users/plugin/ZF_ad/js/ZF_ad__cookie.js"></script>
</body>
</html>
<!--178.85 ms , 26 queries , 21434kb memory , 0 error-->
