南京网站制作公司

当前位置: 网站首页 - 新闻动态 - 安优观点 -

前端开发每天必学之HTML入门介绍

发布时间:2024-08-30

来源:

1 HTML介绍

1.1 代码初体验,制作第一个网页

1.2 HTML和CSS的关系

学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的:
1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
2. CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
3. JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。
下面代码演示了CSS的效果,HTML用来表示网页元素,CSS让元素表现更丰富,比如元素位置,大小,颜色,字体等:

(1)第8行代码,影响窗口的文字大小。
(2)第9行代码,影响窗口文字颜色的变化。
(3)第10行,影响窗口文字居中的变化。

1.3 认识HTML标签

各种各式各样的网页,这些网页都是由html标签组成的。下面就是一个简单的网页:

效果如下:

分析这个网页由哪些HTML组成:
(1)“勇气”是网页内容文章的标题,

就是标题标签,它在网页上的代码写成

勇气


(2)“三年级时…我也没勇气参加。” 是网页中文章的段落,

是段落标签。它在网页上的代码写成

三年级时...我也没勇气参加。


(3)网页上那张小女生的图片,由img标签来完成的,它在网页上的代码写成

1.4 标签语法

1.标签由英文尖括号<和>括起来,如就是一个标签。
2.html中的标签一般都是成对出现的,分开始标签和结束标签。结束标签比开始标签多了一个/。
3.标签结构示意图如下:

4.标签举例:

(1)


(2)

(3)


5.标签与标签之间是可以嵌套的,但先后顺序必须保持一致,如:

里嵌套

,那么

必须放在
的前面。如下图所示。

6.HTML标签不区分大小写,

是一样的,但建议小写,因为大部分程序员都以小写为准。
7.测试:有一个网页的代码,但第9行缺少代码,请补充:

1.5 html/head/body认识HTML文件基本结构

学习html文件的结构:一个HTML文件是有自己固定的结构的。

代码讲解:
1. 称为根标签,所有的网页标签都在中。
2. 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有、<script>、 <style>、<link>、 <meta>等标签,头部标签在下一小节中会有详细介绍。 <br/>3.在<body>和</body>标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。</p> <p>下面的代码的HTML文件结构不完整,因为缺少标签<html>和</html>:</p> <p><br/><strong><font color="#800000">1.6 head标签</font></strong></p> <p> •标签的作用:文档的头部描述了文档的各种属性和信息,包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。<br/> •下面的标签可以在head部分:</p> <p> •<title>标签:在<title>和标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出网页的主题。每个网页的内容都是不同的,每个网页都应该有一个独一无二的title。
例如,标签的内容“hello world”会在浏览器中的标题栏上显示出来,如图: </p> <p><br/><font color="#800000"><strong>1.7 了解HTML的代码注释</strong></font></p> <p>代码注释的作用:帮助程序员标注代码的用途,过一段时间后再看你所编写的代码,就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途,还可以帮助其他程序员很快的读懂你的程序的功能,方便多人合作开发网页代码。 <br/>语法:</p> <p><font color="#333333"><strong><!--注释文字 --></strong></font></p> <p>下面代码的第 8、12 行都是注释代码,但是发现他们是不会在结果窗口中显示出来的:</p> <p>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。</p> </div> <div class="newsDetailPage"> <div class="newsDetailPrev"> <a style="cursor: pointer !important;" href="/aygd/6211.html"> <div class="prevIco"><i class="iconfont icon-zuoyoujiantou-copy"></i></div> <div class="prevName"> <p>上一篇:</p> <p>html音乐网站制作</p> </div> </a> </div> <div class="newsDetailReturn"> <a style="cursor: pointer !important;" href="/aygd/"> <div class="returnIco"><i class="iconfont icon-caidan"></i></div> <div class="returnName"> <p>返回列表</p> </div> </a> </div> <div class="newsDetailNext"> <a style="cursor: pointer !important;" href="/aygd/6213.html"> <div class="nextIco"><i class="iconfont icon-zuoyoujiantou"></i></div> <div class="nextName"> <p>下一篇:学习网页制作心得体会</p> <p></p> </div> </a> </div> </div> </div> <div class="newsDetailRg col-3"> <div class="newsDetailRgSack"> <div class="newsDetailRgTitle"> <h2>随机文章</h2> </div> <ul class="newsDetailUl"> <li class="newsDetailLi"> <a style="cursor: pointer !important;" href="/aygd/4064.html"> <div class="newsDetailLiTitle"> <h2><span>·</span>广安企业网站设计公司招聘</h2> </div> </a> </li> <li class="newsDetailLi"> <a style="cursor: pointer !important;" href="/aygd/8612.html"> <div class="newsDetailLiTitle"> <h2><span>·</span>网页制作与网站设计课程设计报告</h2> </div> </a> </li> <li class="newsDetailLi"> <a style="cursor: pointer !important;" href="/aygd/7172.html"> <div class="newsDetailLiTitle"> <h2><span>·</span>网页制作公司推荐</h2> </div> </a> </li> <li class="newsDetailLi"> <a style="cursor: pointer !important;" href="/aygd/1854.html"> <div class="newsDetailLiTitle"> <h2><span>·</span>电子商务网站建设流程?电商网站搭建几步搞定?</h2> </div> </a> </li> <li class="newsDetailLi"> <a style="cursor: pointer !important;" href="/aygd/3593.html"> <div class="newsDetailLiTitle"> <h2><span>·</span>北京网站制作设计价格费用多少</h2> </div> </a> </li> <li class="newsDetailLi"> <a style="cursor: pointer !important;" href="/aygd/3998.html"> <div class="newsDetailLiTitle"> <h2><span>·</span>服装批发网站建设</h2> </div> </a> </li> <li class="newsDetailLi"> <a style="cursor: pointer !important;" href="/aygd/1872.html"> <div class="newsDetailLiTitle"> <h2><span>·</span>传媒网站制作公司</h2> </div> </a> </li> <li class="newsDetailLi"> <a style="cursor: pointer !important;" href="/aygd/1408.html"> <div class="newsDetailLiTitle"> <h2><span>·</span>建设高端网站公司哪家好</h2> </div> </a> </li> <li class="newsDetailLi"> <a style="cursor: pointer !important;" href="/aygd/2969.html"> <div class="newsDetailLiTitle"> <h2><span>·</span>寿光定制网站建设价格</h2> </div> </a> </li> <li class="newsDetailLi"> <a style="cursor: pointer !important;" href="/aygd/2572.html"> <div class="newsDetailLiTitle"> <h2><span>·</span>开源建站平台哪个好</h2> </div> </a> </li> <li class="newsDetailLi"> <a style="cursor: pointer !important;" href="/aygd/4671.html"> <div class="newsDetailLiTitle"> <h2><span>·</span>网站优化软件哪个好?好用的网站优化软件推荐</h2> </div> </a> </li> <li class="newsDetailLi"> <a style="cursor: pointer !important;" href="/aygd/2296.html"> <div class="newsDetailLiTitle"> <h2><span>·</span>做网站都能用什么做,网站一般都是用什么软件做</h2> </div> </a> </li> </ul> </div> <div class="newsDetailRgBtmSack"> <div class="btmTitle"> <h2>联系安优网络</h2> </div> <div class="btmText"> <p>定制您的专属网站建设方案吧</p> </div> <div class="btmTel"> <a style="cursor: pointer !important;" class="btmTelA" href="tel:18651623366"> <span class="btmTelSpan"> <i>400-8793-956</i> </span> </a> </div> <div class="btmImg"><img src="/statics/rsit/images/newsbtmimg.png" alt=""></div> </div> </div> </div> </div> <div class="ind08 serverind08 ind08sp"> <div class="ind08Sack col-11 col-xxl-9"> <div class="ind08SmalTitle"> <h2>策略思维与细节的完美结合,有效帮您减少试错成本</h2> <div class="ind08Sm"> <h2>策略思维与细节的完美结合,有效帮您减少试错成本</h2> </div> </div> <div class="ind08Title ind08TitleSe"> <h2>立即与安优联系,开启网站设计全新体验</h2> <div class="ind08Sm"> <h2>立即与安优联系,开启网站设计全新体验</h2> </div> </div> <div class="ind08Title ind08TitleSePh"> <h2>立即与安优联系<br>开启网站设计全新体验</h2> <div class="ind08Sm" style="width: 100%;opacity: 1;"> <h2 style="width: 100%;opacity: 1;">立即与安优联系<br>开启网站设计全新体验</h2> </div> </div> <form method="post" name="myform" id="myform" action="/index.php?s=form&c=liuyan&m=post&is_show_msg=1"> <div class="formSack"> <div class="formInputSack"> <div class="formInput"> <input type="text" onFocus="this.removeAttribute('readonly');" autocomplete="off" class="form-input" id="chenghu1" name="data[title]" placeholder="请输入您的称呼"> </div> <div class="formInput"> <input type="text" onFocus="this.removeAttribute('readonly');" autocomplete="off" class="form-input" id="shoujihao" name="data[shoujihao]" placeholder="请输入您的手机号*" required="" oninvalid="setCustomValidity('请输入您的手机号')" oninput="setCustomValidity('');"> </div> </div> <div class="formBtnSack"> <button type="submit" id="dosubmit" name="dosubmit" onClick="formsubmit()" >提交需求</button> <a style="cursor: pointer !important;" href="http://wpa.qq.com/msgrd?v=3&uin=309474043&site=qq&menu=yes" target="_blank" onClick="seopen()">在线咨询</a> </div> </div> </form> </div> </div></div> <div class="footer " id="footer"> <div class="ftSack col-11"> <div class="ftTop row"> <div class="ftTopLf col-12 col-xl-6"> <ul class="ftTopLfUl"> <li class="ftTopLfLi"> <a style="cursor: pointer !important;" href="/service/"> <p>服务项目</p> </a> <a style="cursor: pointer !important;" href="/service/"> <p>网站建设开发</p> </a> <a style="cursor: pointer !important;" href="/service/"> <p>品牌设计塑造</p> </a> <a style="cursor: pointer !important;" href="/service/"> <p>移动端开发</p> </a> <a style="cursor: pointer !important;" href="/service/"> <p>网站安全运维</p> <a style="cursor: pointer !important;" href="/seo.html"> <p>网站优化</p> <a style="cursor: pointer !important;" href="/xcx.html"> <p>小程序开发</p> </a> </li> <li class="ftTopLfLi"> <a style="cursor: pointer !important;" href="/jpal/"> <p>精品案例</p> </a> <a style="cursor: pointer !important;" href="/jtal/"> <p>集团案例</p> </a> <a style="cursor: pointer !important;" href="/gsal/"> <p>公司案例</p> </a> <a style="cursor: pointer !important;" href="/xcxal/"> <p>小程序案例</p> </a> </li> <li class="ftTopLfLi"> <a style="cursor: pointer !important;" href="/guanyuwomen/"> <p>关于我们</p> </a> <a style="cursor: pointer !important;" href="/guanyuwomen/"> <p>关于安优</p> </a> <a style="cursor: pointer !important;" href="/guanyuwomen/"> <p>安优使命</p> </a> <a style="cursor: pointer !important;" href="/guanyuwomen/"> <p>安优愿景</p> </a> <a style="cursor: pointer !important;" href="/guanyuwomen/"> <p>合作伙伴</p> </a> </li> <li class="ftTopLfLi"> <a style="cursor: pointer !important;" href="/ayxw/"> <p>公司新闻</p> </a> <a style="cursor: pointer !important;" href="/aygd/"> <p>安优观点</p> </a> <a style="cursor: pointer !important;" href="/wzzs/"> <p>网站知识</p> </a> </li> <li class="ftTopLfLi"> <a style="cursor: pointer !important;" href="/contact/"> <p>联系我们</p> </a> <a style="cursor: pointer !important;" href="/contact/"> <p>联系方式</p> </a> <a style="cursor: pointer !important;" href="/contact/"> <p>在线留言</p> </a> </li> </ul> </div> <div class="ftTopRg col-12 col-xl-6"> <div class="ftTopRgSack1"> <div class="ftSack1Title"> <h2>联系我们</h2> </div> <div class="ftSack1Ico"> <p><i class="iconfont icon-shouji"></i>24小时咨询热线:</p> <a style="cursor: pointer !important;" class="navTelA" href="tel:18651623366"> <span class="navTelSpan"> <i>18651623366</i> </span> </a> </div> <div class="ftSack1Ico"> <p><i class="iconfont icon-zuoji"></i>服务热线:</p> <a style="cursor: pointer !important;" class="navTelB" href="tel:400-8793-956"> <p>400-8793-956</p> </a> </div> </div> <div class="ftTopRgSack2"> <div class="ftSack2Code"> <div class="codeImg"><img src="/skin/picture/weixintupian_20240423125445.jpg" alt=""></div> <div class="codeName"> <p>微信咨询</p> </div> </div> <div class="ftSack2Ico"> <p><i class="iconfont icon-youjian"></i>邮箱:</p> <a style="cursor: pointer !important;" class="email" href="mailto:309474043@qq.Com"> <p>309474043@qq.Com</p> </a> </div> <div class="ftSack2Ico"> <p><i class="iconfont icon-dizhi"></i>地址:建邺区新城科技园嘉陵江东街18号2层</p> </div> </div> </div> </div> <div class="ftBtm"> <div class="ftCopy"> <div class="ftCopyright"> <p> <a style="cursor: pointer !important;" target="_Blank">© 2012-2024 南京安优网络科技有限公司 All rights reserved.</a> <a style="cursor: pointer !important;" href="https://beian.miit.gov.cn/" target="_Blank"> 苏ICP备12071769号-1</a> <a style="cursor: pointer !important;" href="/wzdt/">网站地图</a> <a style="cursor: pointer !important;" href="/sitemap.xml">XML</a> <a style="cursor: pointer !important;" href="/sitemap.txt">TXT</a> </p> </div> </div> <div class="ftKeyword"> <a>友情链接:</a> <a style="cursor: pointer !important;" href="https://www.njanyou.cn" target="_Blank">南京网站建设</a> <a style="cursor: pointer !important;" href="https://www.njanyou.cn" target="_Blank">南京网站制作</a> <a style="cursor: pointer !important;" href="https://www.njanyou.cn" target="_Blank">南京网站建设公司</a> <a style="cursor: pointer !important;" href="https://www.njanyou.cn" target="_Blank">南京网站制作公司</a> </div> </div> </div> </div> <script> $(document).ready(function () { var flag = true; var a, b, c; a = $(window).height(); var group = $(".footer"); $(window).scroll(function () { b = $(this).scrollTop(); c = group.offset().top; console.log(c) if (a + b > c && flag) { $(".footer").addClass('line'); flag = false } else { if (a + b < c && !flag) { flag = true } } }); }); </script> </div> <script src="/skin/js/sfq.js"></script> <script src="/skin/js/swiper-bundle.min.js"></script> <script src="/skin/js/swiper.animate1.0.3.min.js"></script> <!-- <script src="/skin/js/swipter.z.js"></script> --> <script src="/skin/js/swipter.js"></script> <script src="/skin/js/wow.min.js"></script> <script> new WOW().init(); </script> <section id="flotWindSack"> <div class="flotWindLf"> <a href="http://wpa.qq.com/msgrd?v=3&uin=309474043&site=qq&menu=yes" target="_blank" onClick="seopen2()"> <div class="flotWindLfSack"> <div class="flotWindLfLoca"> <div class="flotWindLfIco"><img src="/skin/picture/flowwdlf.png" alt=""></div> <div class="flotWindLfName"> <p>在线咨询</p> </div> </div> </div> </a> </div> <div class="flotWindRg"> <a style="cursor: pointer !important;" href="tel:400-8793-956"> <div class="flotWindRgSack"> <div class="flotWindRgLoca"> <div class="flotWindRgIco"><img src="/skin/picture/flowwdrg.png" alt=""></div> <div class="flotWindRgName"> <p>拨打电话</p> </div> </div> </div> </a> </div> </section> <script> var windowTop1 = 0; $(window).scroll(function () { var header = $("#flotWindSack"); var scrolls = $(this).scrollTop(); if (scrolls >= windowTop1 && $(document).scrollTop() > 79) { header.addClass('flotWindSack'); windowTop1 = scrolls; } else { header.removeClass('flotWindSack'); windowTop1 = scrolls; } }); </script> <section id="flotWind2Sack"> <div class="flotWind2Top"> <ul class="flotWind2TopList"> <li> <div class="flotWind2TopIco"> <div class="flotWind2TopImg"><img src="/skin/picture/pcphone.png" alt=""></div> <div class="flotWind2TopIcoName"> <p>电话咨询</p> </div> </div> <div class="flotWind2TopHover"> <div class="flotWind2TopHoverB"> <a style="cursor: pointer !important;" href="tel:400-8793-956"> <div class="flotWind2THoSa"> <p>400-8793-956</p> </div> </a> <div class="smico"></div> </div> </div> </li> <li> <a style="cursor: pointer !important;" href="http://wpa.qq.com/msgrd?v=3&uin=309474043&site=qq&menu=yes" target="_blank" onClick="seopen2()"> <div class="flotWind2TopIco"> <div class="flotWind2TopImg"><img src="/skin/picture/pcerji.png" alt=""></div> <div class="flotWind2TopIcoName"> <p>在线咨询</p> </div> </div> </a> </li> <li> <div class="flotWind2TopIco"> <div class="flotWind2TopImg"><img src="/skin/picture/pcweix.png" alt=""></div> <div class="flotWind2TopIcoName"> <p>微信咨询</p> </div> </div> <div class="flotWind2TopHover"> <div class="flotWind2THoSa"> <div class="flotWind2TopHoverIm"> <img src="/skin/picture/weixintupian_20240423125445.jpg" alt=""> </div> <div class="smico"></div> </div> </div> </li> </ul> </div> <div class="flotWind2Bt"> <a style="cursor: pointer !important;" href="javascript:window.scrollTo(0,0)" id="flotWind2Bt"> <div class="flotWind2BtSack"> <div class="flotWind2TBtIco"> <div class="flotWind2BtImg"><img src="/skin/picture/rettop.png" alt=""></div> <div class="flotWind2BtIcoName"> <p>返回顶部</p> </div> </div> </div> </a> </div> </section> <script> window.scrollTo({ top: 0, left: 0, behavior: 'smooth', duration: 1000, }); </script> <script> $("#flotWind2Bt").click(function () { mySwiperserve.slideTo(0, 1000, false); }); </script> <script> var windowTop1 = 0; $(window).scroll(function () { var header = $("#flotWind2Sack"); var scrolls = $(this).scrollTop(); if (scrolls >= windowTop1 && $(document).scrollTop() > 300) { header.addClass('flotWind2Sack'); windowTop1 = scrolls; } else { header.removeClass('flotWind2Sack'); windowTop1 = scrolls; } }); </script> <section class="flotWindRogue" id="flotWindRogue"> <div class="rogue"> <div class="rogueContext"> <div class="rogueTitle"> <h2>品质设计 用心服务</h2> </div> <ul class="rogueUl row"> <li class="rogueLi col-4"> <div class="rogueLiSack"> <div class="rogueLiSackP"> <p>12年+定制经验</p> </div> </div> </li> <li class="rogueLi col-4"> <div class="rogueLiSack"> <div class="rogueLiSackP"> <p>600+客户选择</p> </div> </div> </li> <li class="rogueLi col-4"> <div class="rogueLiSack"> <div class="rogueLiSackP"> <p>高效售后保障</p> </div> </div> </li> </ul> <div class="rogueBtm"> <div class="rogueLf"> <div class="tdCode"><img src="/skin/picture/weixintupian_20240423125445.jpg" alt=""></div> </div> <div class="rogueRg"> <div class="rogueRgSmT"> <p>7*24小时服务热线</p> </div> <div class="rogueRgT"> <a style="cursor: pointer !important;" href="tel:400-8793-956"> <p>400-8793-956</p> </a> </div> <div class="rogueRgBt"> <a style="cursor: pointer !important;" href="http://wpa.qq.com/msgrd?v=3&uin=309474043&site=qq&menu=yes" target="_blank" onClick="seopen2()"> <p>在线咨询</p> </a> </div> </div> </div> </div> <div class="rogueCrosses"> <div class="icon"> <i class="iconfont icon-fork"></i> </div> </div> </div> </section> <script> var i = 0; var max = "0"; var add = ""; var shouci = "10000"; var zaici = "50000"; var deTime1 = window.setTimeout(function () { $(".flotWindRogue").addClass('active'); }, shouci); function deTime() { $(".flotWindRogue").addClass('active'); i++; if (i > max) { window.clearInterval(add); }; } add = setInterval(function () { deTime(); }, zaici); $("#flotWindRogue .rogue .rogueCrosses").click(function () { $(".flotWindRogue").removeClass("active"); }); </script> <script> $(document).ready(function () { var flag = true; var a, b, c; a = $(window).height(); var group = $(".ind08"); $(window).scroll(function () { b = $(this).scrollTop(); c = group.offset().top; console.log(c) if (a + b > c && flag) { $(".ind08 .ind08Sack .ind08Title").addClass('active'); flag = false } else { if (a + b < c && !flag) { flag = true } } }); }); </script> <script> $(document).ready(function () { var flag = true; var a, b, c; a = $(window).height(); var group = $(".ind08 .ind08Sack"); $(window).scroll(function () { b = $(this).scrollTop(); c = group.offset().top; console.log(c) if (a + b > c && flag) { $(".ind08 .ind08Sack .ind08SmalTitle").addClass('active'); flag = false } else { if (a + b < c && !flag) { flag = true } } }); }); </script> </body> </html>