本文为兄弟连云课堂《HTML+CSS基础课程》学习笔记 订阅走一波。
第一章：Html简介
1. Html、CSS和Javascript的关系
1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
2. 标签初认识
1. 语法
标签由英文尖括号<和>括起来，html中的标签一般都是成对出现的，分开始标签和结束标签。标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：
2. html标签
认识html标签
勇气
三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。
到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。
1234567891011121312345678910111213
这个网页由一些html标签组成：
“勇气”是网页内容文章的标题，勇气
“三年级时…我也没勇气参加。” 是网页中文章的段落，三年级时...我也没勇气参加。
网页上那张小女生的图片，由img标签来完成的，它在网页上的代码写成
。总结一下，可以这么说，网页中每一个内容在浏览器中的显示，都要存放到各种标签中。
</code><strong>标签</strong>：在<code><title></code>和<code>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。
3. html文本基本结构
一个HTML文件是有自己固定的结构的。
...
...
12341234
代码讲解：
1.
2.</code>、<code><script></code>、<code><style></code>、<code><link></code>、 <code><meta></code>等标签。</p><p>3.在<code><body></code>和<code></body></code>标签之间的内容是网页的主要内容，如<code><h1></code>、<code><p></code>、<code><a></code>、<code><img></code>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。</p><p></p><p>4.HTML的代码注释</p><p>代码注释的作用是<strong>帮助程序员标注代码的用途</strong>，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。语法：<code><!--注释文字 --></code></p></div>
<div class="info-share-box clearfix">
<div class="fl">
<p class="tags"><strong>Tags：</strong><a href="http://www.henian88.com/tags-610.html" title="查看更多有关于“html5css3”的内容" rel="tag" target="_blank">html5css3</a></p>
</div>
<div class="fr">
<div class="info-share">
<div class="social-share" data-initialized="true">
<a href="#" class="social-share-icon iconfont icon-weibo"></a>
<a href="#" class="social-share-icon iconfont icon-qq"></a>
<a href="#" class="social-share-icon iconfont icon-wechat"></a>
<a href="#" class="social-share-icon iconfont icon-qzone"></a>
</div>
</div>
<script src="http://www.henian88.com/zb_users/theme/txcms2/script/social-share.min.js"></script>
</div>
</div>
</div>
<div class="sx mb15">
<ul>
<li class="fl">上一篇： <a href="http://www.henian88.com/post/15744.html" title="前端必学 40个精选案例实战 一课吃透HTML5+CSS3+JS">前端必学 40个精选案例实战 一课吃透HTML5+CSS3+JS</a>
</li>
<li class="fr ziyou">下一篇： <a href="http://www.henian88.com/post/15746.html" title="使用canvas实现简单的贪吃蛇游戏，html+css+js">使用canvas实现简单的贪吃蛇游戏，html+css+js</a>
</li>
<div class="clear"></div>
</ul>
</div>
<div class="xg">
<h2 class="ybbt">猜你喜欢</h2>
<ul>
<li><span class="">2025-02-07</span><i class="fa fa-caret-right"></i> <a href="http://www.henian88.com/post/15746.html" title="使用canvas实现简单的贪吃蛇游戏，html+css+js">使用canvas实现简单的贪吃蛇游戏，html+css+js</a></li>
<li><span class="">2025-02-07</span><i class="fa fa-caret-right"></i> <a href="http://www.henian88.com/post/15744.html" title="前端必学 40个精选案例实战 一课吃透HTML5+CSS3+JS">前端必学 40个精选案例实战 一课吃透HTML5+CSS3+JS</a></li>
<li><span class="">2025-02-07</span><i class="fa fa-caret-right"></i> <a href="http://www.henian88.com/post/15743.html" title="微信客户端升级至X5 Blink 内核，更好的支持 HTML5/CSS3">微信客户端升级至X5 Blink 内核，更好的支持 HTML5/CSS3</a></li>
<li><span class="">2025-02-07</span><i class="fa fa-caret-right"></i> <a href="http://www.henian88.com/post/15742.html" title="100行Html5+CSS3+JS代码实现元旦倒计时界面">100行Html5+CSS3+JS代码实现元旦倒计时界面</a></li>
<li><span class="">2025-02-07</span><i class="fa fa-caret-right"></i> <a href="http://www.henian88.com/post/15741.html" title="应用HTML5和CSS3实现举报中心PC端与手机端举报页面的自适应设计">应用HTML5和CSS3实现举报中心PC端与手机端举报页面的自适应设计</a></li>
<li><span class="">2025-02-07</span><i class="fa fa-caret-right"></i> <a href="http://www.henian88.com/post/15740.html" title="HTML和HTML5，css和css3的区别有哪些?">HTML和HTML5，css和css3的区别有哪些?</a></li>
<li><span class="">2025-02-07</span><i class="fa fa-caret-right"></i> <a href="http://www.henian88.com/post/15739.html" title="13个有用的HTML5、CSS3和jQuery搜索表单教程">13个有用的HTML5、CSS3和jQuery搜索表单教程</a></li>
<li><span class="">2025-02-07</span><i class="fa fa-caret-right"></i> <a href="http://www.henian88.com/post/15738.html" title="02.Web大前端时代之:HTML5+CSS3入门系列~H5结构元素">02.Web大前端时代之:HTML5+CSS3入门系列~H5结构元素</a></li>
<li><span class="">2025-02-07</span><i class="fa fa-caret-right"></i> <a href="http://www.henian88.com/post/15737.html" title="html5+css3做的响应式企业网站前端源码">html5+css3做的响应式企业网站前端源码</a></li>
<li><span class="">2025-02-07</span><i class="fa fa-caret-right"></i> <a href="http://www.henian88.com/post/15736.html" title="一篇文章教会你利用html5和css3实现3D立方体效果图">一篇文章教会你利用html5和css3实现3D立方体效果图</a></li>
</ul>
</div>
</div>
<div id="comment" class="bgb pd15">
<div class="tx-comments">
<h4>本文暂时没有评论，来添加一个吧(●'◡'●)</h4>
<label id="AjaxCommentBegin"></label>
<!--评论输出-->
<label id="AjaxCommentEnd"></label>
</div>
<!--评论框-->
<div class="post tx-comment" id="divCommentPost">
<h3><a href="javascript:;" id="cancel-reply" style="display:none;float:right;"><small>取消回复</small></a>欢迎 <span class="tx-red">你</span> 发表评论:</h3>
<form id="frmSumbit" target="_self" method="post" action="http://www.henian88.com/zb_system/cmd.php?act=cmt&postid=15745&key=7e1e4632827bcd2f294c5c606ece4b9d" class="clearfix">
<input type="hidden" name="inpId" id="inpId" value="15745">
<input type="hidden" name="inpRevID" id="inpRevID" value="0">
<div class="tx-comment-box tx-comment-ul3"><input type="text" name="inpName" id="inpName" class="text" value="访客" tabindex="1" placeholder="名称(*)"> </div>
<div class="tx-comment-box tx-comment-textarea">
<textarea name="txaArticle" id="txaArticle" class="text" cols="50" rows="4" tabindex="5" placeholder="欢迎在这里交流评论，但是垃圾评论不受欢迎！"></textarea>
<input name="sumbit" type="submit" tabindex="6" value="提交" onclick="return zbp.comment.post()" class="button">
</div>
</form>
</div>
</div>
</div>
<div class="right fr sjwu">
<dl class="wupd">
<div class="notice">
<div class="tab-hd">
<ul class="tab-nav">
<li class="on"><a href="javascript:;">最新文章</a></li>
<li><a href="javascript:;">热门文章</a></li>
<li><a href="javascript:;" class="wux">推荐文章</a></li>
</ul>
</div>
<div class="tab-bd">
<div class="tab-pal" style="display:block">
<ul>
<li><span class="fr zuo10">05-03</span><a href="http://www.henian88.com/post/17504.html" title="Java集合框架:解锁高效编程的艺术" target="_blank">Java集合框架:解锁高效编程的艺术</a></li>
<li><span class="fr zuo10">05-03</span><a href="http://www.henian88.com/post/17503.html" title="6.Java中ArrayList进行排序总结（java中arraylist用法）" target="_blank">6.Java中ArrayList进行排序总结（java中arraylist用法）</a></li>
<li><span class="fr zuo10">05-03</span><a href="http://www.henian88.com/post/17502.html" title="Java ArrayList基本操作及高级用法" target="_blank">Java ArrayList基本操作及高级用法</a></li>
<li><span class="fr zuo10">05-03</span><a href="http://www.henian88.com/post/17501.html" title="Java List按对象多个字段排序指南" target="_blank">Java List按对象多个字段排序指南</a></li>
<li><span class="fr zuo10">05-03</span><a href="http://www.henian88.com/post/17500.html" title="分布式锁用Redis好?还是Zookeeper好?" target="_blank">分布式锁用Redis好?还是Zookeeper好?</a></li>
<li><span class="fr zuo10">05-03</span><a href="http://www.henian88.com/post/17499.html" title="探秘分布式锁:实现与对比（分布式锁的场景以及实现方案）" target="_blank">探秘分布式锁:实现与对比（分布式锁的场景以及实现方案）</a></li>
<li><span class="fr zuo10">05-03</span><a href="http://www.henian88.com/post/17498.html" title="Java 8:一文掌握 Lambda 表达式 | CSDN 博文精选" target="_blank">Java 8:一文掌握 Lambda 表达式 | CSDN 博文精选</a></li>
<li><span class="fr zuo10">05-03</span><a href="http://www.henian88.com/post/17497.html" title="吊打面试官(十二)--Java语言中ArrayList类一文全掌握" target="_blank">吊打面试官(十二)--Java语言中ArrayList类一文全掌握</a></li>
</ul>
</div>
<div class="tab-pal">
<ul>
<li><span class="fr zuo10">250℃</span><a href="http://www.henian88.com/post/11493.html" title="接口自动化测试TestNG框架环境搭建" target="_blank">接口自动化测试TestNG框架环境搭建</a></li>
<li><span class="fr zuo10">213℃</span><a href="http://www.henian88.com/post/11559.html" title="程序员:推荐书单（程序员的书单）" target="_blank">程序员:推荐书单（程序员的书单）</a></li>
<li><span class="fr zuo10">212℃</span><a href="http://www.henian88.com/post/11485.html" title="使用JSoup实现简单的爬虫技术（js做爬虫）" target="_blank">使用JSoup实现简单的爬虫技术（js做爬虫）</a></li>
<li><span class="fr zuo10">209℃</span><a href="http://www.henian88.com/post/11556.html" title="网络编程零基础如何入门?10年老司机经验分享" target="_blank">网络编程零基础如何入门?10年老司机经验分享</a></li>
<li><span class="fr zuo10">201℃</span><a href="http://www.henian88.com/post/11486.html" title="单点登录系统实现（单点登录系统设计）" target="_blank">单点登录系统实现（单点登录系统设计）</a></li>
<li><span class="fr zuo10">196℃</span><a href="http://www.henian88.com/post/11582.html" title="自动化运维开发日志: 升级到DC域控制器" target="_blank">自动化运维开发日志: 升级到DC域控制器</a></li>
<li><span class="fr zuo10">189℃</span><a href="http://www.henian88.com/post/11533.html" title="HTML5+Java全栈开发培训从入门到精通需要多久?" target="_blank">HTML5+Java全栈开发培训从入门到精通需要多久?</a></li>
<li><span class="fr zuo10">185℃</span><a href="http://www.henian88.com/post/11534.html" title="干货整理!零基础html5网站开发学习步骤方法(保存不后悔)" target="_blank">干货整理!零基础html5网站开发学习步骤方法(保存不后悔)</a></li>
</ul>
</div>
<div class="tab-pal">
<ul>
</ul>
</div>
</div>
</div>
</dl>
<dl class="function" id="divPrevious">
<dt class="function_t">最近发表</dt><dd class="function_c">
<ul><li><a title="Java集合框架:解锁高效编程的艺术" href="http://www.henian88.com/post/17504.html">Java集合框架:解锁高效编程的艺术</a></li>
<li><a title="6.Java中ArrayList进行排序总结（java中arraylist用法）" href="http://www.henian88.com/post/17503.html">6.Java中ArrayList进行排序总结（java中arraylist用法）</a></li>
<li><a title="Java ArrayList基本操作及高级用法" href="http://www.henian88.com/post/17502.html">Java ArrayList基本操作及高级用法</a></li>
<li><a title="Java List按对象多个字段排序指南" href="http://www.henian88.com/post/17501.html">Java List按对象多个字段排序指南</a></li>
<li><a title="分布式锁用Redis好?还是Zookeeper好?" href="http://www.henian88.com/post/17500.html">分布式锁用Redis好?还是Zookeeper好?</a></li>
<li><a title="探秘分布式锁:实现与对比（分布式锁的场景以及实现方案）" href="http://www.henian88.com/post/17499.html">探秘分布式锁:实现与对比（分布式锁的场景以及实现方案）</a></li>
<li><a title="Java 8:一文掌握 Lambda 表达式 | CSDN 博文精选" href="http://www.henian88.com/post/17498.html">Java 8:一文掌握 Lambda 表达式 | CSDN 博文精选</a></li>
<li><a title="吊打面试官(十二)--Java语言中ArrayList类一文全掌握" href="http://www.henian88.com/post/17497.html">吊打面试官(十二)--Java语言中ArrayList类一文全掌握</a></li>
<li><a title="经典基础排序算法——桶排序（桶排序稳定吗）" href="http://www.henian88.com/post/17496.html">经典基础排序算法——桶排序（桶排序稳定吗）</a></li>
<li><a title="Java Collections 工具类集合框架中常用算法解析" href="http://www.henian88.com/post/17495.html">Java Collections 工具类集合框架中常用算法解析</a></li>
</ul>
</dd>
</dl>
<dl class="function" id="divTags">
<dt class="function_t">标签列表</dt><dd class="function_c">
<ul><li><a title="css导航条" href="http://www.henian88.com/tags-24.html">css导航条<span class="tag-count"> (66)</span></a></li>
<li><a title="sqlinsert" href="http://www.henian88.com/tags-36.html">sqlinsert<span class="tag-count"> (63)</span></a></li>
<li><a title="js提交表单" href="http://www.henian88.com/tags-43.html">js提交表单<span class="tag-count"> (60)</span></a></li>
<li><a title="param" href="http://www.henian88.com/tags-169.html">param<span class="tag-count"> (62)</span></a></li>
<li><a title="parentelement" href="http://www.henian88.com/tags-203.html">parentelement<span class="tag-count"> (65)</span></a></li>
<li><a title="jquery分享" href="http://www.henian88.com/tags-205.html">jquery分享<span class="tag-count"> (62)</span></a></li>
<li><a title="check约束" href="http://www.henian88.com/tags-206.html">check约束<span class="tag-count"> (64)</span></a></li>
<li><a title="curl_init" href="http://www.henian88.com/tags-209.html">curl_init<span class="tag-count"> (68)</span></a></li>
<li><a title="sql if语句" href="http://www.henian88.com/tags-214.html">sql if语句<span class="tag-count"> (69)</span></a></li>
<li><a title="import" href="http://www.henian88.com/tags-215.html">import<span class="tag-count"> (66)</span></a></li>
<li><a title="chmod文件夹" href="http://www.henian88.com/tags-216.html">chmod文件夹<span class="tag-count"> (71)</span></a></li>
<li><a title="clearinterval" href="http://www.henian88.com/tags-217.html">clearinterval<span class="tag-count"> (71)</span></a></li>
<li><a title="pythonrange" href="http://www.henian88.com/tags-224.html">pythonrange<span class="tag-count"> (62)</span></a></li>
<li><a title="数组长度" href="http://www.henian88.com/tags-255.html">数组长度<span class="tag-count"> (61)</span></a></li>
<li><a title="javafx" href="http://www.henian88.com/tags-319.html">javafx<span class="tag-count"> (59)</span></a></li>
<li><a title="全局消息钩子" href="http://www.henian88.com/tags-390.html">全局消息钩子<span class="tag-count"> (64)</span></a></li>
<li><a title="sort排序" href="http://www.henian88.com/tags-392.html">sort排序<span class="tag-count"> (62)</span></a></li>
<li><a title="jdbc" href="http://www.henian88.com/tags-408.html">jdbc<span class="tag-count"> (69)</span></a></li>
<li><a title="php网页源码" href="http://www.henian88.com/tags-413.html">php网页源码<span class="tag-count"> (59)</span></a></li>
<li><a title="assert h" href="http://www.henian88.com/tags-423.html">assert h<span class="tag-count"> (69)</span></a></li>
<li><a title="httpclientjar" href="http://www.henian88.com/tags-434.html">httpclientjar<span class="tag-count"> (60)</span></a></li>
<li><a title="postgresql conf" href="http://www.henian88.com/tags-444.html">postgresql conf<span class="tag-count"> (59)</span></a></li>
<li><a title="winform开发" href="http://www.henian88.com/tags-447.html">winform开发<span class="tag-count"> (59)</span></a></li>
<li><a title="mysql数字类型" href="http://www.henian88.com/tags-450.html">mysql数字类型<span class="tag-count"> (71)</span></a></li>
<li><a title="drawimage" href="http://www.henian88.com/tags-462.html">drawimage<span class="tag-count"> (61)</span></a></li>
</ul>
</dd>
</dl> </div>
<div class="clear"></div>
</div>
<div class="footer">
<div class="zh">
</div>
</div>
<div class="fixed-right">
<a href="javascript:;" class="gotop bgb" title="回到顶部"><i class="fa fa-chevron-up"></i></a>
</div>
<script src="http://www.henian88.com/zb_users/theme/txcms2/script/txcstx.min.js?v=2024-09-18"></script>
</body>
</html><!--161.18 ms , 16 queries , 3273kb memory , 0 error-->
