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 like-btn-wp"><a class="btn-like" data-post_id="4136" data-count="0" data-api="http://www.ycdledu.com/wp-admin/admin-ajax.php"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22"><g fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M5 19l2.3 1.1c1.1.6 2.4.9 3.7.9h7a2 2 0 002-2l1-8a2 2 0 00-2-2h-5V6c0-1.7-1-4-2.5-4.9-.7-.3-1.5.1-1.5.9v4l-5 6M1 10h4v11H1z"/></g></svg><span class="like-count">点赞</span></a></div> </div> </article> <div class="sidebar"> <div class="sb-inner"> <div class="width-border-box"> <section class="widget widget-download"> </section> <section class="widget widget-social"> <div class="wb-inline-mode" wb-share-url="http://www.ycdledu.com/?p=4136"><a class="wb-share-poster j-poster-btn"><svg class="wb-icon wbsico-share"><use xlink:href="#wbsico-share"></use></svg><span>微海报</span></a><div class="wb-share-list" > <a class="share-logo icon-weixin" data-cmd="weixin" title="分享到微信" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="16"><path fill-rule="nonzero" d="M11.65 7.99c-.32 0-.64.3-.64.67 0 .3.32.6.64.6.5 0 .84-.3.84-.6 0-.37-.35-.67-.84-.67zM9.52 4.86c.51 0 .84-.32.84-.81 0-.51-.33-.81-.84-.81-.48 0-.95.3-.95.8s.47.82.95.82zM7.1 11.6c-.86 0-1.48-.14-2.3-.37l-2.33 1.18.67-1.99C1.48 9.26.5 7.8.5 6.02.5 2.87 3.48.46 7.09.46c3.2 0 6.05 1.9 6.6 4.59a3.21 3.21 0 00-.62-.07c-3.15 0-5.59 2.36-5.59 5.21 0 .49.07.93.19 1.39-.19.02-.4.02-.58.02zm9.66 2.27l.47 1.67-1.77-1c-.67.15-1.32.35-1.99.35-3.1 0-5.56-2.13-5.56-4.77 0-2.64 2.46-4.77 5.56-4.77 2.94 0 5.59 2.13 5.59 4.77 0 1.48-1 2.8-2.3 3.75zM4.93 3.24c-.48 0-1 .3-1 .8s.52.82 1 .82c.47 0 .84-.32.84-.81 0-.51-.37-.81-.84-.81zM15.3 7.99c-.34 0-.65.3-.65.67 0 .3.3.6.65.6.47 0 .81-.3.81-.6 0-.37-.34-.67-.8-.67z"/></svg> </a> <a class="share-logo icon-qq" data-cmd="qq" title="分享到QQ" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="13" height="16"><path fill-rule="nonzero" d="M12.6 13.29c-.37-.1-1.32-1.77-1.32-1.77s.07 2.08-1.6 3.39c.93.24 1.2.6 1.2.8 0 .3-1.14.29-2.53.29-.46 0-.9-.01-1.28-.03-.36.04-.6.03-.6.03H6.3s-.33.01-.83-.07C5 15.98 4.4 16 3.73 16c-1.35 0-2.45.02-2.45-.3 0-.27.36-.7 1.7-.92-1.53-1.3-1.46-3.28-1.46-3.28S.57 13.18.2 13.27c-.2.04-.27-.7-.12-1.66.16-.96.42-1.65.42-1.65s.36-1.15.56-1.72a49 49 0 01.58-1.46S1.27 2.25 4.17.55A4.66 4.66 0 018.11.34c.17.06.34.14.52.23 2.9 1.7 2.53 6.23 2.53 6.23s.4.97.58 1.46c.2.57.56 1.72.56 1.72s.26.68.42 1.64c.15.96.07 1.71-.12 1.67z"/></svg> </a> <a class="share-logo icon-weibo" data-cmd="weibo" title="分享到微博" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="16"><path fill-rule="nonzero" d="M16.56 12.25c-1.21 1.87-3.08 2.8-5.17 3.3-1 .25-2.06.33-2.6.41-2.6-.06-4.6-.44-6.4-1.56C.12 12.98-.54 10.87.65 8.47a12.13 12.13 0 015.87-5.7 5.25 5.25 0 011.56-.43c1.1-.13 1.73.49 1.7 1.59 0 .24-.06.48-.07.72-.01.2 0 .42.01.62.21-.03.43-.05.63-.1.85-.18 1.68-.48 2.53-.53 1.47-.07 2.13.82 1.69 2.22-.2.6-.05.8.5 1 2.1.75 2.7 2.52 1.5 4.39zm-1.1-7.85c-.35-.44-1.13-.54-1.38-.55a.67.67 0 010-1.33c.17 0 1.63.04 2.43 1.05.31.4.64 1.12.38 2.23a.67.67 0 11-1.3-.3c.12-.49.07-.85-.13-1.1zm3.92 2.18a.67.67 0 01-.76.55.67.67 0 01-.56-.76c.25-1.57 0-2.8-.75-3.63-1.3-1.46-3.68-1.37-3.7-1.37a.66.66 0 11-.06-1.33c.12 0 3.04-.1 4.76 1.81C19.33 3 19.69 4.6 19.38 6.58z"/></svg> </a> </div></div> <a href="javascript:;" class="fav" data-id="4136" rel="nofollow"><svg class="wb-icon wbsico-heart"><use xlink:href="#wbsico-heart"></use></svg></a> </section> </div> <div class="widget widget_wb_hotitems_widget"><h2 class="widgettitle">热门</h2><ul class="post-list"><li class="post"> <div class="media-pic"><a href="http://www.ycdledu.com/1014tang-zhao-wen/4003/"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="10-14唐兆文"></a></div> <div class="media-body"> <a class="title" href="http://www.ycdledu.com/1014tang-zhao-wen/4003/" data-num="1">10-14唐兆文</a> <p class="post-metas"> <span class="post-meta"><svg class="wb-icon wbsico-views"><use xlink:href="#wbsico-views"></use></svg><em class="meta-dl">86</em></span> </p> </div> </li><li class="post"> <div class="media-pic"><a href="http://www.ycdledu.com/duo-tai/3485/"><img class="auto-cover spc" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="http://www.ycdledu.com/wp-content/uploads/2020/09/16009175047593-300x200.jpg" alt="多态"></a></div> <div class="media-body"> <a class="title" href="http://www.ycdledu.com/duo-tai/3485/" data-num="2">多态</a> <p class="post-metas"> <span class="post-meta"><svg class="wb-icon wbsico-views"><use xlink:href="#wbsico-views"></use></svg><em class="meta-dl">80</em></span> </p> </div> </li><li class="post"> <div class="media-pic"><a href="http://www.ycdledu.com/20201019zhao-xin/4118/"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="20201019赵鑫"></a></div> <div class="media-body"> <a class="title" href="http://www.ycdledu.com/20201019zhao-xin/4118/" data-num="3">20201019赵鑫</a> <p class="post-metas"> <span class="post-meta"><svg class="wb-icon wbsico-views"><use xlink:href="#wbsico-views"></use></svg><em class="meta-dl">78</em></span> </p> </div> </li><li class="post"> <div class="media-pic"><a href="http://www.ycdledu.com/20201019-zhang-lin/4120/"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="2020.10.19 张林"></a></div> <div class="media-body"> <a class="title" href="http://www.ycdledu.com/20201019-zhang-lin/4120/" data-num="4">2020.10.19 张林</a> <p class="post-metas"> <span class="post-meta"><svg class="wb-icon wbsico-views"><use xlink:href="#wbsico-views"></use></svg><em class="meta-dl">75</em></span> </p> </div> </li><li class="post"> <div class="media-pic"><a href="http://www.ycdledu.com/109-feng-na/3757/"><img class="auto-cover" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="C:Users%E4%BA%91%E5%88%9B%E5%8A%A8%E5%8A%9BAppDataRoamingTyporatypora-user-images1602250384104.png" alt="10.9 冯娜"></a></div> <div class="media-body"> <a class="title" href="http://www.ycdledu.com/109-feng-na/3757/" data-num="5">10.9 冯娜</a> <p class="post-metas"> <span class="post-meta"><svg class="wb-icon wbsico-views"><use xlink:href="#wbsico-views"></use></svg><em class="meta-dl">73</em></span> </p> </div> </li></ul></div> </div> </div> </div> <section class="panel-inner panel-tags pw"> <h3 class="sc-title">标签</h3> <div class="tag-items hot-tags"> <a href="http://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="http://www.ycdledu.com/tag/%e4%ba%91%e5%88%9b%e9%9b%86%e8%ae%ad/">云创集训</a> <a href="http://www.ycdledu.com/tag/%e5%ad%a6%e5%91%98%e6%97%a5%e5%bf%97/">学员日志</a> <a href="http://www.ycdledu.com/tag/%e5%bc%80%e5%8f%91%e5%96%b5/">开发喵</a> <a href="http://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="http://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"><li class="post"> <div class="inner"> <a class="media-pic" href="http://www.ycdledu.com/99-feng-na/2722/"><img class="auto-cover" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="C:Users%E4%BA%91%E5%88%9B%E5%8A%A8%E5%8A%9BAppDataRoamingTyporatypora-user-images1599631204901.png" alt="9.9 冯娜"></a> <div class="media-body"> <a class="post-title" href="http://www.ycdledu.com/99-feng-na/2722/">9.9 冯娜</a> </div> </div> </li><li class="post"> <div class="inner"> <a class="media-pic" href="http://www.ycdledu.com/2020822chen-yue-ling/1959/"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="2020.8.22陈悦玲"></a> <div class="media-body"> <a class="post-title" href="http://www.ycdledu.com/2020822chen-yue-ling/1959/">2020.8.22陈悦玲</a> </div> </div> </li><li class="post"> <div class="inner"> <a class="media-pic" href="http://www.ycdledu.com/20200914feng-qiangri-zhi/2798/"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="20200914冯强_日志"></a> <div class="media-body"> <a class="post-title" href="http://www.ycdledu.com/20200914feng-qiangri-zhi/2798/">20200914冯强_日志</a> </div> </div> </li><li class="post"> <div class="inner"> <a class="media-pic" href="http://www.ycdledu.com/20200824yue-hao-tian/2096/"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="20200824岳浩天"></a> <div class="media-body"> <a class="post-title" href="http://www.ycdledu.com/20200824yue-hao-tian/2096/">20200824岳浩天</a> </div> </div> </li></ul></section> <section class="panel-inner sc-comments pw"> <h3 class="sc-title">评论</h3> <div id="comments"> <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><form action="http://www.ycdledu.com/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><textarea class="textarea-comments" id="comment" name="comment" aria-required="true" required="required" placeholder="评论 *"></textarea><label class="form-item"> <input class="form-control" id="author" name="author" value="" size="30" aria-required='true' placeholder="姓名 *" /> </label> <label class="form-item"> <input class="form-control" id="email" name="email" type="email" value="" size="30"1 placeholder="邮箱 *" /> </label> <label class="form-item"> <input class="form-control" id="url" name="url" type="email" value="" size="30" placeholder="网址" /> </label> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">在此浏览器中保存我的名字、电邮和网站。</label></p> <p class="form-item btn-bar"><button class="wb-btn btn-primary" id="submit" name="submit" type="submit" />提交</button> <input type='hidden' name='comment_post_ID' value='4136' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div> </section> </div> <footer class="footer"> <div class="ft-inner pw"> <div class="copyright"> <div class="ib"> © 2020 成都云创动力科技有限公司 </div> </div> </div> </footer> <script type='text/javascript' src='http://www.ycdledu.com/wp-includes/js/comment-reply.min.js?ver=5.3.6'></script> <script type='text/javascript' src='http://www.ycdledu.com/wp-content/plugins/metronet-profile-picture/js/mpp-frontend.js?ver=2.3.11'></script> <script type='text/javascript'> /* <![CDATA[ */ var wbl = {"like":"\u8d5e","searchPlaceHolder":"\u8bf7\u8f93\u5165\u5173\u952e\u8bcd"}; /* ]]> */ </script> <script type='text/javascript' src='http://www.ycdledu.com/wp-content/themes/storeys-pro/js/base.js?ver=202009c' async></script> <script type='text/javascript' src='http://www.ycdledu.com/wp-includes/js/wp-embed.min.js?ver=5.3.6'></script> <script type='text/javascript' src='http://www.ycdledu.com/wp-content/themes/storeys-pro/js/qrious/qrious.min.js?ver=5.3.6'></script> <div class="tool-bar" id="J_toolBar"> <a class="tb-item social-item" href="http://www.ycdledu.com/member?act=enquire" target="_blank" title="联系工单"><svg class="wb-icon wbsico-contact"><use xlink:href="#wbsico-contact"></use></svg></a> <a class="tb-item " id="J_backTop" href="javascript:;" rel="nofollow" title="返回页顶"> <svg class="wb-icon wbsico-backtop"><use xlink:href="#wbsico-backtop"></use></svg> </a> </div> <h1>this is is footer</h1> </body> </html>