《Python Web 开发从入门到实践（FastAPI+Bootstrap）》2-2前端基础_第1页
《Python Web 开发从入门到实践（FastAPI+Bootstrap）》2-2前端基础_第2页
《Python Web 开发从入门到实践（FastAPI+Bootstrap）》2-2前端基础_第3页
《Python Web 开发从入门到实践（FastAPI+Bootstrap）》2-2前端基础_第4页
《Python Web 开发从入门到实践（FastAPI+Bootstrap）》2-2前端基础_第5页
已阅读5页，还剩22页未读， 继续免费阅读

下载本文档

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

文档简介

前端基础教材第2章（2.9—2.11）范围与目标📚覆盖章节2.9HTML与CSS基础

2.10JavaScript基础

2.11Bootstrap5基础🎯学习目标掌握页面结构搭建

外观样式设计

交互逻辑实现

使用UI框架快速开发HTML概念与结构💀结构骨架HTML（超文本标记语言）是网页的基石，如同建筑的钢筋水泥。核心作用：定义页面元素（标题、段落、图片）构建内容层级与逻辑结构提供无样式的静态内容🏗️基本结构<!DOCTYPEhtml><html><head>...</head><body>...</body></html>浏览器解析这些标签，将其渲染为用户可见的页面。HTML示例：demo.html<body><!--主标题--><h1>欢迎来到派森科技</h1><!--段落--><p>这是一个静态页面骨架...</p><!--分割线--><hr><!--列表与图片--><ul><li>Python3.13</li></ul><imgsrc="logo.png"alt="Logo"></body>📄页面骨架解析<h1>：页面主标题，最重要的内容<p>：普通文本段落<hr>：水平分割线，视觉分隔<ul>/<li>：无序列表，展示技术栈<img>：引入图片资源注：此时页面无样式，仅呈现内容结构。head与meta要点<htmllang="zh-CN"><head><metacharset="UTF-8"><title>HTML基础示例-派森科技</title></head>🌐语言属性lang="zh-CN"声明网页语言为简体中文，有助于搜索引擎索引和浏览器翻译提示。🔣字符编码charset="UTF-8"设置万国码编码，确保中文等字符正确显示，防止乱码。🏷️网页标题<title>...</title>定义显示在浏览器标签页上的文字，也是搜索引擎搜索结果的标题。常用HTML标签Header

<h1>-<h6>标题层级标签h1通常为页面唯一主标题，h2-h6依次表示子标题，构建内容层级。Paragraph

<p>段落标签用于包裹普通文本内容，浏览器会自动在段落前后添加一定的间距。Anchor

<a>超链接标签href:跳转目标URL

target="_blank":在新标签页打开Image

<img>图片标签（单标签）src:图片路径

alt:图片无法显示时的替代文本

width:显示宽度CSS概念与语法🎨核心职责CSS(CascadingStyleSheets)负责网页的“装修”，定义颜色、字体、布局等外观。关键优势：结构与表现分离提高代码可读性便于维护与复用📝基本语法h1{color:blue;}选择器(Selector):指向HTML元素(h1)声明块(Declaration):{属性:值;}CSS内部样式示例<head><style>/*标签选择器*/body{background-color:#f4f4f9;}h1{color:#2c3e50;text-align:center;border-bottom:2pxsolid#3498db;}a{text-decoration:none;color:#3498db;}</style></head>📐内部样式表将CSS代码写在HTML头部的<style>标签内。代码解析：body：设置浅灰背景，统一页面基调h1：深蓝文字、居中、底部蓝色边框a：去除下划线，设置链接色适用于简单页面或快速测试，能迅速美化页面外观。样式属性与伪类✨常用属性color:字体颜色(#hex,rgba)font-size/family:字体大小与族padding/margin:内外边距border-radius:圆角效果box-shadow:阴影立体感🖱️伪类交互伪类选择器用于定义元素的特殊状态。a:hover{...}定义鼠标悬停在链接上时的样式。示例效果：悬停时变为红色并显示下划线，增强用户交互反馈。外部样式表概念<linkrel="stylesheet"href="style.css">在HTML文档<head>中引入独立的CSS文件🔄代码复用一个样式文件可被多个页面引用，保证风格统一。🛠️维护高效结构与表现分离，修改一处即可更新全站样式。🚀性能优化浏览器会缓存外部CSS文件，加快页面加载速度。外部样式表示例📄style.css/*仅包含样式规则*/body{background-color:#f4f4f9;font-family:"MicrosoftYaHei";}h1{color:#2c3e50;text-align:center;}🌐demo.html<!DOCTYPEhtml><html><head><!--引入样式文件--><linkrel="stylesheet"href="style.css"></head><body><h1>欢迎来到派森科技</h1></body></html>JavaScript概念与引入JavaScript:赋予网页“生命”Web开发中唯一的浏览器端编程语言，负责用户交互、DOM操作与异步通信。🔍获取元素document.getElementById()找到页面上的标签对象👂监听事件addEventListener()捕获用户行为（点击、输入等）✏️修改元素innerText/style改变内容或样式，实现动态效果JS示例：页面结构📄js_demo.html<body><divclass="container"><!--状态文本，id用于JS获取--><h2id="status-text">当前状态：静止</h2><!--操作按钮，id用于JS获取--><buttonid="action-btn">点击执行操作</button></div></body>🖥️页面预览当前状态：静止[点击执行操作]关键点：id属性是JS识别元素的唯一标识JS示例：事件与样式const

statusEl

=

document.getElementById('status-text');const

btn

=

document.getElementById('action-btn');btn.addEventListener('click',function(){//1.修改文本statusEl.innerText

=

"状态：已激活";//2.修改样式const

newColor

=

getRandomColor();statusEl.style.color

=

newColor;});💡逻辑解析1.获取DOM使用getElementById拿到HTML元素的引用。2.绑定事件监听'click'点击事件，传入回调函数。3.动态修改.innerText修改文字内容.style.color修改样式属性JS代码解析要点📦变量声明const

vs

letconst用于常量（对象引用），let用于可变变量。避免使用老旧的var。📝属性操作innerText

vs

innerHTML推荐使用innerText处理纯文本，安全且高效。🎨样式命名camelCaseCSS属性background-color在JS中需写为backgroundColor。🐞调试技巧console.log()利用浏览器控制台（F12）输出日志，排查逻辑错误。Bootstrap5概念📱移动优先设计之初即考虑移动设备体验，自动适应从小屏到大屏。⚡快速开发预置大量CSS类和JS组件，无需从零编写样式。🧩组件丰富提供导航栏、卡片、按钮、模态框等成熟UI组件。下载与项目结构📥获取资源1.访问官网：2.下载"CompiledCSSandJS"3.解压获得css和js文件夹推荐理由：本地集成比CDN更稳定，适合离线开发环境。project_root/├──bootstrap/├──css/├──bootstrap.min.css└──...└──js/├──bootstrap.bundle.min.js└──...└──demo.html引入Bootstrap示例<!DOCTYPEhtml><html><head><!--1.引入CSS(在head中)--><linkrel="stylesheet"href="./bootstrap/css/bootstrap.min.css"></head><body><h1>Hello,Bootstrap!</h1><!--2.引入JS(在body结束前)--><scriptsrc="./bootstrap/js/bootstrap.bundle.min.js"></script></body></html>💡关键点CSS位置必须放在<head>中，优先加载样式，防止页面闪烁。JS位置推荐放在<body>结束标签前，确保DOM元素已加载完毕，提高渲染性能。网格系统概念🏗️布局容器.container固定宽度，居中，随屏幕阶梯变化。.container-fluid100%宽度，始终占据整个视口。📐12列网格.row行容器，必须包裹列。.col-*列定义，数字代表占据12份中的多少份。12ColumnGridSystemVisualizedcol-4col-4col-4网格示例：三栏布局<divclass="container"><divclass="row"><!--第一列：占4/12--><divclass="col-4">第一列</div><!--第二列：占6/12--><divclass="col-6">第二列</div><!--第三列：占2/12--><divclass="col-2">第三列</div></div></div>🖥️布局效果总宽度=12462组件概览🛠️核心组件Card(卡片)灵活的内容容器，包含页眉、页脚、内容区。Button(按钮)预定义样式的按钮(.btn-primary,.btn-success)。Grid结合col-md-4:中等屏幕以上每行显示3个卡片。👀组件预览CardTitleSomeexampletext...Button组件示例：卡片1<divclass="col-md-4"><divclass="card"><imgsrc="..."class="card-img-top"><divclass="card-body"><h5class="card-title">网站开发</h5><pclass="card-text">...</p><aclass="btnbtn-primary">了解详情</a></div></div></div>PreviewImage网站开发提供现代化、高性能网站解决方案。了解详情组件示例：卡片2<!--数据分析卡片--><divclass="card"><img...alt="数据分析"><divclass="card-body"><h5class="card-title">数据分析</h5><pclass="card-text">...</p><!--绿色成功按钮--><aclass="btnbtn-success">查看案例</a></div></div>PreviewImage数据分析运用Python生态，从数据中挖掘价值。查看案例组件示例：卡片3<!--人工智能卡片--><divclass="card"><img...alt="人工智能"><divclass="card-body"><h5class="card-title">人工智能</h5><pclass="card-text">...</p><!--描边信息按钮--><aclass="btnbtn-outline-info">联系我们</a></div></div>PreviewImage人工智能集成先进的AI模型，实现自动化与创新。

联系我们工具类与断点🛠️实用工具类Spacing(间距)mt-*

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论