前端学习快速笔记——HTML、CSS、JavaScript

Minus47

已于 2023-07-25 16:24:55 修改

阅读量59

点赞数

文章标签：笔记 css html

于 2023-06-25 14:34:09 首次发布

本文链接：https://blog.csdn.net/m0_62861576/article/details/131316735

版权

目录

HTML部分

css部分

盒子模型布局：

盒子的浮动：

盒子的定位 - postion：

css布局 - overflow：

JavaScript：

JS语法：

JS语句：

JS事件：

HTML部分

vscode 创建.html文件，shift+ ！+ tab 键可以快速生成html框架模板。

<head>元素

head是头部元素的容器，内部元素包括脚本、样式表、提供元信息，等等

<title></title>中间可以改网页的窗口名称 <title>goodnight</title>

<link>引入小图标： <link rel="icon" href="./img/ayh.jpg">

<meta>

css部分

text-align：文本对齐方式

给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中。

text-height：行间距

letter-spacing：字符间距

css的选择器：

/* 标签选择器 */

p{

color:chocolate;

font-size: 20px;

}

/* id选择器 */

#hello{

color: chartreuse;

}

/* 类选择器 */

.nice{

color: firebrick;

}

/* 属性选择器->只对href属性的a应用样式 */

a[href]{

color: black;

}

/* 派生选择器->只有ol中的li才显示 */

ol li{

color: lightsalmon;

}

html中引入css

盒子模型布局：

margin外边距，border边框，padding内边距，content内容。

border设置有三要素：粗细样式颜色，如：border: 1px soild red

！！！margin 和 padding都有上下左右！！！

1.如果margin只有一个值，表示上下左右都是同一个这个属性。

margin: 10px; 等于 margin: 10px 10px 10px 10px;

2.如果有两个值，第一个值表示上下的margin值，第二个值表示左右的margin值

3.如果有三个值，第一个表示上，第二个表示左右，第三个表示下

4.如果有四个值，则分别表示上右下左，一个顺时针的方向

盒子的浮动：

1.在标准流中，一个块级元素在水平方向会自动伸展（块级元素：能换行的，如 div、p标签）

2.CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

3.Float（浮动），往往是用于图像，但它在布局时一样非常有用。

给一个div加上float: left 后，则该元素就不换行了，下面的元素随即接在其左边：

给其加上float: right 后，box2会贴在box1右边：

元素怎样浮动？

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

浮动清除 - 使用clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

盒子的定位 - postion：

包括静态定位、相对定位、绝对定位和固定定位。

1.static：默认值，即没有定位，遵循正常的文档流对象。

2.relative：相对定位，相对定位元素的定位是相对其正常位置（原来的位置）。

以标准流动排版方式为基础，然后使盒子相对于它在原来的位置偏移指定的距离，其下面的元素仍以标准流的方式布局。

如right: 28px; 在原来的位置处，位置向右移动28px。

3.absolute：绝对定位，元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>，浏览器的起始坐标为窗口的右上角。

        盒子从标准流中脱离，这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就当它不存在一样。

4.fixed：固定定位，也是以浏览器为基准

        元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。

5.sticky：粘性定位

     它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

css布局 - overflow：

可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

如overflow: visible; 这是默认的情况，内容若超出元素框，还是会显示，但是很丑：

span元素：

是行内元素，跟div这种块内元素不同，它不会换行。

height 和 max-height的区别：

JavaScript：

JavaScript是一种运行在客户端的脚本语言。

由浏览器解释执行，基于1.对象的脚本语言，2.弱类型语言，3.可以不声明直接使用。

（如java，python等都是强类型语言

输出：

1.弹出警告框：window.alter();

2.方法将内容写到HTML页面中：document.write("我写我写");

浏览器中便会显示我写我写

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

3.通过id的方式找到元素，然后在这个HTML元素中写入我是JS，我来了！
<script>
    document.getElementById("dosth").innerHTML="我是JS，我来了！";
</script>
4.写入日志，控制台里：console.log("你好，我是控制台！");

JS语法：

变量：

1.数字（Number）字面量可以是整数或者小数，甚至是科学计数（e）。

2.字符串（String）字面量可以使用单引号或双引号:

3.数组（Array）字面量定义一个数组：

[40, 100, 1, 5, 25, 10]

4.对象（Object）字面量定义一个对象：

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

5.函数（Function）字面量定义一个函数：

function myFunction(a, b) { return a * b;}

6.使用 var 来定义变量，使用等号来给变量赋值。

JS语句：

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

JS事件：

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发HTML事件。

例1：

<body>
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>
</body>

例2：

<body>
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
</body>

例3：

<body>
<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>

常见的HTML事件：

常用对象：

1.字符串对象 String，

        属性有：

        方法有：（很多...



2.Math对象

Math.round(2.5); 意思是求与“2.5”最接近的整数

Math.random(); 生成0-1之间的一个随机数

abs(); 求绝对值 sqrt(); 开根号 max(a,b); a 与 b 之间的较大数

3.Date对象

        等方法。

4.Document对象

        当浏览器载入 HTML 文档, 它就会成为 Document 对象。

        Document 对象是 HTML 文档的根节点。

        Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

        提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。



5.window对象

        Window 对象表示浏览器中打开的窗口。

        如果文档包含框架（<frame> 或 <iframe> 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

具体属性及方法见：Window 对象 | 菜鸟教程 (runoob.com)