前端常用基础以及布局方式学习笔记

最新推荐文章于 2024-04-09 16:23:18 发布

天天开发

最新推荐文章于 2024-04-09 16:23:18 发布

阅读量321

点赞数

分类专栏：前端文章标签：前端 css3 前端布局

本文链接：https://blog.youkuaiyun.com/wj610671226/article/details/121192053

版权

本文详细介绍了前端开发的基础知识，包括HTML标签、CSS样式和布局方式。讲解了常用的HTML元素如标题、段落、链接及文本修饰，并探讨了CSS的字体、颜色、对齐方式等属性。深入讨论了盒模型、浮动布局、定位技术，以及响应式设计中的媒体查询和断点设定。此外，还提到了Flex布局和REM、VW单位在移动端布局的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端常用基础以及布局方式学习笔记

HTML常用标签

标题标签：<h1></h1>~<h6></h6>
段落标签：<p></p>
换行标签：<br/>
水平线：<hr/>
文字斜体：<i></i> <em></em>
加粗：<b></b> <strong></strong>
下标：<sub></sub>
上标：<sup></sup>
插入内容：<ins></ins>
删除内容：<del></del>
有序列表标签：<ul><li></li></ul>
无序列表标签：<ol><li></li></ol>
超链接标签：<a href="">内容</a>

定义锚（同一页面）：
<a href="#锚名1">目录1</a>
<a href="#锚名2">目录2</a>
<a href="" name="锚名1">内容1</a>
<a href="" name="锚名2">内容2</a>

CSS常用属性

字体

1、font-famile属性来定义文字的字体，可以设置多个字体名称
2、font-size属性来定义文字的尺寸
3、font-style属性设置字体为斜体normal、italic
4、font-weight属性设置文字的粗细(normal、bold、bolder、lighter)

文本

颜色：color
行高：line-height
对齐方式：text-align
方向：direction
缩进：text-indent
装饰线：text-decoration
间隔线：letter-spacing
阴影：text-shadow

CSS使用

使用方式

1、行内样式    
<p style="color: red">内容</p>
2、内部样式表
<style type="text/css">
		p {
			color: blue;
		}
</style>
3、外部样式表（页面加载时同时加载css）
<link rel="stylesheet" type="text/css" href="test.css">
4、导入式（html读取完成之后加载css）
<style type="text/css">
	   @import url(test.css);
</style>

选择器

1、标签选择器
p {
	color: red;
}
2、类选择器(同一个元素可以设置多个类)
<p class="red second">内容</p>
.red {
			color: red;
		}
3、ID选择器
<p class="id1">内容</p>
#id1 {
	color: black;
}
4、后代选择器
<div>
	<span>哈哈</span>
</div>
div span {
	color: red;
}
5、全局选择器
* {
	color: black;
}
6、群组选择器
p, h1, span {
	color: red;
}