HTML5超文本标记语言的实现方法

admin html5 2022-02-05 15:04:31 HTML5超文本标记语言"

HTML5：超文本标记语言

html5：用来表达是什么，而不是表达格式

标记



    
        我的页面
        
    
    
        我的第一个html页面

浏览器会根据本机编码来解析html

段落（一般浏览器不换行）

分段

——段落，最后呈现的效果（如是否空行等等，由浏览器来决定）

段内分行无结束标记

第一级标题

,可作六级标题，数字越大，字符越小（内含自动换行）

拆单词，告诉浏览器此单词可分开，以保证右对齐

连续的两层标题


    我喜欢
    你啊

字体样式

加粗,斜体,可嵌套

打字机的字体,字缩小

删除加入

不被提倡的效果与del类似

上标( 平方),下标

高亮

短语格式

强调着重,定义，代码（小段），例子代码，用户输入，变量，引用

特殊格式

地址

，缩进（可嵌套），小引用,不做格式重排（可原本展示原有格式）

属性

加入分割线

，无结束符号，(width=50,占50个像素点),分割线长度占页面50%，高度size=10，align=lest 靠左，缩写PRC

所有标记都可跟title=“”在鼠标停留后出现文字

,文字从右向左排

小于符号/大于符号：a<2——a<2,a>2——a>2,&:&,不可打断的空格 ü——ü,Ü——Ü；

列表

形成文字前的·（形成文字前的数字，即将


    红茶
    可乐

若用

形成词条方糖方的糖，甜的


    方糖
    方的糖，甜的

图片

在html中被看做一个字符，从左往右与字符一起排，传统上属性的值加引号，gif，jpg，png其他格式不一定可在浏览器看，加入网页<iframe></code>,可加width hight属性</p> <p>链接</p> <p>1.<code><a href="http:"（协议非常重要，要是没有会找当前目录下）>网易新闻</a></code>，在文字“网易新闻上”加超链接</p> <p>2.导航至该网页里的某一段落：在某一段落的<code><p></code>中写上<code><p id="haha"></code>(h1,h2也可以用)，用超链接<code><a href="https://www.jb51.net/html5/you.html">前往you网页的位置</a></code></p> <p>若有<code><a href="https://www.iwyv.com/d/files/20220205/1bhx1scrjmt" target=-blank(建立新的空白页面)>网易新闻</a></code></p> <p>在图形上建立超链接</p> <pre class="brush:xhtml;"> <img src="" width=100 hight=100 usemap="#map" /></pre> <pre class="brush:xhtml;"> <map name="map"> <area shape="ract" coords="0,0(坐标),50,50（长宽）" href="http..." alt="news" /> <area shape="circle" coords="75,75,25（半径）" href="http..." alt="news" /> </map></pre> <p>表格</p> <p><code><table></table></code>,大表格有</p> <pre class="brush:xhtml;"> <thead> <tbody> <tfoot> </tfoot> </tbody> </thead></pre> <p><code><table>:此时无格子线<table border="1">:此时有格子线</code></p> <pre class="brush:xhtml;"> <tr>表格的一行 <td>ios</td>一行中的一格 <td>yes</td> <td>yes</td> </tr> <thead> <tr> <th>OS</th> <th>Chinese</th> <th>French</th> </tr> </thead></pre> <p>`表格`</p> <p>列宽会根据表格自动调整</p> <p>到此这篇关于HTML5超文本标记语言的文章就介绍到这了,更多相关HTML5超文本标记语言内容请搜索潘少俊衡以前的文章或继续浏览下面的相关文章，希望大家以后多多支持潘少俊衡！</p> <span id="art_bot" class="jbTestPos"></span> </div> <div class="pagebar"> </div> <div class="pcd_ad"><script src=/d/js/acmsd/thea14.js></script></div> <div class="mbd_ad"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5850285417076520" data-ad-slot="9825815134" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="rights"> <h5>版权声明</h5> <p>本文仅代表作者观点，不代表本站立场。<br> 本文系作者授权发表，未经许可，不得转载。<br>本文地址：/web/html5/73001.html</p> <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a><a href="#" class="bds_twi" data-cmd="twi" title="分享到Twitter"></a><a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_evernotecn" data-cmd="evernotecn" title="分享到印象笔记"></a></div> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"24"},"share":{},"image":{"viewList":["fbook","twi","linkedin","qzone","tsina","douban","weixin","evernotecn"],"viewText":"分享到：","viewSize":"16"}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/static/api/js/share.js?v=89860593.js?'];</script> </div> <div class="r-pn-post"> <div class="shang"><a title="HTML+CSS+JavaScript实现图片3D展览的示例代码" href="/web/html5/72999.html" rel="bookmark" class="prev_p"><span>上一篇 :</span> HTML+CSS+JavaScript实现图片3D展览的示例代码 </a></div> <div class="xia"><a href="/web/html5/73003.html" rel="bookmark" class="next_p"><span>下一篇 :</span> boostrap modal 闪现问题的解决方法</a></div> <div class="clear"></div> </div> </div> <div class="related"> <h4>相关文章</h4> <ul> </ul> </div> <div class="post_comments"> <div id="comment"> <link href="/skin/ecmspl/css/pl.css" rel="stylesheet"> <div class="showpage" id="plpost"> <table width="100%" border="0" cellpadding="0" cellspacing="0" style="line-height: 25px; padding: 5px 3px 1px 8px; font-size: 18px;"> <tr><td><strong><font color="#333333">留言与评论（共有 <span id="infocommentnumarea">0</span> 条评论）</font></strong></td></tr> </table> <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您没什么话要说吗？"); obj.saytext.focus(); return false; } return true; } </script> <form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td> <script src="/e/pl/loginjspl.php"></script> <textarea name="saytext" rows="6" id="saytext" placeholder="请遵守互联网相关规定，不要发布广告和违法内容!"></textarea> <script src="/d/js/js/plface.js"></script>    <table width='100%' align='left' cellpadding=3 cellspacing=1 bgcolor='#FFF'> <tr> <td width="80%" height="40" bgcolor="#FFFFFF">验证码：<input name="key" type="text" class="inputText" size="16" /> <img src="/e/ShowKey/?v=pl" align="absmiddle" name="plKeyImg" id="plKeyImg" onclick="plKeyImg.src='/e/ShowKey/?v=pl&t='+Math.random()" title="看不清楚,点击刷新" /> </td> <td width="20%" height="40" bgcolor="#FFFFFF"> <input name="sumbit" type="submit" value="提交评论" tabindex="6" style="border-radius: 5px;font-size: 16px;background: #e94c3d none repeat scroll 0% 0%;border: 0px none;margin: 0px 16px;padding: 1px 16px;height: 33px;line-height: 30px;color: rgb(255, 255, 255);opacity: 0.95;"> <input name="id" type="hidden" id="id" value="73001" /> <input name="classid" type="hidden" id="classid" value="47" /> <input name="enews" type="hidden" id="enews" value="AddPl" /> <input name="repid" type="hidden" id="repid" value="0" /> <input type="hidden" name="ecmsfrom" value="/web/html5/73001.html"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table></form> <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF"> <tr> <td bgcolor="#FFFFFF" id="infocommentarea"></td> </tr> </table> <script src="/e/extend/infocomment/commentajax.php?classid=47&id=73001"></script> </div> </div> </div> <div class="pcd_ad"><script src=/d/js/acmsd/thea18.js></script></div> <div class="mbd_ad">  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5850285417076520" data-ad-slot="9383780240" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <script type="text/javascript" src="//gg.iwyv.com/production/mh_g/i/static/wi_djn.js"></script> </div> </div>  <div class="mainr"> <div class="widget widget_ad"> <script src=/d/js/acmsd/thea14.js></script> </div> <div class="widget widget_hotpost"> <h4>热门文章</h4> <ul> <li><i class="red">1</i><a href="/web/html5/75947.html" target="_blank">基于HTML5超酷摄像头（HTML5 webcam）拍照功能实现代码</a></li> <li><i class="red">2</i><a href="/web/html5/73062.html" target="_blank">Html5饼图绘制实现统计图的方法</a></li> <li><i class="red">3</i><a href="/web/html5/73961.html" target="_blank">钉钉企业内部H5微应用开发详解</a></li> <li><i>4</i><a href="/web/html5/72861.html" target="_blank">前端监听websocket消息并实时弹出(实例代码)</a></li> <li><i>5</i><a href="/web/html5/72866.html" target="_blank">html实现弹窗的实例</a></li> <li><i>6</i><a href="/web/html5/72874.html" target="_blank">HTML5轮播图全代码</a></li> <li><i>7</i><a href="/web/html5/72875.html" target="_blank">使用PDF.js渲染canvas实现预览pdf的效果示例</a></li> <li><i>8</i><a href="/web/html5/75147.html" target="_blank">HTML5实现自带进度条和滑块滑杆效果</a></li> <li><i>9</i><a href="/web/html5/75201.html" target="_blank">canvas实现按住鼠标移动绘制出轨迹的示例代码</a></li> <li><i>10</i><a href="/web/html5/73050.html" target="_blank">uniapp+Html5端实现PC端适配</a></li> </ul> </div> <div class="widget widget_ad"> <script src=/d/js/acmsd/thea10.js></script> </div> <div class="widget widget_previous"> <h4>最近发表</h4> <ul> <li><a href="/ITzixun/178187.html">日本雷蛇官网实习生上错价了？游戏本只卖15950日元？</a></li> <li><a href="/youxi/175574.html">《原神》物归原主又归原主世界任务指南游戏攻略</a></li> <li><a href="/youxi/175631.html">《原神》振晶的研究第三天试用角色2000分攻略游戏攻略</a></li> <li><a href="/youxi/175559.html">《原神》2.6版全旋曜玉帛点位说明_蒙德游戏攻略</a></li> <li><a href="/youxi/175547.html">《原神》2.6版深渊11-1守护镇石技巧游戏攻略</a></li> <li><a href="/youxi/175604.html">《原神》神里绫华装备搭配推荐游戏攻略</a></li> <li><a href="/youxi/175516.html">《原神》云堇突破材料获取方法游戏攻略</a></li> <li><a href="/youxi/175494.html">《原神》世界任务他乡迷失客攻略游戏攻略</a></li> <li><a href="/youxi/175497.html">《原神》神里绫华全面培养指南神里绫华技能详解与出装建议游戏攻略</a></li> <li><a href="/youxi/175460.html">《原神》神里绫人平民向大世界配队思路游戏攻略</a></li> </ul> </div> <div class="widget widget_ad"> <script src=/d/js/acmsd/thea11.js></script> </div> <div class="widget widget_tags"> <h4>标签列表</h4> <ul> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E5%BC%80%E6%94%BE%E4%B8%96%E7%95%8C">开放世界</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E6%B2%99%E7%9B%92">沙盒</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=win10">win10</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=3D%E8%AE%BE%E8%AE%A1">3D设计</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=PS">PS</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E9%AC%BC%E8%B0%B7%E5%85%AB%E8%8D%92">鬼谷八荒</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=win7">win7</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E6%89%8B%E6%B8%B8">手游</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E5%9B%A2%E9%98%9F%E7%AB%9E%E6%8A%80">团队竞技</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E5%8E%9F%E7%A5%9E">原神</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E4%BA%8C%E6%AC%A1%E5%85%83%E6%B8%B8%E6%88%8F">二次元游戏</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%AD%96%E7%95%A5">策略</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%94%B5%E8%84%91%E5%B8%B8%E8%AF%86">电脑常识</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%8E%8B%E8%80%85%E8%8D%A3%E8%80%80">王者荣耀</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%85%A7%E7%89%87%E5%A4%84%E7%90%86">照片处理</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=MySQL">MySQL</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E5%90%83%E9%B8%A1">吃鸡</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%AC%94%E8%AE%B0%E6%9C%AC">笔记本</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E7%BB%9D%E5%9C%B0%E6%B1%82%E7%94%9F%E5%A4%A7%E9%80%83%E6%9D%80">绝地求生大逃杀</a></li> <li class="submenu"><a target="_blank" href="/e/tags/?tagname=%E5%B0%84%E5%87%BB%E7%AB%9E%E4%BA%89">射击竞争</a></li> </ul> </div> <div class="widget widget_ad"> <script src=/d/js/acmsd/thea12.js></script> </div> </div> </div> </div> <script type="text/javascript"> // JavaScript Document function goTopEx(){ var obj=document.getElementById("goTopBtn"); function getScrollTop(){ return document.documentElement.scrollTop || document.body.scrollTop; } function setScrollTop(value){ if(document.documentElement.scrollTop){ document.documentElement.scrollTop=value; }else{ document.body.scrollTop=value; } } window.onscroll=function(){getScrollTop()>0?obj.style.display="":obj.style.display="none"; var h=document.body.scrollHeight - getScrollTop() - obj.offsetTop - obj.offsetHeight; obj.style.bottom=0+"px"; if(h<350){ obj.style.bottom=340+"px"; obj.style.top="auto"; } } obj.onclick=function(){ var goTop=setInterval(scrollMove,10); function scrollMove(){ setScrollTop(getScrollTop()/1.1); if(getScrollTop()<1)clearInterval(goTop); } } } </script>  <div id="jz52top" > <span> <DIV style="DISPLAY: none" id="goTopBtn" ><a title="返回顶部" class="jz52topa" ><b>返回顶部</b></a></DIV> </span> <SCRIPT type=text/javascript>goTopEx();</SCRIPT> <span> <ul id="navmenu"> <li><a title="QR Code" class="jzqr" ><b>QR Code</b></a> <ul> <div id="jzqrn"> <img src="/skin/ecms172/images/weixin.png" width="228" height="228" /> <p>打开手机扫描上面的二维码</p> </div> </ul> </li> </ul> </span> </div>     <div class="ft_wp"> <div id="ft" class="wp cl ftddd" > <div class="ft_info" > <div class="ft_z1"> <p>潘少俊衡</p> <h3 class="ft_z_zdxx_zx"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?1cc50873f5e983e8073d99a425b87921"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <span class="pipe"> | </span> 桂ICP备2023010378号-4 </h3> <h2 class="ft_z_zdxx_zx"> <p style="font-size:12px;">Powered By <a href="https://www.iwyv.com/" title="潘少俊衡" target="_blank">EmpireCMS</a> </p> </h2> </div> <div class="ft_z2"> </div> <div class="ft_z2">  <script async src="https://www.googletagmanager.com/gtag/js?id=G-XFMBHZNTEL"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XFMBHZNTEL'); </script> <p><a target="_blank" href="https://www.iixiang.com/">爱享小站</a></p> <p><a target="_blank" href="https://www.sdzdyn.com/">中德益农</a></p> <p><a target="_blank" href="https://www.guujie.com">谷姐神农</a></p> <p><a target="_blank" href="https://huanyafeiliao.com/">环亚肥料</a></p> </div> <div class="ft_z2"> <p><a target="_blank" href="https://beian.miit.gov.cn/Integrated/index">桂ICP备2023010378号-4</a></p> <p><a href="https://beian.miit.gov.cn" title="桂公网备 45012202000125号" target="_blank">桂公网备 45012202000125号</a></p> </div> <div class="ft_z2"> <p><a target="_blank" href="https://www.iwyv.com/panshaoSEO/1277.html">联系我们</a></p> </div> <div class="ft_z2"> <p><a target="_blank" href="https://www.iwyv.com/panshaoSEO/1277.html">商业合作</a></p> <p><a target="_blank" href="https://www.iwyv.com/panshaoSEO/1277.html">广告投放</a></p> <p><a target="_blank" href="/tgxz/">投稿须知</a></p> </div> <div class="ft_bx"style="left:335px;"> </div> <div class="ft_bx ft_t1"> </div> <div class="ft_bx ft_t2"> </div> <div class="ft_bx ft_t3"> </div> <div class="ft_bx ft_t4"> </div> <div class="ft_z3"> <dd> <span><img src="/skin/ecms172/images/weixin.png" width="75" height="72.2" /></span> <p>   </p> <p>使用手机软件扫描微信二维码</p> <p>关注我们可获取更多热点资讯</p> <p>感谢潘少俊衡友情技术支持</p> </dd> </div> </div> </div> </div> <div class="clear"></div>  <script src="/skin/ecms172/js/common.min.js" type="text/javascript"></script> <script></script> </body> </html>

1000元配置

2000元配置

3000元配置

4000元配置

5000元配置

6000元配置

7000元配置

8000元配置

9000元配置

万元配置

i3配置

i5配置

i7配置

APU配置

R5配置

R7配置

游戏攻略

软件教程

Win10教程

Win7教程

Mac教程

Linux教程

U盘教程

Server教程

HTML5超文本标记语言的实现方法

我喜欢

你啊