前端开发基础：HTML与CSS入门
需积分: 2 6 浏览量
更新于2024-09-05
收藏 239KB DOCX 举报
"本资源为网页前端开发的基础教程，涵盖了HTML、CSS和JavaScript的基本概念。JavaScript作为动态类型语言，允许变量根据需要改变类型。字符串是存储字符的变量，可以用单引号或双引号表示。HTML是一种标记语言，通过标记标签描述网页结构，如`<html>`、`<body>`、`<h1>`等。HTML标签通常成对出现，如开始和结束标签。块级元素如`<div>`、`<h1>`、`<p>`等占据整行，而行内元素如`<span>`、`<a>`、`<img>`则并列显示。在前端开发中，`<div>`因易于修改和更好的兼容性而常被用于布局，而`<table>`虽然适合数据展示，但过度嵌套可能导致问题。"
在网页前端开发中，HTML（HyperText Markup Language）是构建网页内容的核心语言，它并不属于编程语言，而是标记语言。HTML通过一系列的标签来描述网页的结构和内容，例如`<head>`、`<body>`、`<header>`、`<footer>`等。在HTML中，`<h1>`到`<h6>`用于定义不同级别的标题，`<p>`则用于创建段落，而`<img>`用于插入图像。
JavaScript是前端开发中不可或缺的脚本语言，它提供了动态类型的特性，允许变量在运行时改变其数据类型。例如，变量`x`可以先被声明为`undefined`，然后赋值为数字或字符串。这种灵活性使得JavaScript在处理用户交互和页面动态更新时非常强大。
CSS（Cascading Style Sheets）用于控制网页的样式和布局。通过选择器和属性，我们可以定义元素的颜色、大小、位置等样式。例如，`color`属性用于设置文本颜色，`font-size`用于设定字体大小，`display`属性则可以将元素设置为块级或行内元素。
在HTML元素的布局中，块级元素（如`<div>`、`<h1>`）会占据整个宽度并自动换行，而行内元素（如`<span>`、`<a>`）则会尽可能地在一行内显示。行内元素设置宽度和高度通常无效，除非转换为块级元素或使用`display`属性。块级元素可以设置`margin`和`padding`来调整间距，行内元素也可以通过`line-height`调整行间距。
在实际开发中，`<div>`经常被用作布局容器，因为它允许开发者方便地进行CSS样式控制，而`<table>`虽然适合展示数据，但在复杂布局中可能带来兼容性和性能问题。因此，前端开发者通常会根据需求选择使用`<div>`、`<table>`或其他HTML元素来构建页面结构，并结合JavaScript和CSS实现交互和美化效果。
(2). 一般情况下，块级元素可以设置 width, height 属性，行内元素设置
width, height 无效(注意：块级元素即使设置了宽度，仍然是独占一行的)
(3).块级元素可以设置 margin 和 padding. 行内元素的水平方向的 padding-
left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的
padding-top,padding-bottom,margin-top,margin-bottom 都不会产生边距效果。
（水平方向有效，竖直方向无效）
行内元素和块状元素的说明
根据 CSS 规范的规定，每一个网页元素都有一个 display 属性，用于确定该
元素的类型，每一个元素都有默认的 display 属性值，比如 div 元素，它的默认
display “属性值为 block” “ ”，成为 块级 元素(block-level)；而 span 元素的默认
display “属性值为 inline” “ ”，称为 行内 元素。div 这样的块级元素，就会自动占
据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个
“矩形的样子；与之相反，像 span”“a”这样的行内元素，则没有自己的独立空间，
它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边
距等属性，都是无效的。
总结：可通过修改 display 属性来决定其是块级元素还是行内元素
CSS（层叠样式表）
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现 HTML（标
准通用标记语言的一个应用）或 XML（标准通用标记语言的一个子集）等文件
样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言
动态地对网页各元素进行格式化。
h1 {color:red; font-size:14px;}
CSS 盒子模型，
CSS 中， Box Model 叫盒子模型（或框模型），Box Model 规定了元素框处
理元素内容（element content）、内边距（padding）、边框（border ） 和 外边
距（margin ） 的方式。在 HTML 文档中，每个元素（element）都有盒子模型，
所以说在 Web 世界里（特别是页面布局），Box Model 无处不在。下面是 Box
Model 的图示：
剩余10页未读，继续阅读
2022-06-15 上传
2022-04-06 上传
2022-12-16 上传
2019-06-19 上传
2022-07-02 上传
2022-05-25 上传
2022-07-03 上传
2024-01-31 上传
2023-11-13 上传
蓝精灵与大脸猫
- 粉丝: 0
- 资源: 7
我的内容管理
展开
最新资源
- StarModAPI: StarMade 模组开发的Java API工具包
- PHP疫情上报管理系统开发与数据库实现详解
- 中秋节特献：明月祝福Flash动画素材
- Java GUI界面RPi-kee_Pilot：RPi-kee专用控制工具
- 电脑端APK信息提取工具APK Messenger功能介绍
- 探索矩阵连乘算法在C++中的应用
- Airflow教程：入门到工作流程创建
- MIP在Matlab中实现黑白图像处理的开源解决方案
- 图像切割感知分组框架：Matlab中的PG-framework实现
- 计算机科学中的经典算法与应用场景解析
- MiniZinc 编译器：高效解决离散优化问题
- MATLAB工具用于测量静态接触角的开源代码解析
- Python网络服务器项目合作指南
- 使用Matlab实现基础水族馆鱼类跟踪的代码解析
- vagga：基于Rust的用户空间容器化开发工具
- PPAP: 多语言支持的PHP邮政地址解析器项目
