Web入门

最新推荐文章于 2022-03-18 15:10:34 发布

皇棠

最新推荐文章于 2022-03-18 15:10:34 发布

阅读量108

点赞数

分类专栏：个人文章标签： Web 小白

本文链接：https://blog.csdn.net/weixin_43759910/article/details/103060774

版权

个人专栏收录该内容

101 篇文章 4 订阅

订阅专栏

Web Study 0918

课程回顾

前端的发展奠定了移动互联网的根基
Web的特点:
5大特点. 课本P5

web标准三剑客:
HTML: 内容
css: 样式
JavaScript: 交互式界面

主页 : index
前端:网页做的好看
后台: 收集整理数据
file:本地路径

标签: 左:开始标签右: 开始标签
作用: 定位,分功能

<!--最大的标签-->
<html>
	<head>
		<!--style写在head里-->
		<style>
		
		</style>
	</head>
	 <!--内容部分-->
	 <body>
	 <!--body是html的子类元素-->
		 123<!--当一个内容不指定位置时,默认在父类的左上角-->
		 
	 </body>
	 
</html>

html难点:标签的定位
绝对定位: 按照像素
相对定位: 定宽居中

脱离文档流

文档流: 层次感
脱离文档流: 标签重叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web Html</title>
    <style>
        body{
            /*属性*/
            background-color:aqua;/*颜色*/
            font-size: 30px;/*像素*/
        }
        h1{
            background-color: aqua;
            font-size: 20px;
        }
        div{
            background-color: dodgerblue;
            height: 200px;
            width: 600px;
        }
        #second{
            background-color: slateblue;
            position: absolute;/*绝对定位,慎用!!!*/
            left: 100px;
            top: 200px;
        }
    </style>
</head>
    <body>
        123
        <h1>数理化,好可怕</h1>
    <div id="first">web  web  文本 </div>
    <div id="second">
        <h3>This is a header</h3>
        <p>This is a paragraph.</p>
    </div>
    </body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5xN8pSqx-1573691098344)(./1568809883970.png)]