你应该知道的html和css

html

声明
html5新特性
表单的丰富
自定义属性规范
拖放
应用缓存
web worker

filter
columns
flex
照片墙
瀑布流
参考链接

html

<!DOCTYPE> 声明

是标准通用标记语言的文档类型声明，由于网络上文件的类型不一，因此需要正确声明 HTML 版本，以使得浏览器能够正确识别并显示网页内容。

doctype声明不区分大小写,以下形式皆可

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

有代表性的<!DOCTYPE>声明

HTML5时期
<!DOCTYPE html> 

HTML 4.01 时期
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"      
"http://www.w3.org/TR/html4/loose.dtd"> 

XHTML 1.0 时期
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

html5新特性

语义化标签

语义化标签是为了让代码看起来更见名知义，语义清晰，本质上只是一个普通的div。


标签	语义
header	头部
footer	尾部
section	区段
article	文章
nav	导航
aside	侧边栏
main	文章主体内容
figure	独立的流内容(图像、图表、照片、代码等等)
hgroup	对网页或区段（section）的标题进行组合
details/summary	标签用于描述文档或文档某个部分的细节
mark	突出显示部分文本

在一个文档中，不能出现一个以上的 main元素,且main不能是以下元素的后代：article/aside/footer/header/nav

最后4个用的可能少一些，这里补充说明一下


<figure>
  <p>avatar</p>
  <img src="url"/>
</figure>

hgroup可以拆开理解，h是标题的语义，group是组合，hgroup自然就是对标题进行组合
<hgroup>
  <h1>前端</h1>
  <h2>HTML</h2>
</hgroup>

默认关闭子项，点击展开，再点击收起
<details>
    <summary>详情</summary>
    <p>hello world</p>
    <p>hello girl</p>
</details>

<p>这是<mark>突出显示</mark>的部分</p>

表单的丰富

部分属性需要在form标签包裹下才会生效

常规

<form >
    <!--默认包含正则验证，验证失败表单无法提交-->
    邮箱： <input type="email">

    <!-- 自动聚焦and占位符 -->
    输入框：<input type="text" placeholder="请输入" autofocus="true">

    <!--tel本身不包含验证，它的出现是为了能够在移动端打开数字键盘-->
    <!--required，必须输入 pattern，正则验证-->
    电话：<input type="tel" required pattern="^(\+86)?1\d{10}$">

    <!--验证只能输入合法的网址：如http://www.baidu.com-->
    网址：<input type="url">

    <!--number：只能输入数字(包含小数点)，不能输入其它的字符 max:最大值 min:最小值 value:默认值-->
    数量：<input type="number" value="70" max="100" min="0">

    <!--search：可以提供更人性化的输入体验，有个x号，不想要了可以删除-->
    请输入商品名称：<input type="search">

    <!--range:范围，与number类似-->
    范围：<input type="range" max="100" min="0" value="50">

     <!--可以当个拾色器-->
    颜色：<input type="color">
   
    <!--time:时间：时分秒-->
    时间：<input type="time">

    <!--date：日期：年月日-->
    日期：<input type="date">

    <!--datetime:大多数浏览器不能支持datetime.用于屏幕阅读器-->
    日期时间：<input type="datetime">

    <!--datetime-local:日期和时间-->
    日期时间：<input type="datetime-local">
    月份：<input type="month">
    星期：<input type="week">
  
</form>

默认为true的属性

<input type="text" autofocus>
<input type="text" disabled>
<input type="checkbox" checked>

新增datalist标签

不同浏览器表现会有些许差异，感兴趣的可以试试

 <!--建立输入框与datalist的关联  list="datalist的id号"-->
 编程语言：<input type="text" list="language"> <br>
 <!--通过datalist创建下拉列表-->
 <datalist id="language">
     <!--label:提示信息-->
     <option value="java" label="老牌编程语言"/>
     <option value="php" label="世界上最好的语言"></option>
     <option value="node.js" label="强大的IO处理能力"></option>
      <!--option可以是单标签也可以是双标签-->
     <option value="python" label="火爆的编程语言，处理数据能力强"/>
 </datalist>

新增meter标签

不同浏览器显示有差异

<!--high:规定的较高的值,low:规定的较低的值,max:最大值,min:最小值,value:当前度量值-->
<meter max="100" min="0" high="80" low="40" value="30"></meter>
<meter max="100" min="0" high="80" low="40" value="60"></meter>
<meter max="100" min="0" high="80" low="40" value="100"></meter>

meter

新增fieldset和legend标签

	<fieldset>
        <legend>冷月心个人信息</legend>
    </fieldset>

fieldset和legend标签

新增progress标签

<progress value="22" max="100"></progress>

progress

form表单提交按钮属性

formaction 指定提交按钮的地址
formtarget 类似a标签的target
formmethod 指定表单提交方式
formenctype 表单提交时的编码格式

application/x-www-form-urlencoded	在发送前对所有字符进行编码（默认）。
multipart/form-data	不对字符编码。当使用有文件上传控件的表单时，该值是必需的。
text/plain	将空格转换为 “+” 符号，但不编码特殊字符。

其他

control 属性，在lable标签内部放置一个表单元素，并通过该属性来访问该表单的属性
autocomplete，控制表单提交后是否生成历史记录 on|off

自定义属性规范

小写，非纯数字，不含特殊字符
data开头,data-后必须至少有一个字符，多个单词使用-连接
示例: data-name， data-project-name

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义属性</title>
</head>
<body>
<p data-user-name="冷月心"></p>
<script>
        const p=document.querySelector("p");
        //必须驼峰法取值
        console.log(p.dataset["userName"]);//冷月心
</script>
</body>
</html>

拖放

draggable设置元素是否可拖放，img标签默认为true
ondragstart 开始拖放事件监听，存储数据
ondrop 放下事件，获取ondragstart 时存储的数据并添加到目标元素
ondragover 拖动结束事件，用于清除默认行为，否则无法实现拖放

网页资源拖放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html5拖放</title>
    <style>
        div {
            float: left;
            width: 300px;
            height: 300px;
            border: 1px solid #aaa;
            margin: 10px;
        }
    </style>
</head>

<body>
    <p>拖拽图片至div</p>
    <div ondrop="drop(event)" ondragover="allowDrop(event)">
    </div>
    <div ondrop="drop(event)" ondragover="allowDrop(event)">
    </div>
    <br />
    <img id="img" src="https://img-blog.csdnimg.cn/20200323112521943.jpg" draggable="true" ondragstart="drag(event)" />

</body>
<script type="text/javascript">
    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("img", ev.target.id);
    }

    function drop(ev) {
        var data = ev.dataTransfer.getData("img");
        ev.target.appendChild(document.getElementById(data));
    }
</script>

</html>

本地资源拖放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html5拖放</title>
</head>
<body>
    <p>拖拽本地图片至当前页面</p>
</body>
<script type="text/javascript">

    document.ondragover = function (ev) {
        ev.preventDefault();
    }

    document.ondrop = function (ev) {
        ev.preventDefault();//默认会以链接打开
        var file = ev.dataTransfer.files[0];
        var fileReader = new FileReader();
        fileReader.onload = function () {
            var img = new Image();
            img.src = fileReader.result;
            document.body.appendChild(img);
        }
        fileReader.readAsDataURL(file)
    }
</script>
</html>

应用缓存

应用缓存是一种可以在离线状态下正常访问页面的技术，核心是manifest文件的配置。

manifest配置项


manifest有4个常用配置项，作用如下

1. CACHE MANIFEST //指定声明头
3. CACHE: 缓存文件列表
4. NETWORK: 不缓存文件列表，每次都从服务器加载
5. FALLBACK: 指定当页面不可访问时的回退页面(如404)

使用流程

   
- 创建index.html
- 创建index.appcache文件
- 关联缓存文件

<html lang="en" manifest="index.appcache">

index.appcache

CACHE MANIFEST 

CACHE:    
    index.css
    jquery.min.js
    404.html

NETWORK:
  app.css 

FALLBACK: 
*.html /404.html


* 指定资源备选页，原资源无妨访问则加载备用页资源
* 每行配置为2个请求路径，前者为原始资源，后者为备用资源
* 两个路径都必须为相对路径并且与缓存配置文件同源,可使用通配符
* 上述配置表示，无网络时，用404.html代替所有html文件

更新缓存

更新缓存数据有三种方式

1. 直接修改index.manifest文件
2. window.applicationCache.update()
3. 手动清除浏览器缓存

补充

不同浏览器对缓存数据的容量限制存在差异
manifest文件配置的某个文件不能正常下载，整个更新失败，全用旧的缓存
index.manifest文件和index.html文件必须同源

web worker

web worker 是独立运行在后台的js脚本，不影响页面性能，常用于处理耗时的逻辑。值得注意的是，出于安全性考虑，浏览器对本地运行web worker有限制，需运行在服务器上。

使用案例

新建count.js，内部执行一个耗时的逻辑
count.js 内部使用postMessage发送运行后的结果

var arr = Array.from(new Array(10000).keys());
var sum = 0;
arr.forEach(item => {
    sum += item;
})

postMessage(sum)

新建index.html
创建web worker,加载count.js
接收count.js发送的数据
渲染到界面上
销毁web worker

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web worker</title>
</head>
<body>
</body>
<script>
    window.onload = function () {
        var worker = new Worker('count.js');
        worker.onmessage = function (e) {
            document.body.innerText = e.data;
            worker.terminate();
        }
    }
</script>
</html>

css

filter

filter是滤镜属性，常用于对图像色彩处理,常用属性如下


属性	描述
none	默认值，没有效果。
blur(px)	给图像设置高斯模糊
brightness(%)	给图片应用一种线性乘法，使其看起来更亮或更暗
contrast(%)	调整图像的对比度
drop-shadow	给图像设置一个阴影效果
grayscale(%)	将图像转换为灰度图像
hue-rotate(deg)	给图像应用色相旋转
opacity(%)	转化图像的透明程度
saturate(%)	转换图像饱和度
sepia(%)	将图像转换为深褐色
invert(%)	反转输入图像

css设置


    .blur {
        -webkit-filter: blur(4px);
        filter: blur(4px);
    }

    .brightness {
        -webkit-filter: brightness(0.30);
        filter: brightness(0.30);
    }

    .contrast {
        -webkit-filter: contrast(180%);
        filter: contrast(180%);
    }

    .grayscale {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }

    .huerotate {
        -webkit-filter: hue-rotate(180deg);
        filter: hue-rotate(180deg);
    }

    .invert {
        -webkit-filter: invert(100%);
        filter: invert(100%);
    }

    .opacity {
        -webkit-filter: opacity(50%);
        filter: opacity(50%);
    }

    .saturate {
        -webkit-filter: saturate(7);
        filter: saturate(7);
    }

    .sepia {
        -webkit-filter: sepia(100%);
        filter: sepia(100%);
    }

    .shadow {
        -webkit-filter: drop-shadow(8px 8px 10px green);
        filter: drop-shadow(8px 8px 10px green);
    }

效果图

filter

columns

使用columns可以轻松的实现一个分栏布局,column-gap指定列间隙，column-rule指定列之间的规则：宽度，样式和颜色。

核心css代码如下

        div {
            width: 600px;
            margin: 0 auto;
            background-color: aqua;
            columns: 100px 3;
            column-gap:10px;
            column-rule:4px dashed #ddd;
            padding: 10px;
        }

核心html伪代码如下:

    <div>
        ...文字描述
    </div>

三栏布局

flex

flex提供一种更优雅更灵活的布局方式，使用：display:flex;或display:inline-flex;。值得注意的是，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

flex容器属性设置

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

1. flex-direction

设置主轴方向，确定弹性子元素排列方式,取值为： row(默认) | row-reverse | column | column-reverse;

row(默认),水平方向，从左到右排列
row-reverse,水平方向，从右到左排列
column，垂直方向，从上到下排列
column-reverse，垂直方向，从下到上排列

2. flex-wrap

当弹性子元素超出弹性容器范围时是否换行，取值为：nowarp|warp|wrap-reverse;

nowrap(默认)：不换行。
warp换行，第一行在上方
wrap-reverse换行，第一行在下方

flex-warp

3. flex-flow

flex-direction和flex-wrap属性的快捷方式，复合属性,默认值为row nowrap

4. justify-content

主轴上的对齐方式,取值为flex-start | flex-end | center | space-between | space-around;

具体对齐方式与轴的方向有关,下面假设主轴为从左到右:
flex-start(默认)：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，item之间的间隔都相等。
space-around：每个item两侧的间隔相等。所以，item之间的间隔比item与边框的间隔大一倍。

justify-content

5. align-items

侧轴上的对齐方式,取值为：flex-start | flex-end | center | baseline | stretch;

具体的对齐方式与侧轴的方向有关，下面假设侧轴从上到下：
stretch(默认)：如果item未设置高度或设为auto，将占满整个容器的高度。
flex-start：侧轴的起点对齐。
flex-end：侧轴的终点对齐。
center：侧轴的中点对齐。
baseline: item的第一行文字的基线对齐。

align-items

6. align-content

侧轴上有空白时的对齐方式，取值为:align-content: flex-start | flex-end | center | space-between | space-around | stretch;

主轴为水平方向生效
stretch(默认)：轴线占满整个侧轴。
flex-start：与侧轴的起点对齐。
flex-end：与侧轴的终点对齐。
center：与侧轴的中点对齐。
space-between：与侧轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

align-content

item属性设置

order
flex-grow
flex-shrink
flex-basis
flex
align-self

1. order

控制弹性容器里子元素的顺序,数值越小，排列越靠前，默认为0

order

2. flex-grow

定义item的放大比例，默认为0，即如果存在剩余空间，也不放大。

如果所有item的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
如果一个item的flex-grow属性为2，其他item都为1，则前者占据的剩余空间将比其他项多一倍。

flex-grow

3. flex-shrink

flex-shrink属性定义了item的缩小比例，默认为1，即如果空间不足，该item将缩小。

如果所有item的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
如果一个item的flex-shrink属性为0，其他item都为1，则空间不足时，前者不缩小。
负值对该属性无效。

flex-shrink

4. flex-basis

指定弹性子元素伸缩前的默认大小值，相当于width和height属性。

5. flex

flex-grow, flex-shrink和flex-basis属性的复合属性.

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

6. align-self

允许独立的弹性子元素覆盖弹性容器的默认对齐设置(align-items),取值为：auto | flex-start | flex-end | center | baseline | stretch

auto表示继承父元素的align-items属性，如果没有父元素，则等同于stretch(占满)。
除auto外，其余表现与align-items表现一致

align-self

照片墙

制作思路

父盒子相对定位
图片绝对定位，z-index层级控制
不同图片定位距离，角度需有差异，形成错综感
hover时角度置为零，层级提升，过渡动画，缩放

代码实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>picture-wall</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: azure;
        }

        div {
            width: 1200px;
            margin: 100px auto;
            height: 450px;
            position: relative;
        }

        img {
            position: absolute;
            width: 160px;
            box-shadow: 2px 2px 3px rgba(50, 50, 50, .4);
            padding: 15px;
            background-color: #fff;
            z-index: 1;
        }

        div img:hover {
            transform: rotate(0);
            z-index: 2;
            transition: all .5s ease-in;
            transform: scale(1.2);
        }

        img:nth-child(1) {
            left: 100px;
            top: 0px;
            transform: rotate(-30deg);
        }

        img:nth-child(2) {
            left: 300px;
            top: 60px;
            transform: rotate(-45deg);
        }

        img:nth-child(3) {
            left: 450px;
            top: 10px;
            transform: rotate(10deg);
        }

        img:nth-child(4) {
            left: 600px;
            top: 30px;
            transform: rotate(20deg);
        }

        img:nth-child(5) {
            left: 750px;
            top: 100px;
            transform: rotate(60deg);
        }
    </style>
</head>

<body>

    <div>
        <img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oYmltZy5odWFiYW5pbWcuY29tLzIwOTU5MGE0MGQ2MDU2YzJkZjE3MjExNjlkNTZiM2M5OGMyYmU5YmExZTU1Ni01SnJBVVVfZncyMzY?x-oss-process=image/format,png">
        <img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oYmltZy5odWFiYW5pbWcuY29tL2ZmODZmMDNmNmFkOGI0NGExYzY5NGQ1M2JjZTU4ZTllYTk1NzM0NDYxOTA2Zi1XTTlxb3lfZncyMzY?x-oss-process=image/format,png">
        <img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oYmltZy5odWFiYW5pbWcuY29tLzJhMTRkZDdlNzk4OGEyYTBiY2Q3ZjMwMzhiZjcyZTI4NTE2NjRiNzhmMzUwLUFIbHgxOF9mdzIzNg?x-oss-process=image/format,png">
        <img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oYmltZy5odWFiYW5pbWcuY29tL2Y0ZDgzMzJjOTA2NjhlYTk0ZGRiZmQzNjM1MDRhZmE2ZmUzNWU2ZTgxZDk0Ni15UkI1YkFfZncyMzY?x-oss-process=image/format,png">
        <img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oYmltZy5odWFiYW5pbWcuY29tL2ZmNDRjZDRkNGIyMmIwYjYzMGJlZTk5YzEwM2U2ZjYyM2M5YjdmZTYxN2QxNi1FS2tKT2RfZncyMzY?x-oss-process=image/format,png">
    </div>
</body>

</html>

<!-- 效果图:如下 -->

picture-wall

瀑布流

图片同宽不同高，使用columns即可，也可使用单属性column-count. 核心css代码如下：

        div {
            width: 600px;
            margin: 100px auto;
            column-count: 3;
        }
        img {
            width: 150px;
        }

html结构伪代码如下:


<div>
    <ul>
        <li><img src="src1"></li>
        <li><img src="src2"></li>
        <li><img src="src3"></li>
        <li><img src="src4"></li>
        <li><img src="src5"></li>
    </ul>
</div>

<!-- 效果图:如下 -->

瀑布流

参考链接

_冷月心

原创文章 451 获赞 858 访问量 28万+

关注他的留言板