HTML+CSS+JS相关入门知识学习记录（1）

一个html根元素包含两大部分：head&body

head主要包含meta元数据、title标题、link链接以及script脚本等。
一般来说，可以加在head中的标签为title, style, meta, link, script, noscript 和 base。
body主要包含了html的可见内容

css主要用来渲染html中标签的各种样式，主要分为以下几种

内联样式：写在html标签的style属性中
内部样式：写在head的style标签中
外部样式：写在css文件中，然后通过link进行链接
三者优先级：内联样式>内部样式>外部样式

JS弹窗主要有三种

警告：window.alert
确认：window.confirm
提示：window.prompt

如何修改html网页书签和标签页图标

<link rel="Bookmark" href="图片地址">
<link rel="icon" href="图片地址">
<link rel="shortcut icon" href="图片地址">

如何获取下拉列表select的内容

var ID = document.getElementById("select标签的id"); //获取select
var Index = ID.selectedIndex; //获取现在选择内容的下标
var Value = ID.options[Index].value; //根据下标获取值，然后根据值进行判定即可

使用表单form进行页面跳转

html内容
<form action="" method="post" id="id名">  
       <input type="submit" value="登录" onclick="函数名">
</form>

js内容
document.getElementById("表单id").action = "要跳转的页面名";

多按钮获取点击按钮的下标

//启动时调用该函数
window.onload = function() {
        var Options = document.getElementById('多按钮的父级id');
        var Button = Options.getElementsByTagName('button');    //根据标签查询按钮
        for (var i = 0; i < Button.length; i++) {
              Button[i].index = i;
              Button[i].onclick = function() {   //点击时调用
              //相关操作
              }
        }
}

点击后按钮变色，通过JS实现 相关链接

css内容
定义按钮点击前样式，点击后样式，鼠标悬停样式以及鼠标点击样式
.Button .ButtonAfter .Button:hover .Button:active

JS内容
同上获取点击按钮下标，然后执行修改类名的操作（直接修改style会导致伪元素失效），以三按钮为例
Button[0].className = "ButtonAfter";
Button[1].className = "Button";
Button[2].className = "Button";

消除浏览器默认8px外边距

body {
    margin: 0px;
}

css定位

static: 无定位，不受top left right bottom影响
fixed: 相对于浏览器窗口固定，不受浏览器窗口滚动影响
relative: 相对于其正常位置的定位
absolute: 相对于父级的定位，没有则为html网页
sticky:基于用户的页面滚动来定位