Java教程

web入门知识整理

本文主要是介绍web入门知识整理，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

web入门系列

  • 前言
  • 一、初识前端
  • 二、web文件夹结构
  • 三、浅析web结构
  • 四、盒模型 < div >
        • 4.1 长+宽+背景颜色
        • 4.2 内边距
        • 4.3 边框
        • 4.4 外边距 margin
  • 五、CSS的引入方式
        • 5.1 内联
        • 5.2 外联
  • 六、三种基本选择器
  • 七、常用标签
        • 7.1 块标签
        • 7.2 行标签
        • 7.3 行块标签
  • 八、浮动
        • 8.1 float
        • 8.2 清除浮动
  • 九、定位
  • 十、常见css样式
        • 10.1 文本
        • 10.2 字体
        • 10.3 背景

前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、初识前端

在这里插入图片描述

二、web文件夹结构

在这里插入图片描述

三、浅析web结构

在这里插入图片描述

  1. 将建成的project文件夹拖拽至Sublime Test 中.
  2. 在index.html中 输入html + [ Tab ] 键
  3. 在 title 标签中随意输入内容
  4. 在 body 标签中输入的内容将被展示在网页中
  5. 在文件中以浏览器的形式打开 index.html 就完成了第一个html入门代码.

在这里插入图片描述

在这里插入图片描述

四、盒模型 < div >

大块化小块

4.1 长+宽+背景颜色

<!DOCTYPE html>
<html>
<head>
	<title>New World</title>
	<style type="text/css" media="screen">
		div {
			width: 100px;
			height: 100px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

在这里插入图片描述

4.2 内边距

padding在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>New World</title>
	<style type="text/css" media="screen">
		div {
			width: 100px;
			height: 100px;
			background-color: pink;

			padding: 20px;
		}
	</style>
</head>
<body>
	<div>在本教程中，你将学习如何使用 HTML 来创建站点。</div>
</body>
</html>

在这里插入图片描述

4.3 边框

border:在这里插入图片描述

	border: 10px solid skyblue;
	border-radius: 30px;

在这里插入图片描述

4.4 外边距 margin

  1. 用法同padding
  2. 不会影响盒子自身大小
  3. 在这里插入图片描述

五、CSS的引入方式

在这里插入图片描述

5.1 内联

<body>
	<div style="width: 200px; height: 100px; background-color: red;">在本教程中，你将学习如何使用 HTML 来创建站点。</div>
</body>

<head>
	<title>New World</title>
	<style type="text/css" media="screen">
		div {
			width: 100px;
			height: 100px;
			background-color: pink;
			padding: 20px;

			border: 10px solid skyblue;
			border-radius: 30px;
		}
	</style>
</head>

5.2 外联

<link rel="stylesheet" type="text/css" href="css/test01.css">

六、三种基本选择器

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>基本选择器</title>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background-color: red;
		}
		.c1{
			background-color: green;
		}
		#one{
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div></div>
	<div class="c1"></div>
	<div class="c1" id="one"></div>
</body>
</html>

在这里插入图片描述

七、常用标签

在这里插入图片描述

7.1 块标签

标签: div,p,h1~h6,ul,ol,li
特点:独占一行,默认,宽度占满父级,高度为0

7.2 行标签

标签: a,span
特点:

  1. 同排序跟显示,
  2. 不支持宽高的设置,内容撑开宽高,
  3. 不支持上下的margin,
  4. 不正常显示上下的padding,
  5. 换行被解析

7.3 行块标签

img
特点:

  1. 同排序跟显示
  2. 当只设置宽度或高度时,另一边等比缩放
  3. 换行被解析
  4. ie6,ie7不支持该属性

八、浮动

8.1 float

在这里插入图片描述

8.2 清除浮动

原因: 因子级浮动脱离文档流,父级无法撑开高度
解决方案:

  1. 为父级添加一个高度(扩展性不好)
  2. 为父级添加overflow:hidden或者overflow:scroll

九、定位

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

十、常见css样式

10.1 文本

在这里插入图片描述

10.2 字体

在这里插入图片描述

10.3 背景

在这里插入图片描述

这篇关于web入门知识整理的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航