本文为兄弟连云课堂《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.ccvgpt.com/tags-955.html" title="查看更多有关于“html如何注释”的内容" rel="tag" target="_blank">html如何注释</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.ccvgpt.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.ccvgpt.com/post/25971.html" title="HTML 基础标签库">HTML 基础标签库</a>
</li>
<li class="fr ziyou">下一篇： <a href="http://www.ccvgpt.com/post/25973.html" title="JavaScript超好看手绘风格的注释组件—rough">JavaScript超好看手绘风格的注释组件—rough</a>
</li>
<div class="clear"></div>
</ul>
</div>
<div class="zssa mb15 sjwu"></div>
<div class="xg">
<h2 class="ybbt">猜你喜欢</h2>
<ul>
<li><span class="">2025-03-02</span><i class="fa fa-caret-right"></i> <a href="http://www.ccvgpt.com/post/25988.html" title="初识HTML，什么是HTML?">初识HTML，什么是HTML?</a></li>
<li><span class="">2025-03-02</span><i class="fa fa-caret-right"></i> <a href="http://www.ccvgpt.com/post/25987.html" title="JavaScript 运算符">JavaScript 运算符</a></li>
<li><span class="">2025-03-02</span><i class="fa fa-caret-right"></i> <a href="http://www.ccvgpt.com/post/25986.html" title="css初识">css初识</a></li>
<li><span class="">2025-03-02</span><i class="fa fa-caret-right"></i> <a href="http://www.ccvgpt.com/post/25985.html" title="HTML 语法简要总结">HTML 语法简要总结</a></li>
<li><span class="">2025-03-02</span><i class="fa fa-caret-right"></i> <a href="http://www.ccvgpt.com/post/25984.html" title="Spring Boot 实现读写分离，还有谁不会?">Spring Boot 实现读写分离，还有谁不会?</a></li>
<li><span class="">2025-03-02</span><i class="fa fa-caret-right"></i> <a href="http://www.ccvgpt.com/post/25983.html" title="SpringBoot的Restful的请求路径参数@PathVariable注解的使用">SpringBoot的Restful的请求路径参数@PathVariable注解的使用</a></li>
<li><span class="">2025-03-02</span><i class="fa fa-caret-right"></i> <a href="http://www.ccvgpt.com/post/25982.html" title="零基础教你学前端——61、CSS文本颜色和大小写转化">零基础教你学前端——61、CSS文本颜色和大小写转化</a></li>
<li><span class="">2025-03-02</span><i class="fa fa-caret-right"></i> <a href="http://www.ccvgpt.com/post/25981.html" title="Javadoc(文档注释)详解">Javadoc(文档注释)详解</a></li>
<li><span class="">2025-03-02</span><i class="fa fa-caret-right"></i> <a href="http://www.ccvgpt.com/post/25980.html" title="面试每日一问:在开发网页时如何保证 HTML 代码的质量?">面试每日一问:在开发网页时如何保证 HTML 代码的质量?</a></li>
<li><span class="">2025-03-02</span><i class="fa fa-caret-right"></i> <a href="http://www.ccvgpt.com/post/25979.html" title="从零开始搭建第一个网页:HTML基础入门">从零开始搭建第一个网页:HTML基础入门</a></li>
</ul>
</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 f-red">05-16</span><a href="http://www.ccvgpt.com/post/27321.html" title="2025前端最新面试题之HTML和CSS篇" target="_blank">2025前端最新面试题之HTML和CSS篇</a></li>
<li><span class="fr zuo10 f-red">05-16</span><a href="http://www.ccvgpt.com/post/27320.html" title="大数据开发基础之HTML基础知识" target="_blank">大数据开发基础之HTML基础知识</a></li>
<li><span class="fr zuo10 f-red">05-16</span><a href="http://www.ccvgpt.com/post/27319.html" title="微软专家告诉你Win10 Edge浏览器和EdgeHTML的区别" target="_blank">微软专家告诉你Win10 Edge浏览器和EdgeHTML的区别</a></li>
<li><span class="fr zuo10 f-red">05-16</span><a href="http://www.ccvgpt.com/post/27318.html" title="快速免费将网站部署到公网方法(仅支持HTML，CSS，JS)" target="_blank">快速免费将网站部署到公网方法(仅支持HTML，CSS，JS)</a></li>
<li><span class="fr zuo10 f-red">05-16</span><a href="http://www.ccvgpt.com/post/27317.html" title="《从零开始学前端:HTML+CSS+JavaScript的黄金三角》" target="_blank">《从零开始学前端:HTML+CSS+JavaScript的黄金三角》</a></li>
<li><span class="fr zuo10 f-red">05-16</span><a href="http://www.ccvgpt.com/post/27316.html" title="一个简单的标准 HTML 设计参考" target="_blank">一个简单的标准 HTML 设计参考</a></li>
<li><span class="fr zuo10 f-red">05-16</span><a href="http://www.ccvgpt.com/post/27315.html" title="css入门" target="_blank">css入门</a></li>
<li><span class="fr zuo10 f-red">05-16</span><a href="http://www.ccvgpt.com/post/27314.html" title="前端-干货分享:更牛逼的CSS管理方法-层(CSS Layers)" target="_blank">前端-干货分享:更牛逼的CSS管理方法-层(CSS Layers)</a></li>
</ul>
</div>
<div class="tab-pal">
<ul>
<li><span class="fr zuo10">589℃</span><a href="http://www.ccvgpt.com/post/20302.html" title="火语言RPA流程组件--获取元素坐标值" target="_blank">火语言RPA流程组件--获取元素坐标值</a></li>
<li><span class="fr zuo10">557℃</span><a href="http://www.ccvgpt.com/post/18404.html" title="在Mac上使用谷歌浏览器进行开发者调试的技巧" target="_blank">在Mac上使用谷歌浏览器进行开发者调试的技巧</a></li>
<li><span class="fr zuo10">553℃</span><a href="http://www.ccvgpt.com/post/17182.html" title="IT技术栈:Redis的9种数据类型原来是这样!" target="_blank">IT技术栈:Redis的9种数据类型原来是这样!</a></li>
<li><span class="fr zuo10">534℃</span><a href="http://www.ccvgpt.com/post/21103.html" title="javascript中的内存管理 js内存条" target="_blank">javascript中的内存管理 js内存条</a></li>
<li><span class="fr zuo10">492℃</span><a href="http://www.ccvgpt.com/post/21704.html" title="C++_类和对象_C++多态_虚析构和纯虚析构函数---C++语言工作笔记" target="_blank">C++_类和对象_C++多态_虚析构和纯虚析构函数---C++语言工作笔记</a></li>
<li><span class="fr zuo10">491℃</span><a href="http://www.ccvgpt.com/post/21719.html" title="C++的虚函数可以是内联函数吗 c++中虚函数" target="_blank">C++的虚函数可以是内联函数吗 c++中虚函数</a></li>
<li><span class="fr zuo10">485℃</span><a href="http://www.ccvgpt.com/post/21710.html" title="C++继承机制中的析构函数:为何要设为虚函数?" target="_blank">C++继承机制中的析构函数:为何要设为虚函数?</a></li>
<li><span class="fr zuo10">483℃</span><a href="http://www.ccvgpt.com/post/21681.html" title="C++语言中的“虚函数”就像C语言中的指针，必须要弄懂的" target="_blank">C++语言中的“虚函数”就像C语言中的指针，必须要弄懂的</a></li>
</ul>
</div>
<div class="tab-pal">
<ul>
<li><span class="fr zuo10">6℃</span><a href="http://www.ccvgpt.com/post/27321.html" title="2025前端最新面试题之HTML和CSS篇" target="_blank">2025前端最新面试题之HTML和CSS篇</a></li>
</ul>
</div>
</div>
</div>
</dl>
<dl class="function" id="divPrevious">
<dt class="function_t">最近发表</dt><dd class="function_c">
<ul><li><a title="2025前端最新面试题之HTML和CSS篇" href="http://www.ccvgpt.com/post/27321.html">2025前端最新面试题之HTML和CSS篇</a></li>
<li><a title="大数据开发基础之HTML基础知识" href="http://www.ccvgpt.com/post/27320.html">大数据开发基础之HTML基础知识</a></li>
<li><a title="微软专家告诉你Win10 Edge浏览器和EdgeHTML的区别" href="http://www.ccvgpt.com/post/27319.html">微软专家告诉你Win10 Edge浏览器和EdgeHTML的区别</a></li>
<li><a title="快速免费将网站部署到公网方法(仅支持HTML，CSS，JS)" href="http://www.ccvgpt.com/post/27318.html">快速免费将网站部署到公网方法(仅支持HTML，CSS，JS)</a></li>
<li><a title="《从零开始学前端:HTML+CSS+JavaScript的黄金三角》" href="http://www.ccvgpt.com/post/27317.html">《从零开始学前端:HTML+CSS+JavaScript的黄金三角》</a></li>
<li><a title="一个简单的标准 HTML 设计参考" href="http://www.ccvgpt.com/post/27316.html">一个简单的标准 HTML 设计参考</a></li>
<li><a title="css入门" href="http://www.ccvgpt.com/post/27315.html">css入门</a></li>
<li><a title="前端-干货分享:更牛逼的CSS管理方法-层(CSS Layers)" href="http://www.ccvgpt.com/post/27314.html">前端-干货分享:更牛逼的CSS管理方法-层(CSS Layers)</a></li>
<li><a title="HTML语义化:构建更清晰、更易访问的网页" href="http://www.ccvgpt.com/post/27313.html">HTML语义化:构建更清晰、更易访问的网页</a></li>
<li><a title="网页设计得懂css的规范" href="http://www.ccvgpt.com/post/27312.html">网页设计得懂css的规范</a></li>
</ul>
</dd>
</dl>
<dl class="function" id="divTags">
<dt class="function_t">标签列表</dt><dd class="function_c">
<ul><li><a title="jsp" href="http://www.ccvgpt.com/tags-4.html">jsp<span class="tag-count"> (69)</span></a></li>
<li><a title="pythonlist" href="http://www.ccvgpt.com/tags-6.html">pythonlist<span class="tag-count"> (60)</span></a></li>
<li><a title="gitpush" href="http://www.ccvgpt.com/tags-9.html">gitpush<span class="tag-count"> (78)</span></a></li>
<li><a title="gitreset" href="http://www.ccvgpt.com/tags-11.html">gitreset<span class="tag-count"> (66)</span></a></li>
<li><a title="python字典" href="http://www.ccvgpt.com/tags-13.html">python字典<span class="tag-count"> (67)</span></a></li>
<li><a title="dockercp" href="http://www.ccvgpt.com/tags-17.html">dockercp<span class="tag-count"> (63)</span></a></li>
<li><a title="gitclone命令" href="http://www.ccvgpt.com/tags-24.html">gitclone命令<span class="tag-count"> (63)</span></a></li>
<li><a title="dockersave" href="http://www.ccvgpt.com/tags-26.html">dockersave<span class="tag-count"> (62)</span></a></li>
<li><a title="linux命令大全" href="http://www.ccvgpt.com/tags-27.html">linux命令大全<span class="tag-count"> (65)</span></a></li>
<li><a title="pythonif" href="http://www.ccvgpt.com/tags-29.html">pythonif<span class="tag-count"> (86)</span></a></li>
<li><a title="location.href" href="http://www.ccvgpt.com/tags-30.html">location.href<span class="tag-count"> (69)</span></a></li>
<li><a title="dockerexec" href="http://www.ccvgpt.com/tags-33.html">dockerexec<span class="tag-count"> (65)</span></a></li>
<li><a title="deletesql" href="http://www.ccvgpt.com/tags-124.html">deletesql<span class="tag-count"> (62)</span></a></li>
<li><a title="c++模板" href="http://www.ccvgpt.com/tags-126.html">c++模板<span class="tag-count"> (62)</span></a></li>
<li><a title="linuxgzip" href="http://www.ccvgpt.com/tags-367.html">linuxgzip<span class="tag-count"> (68)</span></a></li>
<li><a title="字符串连接" href="http://www.ccvgpt.com/tags-368.html">字符串连接<span class="tag-count"> (73)</span></a></li>
<li><a title="nginx配置文件详解" href="http://www.ccvgpt.com/tags-372.html">nginx配置文件详解<span class="tag-count"> (61)</span></a></li>
<li><a title="html标签" href="http://www.ccvgpt.com/tags-383.html">html标签<span class="tag-count"> (69)</span></a></li>
<li><a title="c++初始化列表" href="http://www.ccvgpt.com/tags-553.html">c++初始化列表<span class="tag-count"> (64)</span></a></li>
<li><a title="mysqlinnodbmyisam区别" href="http://www.ccvgpt.com/tags-574.html">mysqlinnodbmyisam区别<span class="tag-count"> (63)</span></a></li>
<li><a title="arraylistadd" href="http://www.ccvgpt.com/tags-575.html">arraylistadd<span class="tag-count"> (66)</span></a></li>
<li><a title="console.table" href="http://www.ccvgpt.com/tags-631.html">console.table<span class="tag-count"> (62)</span></a></li>
<li><a title="mysqldatesub函数" href="http://www.ccvgpt.com/tags-725.html">mysqldatesub函数<span class="tag-count"> (63)</span></a></li>
<li><a title="window10java环境变量设置" href="http://www.ccvgpt.com/tags-734.html">window10java环境变量设置<span class="tag-count"> (66)</span></a></li>
<li><a title="c++虚函数和纯虚函数的区别" href="http://www.ccvgpt.com/tags-739.html">c++虚函数和纯虚函数的区别<span class="tag-count"> (66)</span></a></li>
</ul>
</dd>
</dl> </div>
<div class="clear"></div>
<div class="zssa mb15 sjwu"></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.ccvgpt.com/zb_users/theme/txcms2/script/txcstx.min.js?v=2025-04-27"></script>
</body>
</html><!--227.02 ms , 15 queries , 3432kb memory , 0 error-->
