《网页制作一》课件_第1页
《网页制作一》课件_第2页
《网页制作一》课件_第3页
《网页制作一》课件_第4页
《网页制作一》课件_第5页
已阅读5页，还剩27页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

ComputerScience高校计算机基础课程第一课《网页制作一》PPT课件HTML5+CSS3零基础入门从零开始，系统学习前端开发核心技术课程导航COURSENAVIGATION·TABLEOFCONTENTS01认识Web与开发环境网页、网站与Web的基本概念及三者关系主流浏览器特性与F12开发者工具核心功能VSCode开发环境与必备插件配置02HTML5文档结构与核心标签HTML5文档基本骨架与元数据配置文本、图像、链接、列表、表单等核心标签语义化结构标签对SEO与无障碍的价值03CSS3样式基础与选择器三种CSS引入方式的适用场景与性能影响选择器优先级计算与常用伪类伪元素文本、背景、边框样式属性与CSS变量04盒子模型与页面布局标准盒模型与IE盒模型的计算差异浮动清除、定位布局、Flex与Grid用法响应式页面布局设计与调试05综合实战与学习路径从零搭建个人简介静态页面完整流程规避新手高频错误建立规范编码习惯权威学习资源与进阶路线图LEARNINGOBJECTIVES本课学习目标掌握前端三大核心技术，从零搭建你的第一个网页01前端技术全景认知理解Web技术栈中HTML、CSS、JavaScript三者的分工与协作关系，建立前端开发的全局认知框架02HTML5文档结构与语义化掌握HTML5文档基本结构与常用语义化标签，能独立编写包含标题、段落、图片、链接的完整页面03CSS3样式引入与选择器学会CSS3三种引入方式与基础选择器语法，能对文本、背景、边框进行样式控制04盒子模型与元素占位计算理解盒子模型核心概念并能计算元素实际占位，为后续Flex/Grid布局打下坚实基础05实战：个人简介页面搭建完成一个个人简介静态页面的从零搭建，体验"结构-样式-预览"完整开发流程CHAPTER01认识Web与开发环境网页制作入门课件·第一章SECTION01FUNDAMENTALS什么是网页、网站与Web理解Web的三层结构：文档、站点与协议浏览器渲染流程：HTML/CSS/JS→可视页面网页与网站的本质网页是浏览器可解析的HTML文档，本质是纯文本文件；网站是由多个相互链接的网页组成的信息集合体Web的运作机制基于HTTP协议与URL定位：浏览器发送请求→服务器返回资源→浏览器渲染为可视页面静态vs动态网页静态网页内容固定，由HTML+CSS构成；动态网页通过服务端脚本（PHP/Node.js）或前端框架实时生成内容前端三件套分工HTML定义内容结构、CSS控制视觉呈现、JavaScript实现交互行为，三者缺一不可TOOLS主流浏览器与开发者工具BrowserEngines&DevToolsEssentials现代浏览器内核差异1Chrome/Edge使用Blink内核，Firefox用Gecko，Safari用WebKit；同一CSS属性在不同内核下渲染可能存在细微差异2开发时以Chrome为标准调试环境，上线前必须在Firefox、Safari、移动端浏览器做兼容性验证，避免"只在Chrome正常"F12开发者工具核心面板1Elements面板实时查看/修改DOM与CSS，Styles区可直接编辑样式并即时生效，是调试布局问题的首选入口2Console面板执行JS代码、查看报错信息；Network面板分析资源加载时序与体积，定位性能瓶颈CONFIGURATIONVSCode配置与必备插件DevelopmentEnvironmentSetup界面汉化与自动保存安装Chinese语言包汉化界面，设置files.autoSave:afterDelay开启自动保存，避免手动Ctrl+S遗漏导致预览不更新LiveServer本地服务器右键HTML文件即可启动本地服务器并自动刷新浏览器，解决file://协议下跨域与路径问题标签自动补全与同步AutoCloseTag与AutoRenameTag自动补全/同步修改标签，大幅减少因标签未闭合导致的布局错乱代码质量保障双剑Prettier统一代码格式（缩进、引号、分号），ESLint检查语法错误与最佳实践，两者配合保障代码质量VSCode工作区·终端·插件面板理解"为什么需要"比记住"怎么安装"更重要——每个插件都在解决一个具体的开发痛点网页制作入门第二单元CHAPTER02HTML5文档结构与核心标签掌握网页骨架结构与常用标签，构建坚实的编码基础STRUCTUREHTML5文档基本骨架从DOCTYPE到BODY：理解每个标签的职责1<!DOCTYPEhtml><!DOCTYPEhtml>声明必须位于文档首行，告知浏览器按HTML5标准解析；缺失会导致IE等旧浏览器进入怪异模式2<htmllang='zh-CN'><htmllang='zh-CN'>指定文档语言，影响搜索引擎索引与屏幕阅读器发音；lang属性值需符合BCP47规范3<head><metacharset='UTF-8'><metaname='viewport'><head>内<metacharset='UTF-8'>确保中文正确显示，<metaname='viewport'>控制移动端缩放行为，两者是现代网页必备元数据4<body><title><body>承载所有可见内容，<title>内容显示在浏览器标签页而非页面内，常被初学者误认为页面标题TEXTCONTROL文本控制标签体系HTML文档的骨架结构—标题层级与行内语义标签标题与段落层级<h1><h6><h1><h1>~<h6>六级标题形成文档大纲，每页仅用一个<h1>作为主标题；搜索引擎与辅助技术依赖此层级理解内容结构<p><br><br><p><p>表示段落，浏览器自动添加上下外边距；<br>仅用于诗歌地址等换行场景，滥用<br>代替<p>会破坏语义结构行内文本语义标签<strong><em><b><i><strong>表示重要强调（默认加粗）、<em>表示语气强调（默认斜体），两者有语义价值；<b><i>仅改变外观无语义，应优先用前者<mark><timedatetime='...'><abbrtitle='全称'><mark>高亮引用文本、<timedatetime='...'>标记机器可读时间、<abbrtitle='全称'>解释缩写，提升内容可访问性与SEO效果记住：语义标签优先于外观标签—让HTML描述"是什么"，CSS控制"长什么样"图像与多媒体嵌入img·video·audio原生标签与最佳实践<imgsrc='path.jpg'alt='描述文字'>alt<imgsrc='path.jpg'alt='描述文字'>是自闭合标签，alt属性为必填项：图片加载失败时显示替代文本，屏幕阅读器靠它朗读内容src./images/photo.jpgsrc支持相对路径（./images/photo.jpg）与绝对路径（），开发阶段推荐相对路径便于项目迁移与版本管理widthheightsrcsetsizeswidth/height属性预设图片尺寸防止布局偏移（CLS），响应式图片用srcset+sizes适配不同屏幕密度<videocontrolsposter='cover.jpg'><audiocontrols><videocontrolsposter='cover.jpg'>与<audiocontrols>原生支持MP4/WebM/MP3/Ogg，无需Flash即可嵌入音视频超链接与导航构建Hyperlinks&NavigationStructure01<ahref='url'>href#idmailto:tel:target='_blank'rel='noopener'<ahref='url'>创建超链接，href可为外部URL、内部锚点（#id）、邮件（mailto:）或电话（tel:），target='_blank'需配rel='noopener'防安全风险02<ahref='#section2'>id='section2'锚点链接<ahref='#section2'>跳转至同页id='section2'的元素，常用于长页面目录导航与返回顶部功能03<nav><ul><li><a>导航区域用<nav>包裹、无序列表<ul>+<li>+<a>组织链接，既符合语义又便于CSS统一控制样式与响应式折叠04hoveractivevisited链接状态伪类顺序LVHA（Link-Visited-Hover-Active）不可颠倒，否则hover/active样式可能被visited覆盖失效STRUCTURE列表与表格结构化数据掌握HTML语义化标签的正确用法，让数据清晰可读、结构合理三种列表类型与应用场景<ul><ol><dl><ul>无序列表用于导航菜单、特性罗列；<ol>有序列表用于步骤说明、排行榜；<dl>定义列表用于术语解释、FAQ问答<li><ul>list-style-type列表嵌套时子列表必须放在<li>内部，直接嵌套于<ul>下是非法HTML；list-style-type可自定义符号或设为none去除默认标记表格语义与无障碍<table><thead><tbody><tfoot><table>仅用于展示二维数据关系，严禁用表格做页面布局；<thead>/<tbody>/<tfoot>划分区域便于样式控制与打印分页<thscope="col|row">captionaria-label<thscope="col|row">声明表头方向，屏幕阅读器据此关联单元格与表头；caption提供表格摘要，比aria-label更优先被读取表单基础与输入控件FormBasics&InputControlsHTML5原生表单控件包含input/select/textarea等元素，支持移动端键盘优化与基础校验表单提交方式<form><form>定义提交目标与方式，GET参数暴露在URL适合搜索，POST隐藏数据适合登录注册原生输入类型<input><input>的text/email/password/date等类型自带移动端键盘优化与基础校验，减少手写JS标签关联机制<labelfor><inputid><labelfor>与<inputid>显式关联，点击标签即可聚焦输入框，for值必须与id完全一致组合控件元素<select><textarea><fieldset><select>下拉选择、<textarea>多行文本、<fieldset>分组控件，复杂表单需保持语义清晰核心提示：理解每个控件"为什么这样设计"比记住"是什么"更重要——HTML5原生能力可以替代大量手写验证代码SEMANTICTAGSHTML5语义化结构标签理解标签语义，让机器读懂页面结构顶层语义骨架<header><footer><nav><main><header>/<footer>定义页面或区块的头尾，<nav>标识主导航，<main>包裹页面唯一主体内容，四者构成页面顶层语义骨架。内容单元与分组<article><section><article>表示独立可复用的内容单元（博客文章、评论），<section>表示主题性分组（章节、功能区），两者常嵌套使用。辅助内容区域<aside><aside>存放侧边栏、广告、相关推荐等辅助内容，不应包含与主内容无关的广告弹窗，语义误用会影响SEO权重。机器可读性价值display:block语义化标签对视觉无影响（默认display:block），其价值在于让机器（搜索引擎、读屏器、爬虫）准确理解内容结构与重要性。理解"为什么"比记住"是什么"更重要——语义化的核心是让内容对机器有意义CHAPTER03CSS3样式基础与选择器样式·布局·交互的基石COMPARISONCSS三种引入方式对比掌握生产环境最佳实践CSS可通过内联属性、内部样式表和外部链接三种方式引入，各自在优先级、缓存效率与团队协作上差异显著，生产环境应统一采用外部样式表方案。内联、内部与外部样式表内联style属性优先级最高但难维护，仅用于JS动态注入或邮件模板；内部<style>适合单页特殊样式，不利于缓存复用外部<link>是生产环境唯一推荐方式：浏览器缓存、多页共享、关注点分离、便于团队协作推荐方式：外部<link>@import与link的区别<link>并行加载CSS，@import串行阻塞渲染；大量@import嵌套会导致瀑布式延迟，Lighthouse性能评分显著下降@import唯一合理用途是在CSS文件内部条件加载字体或主题变量，且应置于文件顶部避免解析中断性能关键：避免嵌套@import课堂建议：打开浏览器DevTools→Network面板，观察<link>与@import的加载瀑布图差异CSSFundamentals基础选择器与优先级CSSSelectorBasics&Specificity选择器四大基石元素选择器p、类选择器.class、ID选择器#id、通配符*构成CSS选择器基石，组合使用时特异性决定样式覆盖规则。优先级计算公式内联1000>ID×100>类/伪类/属性×10>元素/伪元素×1；!important强制覆盖但破坏层叠秩序应慎用。层级与兄弟关系后代选择器divp匹配所有层级子孙，子代div>p仅匹配直接子元素；相邻兄弟h2+p与通用兄弟h2~p控制同级关系。匹配性能原则选择器书写遵循"从右向左"匹配原则：最右侧限定范围越精确性能越好，避免div*ulli这类宽泛左侧导致全树扫描。CSSProperties文本与字体样式属性Text&FontStyleProperties掌握字体声明、字号单位、颜色写法与文本对齐四大核心属性，理解每条规则背后的设计原理而非单纯记忆语法。font-family按优先级声明字体栈：'PingFangSC','MicrosoftYaHei',sans-serif浏览器依次尝试直到找到可用字体，末尾务必放置通用族名作为兜底方案。font-size&line-height推荐使用rem/em相对单位：62.5%根字号→1rem=10px1.5无单位行高不被缩放line-height使用无单位值（如1.5）时，子元素继承的是倍数值而非固定像素，避免嵌套时行高被扭曲。color支持四种颜色写法：hexrgb()hsl()namedrgba()hsla()currentColorrgba()/hsla()增加透明度通道；currentColor引用当前元素color值，简化主题维护。对齐与空白控制text-align控制行内元素水平对齐方式vertical-align控制行内基线对齐（非垂直居中！）white-space:pre-wrapwhite-space:pre-wrap保留代码缩进与换行，适合展示代码片段CSSSTYLING背景与边框样式Background&Border—视觉呈现的核心控制属性背景图像与渐变background-image：通过url()加载图片，background-size:cover/contain控制填充模式，background-position:center居中裁剪焦点linear-gradient：创建纯色过渡替代图片，减少HTTP请求且无限缩放不失真，如toright,#5b8cb8,#0a1f3d边框与圆角border：简写三要素（宽度/样式/颜色），border-radius:8px统一圆角，百分比值50%生成正圆或椭圆box-sizing：border-box让width包含padding+border，彻底解决传统content-box下"设宽200px却撑到240px"的计算陷阱实用建议：优先使用CSS渐变替代装饰性背景图片，配合border-box全局设置，可大幅减少布局计算的调试时间SELECTORS伪类与伪元素选择器Pseudo-classes&Pseudo-elements伪类选择器响应元素的状态变化，伪元素选择器创造文档中不存在的虚拟元素——前者让CSS感知交互，后者让CSS生成内容。交互状态与结构化选择:hover:focus:active:nth-child(odd):hover/:focus/:active模拟用户交互状态，:nth-child(odd)精准选中列表奇偶项实现斑马纹效果边界定位与分组简化:first-child:last-child:not():is():where():first-child/:last-child定位边界元素，:not()排除特定类，:is()/:where()简化复杂选择器分组伪元素内容生成::before::aftercontent:''::before/::after通过content:''生成装饰内容（图标、分隔线、角标），不污染DOM结构且可被CSS完全控制细节样式定制::placeholder::selection::placeholder定制输入框占位符样式、::selection修改选中文本配色，细节打磨提升产品精致感与品牌一致性CSSFUNDAMENTALSCSS继承、层叠与变量Inheritance·Cascading·CustomProperties属性继承规则文本相关属性（color/font/line-height/text-align）默认继承给子元素；盒模型属性（margin/padding/border/background）不继承，需显式声明。层叠上下文机制层叠上下文由position/z-index/opacity/transform等属性触发，子元素z-index仅在父级层叠上下文内比较，跨上下文比较无效。CSS自定义属性--primary:#5b8cb8定义于:root，通过var(--primary)引用，支持运行时JS修改与媒体查询条件切换主题色。响应式断点策略@media(max-width:768px){...}响应式断点内重写变量值，一套CSS同时适配桌面与移动端，无需维护两套样式文件。CHAPTER04盒子模型与页面布局BoxModel&PageLayoutCSSBOXMODEL标准盒模型与IE盒模型理解width计算方式的根本差异，掌握现代布局的基石1标准盒模型(width=content)：总宽=width+padding×2+border×2+margin×2，修改padding/border会撑大元素破坏布局2IE盒模型(border-box)：width已含padding+border，设置width:300px即最终占位300px，现代开发全局启用3margin外边距合并：相邻块级元素垂直margin取较大值而非相加；父子margin-top合并导致"顶部塌陷"，需用padding-top或BFC解决4outline与drop-shadow：outline不占据空间且不参与盒模型计算，常用于:focus高亮与调试边框；drop-shadow滤镜阴影跟随形状而非矩形边界标准盒模型结构marginborderpaddingcontentwidth×height标准width=content宽度IEwidth=content+padding+border最佳实践全局设置*{box-sizing:border-box}，让所有元素采用IE盒模型，避免布局计算偏差CSSLayout浮动布局原理与清除FloatLayoutPrinciples&Clearing浮动使元素脱离文档流实现图文环绕，但同时引发父容器高度塌陷——理解本质才能选对清除方案浮动的本质与副作用1脱离文档流：float:left/right使元素脱离文档流并向左/右靠拢，后续块级元素无视浮动体继续排列，行内内容环绕浮动体形成图文混排效果2高度塌陷：父容器高度塌陷是最常见陷阱——浮动子元素不撑开父级高度，导致背景与边框截断、后续元素上移错位，页面布局全面崩溃清除浮动的三种方案1clear空div/overflow：clear:both空div置于末尾强制换行，简单但增加无语义节点；overflow:hidden触发BFC包裹浮动子元素，兼顾清除与裁剪溢出2clearfix伪元素（推荐）：.clearfix::after配合content:''、display:block、clear:both实现零DOM污染清除，是目前最佳实践，兼容所有现代浏览器LAYOUT定位布局四种模式static·relative·absolute·fixed·sticky01static默认值不参与定位，top/left/right/bottom/z-index全部失效。02relative相对自身原位置偏移，仍占据原文档流空间。03absolute相对最近非static祖先定位，脱离文档流；若忘记给父级设relative则会相对于<html>定位导致布局失控。04fixed相对视口定位，滚动时位置不变，常用于吸顶导航与回到按钮；移动端iOSSafari底部安全区需用env(safe-area-inset-bottom)避让。05sticky混合relative+fixed：滚动到阈值前表现为relative，到达后吸附为fixed；注意父级overflow:hidden会使sticky失效。H网页制作入门CSSLAYOUTFlex弹性布局核心掌握弹性盒模型，理解主轴与交叉轴的对齐逻辑01弹性容器display:flex容器转化display:flexflex-directionjustify-contentdisplay:flex将容器转为弹性盒，子元素自动成为flexitem；flex-direction控制主轴方向，justify-content对齐主轴02交叉轴对齐align-items交叉控制align-itemsalign-selfalign-items控制交叉轴对齐（stretch/flex-start/center/baseline），align-self允许单个item覆盖容器对齐策略03弹性三属性flex简写与分解flex:1flex:1等价于flex-grow:1flex-shrink:1flex-basis:0%，三属性分别控制放大比例、收缩比例、初始主轴尺寸04间距与换行gap/flex-wrap/ordergap:16pxflex-wrap:wrapordergap:16px统一设置item间距替代marginhack，flex-wrap:wrap允许换行多行布局，order属性重排视觉顺序不改DOMLAYOUTCSSGRIDGrid网格布局入门掌握二维布局的核心概念与常用属性容器与列定义display:grid;grid-template-columns:repeat(3,1fr);display:gridfrdisplay:grid定义网格容器，fr单位按比例分配剩余空间，是最直观的弹性列宽方案。间距与跨行列gap:16px;grid-column:span2;grid-row:1/3;gapspangap统一设置行列间距；span与行线编号让元素自由跨越多个单元格，命名线area提升可读性。弹性与响应式grid-template-columns:repeat(auto-fit,minmax(200px,1fr));minmax()auto-fitminmax()设定列宽弹性范围，配合auto-fit实现自适应列数，无需媒体查询即可响应不同屏幕。居中与简化place-items:center;transformmargin一行代码同时实现水平与垂直居中，彻底替代传统transform/margin负值方案，代码更简洁、性能更优。CHAPTER05综合实战与学习路径从基础到实战，构建完整的前端学习体系05PRACTICE实战：个人简介页面搭建从零构建一个语义化、结构清晰的个人简介静态网页先规划文件结构与语义骨架，再逐步添加样式与交互——良好的开发习惯是高效编码的起点。个人简介页面渲染效果示意项目结构与文件规划创建index.html、css/style.css、images/三层目录，所有资源引用使用相对路径，确保项目

人人文库> 全部分类> 应用文书 > 技术指导

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论