10.20 冯娜

学习日志
一、新建html文件:(创建时的代码都一样)

(1)vscode:

    

    

Document

    

我出自vscode

(2)HBuilder X:

        

HBuilder

​ 我来自HBuilder

(3)记事本:

    

    

Document

    

我出自于记事本

二、使用vscode、HBuilder、webstorm编写程序
三、可视化编写HTML的工具:

(1)KindEditor:在线编写HTML编辑器,有很多功能都已经写出,可直接像写word那样使用它们,所见即所得,很方便。

(2)Dreamweaver:可视化编辑HTML,会有种双向绑定的感觉,代码编写可以同步在可视化窗口中,且可以根据自己的想法写代码,很直观的看到结果。

(3)CKeditor:和KindEditor在界面上看起来差不多,但是需要购买才可以使用,插件价格较贵,不适合学习使用。

四、html标签:

(1)HTML格式:

文档声明:<!DOCTYPE html>

网页结构:

<head>
    <meta charset="utf-8"/> //字符编码
    <title>网页名称</title>
</head>

​ 内容

(2)标题:h1~h6:逐渐变小

(3)段落:

是块级元素,会有段落的格式(段前段后有间距)

(4)文本格式化:文本的表现样式

    

一代人终将老去

    

总有人正年轻

这是上标,这是下标

我是删除字

这里,这里,插入字

    一段电脑代码 print("Hello world")

键盘输入

计算机

i=10;

    

对空行和 空格

​ 进行控制

The HW

​ Written by Jon Doe.

Visit us at:

Example.com

Box 564, Disneyland

USA

    

该段文字从左向右显示。

    

该段文字从右到左显示。

(5)链接:链接的名字

(6)图片:(三种情况)

a、图片与html文件在同一文件夹内:

b、图片与html文件在同一文件夹下,图片文件夹与html文件属于兄弟关系:与./效果一致

c、图片文件夹与html文件夹属于兄弟关系:

注意:../表示上一层

(7)列表:

a、无序列表:

您喜欢的水果有哪些呢?

  • 香蕉
  • 苹果
  • 榴莲
  • 西瓜

b、有序列表:

奥运金牌榜

  1. 美国
  2. 英国
  3. 中国
  4. 俄罗斯

c、自定义列表:

地区:

北京

昌平区

海定区

大兴区

东城区

山东

威海

济南

潍坊

青岛

(8)区块:

a、

:块级元素:还有

~

(9)表单:

用户名:

密码:

(10)头部:

a、:用于定义标题</p> <p>b、</p> <style>:用于css样式的引用</p> <p>c、<meta>:描述了基本的元数据</p> <p>d、<link>:用于与外部资源链接</p> <div class="wbp-cbm"> <div class="wb-btn-like" data-post_id="4136" data-count="0" ><svg class="wb-icon wbsico-like"><use xlink:href="#wbsico-like"></use></svg> <span class="like-count">点赞</span> </div> </div> </div> </article> <div class="sidebar"> <div class="sb-inner"> <div class="width-border-box"> <section class="widget widget-download"> <div class="wbdl-custom-info"></div> </section> <section class="widget widget-social"> <div class="wb-inline-mode"><a class="wb-share-poster j-poster-btn" data-id="4136"><svg class="wb-icon wbsico-poster"><use xlink:href="#wbsico-poster"></use></svg><span>微海报</span></a><div class="wb-share-list" > <a class="share-logo icon-weixin" data-cmd="weixin" title="分享到微信" rel="nofollow"> <svg class="wb-icon wbsico-share-weixin"><use xlink:href="#wbsico-share-weixin"></use></svg> </a> <a class="share-logo icon-qq" data-cmd="qq" title="分享到QQ" rel="nofollow"> <svg class="wb-icon wbsico-share-qq"><use xlink:href="#wbsico-share-qq"></use></svg> </a> <a class="share-logo icon-weibo" data-cmd="weibo" title="分享到微博" rel="nofollow"> <svg class="wb-icon wbsico-share-weibo"><use xlink:href="#wbsico-share-weibo"></use></svg> </a> </div></div> <span class="fav" data-id="4136"> <svg class="wb-icon wbsico-fav"><use xlink:href="#wbsico-fav"></use></svg> </span> </section> </div> <section class="widget widget-hot"> <h3>热门资源</h3><ul class="post-list wb-scroll-list"><li class="post" data-num="1"> <div class="inner"> <a class="media-pic" href="https://www.ycdledu.com/si-zhong-kuang-jia-de-qu-bie-bi-jiao/6634/"><img class="auto-cover" src="https://gitee.com/FengJiali52155/fjlimg/raw/master/20201205202145.png" loading="lazy" decoding="async" alt="四种框架的区别比较:bootstrap,layui,elementui,vantui"></a> <div class="media-body"> <a class="title" href="https://www.ycdledu.com/si-zhong-kuang-jia-de-qu-bie-bi-jiao/6634/" data-num="1">四种框架的区别比较:bootstrap,layui,elementui,vantui</a> <p class="post-metas"><svg class="wb-icon wbsico-views"><use xlink:href="#wbsico-views"></use></svg><em class="meta-dl">3926</em></p> </div> </li><li class="post" data-num="2"> <div class="inner"> <a class="media-pic" href="https://www.ycdledu.com/liangheji20201026/5411/"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="梁贺寄-20201026"></a> <div class="media-body"> <a class="title" href="https://www.ycdledu.com/liangheji20201026/5411/" data-num="2">梁贺寄-20201026</a> <p class="post-metas"><svg class="wb-icon wbsico-views"><use xlink:href="#wbsico-views"></use></svg><em class="meta-dl">3798</em></p> </div> </li><li class="post" data-num="3"> <div class="inner"> <a class="media-pic" href="https://www.ycdledu.com/chenbaian20201026/5393/"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="陈柏安-20201026"></a> <div class="media-body"> <a class="title" href="https://www.ycdledu.com/chenbaian20201026/5393/" data-num="3">陈柏安-20201026</a> <p class="post-metas"><svg class="wb-icon wbsico-views"><use xlink:href="#wbsico-views"></use></svg><em class="meta-dl">3300</em></p> </div> </li><li class="post" data-num="4"> <div class="inner"> <a class="media-pic" href="https://www.ycdledu.com/20201105%e6%a2%81%e8%b4%ba%e5%af%84/6237/"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="2020-11-05梁贺寄"></a> <div class="media-body"> <a class="title" href="https://www.ycdledu.com/20201105%e6%a2%81%e8%b4%ba%e5%af%84/6237/" data-num="4">2020-11-05梁贺寄</a> <p class="post-metas"><svg class="wb-icon wbsico-views"><use xlink:href="#wbsico-views"></use></svg><em class="meta-dl">1685</em></p> </div> </li><li class="post" data-num="5"> <div class="inner"> <a class="media-pic" href="https://www.ycdledu.com/mac-an-zhuangnpm-install-g-vuecli-bao-cuo-jie-jue/2919/"><img class="auto-cover" src="http://www.ycdledu.com/wp-content/uploads/2020/09/16002385361401.jpg" loading="lazy" decoding="async" alt="mac安装npm install -g @vue/cli报错解决"></a> <div class="media-body"> <a class="title" href="https://www.ycdledu.com/mac-an-zhuangnpm-install-g-vuecli-bao-cuo-jie-jue/2919/" data-num="5">mac安装npm install -g @vue/cli报错解决</a> <p class="post-metas"><svg class="wb-icon wbsico-views"><use xlink:href="#wbsico-views"></use></svg><em class="meta-dl">1531</em></p> </div> </li></ul></section> </div> </div></div> <section class="panel-inner panel-tags pw"> <div class="tag-items hot-tags"> <a href="https://www.ycdledu.com/tag/%e4%ba%91%e5%88%9b%e5%8a%a8%e5%8a%9b%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e5%b7%a5%e7%a8%8b%e5%b8%88/">云创动力前端开发工程师</a> <a href="https://www.ycdledu.com/tag/%e4%ba%91%e5%88%9b%e9%9b%86%e8%ae%ad/">云创集训</a> <a href="https://www.ycdledu.com/tag/%e5%ad%a6%e5%91%98%e6%97%a5%e5%bf%97/">学员日志</a> <a href="https://www.ycdledu.com/tag/%e5%bc%80%e5%8f%91%e5%96%b5/">开发喵</a> <a href="https://www.ycdledu.com/tag/%e6%88%90%e9%83%bd%e4%ba%91%e5%88%9b%e5%8a%a8%e5%8a%9b/">成都云创动力</a> <a href="https://www.ycdledu.com/tag/%e6%95%99%e8%82%b2%e7%94%9f%e6%80%81%e6%9c%8d%e5%8a%a1%e5%95%86/">教育生态服务商</a> </div> </section> <section class="pw related-posts panel-inner"> <h3 class="sc-title">相关推荐</h3> <ul class="articles-list list-mode-a"><li class="post"> <a class="inner" href="https://www.ycdledu.com/20200818chen-yu/1671/"> <div class="media-pic"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="20200818_陈宇_"></div> <div class="media-body"> <div class="post-title">20200818_陈宇_</div> </div> </a> </li><li class="post"> <a class="inner" href="https://www.ycdledu.com/20201130-wang-wei/5293/"> <div class="media-pic"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="20201130 王维"></div> <div class="media-body"> <div class="post-title">20201130 王维</div> </div> </a> </li><li class="post"> <a class="inner" href="https://www.ycdledu.com/kncl34e20200904li-cheng/8564/"> <div class="media-pic"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="KNCL34E_20200904-李诚"></div> <div class="media-body"> <div class="post-title">KNCL34E_20200904-李诚</div> </div> </a> </li><li class="post"> <a class="inner" href="https://www.ycdledu.com/desktopqt2jo2320200909sun-zhong-xia/8889/"> <div class="media-pic"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="DESKTOP-QT2JO23_20200909-孙中霞"></div> <div class="media-body"> <div class="post-title">DESKTOP-QT2JO23_20200909-孙中霞</div> </div> </a> </li></ul> </section> <section class="panel-inner sc-comments pw"> <h3 class="sc-title">评论</h3> <div id="comments" class="wb-comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title"> <small><a rel="nofollow" id="cancel-comment-reply-link" href="/1020-feng-na/4136/#respond" style="display:none;">取消回复</a></small></h3><p class="must-log-in">要发表评论,您必须先<a href="https://www.ycdledu.com/wp-login.php?redirect_to=https%3A%2F%2Fwww.ycdledu.com%2F1020-feng-na%2F4136%2F">登录</a>。</p> </div><!-- #respond --> </div> </section> </div> <footer class="footer"> <div class="ft-inner pw"> <div class="copyright"> <div class="ib"> © 2024 成都云创动力科技有限公司 </div> <a class="ib pdh" href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">蜀ICP备20006351号-1</a> </div> </div> </footer> <script type="text/javascript" src="https://www.ycdledu.com/wp-includes/js/comment-reply.min.js?ver=6.5.5" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script type="text/javascript" src="https://www.ycdledu.com/wp-content/plugins/metronet-profile-picture/js/mpp-frontend.js?ver=2.3.11" id="mpp_gutenberg_tabs-js"></script> <script type="text/javascript" src="https://www.ycdledu.com/wp-content/themes/storeys-pro/js/base.js?ver=2.5.3" id="wbolt-base-js"></script> <script type="text/javascript" src="https://www.ycdledu.com/wp-content/themes/storeys-pro/js/single.js?ver=2.5.3" id="wbolt-single-js"></script> <div class="tool-bar" id="J_toolBar"> <a class="tb-item dm-switch" id="J_DMswitch" href="javascript:;" rel="nofollow"> <span class="item-btn" title="模式切换"> <svg class="wb-icon wbsico-dm-switch"><use xlink:href="#wbsico-dm-switch"></use></svg> </span> </a> <div class="tb-item social-item"><a class="item-btn" title="联系工单"href="https://www.ycdledu.com/wp-login.php?redirect_to=https%3A%2F%2Fwww.ycdledu.com%2F%3Fwb%3Dmember%23%2Fcontact" ><svg class="wb-icon tools-contact"><use xlink:href="#tools-contact"></use></svg></a></div> <a class="tb-item " id="J_backTop" href="javascript:;" rel="nofollow"> <span class="item-btn" title="返回页顶"><svg class="wb-icon wbsico-backtop"><use xlink:href="#wbsico-backtop"></use></svg></span> </a> </div> </body> </html>