整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

因为写不出拖拽移动效果,我恶补了一下Dom中的各种距离

文来源于:程序员成长指北;作者:去伪存真

如有侵权,联系删除


背景


最近在项目中要实现一个拖拽头像的移动效果,一直对JS Dom拖拽这一块不太熟悉,甚至在网上找一个示例,都看得云里雾里的,发现遇到最大的拦路虎就是JS Dom各种各样的距离,让人头晕眼花,看到一个距离属性,大脑中的印象极其模糊,如同有一团雾一样,不知其确切含义。果然是基础不牢,地动山摇。今天决心夯实一下基础,亲自动手验证一遍dom各种距离的含义。


JS Dom各种距离释义


下面我们进入正题, 笔者不善于画图, 主要是借助浏览器开发者工具,通过获取的数值给大家说明一下各种距离的区别。


第一个发现 window.devicePixelRatio 的存在


本打算用截图软件丈量尺寸,结果发现截图软件显示的屏幕宽度与浏览器开发者工具获取的宽度不一致,这是为什么呢?


  • 截图软件显示的屏幕宽度是1920



  • window.screen.width显示的屏幕宽度是1536



这是怎么回事?原来在PC端,也存在一个设备像素比的概念。它告诉浏览器一个css像素应该使用多少个物理像素来绘制。要说设备像素比,得先说一下像素和分辨率这两个概念。


  • 像素 屏幕中最小的色块,每个色块称之为一个像素(Pixel)



  • 分辨率 分辨率=屏幕水平方向的像素点数 * 屏幕垂直方向的像素点数; 另外说一下,关于分辨率有多种定义,可以细分为显示分辨率[1]、图像分辨率[2]、打印分辨率[3]和扫描分辨率[4]等,此处是指显示分辨率。



  • 设备像素比


设备像素比的定义是:


window.devicePixelRatio =显示设备物理像素分辨率显示设备CSS像素分辨率\frac{显示设备物理像素分辨率}{显示设备CSS像素分辨率}显示设备CSS像素分辨率显示设备物理像素分辨率


根据设备像素比的定义, 如果知道显示设备横向的css像素值,根据上面的公式,就能计算出显示设备横向的物理像素值。


显示设备宽度物理像素值 = window.screen.width * window.devicePixelRatio;


设备像素比在我的笔记本电脑上显示的数值是1.25, 代表一个css逻辑像素对应着1.25个物理像素。



我前面的公式计算了一下,与截图软件显示的像素数值一致。这也反过来说明,截图软件显示的是物理像素值。



  • window.devicePixelRatio 是由什么决定的 ?


发现是由笔记本电脑屏幕的缩放设置决定的,如果设置成100%, 此时window.screen.width与笔记本电脑的显示器分辨率X轴方向的数值一致,都是1920(如右侧图所示), 此时屏幕上的字会变得比较小,比较伤视力。



  • 逻辑像素是为了解决什么问题?


逻辑像素是为了解决屏幕相同,分辨率不同的两台显示设备, 显示同一张图片大小明显不一致的问题。比如说两台笔记本都是15英寸的,一个分辨率是1920*1080,一个分辨率是960*540, 在1920*1080分辨率的设备上,每个格子比较小,在960*540分辨率的设备上,每个格子比较大。一张200*200的图片,在高分率的设备上看起来会比较小,在低分辨率的设备上,看起来会比较大。观感不好。为了使同样尺寸的图片,在两台屏幕尺寸一样大的设备上,显示尺寸看起来差不多一样大,发明了逻辑像素这个概念。

规定所有电子设备呈现的图片等资源尺寸统一用逻辑像素表示。然后在高分辨率设备上,提高devicePixelRatio, 比如说设置1920*1080设备的devicePixelRatio(dpr)等于2, 一个逻辑像素占用两个格子,在低分辨率设备上,比如说在960*540设备上设置dpr=1, 一个css逻辑像素占一个格子, 这样两张图片在同样的设备上尺寸大小就差不多了。通常设备上的逻辑像素是等于物理像素的,在高分辨率设备上,物理像素是大于逻辑像素数量的。由此也可以看出,物理像素一出厂就是固定的,而设备的逻辑像素会随着设备像素比设置的值不同而改变。但图片的逻辑像素值是不变的。


document.body、document.documentElement和window.screen的宽高区别


差别是很容易辨别的,如下图所示:


  • document.body -- body标签的宽高
  • document.documentElement -- 网页可视区域的宽高(不包括滚动条)
  • window.screen -- 屏幕的宽高



  • 网页可视区域不包括滚动条


如下图所示,截图时在未把网页可视区域的滚动条高度计算在内的条件下, 截图工具显示的网页可视区域高度是168, 浏览器显示的网页可视区域的高度是167.5, 误差0.5,由于截图工具是手动截图,肯定有误差,结果表明,网页可视区域的高度 不包括滚动条高度。宽度同理。



  • 屏幕和网页可视区域的宽高区别如下:


屏幕宽高是个固定值,网页可视区域宽高会受到缩放窗口影响。



  • 屏幕高度和屏幕可用高度区别如下:


屏幕可用高度=屏幕高度-屏幕下方任务栏的高度,也就是:


window.screen.availHeight = window.screen.height - 系统任务栏高度



scrollWidth, scrollLeft, clientWidth关系


scrollWidth(滚动宽度,包含滚动条的宽度)=scrollLeft(左边卷去的距离)+clientWidth(可见部分宽度); 
// 同理 
scrollHeight(滚动高度,包含滚动条的高度)=scrollTop(上边卷去的距离)+clientHeight(可见部分高度);


需要注意的是,上面这三个属性,都取的是溢出元素的父级元素属性。而不是溢出元素本身。本例中溢出元素是body(document.body),其父级元素是html(document.documentElement)。另外,


溢出元素的宽度(document.body.scrollWidth)=父级元素的宽度(document.documentElement.scrollWidth) - 滚动条的宽度(在谷歌浏览器上滚动条的宽度是19px)



<!DOCTYPE html> 
<html lang="en"> 
  <head>     
    <meta charset="UTF-8">     
    <meta http-equiv="X-UA-Compatible" content="IE=edge">     
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->     
    <title>JS Dom各种距离</title>     
    <style>         
      html, body {             
        margin: 0;         
      }         
      body {             
        width: 110%;             
        border: 10px solid blue;         
      }         
      .rect {             
        height: 50px;             
        background-color: green;         
      }     
    </style> 
  </head> 
  <body>     
    <div id="rect" class="rect"></div> 
  </body> 
</html>


元素自身和父级元素的scrollWidth和scrollLeft关系?


从下图可以看出:


  • 元素自身没有X轴偏移量,元素自身的滚动宽度不包含滚动条
  • 父级元素有X轴便宜量, 父级元素滚动宽度包含滚动条


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>JS Dom各种距离</title>
    <style>
        div {
            border: 1px solid #000;
            width: 200px;
            height: 600px;
            padding: 10px;
            background-color: green;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="rect">    111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
    </div>
</body>
<script>
</script>
</html>


offsetWidth和clientWidth的关系?


offsetWidth和clientWidth的共同点是都包括 自身宽度+padding , 不同点是offsetWidth包含border


如下图所示:


  • rect元素的clientWidth=200px(自身宽度) + 20px(左右padding) = 220px
  • rect元素的offsetWidth=200px(自身宽度) + 20px(左右padding) + 2px(左右boder) = 222px



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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>JS Dom各种距离</title>
    <style>
        div {
            border: 1px solid #000;
            width: 200px;
            height: 100px;
            padding: 10px;
            background-color: green;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="rect">111111111111111111111111111111111111111111111111</div>
</body>
<script>


</script>

</html>


event.clientX,event.clientY, event.offsetX 和 event.offsetY 关系


代码如下,给rect元素添加一个mousedown事件,打印出事件源的各种位置值。


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>JS Dom各种距离</title>
    <style>
        html,
        body {
            margin: 0;
        }

        body {
            width: 200px;
            padding: 10px;
            border: 10px solid blue;
        }

        .rect {
            height: 50px;
            background-color: green;
        }
    </style>
</head>

<body>

    <div id="rect" class="rect"></div>


</body>
<script>
    const rectDom = document.querySelector('#rect');

    rectDom.addEventListener('mousedown', ({ offsetX, offsetY, clientX, clientY, pageX, pageY, screenX, screenY }) => {
        console.log({ offsetX, offsetY, clientX, clientY, pageX, pageY, screenX, screenY });
    })
</script>

</html>


我们通过y轴方向的高度值,了解一下这几个属性的含义。 绿色块的高度是50px, 我们找个特殊的位置(绿色块的右小角)点击一下,如下图所示:


  • offsetY=49, 反推出这个值是相对于元素自身的顶部的距离
  • clientY=69, body标签的border-top是10,paiding是10, 反推出这个值是相对网页可视区域顶部的距离
  • screenY=140,目测肯定是基于浏览器窗口,


所以它们各自的含义,就很清楚了。



事件源属性

表示的距离

event.offsetX、event.offsetY

鼠标相对于事件源元素(srcElement)的X,Y坐标,

event.clientX、event.clientY

鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动偏移量。

event.pageX、event.pageY

鼠标相对于文档坐标的x,y坐标,文档坐标系坐标 = 视口坐标系坐标 + 滚动的偏移量

event.screenX、event.screenY

鼠标相对于用户显示器屏幕左上角的X,Y坐标


  • pageX和clientX的关系


我们点击下图绿色块的右下角,把pageX和clientX值打印出来。如下图所示:


  • 可视区域的宽度是360,点击点的clientX=359(由于是手动点击,有误差也正常)
  • 水平方向的偏移量是56
  • pageX是415,360+56=416,考虑到点击误差,可以推算出 ele.pageX = ele.clientX + ele.scrollLeft



getBoundingClientRect获取的top,bottom,left,right的含义


从下图可以看出,上下左右这四个属性,都是相对于浏览器可视区域左上角而言的。



从下图可以看出,当有滚动条出现的时候,right的值是359.6,而不是360+156(x轴的偏移量), 说明通过getBoundingClientRect获取的属性值是不计算滚动偏移量的,是相对浏览器可视区域而言的。



movementX和movementY的含义?


MouseEvent.movementX/movementX是一个相对偏移量。返回当前位置与上一个mousemove事件之间的水平/垂直距离。以当前位置为基准, 鼠标向左移动, movementX就是负值,向右移动,movementX就是正值。鼠标向上移动,movementY就是负值,向下移动,movementY就是正值。数值上,它们等于下面的计算公式。 这两个值在设置拖拽距离的时候高频使用,用起来很方便。


curEvent.movementX = curEvent.screenX - prevEvent.screenX; 
curEvent.movementY = curEvent.screenY - prevEvent.screenY;


想移动元素,mouse和drag事件怎么选?


mouse事件相对简单,只有mousedown(开始),mousemove(移动中),mouseup(结束)三种。与之对应的移动端事件是touch事件,也是三种touchstart(手指触摸屏幕), touchmove(手指在屏幕上移动), touchend(手指离开屏幕)。


相对而言, drag事件就要丰富一些。


  • 被拖拽元素事件


事件名

触发时机

触发次数

dragstart

拖拽开始时触发一次

1

drag

拖拽开始后反复触发

多次

dragend

拖拽结束后触发一次

1


  • 目标容器事件


事件名

触发时机

触发次数

dragenter

被拖拽元素进入目标时触发一次

1

dragover

被拖拽元素在目标容器范围内时反复触发

多次

drop

被拖拽元素在目标容器内释放时(前提是设置了dropover事件)

1


想要移动一个元素,该如何选择这两种事件类型呢? 选择依据是:


类型

选择依据

mouse事件

1. 要求丝滑的拖拽体验 2. 无固定的拖拽区域 3. 无需传数据

drag事件

1. 拖拽区域有范围限制 2. 对拖拽流畅性要求不高 3. 拖拽时需要传数据


现在让我们写个拖拽效果


光说不练假把式, 扫清了学习障碍后,让我们自信满满地写一个兼容PC端和移动端的拖动效果。不积跬步无以至千里,幻想一口吃个胖子,是不现实的。这一点在股市上体现的淋漓尽致。都是有耐心的人赚急躁的人的钱。所以,要我们沉下心来,打牢基础,硬骨头啃一点就会少一点,步步为营,稳扎稳打,硬骨头也会被啃成渣。



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

<head>
        
    <meta charset="UTF-8" />    
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />   
    <title>移动小鸟</title>
    <style>
        body {
            margin: 0;
            font-size: 0;
            position: relative;
            height: 100vh;
        }

        .bird {
            position: absolute;
            width: 100px;
            height: 100px;
            cursor: grab;
            z-index: 10;
        }
    </style>
</head>

<body>
    <img class="bird" src="./bird.png" alt="" />  
</body>

<script>
    let evtName = getEventName();
    // 鼠标指针相对于浏览器可视区域的偏移
    let offsetX = 0, offsetY = 0;
    // 限制图片可以X和Y轴可以移动的最大范围,防止溢出
    let limitX = 0, limitY = 0;

    // 确保图片加载完
    window.onload = () => {
        const bird = document.querySelector(".bird");
        const { width, height } = bird;

        limitX = document.documentElement.clientWidth - width;
        limitY = document.documentElement.clientHeight - height;

        bird.addEventListener(evtName.start, (event) => {
            // 监听鼠标指针相对于可视窗口移动的距离
            // 注意移动事件要绑定在document元素上,防止移动过快,位置丢失
            document.addEventListener(evtName.move, moveAt);
        });

        // 鼠标指针停止移动时,释放document上绑定的移动事件
        // 不然白白产生性能开销
        document.addEventListener(evtName.end, () => {
            document.removeEventListener(evtName.move, moveAt);
        })

        // 移动元素
        function moveAt({ movementX, movementY }) {
            const { offsetX, offsetY } = getSafeOffset({ movementX, movementY });

            window.requestAnimationFrame(() => {
                bird.style.cssText = `left:${offsetX}px;top:${offsetY}px;`;
            });
        };
    };

    // 获取安全的偏移距离
    const getSafeOffset = ({ movementX, movementY }) => {
        // //距上次鼠标位置的X,Y方向的偏移量
        offsetX += movementX;
        offsetY += movementY;

        // 防止拖拽元素被甩出可视区域
        if (offsetX > limitX) {
            offsetX = limitX;
        }

        if (offsetX < 0) {
            offsetX = 0;
        }

        if (offsetY > limitY) {
            offsetY = limitY;
        }

        if (offsetY < 0) {
            offsetY = 0;
        }

        // console.log({ movementX, movementY, offsetX, offsetY });
        return { offsetX, offsetY };
    }

    // 区分是移动端还是PC端移动事件
    function getEventName() {
        if ("ontouchstart" in window) {
            return {
                start: "touchstart",
                move: "touchmove",
                end: "touchend",
            };
        } else {
            return {
                start: "pointerdown",
                move: "pointermove",
                end: "pointerup",
            };
        }
    }
</script>

</html>



彩蛋


在chrome浏览器上发现一个奇怪的现象,设置的border值是整数,计算出来的值却带有小数



而当border值是4的整数倍的时候,计算值是正确的



看了这篇文章[5]解释说,浏览器可能只能渲染具有整数物理像素的border值,不是整数物理像素的值时,计算出的是近似border值。这个解释似乎讲得通,在设备像素比是window.devicePixelRatio=1.25的情况下, 1px对应的是1.25物理像素, 1.25*4的倍数才是整数,所以设置的逻辑像素是4的整数倍数,显示的渲染计算值与设置值一致,唯一让人不理解的地方,为什么padding,margin,width/height却不遵循同样的规则。


参考资料


[1] https://baike.baidu.com/item/%E6%98%BE%E7%A4%BA%E5%88%86%E8%BE%A8%E7%8E%87/3431933?fromModule=lemma_inlink


[2] https://baike.baidu.com/item/%E5%9B%BE%E5%83%8F%E5%88%86%E8%BE%A8%E7%8E%87/872374?fromModule=lemma_inlink


[3] https://baike.baidu.com/item/%E6%89%93%E5%8D%B0%E5%88%86%E8%BE%A8%E7%8E%87/9560832?fromModule=lemma_inlink


[4] https://baike.baidu.com/item/%E6%89%AB%E6%8F%8F%E5%88%86%E8%BE%A8%E7%8E%87/7122498?fromModule=lemma_inlink


[5] https://www.w3.org/TR/CSS22/cascade.html#specified-value

个人编写HTML使用的软件是dreamweaver,这个软件的话,正版是要购买的,一开始学习HTML就是用的这个软件了,挺好用的,而且代码提示特别方便,不用担心太多的标签和属性记劳~

1.什么是HTML?

  • HTML 是用来描述网页的一种语言,指的是超文本标记语言: HyperText Markup Language;
  • HTML 不是一种编程语言,而是一种标记语言;
  • HTML文档也叫做 web 页面;

2.HTML基本结构

  • <!DOCTYPE html>:文档声明;
  • <html>:HTML 页面的根元素;
  • <head>:用于定义文档的头部,是所有头部元素的容器;
  • <meta>:提供有关页面的元信息,位于文档的头部,不包含任何内容;
  • <title>:文档的标题;
  • <body>:定义文档的主体,包含文档的所有内容;

3.HTML标签使用?

  • HTML 标签是由尖括号包围的关键词,且通常是成对出现的如<a></a>,当然也有单个的,只不过比较少如<hr>
  • 标签对中的第一个标签表示开始标签,第二个标签表示结束标签;

4.HTML常用标签介绍

除了HTML基本结构的几个标签以外,HTML还有一些比较常用的基本标签;

(1)文本标签:

  • h1-h6:用于定义标题,h1为最大标题,h6为最小标题;
  • p:定义段落;
  • span:组合文档中的行内元素;
  • br:换行;
  • hr:水平线;
  • strong/b:加粗文字;
  • em/i:斜体;
  • u:下划线;
  • s:删除线;
  • pre:定义预格式化的文本,保持原有格式;
  • sub:下标;
  • sup:上标;
  • blockquote:块引用;

(2)布局标签:

  • div:定义文档中的分区或节,把文档分割为独立的、不同的部分;
  • header:定义页面的头部;
  • aside:用作文章的侧栏;
  • section:定义文档中的节;
  • footer:定义文档或节的页脚,通常包含文档的作者、版权信息、使用条款链接、联系信息等;
  • article:规定文章独立的其他内容,如标题、内容、评论;

(3)多媒体标签:

  • img:用于在网页中插入图像;
  • audio:定义声音,比如音乐或其他音频流;
  • video:定义视频,比如电影片段或其他视频流;

(4)超链接标签:

  • a:定义超链接,指定页面间的跳转;

(5)序列化标签:

  • ul:定义无序列表;
  • ol:定义有序列表;
  • li:定义列表项目,可用在无序列表ul和有序列表ol中;
  • dl:定义了定义列表;
  • dt:定义了定义列表中的项目(即术语部分);
  • dd:在定义列表中定义条目的定义部分;

(6)表格标签:

  • table:定义 HTML 表格;
  • tr:定义表格的行;
  • td:定义表格的单元;
  • th:定义表头;
  • caption:定义表格标题;
  • col:为表格中一个或多个列定义属性值;
  • colgroup:用于对表格中的列进行组合,以便对其进行格式化;
  • thead:定义表格的表头;
  • tbody:表格主体,也就是正文部分;
  • tfoot:定义表格的页脚(脚注或表注);

(7)表单标签:

  • form:用于为用户输入创建 HTML 表单;
  • input:用于搜集用户信息;
  • button:定义一个按钮;
  • select:创建单选或多选菜单;
  • option:定义下拉列表中的一个选项;
  • textarea:定义多行的文本输入控件;
  • label:为 input 元素定义标注(标记);
  • fieldset:用于将表单内的相关元素分组;
  • legend:为 fieldset 元素定义标题;

5.HTML注意事项

  • HTML文件当以后缀名为 .html 或 .htm 来命名;
  • HTML标签和属性是不区分大小写的,建议HTML标签和属性都小写,属性值必须用双引号包围;
  • HTML标签都是以开始标签起始,以结束标签终止;
  • HTML标签之间尽量缩进与换行,每行代码不要过长,方便阅读和维护;
  • HTML标签使用必须符合标签嵌套规则,如禁止a标签嵌套a标签,p标签嵌套div标签等;
  • 建议不使用HTML已经废弃的或者不赞成使用的标签,少使用table布局、iframe框架嵌套以及flash播放器;


用html标签使用介绍

本文主要记录常用的html标签使用说明,用起来的时候偶尔查查。

常用html标签列表

标签

英文全拼

作用

特点

​<html></html>​

html

网页的根标签

所有的标签都要写在这一对根标签里面

​<head></head>​

head

网页的头标签

包括完档的属性和信息

​<body></body>​

body

网页的主题

包含文档的所有内容

​<div></div>​

division

定义一个区域

浏览器通常会在​​<div>​​前后放置一个换行符

​<!-- 注释 -->​

-

注释

单标签

​<br>或<br/>​

break

换行

单标签,不会在其前后创建空白行

​<hr>或<hr/>​

horizontal rule

添加水平线

单标签

​<img src="">​

image

添加图片

单标签

​<embed src="">​

embed

嵌入外部应用

单标签

​<meta>​

meta

提供有关页面的元信息

单标签,​​<meta>​​​标签通常位于​​<head>​​区域内

​<link>​

link

定义文档与外部资源的关系

单标签,​​<link>​​​标签只能存在于​​<head>​​区域内,不过它可出现任何次数。

​<p></p>​

paragraph

定义段落

自动在其前后创建空白行

​<h1> to <h6>​

Header 1 to Header 6

定义标题

h1在一个页面里只能出现一次

​<strong></strong>​

strong

文本加粗

加粗标记该文本

​<b></b>​

bold

文本加粗

加粗显示文本,不推荐使用

​<em></em>​

emphasize

文本倾斜

倾斜标记文本

​<i></i>​

italic

文本倾斜

倾斜显示文本,不推荐使用

​<del></del>​

delete

文本添加删除线

-

​<s></s>​

strike

文本添加删除线

不推荐使用

​<ins></ins>​

insert

文本添加下划线

-

​<u></u>​

underline

文本添加下划线

不推荐使用

​<a href="">填写内容</a>​

anchor

添加超链接

最好使用CSS来改变链接的样式

​<ul></ul>​

unordered list

定义无序列表

通常与​​<li>​​标签一起使用

​<ol></ol>​

ordered list

定义有序列表

通常与​​<li>​​标签一起使用

​<li></li>​

list item

创建列表项

可与各种列表定义标签一起使用

​<dl></dl>​

definition list

定义描述列表

通常与​​<dt>​​​和​​<dd>​​一起使用

​<dt></dt>​

definition term

定义条目

定义描述列表的项目

​<dd></dd>​

definition description

定义描述

对描述列表中的项目进行描述

​<table></table>​

table

定义HTML表格

尽可能通过样式改变表格外观

​<tr></tr>​

table row

定义表格的行

一个​​<tr>​​​标签包含一个或多个​​<th>​​​或​​<td>​​标签

​<th></th>​

table headline

定义表格每一列的标题

该标签的文本通常呈现为粗体且居中

​<td></td>​

table data

定义表格中的单元格数据

该标签的文本呈现为普通且左对齐

​<caption>表格标题</caption>​

caption

定义整个表格的标题

​<caption>​​​标签必须直接放在​​<table>​​标签后

​<input type="">​

input

定义输入控件

输入字段可通过多种方式改变,取决于type属性

​select​

select

定义下拉列表

​<select>​​​中的​​<option>​​标签定义了列表中的可用选项

​<option></option>​

option

定义下拉列表中的可用项

​<option>​​标签不可自由定义宽高

​<optgroup></optgroup>​

options group

定义选项组

​<optgroup>​​标签用于把相关的选项组合在一起

​<textarea></textarea>​

textarea

定义多行的文本输入控件

文本的默认字体是等宽字体

​<form></form>​

form

定义表单

​<form>​​可以包含多个元素

​<fieldset></fieldset>​

field set

定义围绕表单中元素的边框

​<legend>​​​为​​<fieldset>​​定义标题

​<legend></legend>​

legend

为​​<fieldset>​​定义标题

​<legend>​​通过css设定样式

​<progress></progress>​

progress

定义运行中的任务进度

​<progress>​​​是HTML5中的新标签,​​<progress>​​标签不适合用来表示度量衡

​<meter></meter>​

meter

度量衡

​<meter>​​​是HTML5的新标签,​​<meter>​​标签不适合用来表示进度条

​<audio></audio>​

audio

添加音频

​<audio>​​标签是HTML5的新标签

​<video></video>​

video

添加视频

​<video>​​标签是HTML5的新标签

​<source>​

source

定义媒介资源

​<source>​​标签是HTML5中的新标签

常用标签使用说明

  • 常用写法:​​<img src="" alt="" title=""width="" height=""​​>
  • src:图片的来源(必写属性)
  • alt:图像不显示时的替代文本
  • title:鼠标在移动到元素上的文本提示
  • width/height:图片宽高,没有定义宽高的时候,图片按照百分之百比例显示,更改图片的宽度或者高度,图片等比例缩放

普通用法

  • 常用写法:​​<a href="" title="" target="">填写内容</a>​
  • href:去往的路径(必写属性)
  • title:鼠标在移动到元素上的文本提示
  • target:规定在何处打开路径
  • _blank:新页面打开
  • _parent:在父窗口中打开链接
  • _self:当前页面跳转(默认值)
  • _top:在当前窗体打开链接,并替换当前的整个窗体
  • 当href的值为javascript:void(0); 或 javascript:; ,表示超链接不做任何事情,不做任何跳转
  • 当href的值为#,表示超链接为空链接,点击此链接时会跳转到页首的位置

锚点链接

锚点链接通过点击超链接,自动跳转到我们设置锚点的位置,类似于word的目录导航。建立锚点的元素必须要有id或name属性,最好两个都有。这里只跳转本页面元素,其他页面跳转自行搜索。
具体做法如下:

  1. 给目标元素设置id值,如​​<p id="id1"></p>​
  2. 设置锚点超链接,锚点的超链接路径一定包含"#",后面紧跟元素的id或者name,如​​<a href="#id1"></a>​

示例如下。为了显示效果,通过使用lorem自动生成随机文本(具体使用方法搜索,一般直接输入就行),lorem*50表示重复lorem15次。

<a href="#id2">a</a>

  <p id="id1">
    (lorem*15)
  </p>

     (lorem*15)

  <p id="id2">
     (lorem*15)
  </p>

超链接全局设置

在页面head中写入代码可以设置超链接的全局跳转设置

<head>
  <!-- 让页面所有的超链接新页面打开 -->
  <base target="_blank">  
</head>

charset编码

  • 常用写法: ​​<meta charset="UTF-8">​
  • charset:定义文档的字符编码
  • ASCII/ANSI/Unicode:英语
  • GBK:亚洲通用字符集
  • GB2312:中文简体
  • Big5:台澳港繁体
  • UTF-8:世界通用字符集

name

  1. 关键字
  • 常用写法: ​​<meta name="keywords" content="">​
  • 描述:告诉搜索引擎网页的关键字,尽量将重要的关键词放在前面
  1. 网页描述
  • 常用写法: ​​<meta name="keywords" content="">​
  • 描述:告诉搜索引擎网页的主要内容
  1. 作者
  • 常用写法: ​​<meta name="author" content="">​
  • 描述:告诉搜索引擎网页的作者
  1. 文件检索
  • 常用写法: ​​<meta name="robots" content="all | none | index | noindex | follow | nofollow">​
  • 描述:有时候会有一些站点内容,不希望被ROBOTS抓取而公开。为了解决这个问题,ROBOTS开发界提供了两个办法:一个是robots.txt,另一个是The Robots META标签。
  • content: 文件检索方式
  • all:文件将被检索,且页面上的链接可以被查询 (默认值)
  • none:文件将不被检索,且页面上的链接不可以被查询
  • index:文件将被检索;
  • noindex:文件将不被检索,但页面上的链接可以被查询
  • follow:页面上的链接可以被查询
  • nofollow:文件将不被检索,页面上的链接可以被查询

网页自动跳转

  • 常用写法: ​​<meta http-equiv="Refresh" content="3;url=http://www.baidu.com" />​
  • 描述:网页5秒后自动跳转到谷歌主页
  • url:为空则刷新本页
  • 常用写法:
  • 描述:规定当前文档与被链接文档/资源之间的关系
  • rel:定义当前文档与被链接文档之间的关系。rel 是 relationship的英文缩写(必写属性)
  • type:规定被链接文档的类型
  • href:链接的文件路径
  • 示例:
  • 链接外部样式表:​​<link rel="stylesheet" type="text/css" href="a.css">​
  • 设置网页icon图标:​​<link rel="icon" href="a.ico">​

列表

无序列表

无序列表使用粗体圆点进行标记。简单示例如下。

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        ...
    </ul>

有序列表

有序列表使用数字进行标记,我们可以通过整数值start指定列表编号的起始值。简单示例如下。

<ol start="2">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        ...
    </ol>

描述列表

通过描述列表自定义列表,列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。简单示例如下。

<dl>
        <dt>A</dt> <!-- 小标题 -->
            <dd>A1</dd> <!-- 解释标题 -->
            <dd>A2</dd> <!-- 解释标题 -->
        <dt>B</dt> <!-- 小标题 -->
            <dd>B1</dd> <!-- 解释标题 -->
            <dd>B2</dd> <!-- 解释标题 -->
    </dl>

表格

基础表格

  • 常用写法:​​<table width="" height="" border="" cellspacing="" cellpadding=""></table>​
  • width:表格宽度
  • height:表格高度
  • border:边框宽度
  • cellspacing:单元格间距
  • cellpadding:内容与边框间距

简单示例如下。

<table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">
<caption>表格标题</caption> <!-- 定义表格标题 -->

<tr>
    <!-- 定义表格的行 -->
    <td>A1</td> <!-- 定义表格该行第一列中的数据 -->
    <td>B1</td>
    <td>C1</td>
</tr>
<tr>
    <!-- 定义表格的行 -->
    <th>A</th> <!-- 定义表格每一列的标题 -->
    <th>B</th>
    <th>C</th>
</tr>
<tr>
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
</tr>
</table>

单元格合并

  • 常用写法:​​<td colspan=“” rowspan=“”></td>​
  • 描述:告诉表格该单元格可以横跨colspan列,纵跨rowspan行

简单示例如下。

<table border="2" cellspacing="1px" width="400px" height="100px">
<caption><strong>表格标题</strong></caption> <!-- 定义表格标题 -->
<tr height="100">
    <!-- 定义表格的行 -->
    <td colspan="2">A1</td> <!-- 定义该行可以横跨两列 -->
    <td>B1</td>
</tr>

<tr height="100">
    <td>A2</td>
    <td>B2</td>
    <td rowspan="2">C</td> <!-- 定义该行可以横跨两行 -->
</tr>

<tr height="100">
    <td>A3</td>
    <td>B3</td>
</tr>
</table>

对于​​<input>​​不同的type属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

文本输入框

  • 常用写法:​​<input type="text" name="" maxlength="" readonly="" disabled="" value="">​
  • type:规定输入字段的类型
  • name:输入框的名字
  • maxlength:输入文本长度
  • readonly:输入框是否只读
  • disabled:输入框是否未激活
  • value:输入框默认值

简单示例如下。

<input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用户名">

密码输入框

  • 常用写法:​​<input type="password" name="">​
  • type:规定输入字段的类型
  • name:输入框的名字
  • 密码输入框的其他参数和文本输入框一样

简单示例如下。

<input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密码">

单选框

  • 常用写法:​​<input type="radio" name="" checked="checked">​
  • type:规定输入字段的类型
  • name:输入框的名字
  • checked:设定该输入框被预先选定
  • 想要多个单选框只能有一个被选中,设置所有单选框的name值相同即可实现

示例一,两个单选框都可以被选中

<div>
    <input type="radio" name="man" checked="checked">男
</div>
<div>
    <input type="radio" name="woman">女
</div>

示例二,两个单选框只能有一个被选中

<div>
    <input type="radio" name="gender" checked="checked">男
  </div>
  <div>
    <input type="radio" name="gender">女
  </div>

下拉列表

​<select>​

  • 常用写法:​​<select multiple=""></select>​
  • multiple:当该属性为true时,可选择多个选项。

​<optgroup>​

  • 常用写法:​​<optgroup label=""></optgroup>​
  • label:设定选项组的描述。

​<option>​

  • 常用写法:​​<option value="" selected="">选项值</option>​
  • value:定义送往服务器的选项值。
  • selected:当该属性为true时,该选项被默认选择。

示例一,单选下拉列表

<select>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c" selected='selected'>c</option>  <!-- 默认选中 -->
  </select>

示例二,带组合的单选下拉列表

<select>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1">b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

示例三,带组合的多选下拉列表

<select multiple=”multiple”>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1" selected='selected'>b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

多选框

  • 常用写法:​​<input type="checkbox" checked="">​
  • type:规定输入字段的类型
  • checked:设定该输入框被预先选定

简单示例如下。

<input type="checkbox"  checked="checked">A
  <input type="checkbox">B

文本框

  • 常用写法:​​<textarea cols="" rows="" placeholder=""></textarea>​
  • cols:控制可见文本的列数
  • rows:控制可见文本的行数
  • placeholder:提示字符

简单示例如下。

<textarea cols="5" rows="2" placeholder="text"></textarea>

文本上传控件

  • 常用写法:​​<input type="file" accept=""/>​
  • accept:规定提交的文件的类型

简单示例如下。

<input type="file" accept="image/gif, image/jpeg"/>

其他类型按钮

<input type="submit">文件提交按钮
  <input type="button" value="">普通按钮
  <input type="image" src="">图片按钮
  <input type="reset">重置按钮
  <input type="url">网址控件
  <input type="date">日期控件 
  <input type="time">时间控件
  <!--email提供了邮箱的完整验证,必须包含@和后缀,如果不满足验证,会阻止表单提交-->
  <input type="email">邮件控件
  <input type="number" step="3">数字控件
  <input type="range" step="100">滑块控件
  <input type="color">颜色控件

表单

示例一,普通表单

<form>
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="提交">
  </form>

示例二,带分组信息表单

<form>
    <fieldset>
      <legend>Personalia:</legend>
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="提交">
    </fieldset>

    First nameA: <input type="text" name="fname"><br>
    Last nameB: <input type="text" name="lname"><br>
  </form>

​<progress>​​​与​​<meter>​​主要区别和用法见​​HTML5 progress和meter控件​​

​<progress>​

  • 常用写法:​​<progress value="" max=""></progress>​
  • value:规定进程的当前值
  • max:规定需要完成的值

简单示例如下。

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

​<meter>​

  • 常用写法:​​<meter min="" low="" high="" max="" value="" optimum=""></meter>​
  • value:规定度量的当前值
  • max:规定被界定为高的值的范围
  • min:规定被界定为低的值的范围
  • low:规定被界定为低的值的范围
  • high:规定被界定为高的值的范围
  • optimum:规定度量的最优值
  • 具体使用见meter标签改变颜色规则

简单示例如下

<meter min="0" low="40" high="90" max="100" value="91"></meter>
<meter min="0" low="40" high="90" max="100" value="90"></meter>

多媒体资源

​<audio>​

  • 常用写法:​​<audio src="" controls autoplay loop></audio>​
  • src:规定音频文件的url
  • controls:如果出现该属性,显示音频播放器的控制面板(比如播放/暂停按钮)
  • autoplay:如果出现该属性,自动播放音频
  • loop:如果出现该属性,循环播放音频

简单示例如下

<audio src="demo.mp3" controls autoplay></audio>

​<video>​

  • 常用写法:​​<video src="" width="" height="" poster="" controls autoplay loop></video>​
  • src:规定视频文件的url
  • width:设置视频播放器的宽度(pixels)
  • height:设置视频播放器的高度(pixels)
  • poster:设置视频未播放时展示的画面
  • controls:如果出现该属性,显示音频播放器的控制面板(比如播放/暂停按钮)
  • autoplay:如果出现该属性,自动播放音频
  • loop:如果出现该属性,循环播放音频

简单示例如下

<video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>

​<source>​

  • 常用写法:​​<source src="" type="">​
  • src:规定媒体文件的url
  • type:规定媒体文件的类型
  • 因为不同浏览器支持的媒体格式不同,当添加媒体文件时,需要考虑浏览器是否支持它们。我们可以准备多种不同格式的媒体文件,然后使用source 标签,让浏览器从上到下选择支持的媒体格式

简单示例如下

<video controls>
    <source src="demo.mp3" type="audio/mp3">
    <source src="demo.mp4" type="video/mp4">
    您的浏览器不支持video元素。
  </video>

特殊字符

​​HTML特殊字符编码对照表​​

参考

  • ​​HTML基础​​
  • ​​HTML 参考手册​​
  • HTML中标签对应的英文
  • meter标签改变颜色规则
  • HTML5 progress和meter控件