HTML+CSS入门：结构、样式与行为的分离
需积分: 0 170 浏览量
更新于2024-08-05
收藏 7.17MB PDF 举报
HTML+CSS思维导图1深入讲解了前端开发与设计的关键知识点，特别是对于HTML、CSS这两种核心技术的理解。HTML（超文本标记语言）是网页的骨架，它的核心在于构建网页的结构，通过使用<>和</>标记来定义文本、图像、链接等元素，并且区分了注释和实际代码。基础的HTML结构包括`<!DOCTYPE html>`文档头声明，`<html>`根元素，不可见的`<head>`区域（包含`<title>`和`<meta>`标签），以及展示页面内容的`<body>`部分，其中`<div>`标签常用于分块组织内容。
CSS（层叠样式表）则负责美化和布局，它有两种主要的样式表形式：内联样式和内部样式表（外部CSS文件）。内联样式直接写在HTML标签上，虽然方便快速设置样式，但容易导致代码冗余和维护困难，适用于一次性确定样式无需修改的情况。而内部样式表通过选择器（如标签选择器、类选择器）来控制多个元素的样式，提高复用性和可维护性。
HTML和CSS编码时强调分离，即将结构（HTML）、样式（CSS）和行为（JavaScript）分开，这有助于提升代码的可读性和维护性。HTML5引入了许多新特性，如语义化标签，增强了网页的可访问性和SEO优化。CSS3进一步扩展了样式选项，如动画、布局和响应式设计，使得网站适应不同设备。
此外，还提到了前端开发所需的技能组合，除了HTML、CSS外，JavaScript是不可或缺的行为驱动语言，而其他如Ajax、PHP、Node.js等语言也是后端开发或特定功能实现的工具。浏览器、编译器、PS等软件也是前端开发者必备的辅助工具。
整个学习路径涉及从需求分析到项目实施的过程，包括产品需求分析、设计阶段（PSD文件和交互设计）、前端开发（HTML5、移动端开发和Unity-3D等）、后台开发、测试和最终的上线与运营。通过掌握这些基础知识，开发者可以高效地构建现代Web应用。
前端认知
我们是做什么的
?
IT
系统工程：负责信息化系统的设计，建设，包括设备，系统，数据库，应用系
统的建设
公司开发流程
1
、产品需求：产品经理给需求文档，开第一次例会
2
、项目设计
:
视觉设计师给
PSD
文件；交互设计师配合
3
、前端开发：（开第二次例会）
HTML5
；
iOS
；
Android
；
Unity-3d
；。。。
4
、后台开发：
5
、测试
6
、上线运营
需要学什么
1
、软件（
2%
）
:
浏览器；编译器；
PS
；浏览器插件
2
、语言（
98%
）：
HTML
；
CSS
；
JS
；其他语言：
Ajax
；
PHP
；
Node.js
；
前端核心语言
HTML
：超文本标记语言 结构
CSS
：层叠样式表 样式
JS
：脚本语言 行为
编码中让三者分离
HTML
超文本标记语言
Hyper text markup language
超文本：文字，图片，音频，超链接等等；
标记
<>
单标记
</>
双标记
标记语言：将特定的英文单词放在标记中，这个标记就有了特殊含义，这个时
候，我们就可以叫这个而标记为
“
标签
”
代码是给浏览器看的
注释是给人看的
HTML
的基础结构
<!DOCTYPE html>
文档头声明
<html> </html>
根元素
<head></head>
头
head
标签内部的内容绝大部分是不可见的
<title></title>
定义文档的标题，在页面中是可见的
<meta charset="utf- 8">
定义
html
页面的元数据 ，
meta
中的
charset
属性针对搜
索引擎和解析格式的属性
<body></body>
身体 主要书写页面中的内容，用于搭建
html
结构
<div></div>
语义：无意义
双标签
常用的内容
代码示例
CSS
内联样式表
作为属性，直接书写在标签内部；
eg
：
<div style="width: 100px;height:
100px;background -color: red"></div>
注：前端中基础单位都是像素：
px
width
：宽度
height
：高度
background- color
：背景颜色
代码示例
优点：优先级非常高
缺点：非常繁琐，冗余代码非常多；维护困难
使用场景：确定样式，书写后不需要修改
内部样式表
css
选择器
标签选择器：作用范围是所有相同的标签 示例
类名称选择器：用于选择一类具有相同特征的标签
1.
在使用之前需要给对应的标签内部设置一个
class
的名称
2.
之后书写样式的时候，需要在对应的内容前面家还是那个英文的点来代替
class
3.
类选择器相对于标签名选择器控制的更精确，优先级也更高
4.
如果说标签名选择器的优先级是
1
，那么类选择器的优先级是
10
示例
ID
选择器：用于选择某一个具有特定
ID
名称的标签
1.
当我们书写一个样式的时候需要使用
#
来进行标记
2.
一个
ID
名称，在一个
HTML
文档中只能出现一次，类似身份证号
3.ID
选择器的优先级为
100
示例
群组选择器：选择器
1
，选择器
2{}
中间用逗号
不涉及优先级问题
后代选择器：选择器
1
选择器
2{}
中间用空格针对左右的后代
优先级是相加的
子代选择器：选择器
1>
选择器
2
中间用大于号，只针对子集有效
优先级大于后代选择器
动态伪类选择器
用来添加一些选择器的特殊效果
a:link{ }
用于定义未访问的连接
a:visited{ }
用于定义被访问过的连接
a:hover{ }
用于定义鼠标在当前标签内部移动的时候
a:active{ }
用于定义被选中的连接（被按住的时候）
ICE
原则：用于计算选择器的优先级
标签名：
1
class
：
10
ID
：
100
内联：
1000
优点：加载速度快，没有服务器的请求压力
缺点：单个文件过大；维护起来优点困难
使用场景
:
大型网站的首页
外部样式表
使用
link
标签重新引入至
html
文档 示例
范小饭
优点：便于维护；可以重复使用
缺点：垃圾代码多；加载速度慢，会造成服务器的额外压力
使用场景：多用于大型网站的二三级页面
选择器优先级
ID
选择器
>
类选择器
>
标签名选择器 如果样式直接写在标签的内部，那么他的优先级是
1000
样式表优先级 内联样式
>
内部样式表？外部样式表 两种方式
选择器优先级相同时，谁后加载，谁生效
选择器优先级不同时，谁优先级高谁生效
老师的个人理解
css
样式具有继承性
继承
0,0000001
通配符选择器
0.1
标签名选择器
1
类命名选择器
10
id
选择器
100
内联样式
1000
后代选择器 相加
群组选择器 不涉及
*
通配符选择器 开起来非常方便，实际开发中不推荐使用，以为效率太低
下载后可阅读完整内容，剩余9页未读，立即下载
2019-12-26 上传
2023-11-25 上传
2023-05-24 上传
2023-05-21 上传
2024-08-06 上传
2023-03-30 上传
2023-08-23 上传
2023-07-13 上传
小小二-yan
- 粉丝: 32
- 资源: 299
我的内容管理
展开
最新资源
- Hadoop生态系统与MapReduce详解
- MDS系列三相整流桥模块技术规格与特性
- MFC编程：指针与句柄获取全面解析
- LM06：多模4G高速数据模块，支持GSM至TD-LTE
- 使用Gradle与Nexus构建私有仓库
- JAVA编程规范指南：命名规则与文件样式
- EMC VNX5500 存储系统日常维护指南
- 大数据驱动的互联网用户体验深度管理策略
- 改进型Booth算法：32位浮点阵列乘法器的高速设计与算法比较
- H3CNE网络认证重点知识整理
- Linux环境下MongoDB的详细安装教程
- 压缩文法的等价变换与多余规则删除
- BRMS入门指南：JBOSS安装与基础操作详解
- Win7环境下Android开发环境配置全攻略
- SHT10 C语言程序与LCD1602显示实例及精度校准
- 反垃圾邮件技术：现状与前景
