HTML&CSS&JavaScript个人入门自学笔记

最新推荐文章于 2024-08-10 10:42:27 发布

「已注销」

最新推荐文章于 2024-08-10 10:42:27 发布

阅读量298

点赞数 1

文章标签： js css html javascript

本文链接：https://blog.csdn.net/PriceCheap/article/details/115833900

版权

本文是作者自学HTML、CSS和JavaScript的个人笔记，涵盖了URL请求、图片引用、HTML5废弃属性、CSS布局、定位、浮动元素、CSS选择器、JavaScript变量声明、函数、事件处理、DOM操作、闭包等基础知识。通过实例解析了相对和绝对定位、响应式设计、CSS兼容性问题、JavaScript动态类型、变量提升等问题，适合初学者参考。

摘要由CSDN通过智能技术生成

herf=“URL”中，URL末尾不加斜杠时，会向服务器发出两次请求。
这是因为URL末尾不加斜杠时，所在文件夹找不到相应的资源。所以服务器会自动填加斜杆向下一级寻找。

img中src属性存在两种引用，跟C一样的嘛：
1.绝对路径引用：
直接复制img的地址粘贴，可移植性差
2.相对路径引用:
①img跟html存在同一文件夹下，直接引用

<img src=“photo.jpg” />

②img文件夹跟html存在于同一文件夹下

<img src=”./img/photo.jpg“ />, ./表示当前文件夹

③img文件夹跟html文件夹存在于同一目录下

<img src=“../img/photo.img”/>, ../表示上一级文件夹

在HTML 4中 align 属性已废弃，HTML5 已不支持该属性，可以使用 CSS 代替。
怪不得我的VS有警告：“center”不是特性“align”的有效值。

直接在标签中加text-align:center居中是没用的
图片套在一个p或者span标签中，给标签添加一个text-align:center属性。

虽然我看了很久的枯燥的语法，不过这个用图片当作列表项标记的用法就很赞，真的是给我注入了一剂强心剂啊……
例：

ul 
{ 
list-style-image: url('sqpurple.gif'); 
}

在这里插入图片描述

#customers tr.alt td

customers的标签选择器下面的tr的alt类下面的td

<style>
   
	a:link, a:visited {
    
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
        a:hover {
    border-color: gray;}}
    </style>

如果你使用了border-style属性那就必然是有边框的，不过你可以通过transparent把这个边框隐藏

在这里插入图片描述

设置了段落的最大高度之后，只是背景被限制在这个高度之内，文本还是可以溢出的……
在这里插入图片描述

position:relative

在这里插入图片描述

可以移动的相对定位元素的内容即使和其他元素重叠，它原本所占的空间也不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。

Absolutely 定位使元素的位置与文档流无关，因此不占据空间。
Absolutely 定位的元素和其他元素重叠。

z-index 属性指定了一个元素的堆叠顺序
如果两个定位元素重叠，没有指定 z - index，最后定位在 HTML 代码中的元素将被显示在最前面。

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

.text_line
{
clear:both;
}

垂直居中对齐的简单方式就是头部顶部使用 padding

.center { padding: 70px 0; border: 3px solid green; }

padding属性只输入两个值a,b，不是上a右b下0左0，而是上a下a 右b左b

普通相邻兄弟选择器不会区分兄弟之间的隔阂（燃起来了
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例|W3Cschool教程(w3cschool.cn)</title>
<meta charset="utf-8">
<style>
.dropbtn {
    
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    
    position: relative;
    display: inline-block;
}

.dropdown-content {
    
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    
    display: block;
}

.dropdown:hover .dropbtn {
    
    background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>下拉菜单</h2>
<p>鼠标移动到按钮上打开下拉菜单。</p>

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="