HTML+CSS

た入场券 2022-06-08 03:47 117阅读 0赞

**前端和后端**  
C/S：Client/Service 客户端服务器模式 桌面应用程序  
Swing组件来实现界面  
大家以后使用Swing的概率基本为0  
B/S：Browse/Service 浏览器服务器模式  
基于浏览器进行访问和使用的项目案例  
前端页面开发和后端服务器开发

前端：玩页面，浏览器访问页面直观能看到的所有效果都是前端实现  
后端：对前端页面的支持（获取+提供）

三大前端基石：HTML+CSS+Javascrip

HTML: 是页面的骨架  
CSS：对页面进行修饰的  
Javascript：脚本语言（对页面的动态效果实现+交互实现）

静态页面：HTML+CSS技术来实现页面效果的展示

兼容性问题（IE(6,7,8,9,10,11)、谷歌、火狐、欧朋、saria）  
处理不同浏览器对同一个页面解析展示不正常的效果  
**HTML概述**

HTML编写工具及编码规范  
Html4.01版本的页面框架

Html5版本页面框架

HTML具体标签介绍

div：代表一个区域，用于把页面划分为很多个小区域单独放置内容  
Table->tr->td：重点colspan和rowspan跨行跨列，作用可以用来布局（不建议）  
input：表单内容标签，通过type来区别  
A：超链接标签  
Img图片标签  
**CSS**  
⦁ 内容复习  
⦁ 了解了下背景知识  
⦁ 学习HTML的标签主要  
⦁ 作用：建立页面的骨架  
⦁ html、head、body  
⦁ head标签中：title、meta(解决页面乱码问题)

⦁ body中标签：  
⦁ h1-h6：标题层次  
⦁ div：区域划分的标签  
⦁ table：表格(tr、td、th)  
⦁ 清单：ol、ul、li  
⦁ 图片标签：img  
⦁ 表单元素标签：  
⦁ 超链接：a标签   
⦁ css样式基本格式  
⦁ 行内格式：直接把样式编写到标签里面  
⦁ 问题：编写麻烦、页面标签复杂、复用性不强  
⦁ 不推荐写  
⦁ 内联样式：通过html页面的style标签，把样式添加上去  
⦁ 格式：style标签的方式嵌入样式

⦁ 优势：css和html相分离，调试和优化方便  
⦁ 嵌入html文件进行编写，会影响html文件的篇幅，导致html文件篇幅过长  
⦁ 外联样式：通过css文件的方式对标签进行样式设置  
⦁ 新建一个文件后缀名为.css的文件  
⦁ 关联外部css文件，用link标签

⦁ 选择器  
⦁ 作用：样式和标签关联的操作  
⦁ 格式：选择器\{样式名：样式值；样式名：样式值；……\}  
⦁ 选择器分类：  
⦁ 标签选择器  
⦁ 格式：标签名\{样式\}  
⦁ 多选择：可以同时选择标签名相同的多个  
⦁ Class选择器  
⦁ 格式：.类名\{样式\}  
⦁ 多选择：可以同时选择指定类名的多个标签  
⦁ Id选择器  
⦁ 格式：\#类名\{样式\}  
⦁ 单选择：id名不能重复  
⦁ 复合选择器  
⦁ 并集选择：同时选中多个选择器类型的标签  
⦁ 选择器1,选择器2,选择器3\{样式\}  
⦁ 后代选择：根据父元素直接找到子元素  
⦁ 选择器 选择器1 选择器2\{样式\}  
⦁ 后代和儿子  
⦁ 超链接选择：默认效果、鼠标移动上去效果、访问过后的效果  
a:link\{\}  
a:visited\{\}  
a:hover\{\}  
a:active\{\}  
记忆方式：love hate 顺序不能变

⦁ 注意：做选择，如果是样式选择，一般不会用id，id主要是用于js里面用，样式选择一般使用class来做标识

⦁ 样式属性分析  
span标签，主要是用于括一段文本  
⦁ 字体样式  
⦁ 对页面中的字体进行设置样式  
⦁ Font-size font-family font-weight  
⦁ 背景设置  
⦁ 背景颜色设置：background-color  
⦁ 背景图片设置：background-image background-size background-repeat  
⦁ 文本属性  
行高：line-height  
⦁ 盒子属性  
⦁ 在前端页面设计中，记住所有的元素都是一个盒子（每一个div就是一个盒子）  
⦁ 盒子包含属性：宽度、高度、颜色、内边距、外边距  
⦁ 宽度：width，高度：height  
⦁ 边框：border、border-top、border-left、border-right、border-bottom  
⦁ 内边距：padding、padding-top、padding-left、padding-right、padding-bottom  
⦁ 外边距：margin、margin-top、margin-left、margin-right、margin-bottom

⦁ 定位  
⦁ 绝对定位：absolute  
⦁ 相对定位：relative  
⦁ 浮动：float  
在父亲盒子里面进行浮动的

注意点：  
1) 如果设置了盒子的边框或者padding区域，一定要相应的减小盒子的宽高值  
2) 宽度高度值取值方式：像素取值法、百分数取值