10.20 冯娜

学员日志 764 5年前 0

学习日志

一、新建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、有序列表：

奥运金牌榜

美国
英国
中国
俄罗斯

c、自定义列表：

地区：

北京: 昌平区; 海定区; 大兴区; 东城区
山东: 威海; 济南; 潍坊; 青岛

（8）区块：

a、

:块级元素：还有

~

、

、
、
、、

、

、

、

b、：行内元素:还有：、

、、、、、_{、^{、、
（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 class="widget-title">热门资源</h3><ul class="post-list list-hot"><li class="post" data-num="1">
<a class="inner" href="http://www.ycdledu.com/?p=6634">
<div class="media-pic"><img class="auto-cover" src="https://gitee.com/FengJiali52155/fjlimg/raw/master/20201205202145.png" alt="四种框架的区别比较：bootstrap,layui,elementui,vantui"></div>
<div class="media-body">
<div class="title" href="http://www.ycdledu.com/?p=6634" data-num="1">四种框架的区别比较：bootstrap,layui,elementui,vantui</div>
<div class="post-metas"><svg class="wb-icon wbsico-views"><use xlink:href="#wbsico-views"></use></svg><em class="meta-dl">4053</em></div>
</div>
</a>
</li><li class="post" data-num="2">
<a class="inner" href="http://www.ycdledu.com/?p=5411">
<div class="media-pic"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="梁贺寄-20201026"></div>
<div class="media-body">
<div class="title" href="http://www.ycdledu.com/?p=5411" data-num="2">梁贺寄-20201026</div>
<div class="post-metas"><svg class="wb-icon wbsico-views"><use xlink:href="#wbsico-views"></use></svg><em class="meta-dl">3822</em></div>
</div>
</a>
</li><li class="post" data-num="3">
<a class="inner" href="http://www.ycdledu.com/?p=5393">
<div class="media-pic"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="陈柏安-20201026"></div>
<div class="media-body">
<div class="title" href="http://www.ycdledu.com/?p=5393" data-num="3">陈柏安-20201026</div>
<div class="post-metas"><svg class="wb-icon wbsico-views"><use xlink:href="#wbsico-views"></use></svg><em class="meta-dl">3335</em></div>
</div>
</a>
</li><li class="post" data-num="4">
<a class="inner" href="http://www.ycdledu.com/?p=6237">
<div class="media-pic"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="2020-11-05梁贺寄"></div>
<div class="media-body">
<div class="title" href="http://www.ycdledu.com/?p=6237" data-num="4">2020-11-05梁贺寄</div>
<div class="post-metas"><svg class="wb-icon wbsico-views"><use xlink:href="#wbsico-views"></use></svg><em class="meta-dl">1720</em></div>
</div>
</a>
</li><li class="post" data-num="5">
<a class="inner" href="http://www.ycdledu.com/?p=2919">
<div class="media-pic"><img class="auto-cover" src="http://www.ycdledu.com/wp-content/uploads/2020/09/16002385361401.jpg" alt="mac安装npm install -g @vue/cli报错解决"></div>
<div class="media-body">
<div class="title" href="http://www.ycdledu.com/?p=2919" data-num="5">mac安装npm install -g @vue/cli报错解决</div>
<div class="post-metas"><svg class="wb-icon wbsico-views"><use xlink:href="#wbsico-views"></use></svg><em class="meta-dl">1557</em></div>
</div>
</a>
</li></ul></section> </div>
</div> </div>

<section class="related-posts panel-inner">
<h3 class="sc-title">相关推荐</h3>
<ul class="articles-list list-mode-a"><li class="post">
<a class="inner" href="http://www.ycdledu.com/?p=8925">
<div class="media-pic"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="DESKTOP-5NB63LS_20200909-潘振林"></div>
<div class="media-body">
<div class="post-title">DESKTOP-5NB63LS_20200909-潘振林</div>
</div>
</a>
</li><li class="post">
<a class="inner" href="http://www.ycdledu.com/?p=7986">
<div class="media-pic"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="DESKTOP-TEACTL5_20200827-曾越"></div>
<div class="media-body">
<div class="post-title">DESKTOP-TEACTL5_20200827-曾越</div>
</div>
</a>
</li><li class="post">
<a class="inner" href="http://www.ycdledu.com/?p=4865">
<div class="media-pic"><img class="auto-cover" src="D:zhuomian3.png" alt="邹瑞20201118"></div>
<div class="media-body">
<div class="post-title">邹瑞20201118</div>
</div>
</a>
</li><li class="post">
<a class="inner" href="http://www.ycdledu.com/?p=9059">
<div class="media-pic"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="DESKTOP-TEACTL5_20200912"></div>
<div class="media-body">
<div class="post-title">DESKTOP-TEACTL5_20200912</div>
</div>
</a>
</li></ul> </section>
<section class="panel-inner sc-comments">
<h3 class="sc-title">评论留言</h3>
<div class="wb-comments-area">

<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="/?p=4136#respond" style="display:none;">取消回复</a></small></h3><p class="must-log-in">评论前请先 <a href="http://www.ycdledu.com/wp-login.php?redirect_to=http%3A%2F%2Fwww.ycdledu.com%2F%3Fp%3D4136">登录</a>。</p> </div>
</div>

</div>
</section></div>

</div>

<footer class="footer">

<div class="ft-inner pw">
<div class="copyright">

<div class="ib">
© 2025 成都云创动力科技有限公司 </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="http://www.ycdledu.com/wp-includes/js/comment-reply.min.js?ver=6.6.2" id="comment-reply-js" async="async" data-wp-strategy="async"></script>
<script type="text/javascript" src="http://www.ycdledu.com/wp-content/themes/storeys-pro/js/base.js?ver=2.6.4" id="wbolt-base-js"></script>
<script type="text/javascript" src="http://www.ycdledu.com/wp-content/themes/storeys-pro/js/single.js?ver=2.6.4" id="wbolt-single-js"></script>

<div class="tool-bar" id="J_toolBar">
<div class="tb-item dm-switch" id="J_DMswitch">
<span class="item-btn" title="模式切换">
<svg class="wb-icon wbsico-dm-switch"><use xlink:href="#wbsico-dm-switch"></use></svg> </span>
</div>
<div class="tb-item social-item"><a class="item-btn" title="联系工单"href="http://www.ycdledu.com/wp-login.php?redirect_to=http%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> <div class="tb-item " id="J_backTop">
<span class="item-btn" title="返回页顶"><svg class="wb-icon wbsico-backtop"><use xlink:href="#wbsico-backtop"></use></svg></span>
</div>
</div>

</body>

</html>}}