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/89585.html"><img src="https://www.finclip.com/news/zb_users/theme/zblog5_news/image/random_img/8.jpg"></a></div>
<div class="related_detail">
<h3><a href="https://www.finclip.com/news/f/89585.html" title=".club域名真的好吗？探讨其优缺点及适用场景">.club域名真的好吗？探讨其优缺点及适用场景</a></h3>
<div class="meta">
<span><i class="fa fa-eye"></i>923</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/90683.html"><img src="https://www.finclip.com/news/zb_users/theme/zblog5_news/image/random_img/10.jpg"></a></div>
<div class="related_detail">
<h3><a href="https://www.finclip.com/news/f/90683.html" title="ASP下滑加载模板，如何实现与优化？">ASP下滑加载模板，如何实现与优化？</a></h3>
<div class="meta">
<span><i class="fa fa-eye"></i>923</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/90405.html"><img src="https://www.finclip.com/news/zb_users/theme/zblog5_news/image/random_img/1.jpg"></a></div>
<div class="related_detail">
<h3><a href="https://www.finclip.com/news/f/90405.html" title="Cocos游戏开发的基础与实践探索，助你快速成长的秘籍">Cocos游戏开发的基础与实践探索，助你快速成长的秘籍</a></h3>
<div class="meta">
<span><i class="fa fa-eye"></i>923</span>
<span><i class="fa fa-clock-o"></i>2022-10-16</span>
</div>
</div>
</article>
</div>
</div>
<!--<p class="comment-disable sb br mb"><i class="iconfont icon-cry"></i>抱歉，评论功能暂时关闭!</p>-->
</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/90711.html">触点数字孪生，揭秘它的独特魅力</a></li>
<li><a title="App 2.0开发模式的行业看法" href="https://www.finclip.com/news/f/90688.html">App 2.0开发模式的行业看法</a></li>
<li><a title="微信小程序蓝牙开发教程带你探索物联网的便捷与魅力" href="https://www.finclip.com/news/f/90674.html">微信小程序蓝牙开发教程带你探索物联网的便捷与魅力</a></li>
<li><a title="小程序数据埋点分析如何助力提升用户体验与运营效率？" href="https://www.finclip.com/news/f/90641.html">小程序数据埋点分析如何助力提升用户体验与运营效率？</a></li>
<li><a title="游戏化互动技术如何改变我们的学习与交流方式" href="https://www.finclip.com/news/f/90509.html">游戏化互动技术如何改变我们的学习与交流方式</a></li>
<li><a title="小程序支付的技术解析与实践应用，助力开发者提升用户体验" href="https://www.finclip.com/news/f/90475.html">小程序支付的技术解析与实践应用，助力开发者提升用户体验</a></li>
<li><a title=".club域名真的好吗？探讨其优缺点及适用场景" href="https://www.finclip.com/news/f/89585.html">.club域名真的好吗？探讨其优缺点及适用场景</a></li>
<li><a title="探索大模型编程IDE在软件开发中的应用，如何提高开发效率和代码质量" href="https://www.finclip.com/news/f/88904.html">探索大模型编程IDE在软件开发中的应用，如何提高开发效率和代码质量</a></li>
<li><a title="提升跨平台小程序开发效率与安全性的关键—软件开发配置管理" href="https://www.finclip.com/news/f/88750.html">提升跨平台小程序开发效率与安全性的关键—软件开发配置管理</a></li>
<li><a title="微信小程序群发功能代码实现详细分析" href="https://www.finclip.com/news/f/87752.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/landpage-product?channel=news" title="小程序SDK">小程序SDK</a></h4></li>
<li><h4><a href="https://www.finclip.com/mop/document/?channel=news" title="Finclip技术文档">Finclip技术文档</a></h4></li>
<li><h4><a href="https://www.finclip.com/start/?channel=news" title="小程序快速入门">小程序快速入门</a></h4></li>
<li><h4><a href="https://www.finclip.com/downloads/?channel=news" title="资源下载使用">资源下载使用</a></h4></li>
<li><h4><a href="https://www.finclip.com/product/now/?channel=news" title="实时内容互动引擎">实时内容互动引擎</a></h4></li>
<li><h4><a href="https://www.finclip.com/device-compatibility/?channel=news" title="跨终端设备适配">跨终端设备适配</a></h4></li>
<li><h4><a href="https://www.finclip.com/landpage-transformation/?channel=news" title="小程序生成App">小程序生成App</a></h4></li>
<li><h4><a href="https://www.finclip.com/product/management/?channel=news" title="小程序生命周期管理">小程序生命周期管理</a></h4></li>
<li><h4><a href="https://www.finclip.com/landing/finclip-studio/?channel=news" title="AI 开发小程序">AI 开发小程序</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/88613.html" title="前端跨端方案的未来，技术与市场的双重挑战">前端跨端方案的未来，技术与市场的双重挑战</a></h4></li>
<li><h4><a href="https://www.finclip.com/news/f/88609.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/88588.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/landpage-bank/?channel=news" title="银行解决方案">银行解决方案</a></h4></li>
<li><h4><a href="https://www.finclip.com/landpage-common/?channel=news" title="超级App 解决方案">超级App 解决方案</a></h4></li>
<li><h4><a href="https://www.finclip.com/landpage-car/?channel=news" title="智慧车载解决方案">智慧车载解决方案</a></h4></li>
<li><h4><a href="https://www.finclip.com/landing/information-technology-application-innovation/?channel=news" title="信创解决方案">信创解决方案</a></h4></li>
<li><h4><a href="https://www.finclip.com/landpage-iot/?channel=news" title="物联网解决方案">物联网解决方案</a></h4></li>
<li><h4><a href="https://www.finclip.com/landpage-game/?channel=news" title="小游戏解决方案">小游戏解决方案</a></h4></li>
<li><h4><a href="https://www.finclip.com/media-landpage/?channel=news" 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"><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>
</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">© 2023 XWNews <a href="#" target="_blank" rel="nofollow">京ICP备1111040123号-1</a>
<span>
<a href="https://www.zblogcn.com/">版权归zblog所有</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 type='text/javascript' src="https://www.finclip.com/news/zb_users/theme/zblog5_news/script/custom.js"></script>
<script type='text/javascript' src="https://www.finclip.com/news/zb_users/theme/zblog5_news/script/nav.js"></script>
<link rel="stylesheet" href="https://www.finclip.com/news/zb_users/theme/zblog5_news/share/css/share.min.css">
<script src="https://www.finclip.com/news/zb_users/theme/zblog5_news/share/js/jquery.share.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
loop: true,
autoplay:2000,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30,
effect: 'fade',
});
</script>
<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=246"></script>
<script language="javascript" src="https://www.finclip.com/news/zb_users/plugin/ZF_ad/js/ZF_ad__cookie.js"></script>
</body>
</html><!--39.77 ms , 16 queries , 23994kb memory , 0 error-->