HTML的笔记及展示（1）（锚点、a元素添加超链接href、img元素、iframe元素、HTML5新增的拖放API）-出海指南-网游政策观察

2026-06-26 16:55:32
admin

之前接触过一些前端内容，但是时间长了早就忘记了，最近开始系统的学习，做一下总结，方便日后使用。

我把总结内容展示在了自己的服务器上，欢迎大家查看网址:功能简单演示(暂时不可访问，19年8月26日更新)，进入后按下F12键或者右击鼠标查看源码,如下图:（下篇我会总结关于服务器购买、以及连接Tomcat的详细过程）

对于初学者来说,建议使用记事本或者Notepad++来写

以下列出的常用元素以及属性，都在我的总结中有所展示

1.基本元素：

：注释；

：根元素；

：页面头部分；

：页面主体部分；

：页面标题；</p> <p><h1>到<h6>：标题；</p> <p></br>:换行；</p> <p></hr>：水平线；</p> <p><div>：文档中的节；</p> <p><span>：与div基本相似，表示一段一般性文本，且默认不会换行。</p> <p>2.文本格式相关元素：</p> <p><b>:粗体文本；</p> <p><i>：斜体文本；</p> <p><em>：强调文本；</p> <p><strong>：粗体文本；</p> <p><sup>：上标文本；</p> <p><sub>：下标文本；</p> <p><bdo>：定义文本显示方向。</p> <p>3.使用a元素添加超链接：</p> <p>href：指定超链接的另一个资源。</p> <p>target：指定使用框架集中的哪个框架来装载另一个资源（属性值：_self自身来装载新资源、_blank新窗口装载新资源、_top顶层框架装载新资源、_parent父框架装载新资）</p> <p>4.锚点：</p> <p>这是我在总结中写的锚点，指定链接在当前页面，name的值要和#后面的值一样</p> <p>代码语言：javascript复制</p> <p><a name="blog" ><p>锚点定位客</p></a></p> <p><a href="#blog" ">定位到博客锚点</a>5.列表相关元素：</p> <p><ul>：定义无序列表；</p> <p><ol>：定义有序列表；</p> <p><reversed>：该属性指定是否将排序反转；</p> <p><li>：定义列表项。</p> <p>6.使用img元素添加图片：</p> <p>src：指定图片文件所在位置；</p> <p>alt：指定一段文本，作为该图片的提示信息；</p> <p>width、height：指定图片的宽、高，该属性可以是百分百，也可以是像素值；</p> <p><map>：用于图片映射；</p> <p><area>：用于定义图片映射的内部区域；</p> <p>7.表格相关元素比较简单就不赘述了</p> <p>8.HTML5增强的iframe元素：该元素用于在普通HTML页面中生成一个行内框架。</p> <p>包含的属性：src:指定一个URL，指定该iframe将装载哪个页面；</p> <p>name：设置该iframe的名字；</p> <p>scrolling：设置是否在iframe中显示滚动条；</p> <p>height、width：设置iframe的宽、高；</p> <p>frameborder：设置是否显示iframe的边框；</p> <p>9.使用link元素定义页面图标：把想定义的图标后缀名改为.ico</p> <p>代码语言：javascript复制</p> <p><link href="hang.ico" rel="shoutcut icon" type="image/x-icon"/> 这是我显示的页面图标</p> <p>但是我尝试了QQ浏览器，360浏览器和谷歌浏览器，只有谷歌浏览器会显示，相信不久，其他浏览器也可以显示了。</p> <p>10.HTML5新增的拖放API：</p> <p>设置draggable="true"表示该元素可以拖动，目前在我本地可以拖动，我放到服务器中的就只能通过谷歌浏览器进去我的网址才可以拖动，应该是其他浏览器还没有这个功能，若要携带数据则需要一些js，下面是需要的js代码：</p> <p>代码语言：javascript复制<script type="text/javascript"></p> <p>var source = document.getElementById("source");</p> <p>source.ondragstart = function(evt)</p> <p>{</p> <p>//拖动数据</p> <p>evt.dataTransfer.getData("text","巴啦啦能量");</p> <p>console.log(evt);</p> <p>}</p> <p>document.ondragover = function(evt){</p> <p>//取消事件的默认行为</p> <p>return false;</p> <p>}</p> <p>document.ondrop = function(evt){</p> <p>console.log(evt);</p> <p>//取消事件的默认行为</p> <p>source.style.position = "absolute";</p> <p>source.style.left = evt.pageX + "px";</p> <p>source.style.top = evt.pageY + "px";</p> <p>return false;</p> <p>}</p> <p></script>这是目前的大概总结，应该算是最简单入门的，一定要掌握了,后续学习我会继续把总结写入博客。</p> </p> </div> </div> </div> </div> <div class="post-pagi-area"> <div class="post-previous"><a href="/c39d6390e20f2fd5/5a38f1271057fb0f.html"> <div class="icon"></div> <div class="nav-title"> Previus Post<h5>Steam 社群 :: 指南 :: 一般来说，steam上面的游戏要过多久才会打折呢？</h5> </div> </a></div> </div>  </div> </div> </div> </div> </section> <footer class="footer-bottom bg-dark"> <div class="container"> <p class="text-center text-white"> <div style="position: relative;bottom: 10px;margin: 0 auto;left: 0;right: 0;text-align: center;"> Copyright © 2088 网游政策观察 - 行业合规指南 All Rights Reserved. <div style="text-align: center;"> 友情链接 <script> var _mtj = _mtj || []; (function () { var mtj = document.createElement("script"); mtj.src = "https://node91.aizhantj.com:21233/tjjs/?k=gdvpk3plqch"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mtj, s); })(); </script> </div> </div> </p> </div> </footer><a href="#" class="trx_addons_scroll_to_top trx_addons_icon-up" title="Scroll to top"></a> <script type="text/javascript" src="/static/js/jquery.magnific-popup.min.js" id="magnific-popup-js"></script> <script type="text/javascript" src="/static/js/__scripts.js" id="trx_addons-js"></script> <script type="text/javascript" src="/static/js/bootstrap.bundle.min.js" id="bootstrap-js"></script> <script type="text/javascript" src="/static/js/circle-progress.js" id="circle-progress-js"></script> <script type="text/javascript" src="/static/js/count-to.js" id="count-to-js"></script> <script type="text/javascript" src="/static/js/isotope.pkgd.min.js" id="isotope-pkgd-js"></script> <script type="text/javascript" src="/static/js/jquery.appear.js" id="appear-js"></script> <script type="text/javascript" src="/static/js/jquery.easing.min.js" id="easing-js"></script> <script type="text/javascript" src="/static/js/jquery.nice-select.min.js" id="nice-select-js"></script> <script type="text/javascript" src="/static/js/popper.min.js" id="popper-js"></script> <script type="text/javascript" src="/static/js/modernizr.js" id="modernizr-js"></script> <script type="text/javascript" src="/static/js/progress-bar.min.js" id="progress-bar-js"></script> <script type="text/javascript" src="/static/js/swiper-bundle.min.js" id="swiper-js"></script> <script type="text/javascript" src="/static/js/TweenMax.min.js" id="TweenMax-js"></script> <script type="text/javascript" src="/static/js/validnavs.js" id="ambrox-validnavs-js"></script> <script type="text/javascript" src="/static/js/wow.min.js" id="wow-js"></script> <script type="text/javascript" src="/static/js/imagesloaded.min.js" id="imagesloaded-js"></script> <script type="text/javascript" src="/static/js/YTPlayer.min.js" id="YTPlayer-js"></script> <script type="text/javascript" src="/static/js/typed.js" id="typed-js"></script> <script type="text/javascript" src="/static/js/main.js" id="ambrox-main-script-js"></script> <script type="text/javascript" src="/static/js/comment-reply.min.js" id="comment-reply-js" async="async" data-wp-strategy="async"></script> </body> </html>