【HTML、CSS】笔记如果文中阐述不全或不对的，多多交流。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

纯文字阐述，内容比较干。并且，由于考虑到时间长了恐有所遗漏，便即兴记录，并没有对内容进行筛选、排序。因此，大家在阅读时可以直接Ctrl + F进行检索。

注：本文中，“逻辑位置”指根据理论推断的所在位置，“实际位置”指实际显示的所在位置。

扩展

【网易游戏】页面特效原生实现。

细节锦集

内联元素（inline）无法设置上、下外边距。故margin: 0 auto无效，同样对行内块元素（inline-block）无效。
在不作为字体的情况下，单一显示字符，如：<，需使用“字符实体”，格式：& + 实体名/实体号 + 分号。如：空格：&nbsp；。
若一串字符由汉字、特殊字符、空格等组成，溢出时会自动换行；若仅包含数字、字母，且无空格，则视为单词，不换行。
<a>实现本页面跳转：href = "#id"，id是盒子id，称为“锚点”。
去除输入框被选中时的选中框：outline: none。
transform会覆盖，即当设置多个transform时，只有最后一个有效。其中，rotate会改变坐标轴方向。
定义动画时，所有位移、旋转、缩放等都相对于起始点。
修改网页标题 logo：<link ref = "icon" href = "<ico图片路径>" />。
使用伪选择器创建的盒子属子级。
H5之前，form 表单必须嵌套。H5中 form 表单不嵌套的方法：为<form>设置 id，并指定<input>的属性form为此 id。
box-sizing样式表示是否将边框包含在width/height之内。取值：1、content-box表示不包含；2、border-box表示包含；3、inherit表示继承父级 box-sizing。
一般情况下，表单提交时正则校验最好只设置一次，因为连续校验可能出错。
列表标签：<dl>（列表头）、<dt>（列表项）、<dd>（项解释）。
设置样式（css）的方法很多：外链式、内嵌式、内行式和属性设置。若需要令某一样式具有最高优先级，可在样式后加：!important。其中，外链式与内嵌式无优先级之分，在于顺序；且JS语句（<script>）优先级相当于行内式。
鼠标悬停提示：title属性。
光标小手：cursor: pointer。

二、关于定位

相对定位（relative）的参照对象是自身；
绝对定位（absolute）的参照对象是父级。先检查父级标签是否设置定位方式（无论何种定位）。若有，则参照父级标签；否则，再检查父父级标签是否设置定位方式。依次类推。若都没有设置，则参照网页（<html>）。

三、标签

3.1 video

<video>标签引入视频默认不会自动播放，需设置属性autoplay: muted；
<video>不同于<img>，比例不能随意改变，需设置属性object-fit: cover进行拉伸。

3.2 input

属性：

autofocus：自动聚焦；
pattern：设置正则表达式；
novaliable：取消提交表单时对整个表单的验证；
autocomplete = "on/off"设置表单是否打开自动完成功能；
注：“自动完成功能”指将表单过去输入过的信息、在选中时自动填充。

3.3 画布 Canvas

推荐一篇博文《学习HTML5 Canvas这一篇文章就够了》（转发）。

注：下文中的“canvas1”是Canvas标签，代码是在js中执行。

3.3.1 属性设置

修改参考点：即修改坐标原点。canvas1.translate(x, y)；
旋转坐标轴：canvas1。rotate(<弧度>)；

修改刻度的width、height：

注：刻度的width、height与Canvas标签的width、height（用css修改）不是一个概念。

方法1、内嵌式修改width、height属性。

<Canvas id="canvas1" width="500" height="500" ></Canvas>

方法2、使用js修改width、height属性。

canvas1.width = 500;
canvas1.height = 500;

3.3.2 示例：画动态时钟

思想：

通过旋转坐标轴的方法画出刻度和时分秒针；
定义定时器（interval），时隔1s，先画出刻度，再根据时分秒针转动联系画出时分秒针。注意：先擦除（覆盖），再画。

转动联系：

秒针转动一圈，分针转动π/30；
分针转动一圈，时针转动π/6。

3.4 选项列表 datalist

需要与<input>连用，用于存放<input>的可选值。
示例：

country：<input type="text"list="list1">
<datalist id="list1">
	<option value="China" />
	<option value="American" />
</datalist>

在这里插入图片描述

3.5 折叠列表 details

<summary>是列表的标题。
示例：

<details>
	<summary>country</summary>
	<p>China</p>
	<p>American</p>
</details>

在这里插入图片描述

四、层级

z-index可设置层级，前提是已设置定位方式，且若是相对定位，层级会增加；
盒子层级默认为0，若是将层级设置为负数，在不改变<body>层级的情况下，盒子将不能操作；
层级会继承；
盒子的层级取决于这个盒子所在“家族”、已设置层级且“辈分”最大的盒子，其后代无法再修改层级（的确仍可以设置z-index，但无意义）；
当层级相同时，后面的盒子比前面的盒子高（指距离我们眼睛越近）；
定位不会改变层级，在第1点中说：“相对定位会增加层级”其实说的是第5点。若盒子设置为相对定位，则看起来此盒子会更高，而实际上层级未变；

五、全局标签属性

设置<table>可编辑：contented:table = "true"；
hidden：隐藏标签，不占据空间。若要去除隐藏，需去掉hidden，修改值无用；
spellcheck = "true"属性用于设置可编辑（第1点）的input[type = text]、<textArea>或编辑类 标签进行拼写检查。

六、关于 margin

相邻同级盒子的margin会相互覆盖；
若父级设置了border，则不会受子级的margin影响，即使子级的margin大于父级的margin；
若父级未设置border，则子级和父级的margin会相互覆盖。其中，若子级的margin大于父级的margin，父级会被“挤开”，这种现象称为外边距塌陷外边距塌陷外边距塌陷；（解决方法：第2点）
若父级设置了定位方式，则不会受子级的margin影响。

七、功能：滚轮控制（JQ）

实现思路：通过动画修改scrollTop（滚动高度。“滚动高度”就是盒子的高度，即样式top）。注：scrollTop不是样式。

示例。

var footTop=parseInt($("footer").offset().top);
var se2Top=parseInt($("#section2").offset().top);
var se3Top=parseInt($("#section3").offset().top);
var se4Top=parseInt($("#section4").offset().top);
$(window).scroll(function(){
	var sTop;
	if($("html").scrollTop()!=0&&$("body").scrollTop()!=0){
		sTop=$("html,body").scrollTop()
	}else if($("html").scrollTop()==0){
		sTop=$("body").scrollTop()
	}else{
		sTop=$("html").scrollTop()
	}

	if(sTop>=se4Top){
		$("#scroll>li").eq(3).css("background","white").siblings().css("background","none")
	}else if(sTop>=se3Top){
		$("#scroll>li").eq(2).css("background","white").siblings().css("background","none")
	}else if(sTop>=se2Top){
		$("#scroll>li").eq(1).css("background","white").siblings().css("background","none")
	}else{
		$("#scroll>li").eq(0).css("background","white").siblings().css("background","none")	}
})

说明：

offset()：将标签转为对象。从而获取样式top，直接使用css('top')也可。注意：若没有为盒子设置样式top，css('top')返回undefined，而offset().top返回0，因为后者底层进行了处理；
scroll()：滚轮事件，当滚轮滚动时执行；
scrollTop()：返回滚动高度；
siblings()：返回除自身以外的所有同级盒子。

PS：时隔多年，只能请大家自行揣摩了。。。

八、overflow: hidden 的用法

隐藏多余部分；
动态height。
当子级个数未知时，无法确定父级的height（注意：此时子级设置了浮动float），设置父级overflow: hidden可实现动态height。当然，实现动态height还有一种方法：position: aboslute/fixed，但若使用此方法，则无法使用margin: 0 auto进行盒子水平居中，而overflow: hidden可以；
解决外边距塌陷问题。

另外，overflow: scroll是滚动条。

九、功能：轮播

在这里插入图片描述

初步效果：

在这里插入图片描述

实现思路：

从这张图，大家就大致可以知道轮播是如何实现的。需要三个样式：定时器（setInterval()）、平移（translate() / left）和过渡（transition）。

先附上这张平移图的实现源码：（草草写的。。。给大家参考一下） 1、html。（快速生成代码：div>div>div*6>img，在输入g的时候按 Tab）

<div id="border">
    <div id="scroll">
        <div><img src="" alt=""></div>
        <div><img src="" alt=""></div>
        <div><img src="" alt=""></div>
        <div><img src="" alt=""></div>
        <div><img src="" alt=""></div>
        <div><img src="" alt=""></div>
    </div>
</div>

2、css。

#border {
    width: 80px;
    height: 43px;
    border: 5px solid red;
    margin: 100px auto;
}
#scroll {
    width: 480px;
    height: 47px;
    position: relative
}
#scroll>div {
    float: left;
}

3、js。

var srcs = ['img/11.jpg', 'img/12.jpg', 'img/13.jpg', 'img/14.jpg', 'img/15.jpg', 'img/16.jpg']
$("#scroll img").each(function(i, e) {
    e.width = 80
    e.height - 45
    e.src = srcs[i]
})

var i = 0
var move = function() {
    $("#scroll").css('left', -80 * i + 'px')
    i++
    if(i == 6)
        i = 0
}
setInterval(move, 500)

当i == 5时（最后一张），将过渡归0，实现“瞬间”轮播，理论上可以实现“完美”效果（淘宝上经常出现的那种效果），实际上由于过渡需要时间，当原过渡开始时，程序继续执行，原过渡被“瞬间”过渡取代，偏移（translate() / left）也被取代，就出现了当轮播到第6张图时，瞬间回到第一张图的情况，故需要当x == 6时再执行“瞬间”过渡，但这样就出现了0.5s的停顿。

上面那张图还没有“过渡”效果，加上这个样式：

#scroll {
    transition: 0.5s
}

效果：在这里插入图片描述 “理想”效果：当过渡到第6张图后，下0.5s，轮播到第2张图。（时间挺长了，实现细节有些忘了。。。）

“理想”效果实现方法：使用动画（animation）。由于动画不会被取代，故当x == 5时轮播，即可实现。（源码找不到了，只能请大家自行理解补充）

十、动态 height

实现动态height的前两种方法在overflow: hidden一栏已说明。

方法3：伪选择器。

伪选择器after的作用：创建一个子级，此子级的“逻辑位置”在所有子级的最后。

操作：为父级用:after创建一个盒子，再清除此盒子的相应浮动（clear: xx）。

原理：由于after是为父级创建盒子，故此盒子的“逻辑位置”在所有子级的最后。因为此盒子清除了浮动，则不再受其他子级影响，故此盒子的“实际位置”在最后一个子级后面。因此，父级只能扩展height来保证能“容纳”此盒子，即动态height。为什么清除浮动？ 因为其他子级都设置了浮动，而此盒子未设置浮动，故此盒子会因其他盒子浮动而向上移动。因此，需要清除浮动来消除影响使其停留在原位置。

说明示例：

1、演示。

ul:after {
	content: "6";// 设置文本内容是"6"
	clear: left;// 清除左浮动
	display: block;// 设置为块级元素,即默认占一行
	width: 20px;
	height: 20px;
	background-color: gray;
}

在这里插入图片描述

从演示效果可以看出，前5个子级都设置了左浮动，故此盒子需要清除左浮动。注意：此盒子必须设置为块级元素display: block（缘由我暂未知，需要大家自行查阅和研究了）。

2、实现动态height。

ul:after {
	content: "";
	clear: left;
	display: block;
}

在这里插入图片描述

十一、选择器

1：属性选择器

[type]：选中具有属性type的标签。
[type=text]：选中属性type的值为text的标签。
[class^=row]：选中属性class的值以row开头的标签。
[class$=row]：选中属性class的值以row结尾的标签。
[class*=row]：选中属性class的值包含row的标签。
[class~=nav]：选中属性class的值为一组单词、其中一个是nav的标签。
[id|=user]：选中属性id以user-开头或id="user"的标签。

2：结构伪类选择器

同级、同名标签。

:first/last-of-type：第一或最后一个。
:nth-of-type(n)/:nth-last-of-type(n)：第n个或倒数第n个。
:not(selector)：不满足selector。
:only-of-type：唯一“兄弟”。

子标签。

:first/last-child：第一或最后一个。
:nth-child(n)/:nth-last-child(n)：第n个或倒数第n个。
:only-child：“自己”。

3：相邻兄弟选择器

A+B：选中A之后的第一个同级B。
A~B：选中A后的所有同级B。

4：伪类选择器

:focus：标签获得焦点时。
:checked：标签被选中时。
:enabled：标签可用时。
:disabled：标签不可用时。
:root：根标签。
:empty：没有子标签（包括内容）。

最后

这些笔记是当年学习前端原生技术时做的，是基于容易忘记、需要注意或新知识点考虑所记录的。做笔记肯定不是原版原抄，而是经个人理解后的精简，故如一些基础知识便不在此列，如：$("#xx").css({})，这是jq设置盒子样式的一个基础函数。

我的发展方向是后端，平日（包括工作）涉及前端都是框架，很少再使用这些前端原生技术。此文章于今年撰写，过去再熟悉平日少接触都会生疏，所以可能有些阐述会略有问题。

知识点所涉及的内容，我会斟酌适当地做一些注释，如果大家不理解，只能请大家另寻高见。

本文持续更新中。。。