精通HTML+CSS网页开发与制作 - (EPUB全文下载)

文件大小:0.63 mb。
文件格式:epub 格式。
书籍内容:

精通HTML+CSS网页开发与制作
第1章 初识HTML与CSS
第2章 HTML的基本标签
第3章 列表、表格和框架
第4章 表单
第5章 初识CSS
第6章 美化网页元素
第7章 盒子模型
第8章 浮动
第9章 定位网页元素
第10章 项目案例
版权声明
第1章 初识HTML与CSS
本章简介
在网络时代的主流下,各种信息的获得途径,不论是PC端,还是移动端,基本上都是以Web页面为基础来呈现的,因此Web页面呈现信息已成为各种信息共享的主要形式。而HTML(Hyper Text Markup Language,超文本置标语言)则是创建Web页面的基础。本书将从HTML文件的基本结构、语法来展开,然后介绍使用HTML标签制作简单的网页,最后使用DIV+CSS制作精美的商业网站。
本章将讲解HTML的基础内容,给大家打下一个牢固的基础,即本章的重点内容是HTML文件的基本结构和W3C标准,以及制作网页时常用的基本标签。
本章工作任务
 学习HTML和CSS
 制作简单的网页
本章技能目标
 掌握HTML的基本概念
 掌握HTML的基本语法和结构
背诵英文单词
请在预习时找出下列单词在教材中的用法,了解它们的含义和发音,并填写于横线处。
head           
title           
body           
strong           
target           
href           
预习并回答以下问题
1.什么是W3C标准?为什么要遵循这一标准?
2.制作网页用到的基本标签有哪些?它们的作用是什么?
3.如何在网页中插入一张图片,并且当鼠标移至图片上时出现图片说明文字?
1.1 HTML基本概念
互联网上的信息是以网页的形式呈现给用户的,因此,网页是网络信息传递的载体。
网页文件是用一种标签语言书写的,这种语言称为HTML(Heyper Text Markup Language,超文本标记语言),是用来描述网页文档的一种置标语言。HTML文件以.htm或.html为扩展名。
1.1.1 什么是HTML
HTML不是一种编程语言,而是一种描述性的标记语言(Markup Language),用于描述网页的内容和结构。HTML最基本的语法是:
标签通常是成对出现,有一个开始标签就对应有一个结束标签。结束标签只是在开始标签的前面加一个斜杠“/”。当浏览器收到HTML文件后,就会解释里面的标签,然后把标签相对应的功能表达出来,从而显示浏览网页的内容。
例如,在HTML中,用

标签来定义一个文章的标题,用
标签来定义一个换行符。当浏览器遇到

xxx

标签时,会把该标签中的内容(xxx)自动形成一个标题。当遇到
标签时会自动换行,标签中的“/”可以省略,但为了代码的规范性,一般建议加上。
1.1.2 HTML的发展历程
HTML主要用于描述超文本中内容的显示方式。标记语言从诞生到今天,经历了二十几年的不断更新与改进,已经越来越完善,经历的版本及发布日期如表1.1所示。
表1.1 HTML发展史
1.1.3 HTML与XHTML的重要区别
通过HTML的发展历史,可以知道这套语言有两个版本,即XHTML和HTML。虽然目前浏览器都兼容HTML,但是为了使网页能够符合标准,应该尽量使用XHTML规范来编写代码,需要注意的事项有:
(1)在XHTML中,标签名必须小写。在HTML中,标签名称可以大写,也可以小写。
(2)在XHTML中,属性名称必须小写。在HTML中,属性名称不区分大小写。
(3)在XHTML中,标签必须严格嵌套。在HTML中,对标签的嵌套没有严格的规定。
(4)在XHTML中,标签必须封闭。在HTML中,标签不封闭也是正确的,即标签可以不成对出现。例如,“

我没有结束标记”和“

我有开始标记和结束标记

”,在浏览器中显示的结果是完全相同的;但是,在XHTML中,第一条语句是不被允许的(不能正常显示),必须像第二条语句那样,严格地使标签封闭。
(5)在XHTML中,即使是空元素的标签也必须封闭。这里说的空标签,就是指那些像


等不对称的标签,它们也必须闭合,在HTML中,这类标签书写为均是正确的;但在XHTML规范中,必须写为才正确。
(6)在XHTML中,属性值必须使用双引号引起来。在HTML中,属性值可以不必使用双引号。
(7)在XHTML中,属性值必须使用完整形式。在HTML中,一些属性经常使用简写方式设定属性值,如;而在XHTML中,必须完整地写为
1.1.4 HTML文件基本结构
完整的HTML结构包括头部、主体等,页面的各部分内容都在对应的标签中。
一个HTML文件的基本结构如示例1.1所示。
示例1.1:
1.DOCTYPE声明
DOCTYPE是用来声明文档类型的,声明文档为HTML文档结构,用来检验是否符合Web相关标准,同时告诉浏览器使用哪种规范来解释这个文档中的代码。DOCTYPE声明必须位于HTML文档的第一行。
2.标签
标签是HTML语言中最基本的单位,一个网页以标签开始、以标签结束。
3.标签
标签用于定义文档的头部,是所有头部元素的容器。标签中的元素可以引用脚本,指示浏览器在哪里找到样式表,提供元信息等。文档的头部描述了文档的各种属性和信息,绝大多数文档头部包含的数据都不会真正作为内容显示给用户。
4.标签<br /> <title>标签描述网页的标题,类似一篇文章的标题,一般为一个简洁的主题,并能吸引读者有兴趣读下去,例如,百度首页,对应的网页标题为:<br /> 在浏览器中的效果如图1.1所示。<br /> 图1.1 <title>标签的使用<br /> 5.<me ............ <div style="border-bottom: 1px dashed gray; width: 100%;"></div> <p>以上为书籍内容预览,如需阅读全文内容请下载EPUB源文件,祝您阅读愉快。</p> </div> <div id="pay-single-box"></div> <div class="article-copyright">版权声明:书云(openelib.org)是世界上最大的在线非盈利图书馆之一,致力于让每个人都能便捷地了解我们的文明。我们尊重著作者的知识产权,如您认为书云侵犯了您的合法权益,请参考<a href="https://openelib.org/copyright"><u>版权保护声明</u></a>,通过邮件openelib@outlook.com联系我们,我们将及时处理您的合理请求。<span><a href="https://txtlib" style="color: white"> 数研咨询 </span><span><a href="https://lfglib.cn" style="color: white"> 流芳阁 </span><span><a href="https://yblook.com" style="color: white"> 研报之家 </span><span><a href="https://botlib.cn" style="color: white"> AI应用导航 </span><span><a href="https://ybnav.com" style="color: white"> 研报之家 </span><br/><a href="https://openelib.org">书云 Open E-Library</a> » <a href="https://openelib.org/domain/computer/162615.html">精通HTML+CSS网页开发与制作 - (EPUB全文下载)</a></div> <div class="article-footer"> <div class="xshare"> <span class="xshare-title">分享到:</span> <a href="javascript:;" title="收藏文章" etap="star" data-postid="162615" class="ripro-star"><i class="fa fa-star-o"></i></a> <a href="" etap="share" data-share="qq" class="share-qq"><i class="fa fa-qq"></i></a> <a href="" etap="share" data-share="weibo" class="share-weibo"><i class="fa fa-weibo"></i></a> </div> </div> </div> </div> </article> <div class="entry-navigation"> <nav class="article-nav"> <span class="article-nav-prev">上一篇<br><a href="https://openelib.org/domain/computer/162614.html" rel="prev">精通Cocos2d-x游戏开发(进阶卷) - (EPUB全文下载)</a></span> <span class="article-nav-next">下一篇<br><a href="https://openelib.org/domain/computer/162616.html" rel="next">精通Matlab数字图像处理与识别 - (EPUB全文下载)</a></span> </nav> </div> <!-- # 标准网格模式... --> <div class="related-posts-grid"> <h4 class="u-border-title">相关推荐</h4> <div class="row"> <div class="col-6 col-sm-3 col-md-3 mt-10 mb-10"> <article class="post"> <div class="entry-wrapper"> <header class="entry-header"> <h4 class="entry-title"><a target="_blank" href="https://openelib.org/domain/computer/97347.html" title="分布式云数据中心的建设与管理 - (EPUB全文下载)" rel="bookmark">分布式云数据中心的建设与管理 - (EPUB全文下载)</a></h4> </header> </div> </article> </div> <div class="col-6 col-sm-3 col-md-3 mt-10 mb-10"> <article class="post"> <div class="entry-wrapper"> <header class="entry-header"> <h4 class="entry-title"><a target="_blank" href="https://openelib.org/domain/computer/162236.html" title="Scratch真好玩:教小孩学编程 - (EPUB全文下载)" rel="bookmark">Scratch真好玩:教小孩学编程 - (EPUB全文下载)</a></h4> </header> </div> </article> </div> <div class="col-6 col-sm-3 col-md-3 mt-10 mb-10"> <article class="post"> <div class="entry-wrapper"> <header class="entry-header"> <h4 class="entry-title"><a target="_blank" href="https://openelib.org/domain/computer/96936.html" title="TheWizardofOzandOtherWonderfulBooksofOz - (EPUB全文下载)" rel="bookmark">TheWizardofOzandOtherWonderfulBooksofOz - (EPUB全文下载)</a></h4> </header> </div> </article> </div> <div class="col-6 col-sm-3 col-md-3 mt-10 mb-10"> <article class="post"> <div class="entry-wrapper"> <header class="entry-header"> <h4 class="entry-title"><a target="_blank" href="https://openelib.org/domain/computer/96699.html" title="TheInnovators - (EPUB全文下载)" rel="bookmark">TheInnovators - (EPUB全文下载)</a></h4> </header> </div> </article> </div> <div class="col-6 col-sm-3 col-md-3 mt-10 mb-10"> <article class="post"> <div class="entry-wrapper"> <header class="entry-header"> <h4 class="entry-title"><a target="_blank" href="https://openelib.org/domain/computer/162149.html" title="Photoshop移动UI设计从入门到精通 - (EPUB全文下载)" rel="bookmark">Photoshop移动UI设计从入门到精通 - (EPUB全文下载)</a></h4> </header> </div> </article> </div> <div class="col-6 col-sm-3 col-md-3 mt-10 mb-10"> <article class="post"> <div class="entry-wrapper"> <header class="entry-header"> <h4 class="entry-title"><a target="_blank" href="https://openelib.org/domain/computer/96905.html" title="TheUnexpectedGuest - (EPUB全文下载)" rel="bookmark">TheUnexpectedGuest - (EPUB全文下载)</a></h4> </header> </div> </article> </div> <div class="col-6 col-sm-3 col-md-3 mt-10 mb-10"> <article class="post"> <div class="entry-wrapper"> <header class="entry-header"> <h4 class="entry-title"><a target="_blank" href="https://openelib.org/domain/computer/95855.html" title="Java编程的逻辑 - (EPUB全文下载)" rel="bookmark">Java编程的逻辑 - (EPUB全文下载)</a></h4> </header> </div> </article> </div> <div class="col-6 col-sm-3 col-md-3 mt-10 mb-10"> <article class="post"> <div class="entry-wrapper"> <header class="entry-header"> <h4 class="entry-title"><a target="_blank" href="https://openelib.org/domain/computer/95423.html" title="DestinationUnknown - (EPUB全文下载)" rel="bookmark">DestinationUnknown - (EPUB全文下载)</a></h4> </header> </div> </article> </div> </div> </div> </main> </div> </div> <div class="sidebar-column col-lg-3"> <aside class="widget-area"> <div id="cao_widget_pay-2" class="widget widget-pay"><div class="pay--rateinfo"><b><span style="font-size: 16px;">源文件格式:EPUB</span></b></div><div class="pay--content"><div class="pay-box"><a class="login-btn btn btn--primary btn--block"><i class="fa fa-user"></i> 登录后下载</a></div></div></div><div id="search-3" class="widget widget_search"><h5 class="widget-title">搜索书籍</h5><form method="get" class="search-form inline" action="https://openelib.org/"> <input type="search" class="search-field inline-field" placeholder="输入关键词,回车..." autocomplete="off" value="" name="s" required="required"> <button type="submit" class="search-submit"><i class="mdi mdi-magnify"></i></button> </form></div><div id="cao_widget_post-2" class="widget cao-widget-posts"><h5 class="widget-title">同类书籍</h5><div class="posts"><div class="grid"><a href="https://openelib.org/domain/computer/95181.html" rel="bookmark" title="AShortHistoryoftheWorld - (EPUB全文下载)">AShortHistoryoftheWorld - (EPUB全文下载)</a></div><div class="grid"><a href="https://openelib.org/domain/computer/96206.html" rel="bookmark" title="Partnersincrime - (EPUB全文下载)">Partnersincrime - (EPUB全文下载)</a></div><div class="grid"><a href="https://openelib.org/domain/computer/95223.html" rel="bookmark" title="Blackcoffee - (EPUB全文下载)">Blackcoffee - (EPUB全文下载)</a></div><div class="grid"><a href="https://openelib.org/domain/computer/162472.html" rel="bookmark" title="技术与文明:我们的时代和未来 - (EPUB全文下载)">技术与文明:我们的时代和未来 - (EPUB全文下载)</a></div><div class="grid"><a href="https://openelib.org/domain/computer/162025.html" rel="bookmark" title="HyperLedger Fabric开发实战:快速掌握区块链技术 - (EPUB全文下载)">HyperLedger Fabric开发实战:快速掌握区块链技术 - (EPUB全文下载)</a></div><div class="grid"><a href="https://openelib.org/domain/computer/95939.html" rel="bookmark" title="LeultimesetteparolediCaravaggio - (EPUB全文下载)">LeultimesetteparolediCaravaggio - (EPUB全文下载)</a></div><div class="grid"><a href="https://openelib.org/domain/computer/96500.html" rel="bookmark" title="ThankYouforBeingLate - (EPUB全文下载)">ThankYouforBeingLate - (EPUB全文下载)</a></div><div class="grid"><a href="https://openelib.org/domain/computer/162339.html" rel="bookmark" title="Windows PowerShell实战指南(第3版) - (EPUB全文下载)">Windows PowerShell实战指南(第3版) - (EPUB全文下载)</a></div><div class="grid"><a href="https://openelib.org/domain/computer/162220.html" rel="bookmark" title="React前端技术与工程实践 - (EPUB全文下载)">React前端技术与工程实践 - (EPUB全文下载)</a></div><div class="grid"><a href="https://openelib.org/domain/computer/97839.html" rel="bookmark" title="社群运营五十讲:移动互联时代社群变现的方法、技巧与实践 - (EPUB全文下载)">社群运营五十讲:移动互联时代社群变现的方法、技巧与实践 - (EPUB全文下载)</a></div></div></div></aside> </div> </div> </div> </div><!-- end sitecoent --> <footer class="site-footer"> <div class="container"> <div class="site-info"> Copyright © 2006-2024 <a href="openelib.org" target="_blank" rel="noreferrer nofollow">书云(openelib.org)</a>. 发展开放的数字化知识平台,让每个人都能便捷地了解我们的文明。 </div> </div> </footer> <div class="rollbar"> <div class="rollbar-item" etap="to_full" title="全屏页面"><i class="fa fa-arrows-alt"></i></div> <div class="rollbar-item" etap="to_top" title="返回顶部"><i class="fa fa-angle-up"></i></div> </div> <div class="dimmer"></div> <div id="popup-signup" class="popup-signup fade" style="display: none;"> <div class="register-login-modal" role="document"> <div class="modal-content"> <div class="modal-body"> <img class="popup-logo" src="https://openelib.org/wp-content/uploads/2024/03/shuyun05.png" data-dark="https://openelib.org/wp-content/uploads/2024/03/shuyun05.png" alt="书云 Open E-Library"> <!-- Nav tabs --> <ul class="nav nav-tabs"> <li class="active"><a href="#login" data-toggle="login">登录</a> </li> <li><a href="#signup" data-toggle="signup">注册</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane fade in active" id="login"> <div class="signup-form-container text-center"> <form class="mb-0"> <div class="form-group"> <input type="text" class="form-control" name="username" placeholder="*用户名或邮箱"> </div> <div class="form-group"> <input type="password" class="form-control" name="password" placeholder="*密码"> </div> <button type="button" class="go-login btn btn--primary btn--block"><i class="fa fa-bullseye"></i> 安全登录</button> <!-- <a href="#" class="forget-password">忘记密码?</a> --> </form> <!-- form end --> </div> <!-- .signup-form end --> </div> <div class="tab-pane fade in" id="signup"> <form class="mb-0"> <div class="form-group"> <input type="text" class="form-control" name="user_name" placeholder="输入英文用户名"> </div> <!-- .form-group end --> <div class="form-group"> <input type="email" class="form-control" name="user_email" placeholder="绑定邮箱"> </div> <!-- .form-group end --> <div class="form-group"> <input type="password" class="form-control" name="user_pass" placeholder="密码最小长度为6"> </div> <div class="form-group"> <input type="password" class="form-control" name="user_pass2" placeholder="再次输入密码"> </div> <button type="button" class="go-register btn btn--primary btn--block"><i class="fa fa-bullseye"></i> 立即注册</button> </form> <!-- form end --> </div> </div> <a target="_blank" href="https://openelib.org/wp-login.php?action=lostpassword" class="rest-password">忘记密码?</a> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> </div> <div class="off-canvas"> <div class="canvas-close"><i class="mdi mdi-close"></i></div> <div class="logo-wrapper"> <a href="https://openelib.org/"> <img class="logo regular" src="https://openelib.org/wp-content/uploads/2024/03/shuyun05.png" alt="书云 Open E-Library"> </a> </div> <div class="mobile-menu hidden-lg hidden-xl"></div> <aside class="widget-area"> </aside> </div> <script> console.log("SQL 请求数:35"); console.log("页面生成耗时: 5.46592"); </script> <script type="text/javascript"> ((function() { var callbacks = [], timeLimit = 50, open = false; setInterval(loop, 1); return { addListener: function(fn) { callbacks.push(fn); }, cancleListenr: function(fn) { callbacks = callbacks.filter(function(v) { return v !== fn; }); } } function loop() { var startTime = new Date(); debugger; if (new Date() - startTime > timeLimit) { if (!open) { callbacks.forEach(function(fn) { fn.call(null); }); } open = true; window.stop(); alert('讨厌,不要扒我皮了,人家好害羞的!'); window.location.reload(); } else { open = false; } } })()).addListener(function() { window.location.reload(); }); </script> <script type="text/javascript" src="https://zz.bdstatic.com/linksubmit/push.js?ver=6.4.3" id="baidu_zz-js"></script> <script type="text/javascript" src="https://openelib.org/wp-content/themes/ripro/assets/js/plugins.js?ver=8.9.0" id="plugins-js"></script> <script type="text/javascript" id="app-js-extra"> /* <![CDATA[ */ var caozhuti = {"site_name":"\u4e66\u4e91 Open E-Library","home_url":"https:\/\/openelib.org","ajaxurl":"https:\/\/openelib.org\/wp-admin\/admin-ajax.php","is_singular":"1","tencent_captcha":{"is":"","appid":""},"infinite_load":"\u52a0\u8f7d\u66f4\u591a","infinite_loading":"<i class=\"fa fa-spinner fa-spin\"><\/i> \u52a0\u8f7d\u4e2d...","site_notice":{"is":"0","color":"rgb(33, 150, 243)","html":"<div class=\"notify-content\"><h3>RiPro\u6700\u65b0\u7248\u672c\u66f4\u65b0\u65e5\u5fd7<\/h3><div>\u8fd9\u662f\u4e00\u6761\u7f51\u7ad9\u516c\u544a\uff0c\u53ef\u5728\u540e\u53f0\u5f00\u542f\u6216\u5173\u95ed\uff0c\u53ef\u81ea\u5b9a\u4e49\u80cc\u666f\u989c\u8272\uff0c\u6807\u9898\uff0c\u5185\u5bb9\uff0c\u7528\u6237\u9996\u6b21\u6253\u5f00\u5173\u95ed\u540e\u4e0d\u518d\u91cd\u590d\u5f39\u51fa\uff0c\u6b64\u5904\u53ef\u4f7f\u7528html\u6807\u7b7e...<\/div><\/div>"},"pay_type_html":{"html":"<div class=\"pay-button-box\"><div class=\"pay-item\" id=\"alipay\" data-type=\"1\"><i class=\"alipay\"><\/i><span>\u652f\u4ed8\u5b9d<\/span><\/div><div class=\"pay-item\" id=\"weixinpay\" data-type=\"2\"><i class=\"weixinpay\"><\/i><span>\u5fae\u4fe1\u652f\u4ed8<\/span><\/div><\/div><p style=\"font-size: 13px; padding: 0; margin: 0;\">\u514d\u8d39\u6216\u6350\u8d60\u514d\u8d39\u8d44\u6e90\u4ec5\u9650\u4f59\u989d\u652f\u4ed8<\/p>","alipay":1,"weixinpay":2}}; /* ]]> */ </script> <script type="text/javascript" src="https://openelib.org/wp-content/themes/ripro/assets/js/app.js?ver=8.9.0" id="app-js"></script> <script type="text/javascript" src="https://openelib.org/wp-content/themes/ripro/assets/js/plugins/jquery.fancybox.min.js?ver=8.9.0" id="fancybox-js"></script> <script type="text/javascript" src="https://openelib.org/wp-includes/js/comment-reply.min.js?ver=6.4.3" id="comment-reply-js" async="async" data-wp-strategy="async"></script> </body> </html>