小白入门网页前端必知html基础知识-技术文章-思凡资源网

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

1、tml的固定结构

一个HTML文件是有自己固定的结构的。

...
...

代码讲解：
称为根标签，所有的网页标签都在中。

标签用于定义文档的头部，它是所有头部元素的容器。

头部元素有、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。<br></p><p>在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。</p></blockquote><p><strong><br>我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。</strong></p><blockquote><p>2、<head>标签的作用</p></blockquote><blockquote><p> 文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。<br></p><p><strong>下面这些标签可用在 head 部分：</strong><br></p><p class="syl-line-pure-english"><head><br><title>...

3、标签</p></blockquote><blockquote><p> 在<title>和标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用。网页制作学习交流群，四九四零六，四九三四。
于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独
一无二的title。

例如：

hello world

标签的内容“hello world”会在浏览器中的标题栏上显示出来，</p><p class="syl-page-br" style><br></p></blockquote><p class="syl-page-br" style><br></p><blockquote><p>4、标签的用途</p></blockquote><blockquote><p> 我们学习网页制作时，常常会听到一个词，语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上<br>的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。</p><p class="syl-page-br" style><br></p><p> 文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使<br>用 em 标签表示强调等等。<br></p><p><strong>讲了这么多语义化，但是语义化可以给我们带来什么样的好处呢？</strong></p><p class="syl-page-br" style><br></p><p>① 更容易被搜索引擎收录。<br></p><p>②.更容易让屏幕阅读器读出网页内容。</p></blockquote><p class="syl-page-br" style><br></p> </div> <div class="entry-details"> <details> <summary>原文链接：<a href="http://sifan10.com/post/2890.html" rel="author">小白入门网页前端必知html基础知识</a>，转发请注明来源！</summary> </details> </div> </div> <div class="entry-footer clearfix"> <span> <a href="http://sifan10.com/" title="思凡资源网"> <span>思凡资源网</span></a> </span>› <span> <a href="http://sifan10.com/category-1.html" title="技术文章"> <span>技术文章</span></a> </span>› <span> <a href="http://sifan10.com/post/2890.html" title="小白入门网页前端必知html基础知识"> <span>小白入门网页前端必知html基础知识</span></a> </span> </div> </div> <nav class="pager"> <ol> <li class="previous"> <a href="http://sifan10.com/post/2889.html" rel="prev"> <span class="text-muted">上一篇：</span> <span>加速 Web 开发的 23 款前端开发工具</span></a> </li> <li class="next"> <a href="http://sifan10.com/post/2891.html" rel="next"> <span class="text-muted">下一篇：</span> <span>官网网站设计网页制作模板建站前端自适应响应式网站仿站门户</span></a> </li> </ol> </nav> </article> <div id="sidebar" class="col-lg-4 col-md-4"> <aside id="recent-posts-1" class="panel panel-default widget clearfix widget_recent_entries"> <h3 class="panel-heading widget-title">最新文章</h3> <ul> <li> <a href="http://sifan10.com/post/3124.html">有梦想就有蓝天——回望空军女飞行员高溥宇的青春航迹</a></li> <li> <a href="http://sifan10.com/post/3123.html">这位158亚裔设计师靠“衬衣+阔腿裤”出圈，显高显气质，值得借鉴</a></li> <li> <a href="http://sifan10.com/post/3122.html">不看后悔!《女子推理社》高能名场面全解析</a></li> <li> <a href="http://sifan10.com/post/3121.html">一度电背后的大电网“女飞手”_电网一度电多少钱</a></li> <li> <a href="http://sifan10.com/post/3120.html">银行来了位高颜值数字人员工这位大堂经理每天能多掌握50个“知识点”</a></li> <li> <a href="http://sifan10.com/post/3119.html">女生可以学软件开发嘛?_女生适不适合学软件工程</a></li> <li> <a href="http://sifan10.com/post/3118.html">为什么不建议女生做程序员?_女生适合干程序员吗</a></li> <li> <a href="http://sifan10.com/post/3117.html">31岁，女HR，出任京东首席人力官:看了她的简历，我坐不住了</a></li> <li> <a href="http://sifan10.com/post/3116.html">2019年江浙沪女富婆征婚，称结婚送宾利豪车，如今结婚了么?</a></li> <li> <a href="http://sifan10.com/post/3115.html">27岁女生学前端开发晚吗_女生30岁学前端开发</a></li> </ul> </aside> <aside id="tag_cloud-2" class="panel panel-default widget clearfix widget_tag_cloud"> <h3 class="panel-heading widget-title">标签云</h3> <div class="tagcloud"> <a href="http://sifan10.com/tags-116.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="前端在线编辑器">前端在线编辑器 <span class="tag-link-count">(53)</span> </a><a href="http://sifan10.com/tags-97.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="前端长连接">前端长连接 <span class="tag-link-count">(47)</span> </a><a href="http://sifan10.com/tags-100.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="python写前端">python写前端 <span class="tag-link-count">(43)</span> </a><a href="http://sifan10.com/tags-105.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="前端路由原理">前端路由原理 <span class="tag-link-count">(43)</span> </a><a href="http://sifan10.com/tags-121.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="前端切图工具">前端切图工具 <span class="tag-link-count">(43)</span> </a><a href="http://sifan10.com/tags-122.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="前端p6">前端p6 <span class="tag-link-count">(41)</span> </a><a href="http://sifan10.com/tags-104.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="web前端安全">web前端安全 <span class="tag-link-count">(40)</span> </a><a href="http://sifan10.com/tags-130.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="前端底噪">前端底噪 <span class="tag-link-count">(39)</span> </a><a href="http://sifan10.com/tags-111.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="哈尔滨web前端培训">哈尔滨web前端培训 <span class="tag-link-count">(37)</span> </a><a href="http://sifan10.com/tags-153.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="广州前端培训">广州前端培训 <span class="tag-link-count">(36)</span> </a><a href="http://sifan10.com/tags-24.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="开发前端工具">开发前端工具 <span class="tag-link-count">(35)</span> </a><a href="http://sifan10.com/tags-32.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="前端优化方法">前端优化方法 <span class="tag-link-count">(35)</span> </a><a href="http://sifan10.com/tags-106.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="杭州前端工资">杭州前端工资 <span class="tag-link-count">(35)</span> </a><a href="http://sifan10.com/tags-141.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="前端图表插件">前端图表插件 <span class="tag-link-count">(35)</span> </a><a href="http://sifan10.com/tags-124.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="前端总线内存比">前端总线内存比 <span class="tag-link-count">(33)</span> </a><a href="http://sifan10.com/tags-138.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="前端前沿技术">前端前沿技术 <span class="tag-link-count">(33)</span> </a><a href="http://sifan10.com/tags-140.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="前端观察">前端观察 <span class="tag-link-count">(33)</span> </a><a href="http://sifan10.com/tags-146.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="前端工程设计">前端工程设计 <span class="tag-link-count">(33)</span> </a><a href="http://sifan10.com/tags-75.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="前端工程师前景">前端工程师前景 <span class="tag-link-count">(32)</span> </a><a href="http://sifan10.com/tags-95.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="php前端模板">php前端模板 <span class="tag-link-count">(32)</span> </a> </div> </aside> </div>  </div> </div>  <footer id="colophon" class="container"> <div class="panel panel-default text-muted"> <div class="panel-footer clearfix"> <a href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备2024111239号-2 </a> </div>    </div> </footer> </body> </html>