整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
#.#.#.# HTTP/1.1 200 OK
Content-Type: text/html curl -I <https://www.harvard.edu> curl -I <http://www.harvard.edu> curl -I <https://harvard.edu> 200 OK
301 Moved Permanently
302 Found
304 Not Modified
304 Temporary Redirect
401 Unauthorized
403 Forbidden
404 Not Found
418 I'm a Teapot
500 Internal Server Error
503 Service Unavailable GET /search?q=cats HTTP/1.1
Host: www.google.com <!DOCTYPE html>
<!-- Demonstrates HTML -->
<html lang="en">
<head>
<title>hello, title</title>
</head>
<body>
hello, body
</body>
</html> <!DOCTYPE html>
<!-- Demonstrates paragraphs -->
<html lang="en">
<head>
<title>paragraphs</title>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis scelerisque quam, vel hendrerit lectus viverra eu. Praesent posuere eget lectus ut faucibus. Etiam eu velit laoreet, gravida lorem in, viverra est. Cras ut purus neque. In porttitor non lorem id lobortis. Mauris gravida metus libero, quis maximus dui porta at. Donec lacinia felis consectetur venenatis scelerisque. Nulla eu nisl sollicitudin, varius velit sit amet, vehicula erat. Curabitur sollicitudin felis sit amet orci mattis, a tempus nulla pulvinar. Aliquam erat volutpat.
</p>
<p>
Mauris ut dui in eros semper hendrerit. Morbi vel elit mi. Sed sit amet ex non quam dignissim dignissim et vel arcu. Pellentesque eget elementum orci. Morbi ac cursus ex. Pellentesque quis turpis blandit orci dapibus semper sed non nunc. Nulla et dolor nec lacus finibus volutpat. Sed non lorem diam. Donec feugiat interdum interdum. Vivamus et justo in enim blandit fermentum vel at elit. Phasellus eu ante vitae ligula varius aliquet. Etiam id posuere nibh.
</p>
<p>
Aenean venenatis convallis ante a rhoncus. Nullam in metus vel diam vehicula tincidunt. Donec lacinia metus sem, sit amet egestas elit blandit sit amet. Nunc egestas sem quis nisl mattis semper. Pellentesque ut magna congue lorem eleifend sodales. Donec tortor tortor, aliquam vitae mollis sed, interdum ut lectus. Mauris non purus quis ipsum lacinia tincidunt.
</p>
<p>
Integer at justo lacinia libero blandit aliquam ut ut dui. Quisque tincidunt facilisis venenatis. Nullam dictum odio quis lorem luctus, vel malesuada dolor luctus. Aenean placerat faucibus enim a facilisis. Maecenas eleifend quis massa sed eleifend. Ut ultricies, dui ac vulputate hendrerit, ex metus iaculis diam, vitae fermentum libero dui et ante. Phasellus suscipit, arcu ut consequat sagittis, massa urna accumsan massa, eu aliquet nulla lorem vitae arcu. Pellentesque rutrum felis et metus porta semper. Nam ac consectetur mauris.
</p>
<p>
Suspendisse rutrum vestibulum odio, sed venenatis purus condimentum sed. Morbi ornare tincidunt augue eu auctor. Vivamus sagittis ac lectus at aliquet. Nulla urna mauris, interdum non nibh in, vehicula porta enim. Donec et posuere sapien. Pellentesque ultrices scelerisque ipsum, vel fermentum nibh tincidunt et. Proin gravida porta ipsum nec scelerisque. Vestibulum fringilla erat at turpis laoreet, nec hendrerit nisi scelerisque.
</p>
<p>
Sed quis malesuada mi. Nam id purus quis augue sagittis pharetra. Nulla facilisi. Maecenas vel fringilla ante. Cras tristique, arcu sit amet blandit auctor, urna elit ultricies lacus, a malesuada eros dui id massa. Aliquam sem odio, pretium vel cursus eget, scelerisque at urna. Vestibulum posuere a turpis consectetur consectetur. Cras consequat, risus quis tempor egestas, nulla ipsum ornare erat, nec accumsan nibh lorem nec risus. Integer at iaculis lacus. Integer congue nunc massa, quis molestie felis pellentesque vestibulum. Nulla odio tortor, aliquam nec quam in, ornare aliquet sapien.
</p>
</body>
</html> <!DOCTYPE html>
<!-- Demonstrates headings (for chapters, sections, subsections, etc.) -->
<html lang="en">
<head>
<title>headings</title>
</head>
<body>
<h1>One</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis scelerisque quam, vel hendrerit lectus viverra eu. Praesent posuere eget lectus ut faucibus. Etiam eu velit laoreet, gravida lorem in, viverra est. Cras ut purus neque. In porttitor non lorem id lobortis. Mauris gravida metus libero, quis maximus dui porta at. Donec lacinia felis consectetur venenatis scelerisque. Nulla eu nisl sollicitudin, varius velit sit amet, vehicula erat. Curabitur sollicitudin felis sit amet orci mattis, a tempus nulla pulvinar. Aliquam erat volutpat.
</p>
<h2>Two</h2>
<p>
Mauris ut dui in eros semper hendrerit. Morbi vel elit mi. Sed sit amet ex non quam dignissim dignissim et vel arcu. Pellentesque eget elementum orci. Morbi ac cursus ex. Pellentesque quis turpis blandit orci dapibus semper sed non nunc. Nulla et dolor nec lacus finibus volutpat. Sed non lorem diam. Donec feugiat interdum interdum. Vivamus et justo in enim blandit fermentum vel at elit. Phasellus eu ante vitae ligula varius aliquet. Etiam id posuere nibh.
</p>
<h3>Three</h3>
<p>
Aenean venenatis convallis ante a rhoncus. Nullam in metus vel diam vehicula tincidunt. Donec lacinia metus sem, sit amet egestas elit blandit sit amet. Nunc egestas sem quis nisl mattis semper. Pellentesque ut magna congue lorem eleifend sodales. Donec tortor tortor, aliquam vitae mollis sed, interdum ut lectus. Mauris non purus quis ipsum lacinia tincidunt.
</p>
<h4>Four</h4>
<p>
Integer at justo lacinia libero blandit aliquam ut ut dui. Quisque tincidunt facilisis venenatis. Nullam dictum odio quis lorem luctus, vel malesuada dolor luctus. Aenean placerat faucibus enim a facilisis. Maecenas eleifend quis massa sed eleifend. Ut ultricies, dui ac vulputate hendrerit, ex metus iaculis diam, vitae fermentum libero dui et ante. Phasellus suscipit, arcu ut consequat sagittis, massa urna accumsan massa, eu aliquet nulla lorem vitae arcu. Pellentesque rutrum felis et metus porta semper. Nam ac consectetur mauris.
</p>
<h5>Five</h5>
<p>
Suspendisse rutrum vestibulum odio, sed venenatis purus condimentum sed. Morbi ornare tincidunt augue eu auctor. Vivamus sagittis ac lectus at aliquet. Nulla urna mauris, interdum non nibh in, vehicula porta enim. Donec et posuere sapien. Pellentesque ultrices scelerisque ipsum, vel fermentum nibh tincidunt et. Proin gravida porta ipsum nec scelerisque. Vestibulum fringilla erat at turpis laoreet, nec hendrerit nisi scelerisque.
</p>
<h6>Six</h6>
<p>
Sed quis malesuada mi. Nam id purus quis augue sagittis pharetra. Nulla facilisi. Maecenas vel fringilla ante. Cras tristique, arcu sit amet blandit auctor, urna elit ultricies lacus, a malesuada eros dui id massa. Aliquam sem odio, pretium vel cursus eget, scelerisque at urna. Vestibulum posuere a turpis consectetur consectetur. Cras consequat, risus quis tempor egestas, nulla ipsum ornare erat, nec accumsan nibh lorem nec risus. Integer at iaculis lacus. Integer congue nunc massa, quis molestie felis pellentesque vestibulum. Nulla odio tortor, aliquam nec quam in, ornare aliquet sapien.
</p>
</body>
</html> <!DOCTYPE html>
<!-- Demonstrates (ordered) lists -->
<html lang="en">
<head>
<title>list</title>
</head>
<body>
<ol>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ol>
</body>
</html> <!DOCTYPE html>
<!-- Demonstrates table -->
<html lang="en">
<head>
<title>table</title>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>*</td>
<td>0</td>
<td>#</td>
</tr>
</table>
</body>
</html> <!DOCTYPE html>
<!-- Demonstrates image -->
<html lang="en">
<head>
<title>image</title>
</head>
<body>
<!-- https://www.harvard.edu/ -->
<img alt="Harvard University" src="harvard.jpg">
</body>
</html> <!DOCTYPE html>
<!-- Demonstrates video -->
<html lang="en">
<head>
<title>video</title>
</head>
<body>
<!-- https://www.harvard.edu/ -->
<video autoplay loop muted playsinline width="1280">
<source src="halloween.mp4" type="video/mp4">
</video>
</body>
</html> <!DOCTYPE html>
<!-- Demonstrates link -->
<html lang="en">
<head>
<title>link</title>
</head>
<body>
Visit <a href="image.html">Harvard</a>.
</body>
</html> <!DOCTYPE html>
<!-- Demonstrates responsive design -->
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1, width=device-width">
<title>meta</title>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis scelerisque quam, vel hendrerit lectus viverra eu. Praesent posuere eget lectus ut faucibus. Etiam eu velit laoreet, gravida lorem in, viverra est. Cras ut purus neque. In porttitor non lorem id lobortis. Mauris gravida metus libero, quis maximus dui porta at. Donec lacinia felis consectetur venenatis scelerisque. Nulla eu nisl sollicitudin, varius velit sit amet, vehicula erat. Curabitur sollicitudin felis sit amet orci mattis, a tempus nulla pulvinar. Aliquam erat volutpat.
</body>
</html> <!DOCTYPE html>
<!-- Demonstrates Open Graph tags -->
<html lang="en">
<head>
<meta property="og:title" content="CS50">
<meta property="og:description" content="Introduction to the intellectual enterprises of computer science and the art of programming.">
<meta property="og:image" content="cat.jpg">
<title>meta</title>
</head>
<body>
...
</body>
</html> <!DOCTYPE html>
<!-- Demonstrates form -->
<html lang="en">
<head>
<title>search</title>
</head>
<body>
<form action="https://www.google.com/search" method="get">
<input name="q" type="search">
<input type="submit" value="Google Search">
</form>
</body>
</html> <!DOCTYPE html>
<!-- Demonstrates additional form attributes -->
<html lang="en">
<head>
<title>search</title>
</head>
<body>
<form action="https://www.google.com/search" method="get">
<input autocomplete="off" autofocus name="q" placeholder="Query" type="search">
<button>Google Search</button>
</form>
</body>
</html> <!DOCTYPE html>
<!-- Demonstrates inline CSS with P tags -->
<html lang="en">
<head>
<title>css</title>
</head>
<body>
<p style="font-size: large; text-align: center;">
John Harvard
</p>
<p style="font-size: medium; text-align: center;">
Welcome to my home page!
</p>
<p style="font-size: small; text-align: center;">
Copyright ? John Harvard
</p>
</body>
</html> <!DOCTYPE html>
<!-- Removes outer DIV -->
<html lang="en">
<head>
<title>css</title>
</head>
<body style="text-align: center">
<div style="font-size: large">
John Harvard
</div>
<div style="font-size: medium">
Welcome to my home page!
</div>
<div style="font-size: small">
Copyright ? John Harvard
</div>
</body>
</html> <!DOCTYPE html>
<!-- Uses semantic tags instead of DIVs -->
<html lang="en">
<head>
<title>css</title>
</head>
<body style="text-align: center">
<header style="font-size: large">
John Harvard
</header>
<main style="font-size: medium">
Welcome to my home page!
</main>
<footer style="font-size: small">
Copyright ? John Harvard
</footer>
</body>
</html> <!-- Demonstrates class selectors -->
<html lang="en">
<head>
<style>
.centered
{
text-align: center;
}
.large
{
font-size: large;
}
.medium
{
font-size: medium;
}
.small
{
font-size: small;
}
</style>
<title>css</title>
</head>
<body class="centered">
<header class="large">
John Harvard
</header>
<main class="medium">
Welcome to my home page!
</main>
<footer class="small">
Copyright ? John Harvard
</footer>
</body>
</html> .centered
{
text-align: center;
}
.large
{
font-size: large;
}
.medium
{
font-size: medium;
}
.small
{
font-size: small;
} <!DOCTYPE html>
<!-- Demonstrates external stylesheets -->
<html lang="en">
<head>
<link href="style.css" rel="stylesheet">
<title>css</title>
</head>
<body class="centered">
<header class="large">
John Harvard
</header>
<main class="medium">
Welcome to my home page!
</main>
<footer class="small">
Copyright ? John Harvard
</footer>
</body>
</html> <head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<title>favorites</title>
</head> if (x < y)
{
}
else
{
} let counter=0; counter++ for (let i=0; i < 3; i++)
{
} <!DOCTYPE html>
<!-- Demonstrates programmatic changes to style -->
<html lang="en">
<head>
<title>background</title>
</head>
<body>
<button id="red">R</button>
<button id="green">G</button>
<button id="blue">B</button>
<script>
let body=document.querySelector('body');
document.querySelector('#red').addEventListener('click', function() {
body.style.backgroundColor='red';
});
document.querySelector('#green').addEventListener('click', function() {
body.style.backgroundColor='green';
});
document.querySelector('#blue').addEventListener('click', function() {
body.style.backgroundColor='blue';
});
</script>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<script>
// Toggles visibility of greeting
function blink()
{
let body=document.querySelector('body');
if (body.style.visibility=='hidden')
{
body.style.visibility='visible';
}
else
{
body.style.visibility='hidden';
}
}
// Blink every 500ms
window.setInterval(blink, 500);
</script>
<title>blink</title>
</head>
<body>
hello, world
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<title>autocomplete</title>
</head>
<body>
<input autocomplete="off" autofocus placeholder="Query" type="text">
<ul></ul>
<script src="large.js"></script>
<script>
let input=document.querySelector('input');
input.addEventListener('keyup', function(event) {
let html='';
if (input.value) {
for (word of WORDS) {
if (word.startsWith(input.value)) {
html +=`<li>${word}</li>`;
}
}
}
document.querySelector('ul').innerHTML=html;
});
</script>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<title>geolocation</title>
</head>
<body>
<script>
navigator.geolocation.getCurrentPosition(function(position) {
document.write(position.coords.latitude + ", " + position.coords.longitude);
});
</script>
</body>
</html>在本课中，你学习了如何创建自己的 HTML 文件、设置它们的样式、利用第三方框架以及使用 JavaScript。具体来说，我们讨论了...
下次见！
原文出处：https://cs50.harvard.edu/college/2022/fall/notes/8/
否用CSS编写一个模拟打字输出“对”的过程？
有同学留言，让我用CSS实现这个效果。大家看看，是不是很有趣？七夕快到了，我想了想，写了一个demo。首先看一下效果，屏幕上会出现打字的动画，好像想了一下又删掉了“我爱你”，只留下了“对不起”，有点内涵。再看一次，打字的动画并不难。但如果只用CSS来实现，就有一定难度了。我们只看一下只用CSS实现这个效果的代码。这个效果除了打字，还需要文字的回删和光标的闪烁。只用CSS来做其实是有点难度的，代码不多，但需要扎实的基本功和思路。
先看一下现在的布局，这几个字出现了。这里用了一个叫做monospace的字体。
为什么要用这个字体呢？因为这套字体是等宽字体，每个字母和数字的宽度相等。每个汉字的宽度是字母的两倍。这样计算会更方便。由于我将body转换为弹性容器，所以r1的大小已经接近于里面文字的大小了。我们可以看到，r1占满了整个行，如果没有转换为弹性容器，它会占一行。
我们需要将其位置设置为原来的位置。现在需要用到伪元素了。先设置一下伪元素的背景颜色。由于伪元素是绝对定位，四个方向的偏移量为0，所以应该会占满整个h1。这样就覆盖住了所有的文字，然后做一个动画，让伪元素的左位移量值发生变化，这样文字就一个一个出现了。
我们来写一个动画。动画很简单，让最终状态的左位移量值为100%即可。动画开始时，左位移量值是从0开始的，和这里的初始值一样，因此可以省略from，直接写to。动画需要3秒钟完成，文字就可以显示出来了。现在的效果是很平滑的。我希望文字像打字一样一个一个出现，所以让它按七个字符的步骤出现，然后停在最后一个状态。
现在文字就这样一个一个地跳出来了。
·我们把红色的背景换成黑色，同时删除了前面的黑色边框。现在看起来有点像打字的效果，但正常打字还应该有光标。这里我们用after伪元素来实现，宽度设为2个像素即可。背景颜色设为黑色，出现了黑色的光标，但它应该随着文字移动。同样地，将前面的动画与之绑定。现在光标随着文字出现了，但应该有闪烁的效果。因此，我们需要编写一个动画，使光标闪烁，并在开始和结束时保持透明，并在中间过渡到白色。将动画的播放时间设置为500毫秒，并循环播放。现在，打字的效果就出来了。不过，先让光标出现，再让文字出现可能更真实。因此，我们将前两个动画的播放时间延迟了500毫秒。
好了！现在打字的效果基本完成了。但是，难点是如何在打完这句话后删除“我爱你”这几个字。
这并不难，但需要一些技巧。我们需要编写另一个动画来控制这两个伪元素的左移值，起始位置应为100%，即最右端。关键是to应该是多少，应该删除到do号处，也就是后面这段文字全部删除的位置，即对不起前面三个字的宽度。
to的值应该是多少？我们介绍一个很少使用的单位ch，一个ch等于一个字母，在使用等宽字体的情况下，它等于一个字母的宽度。两个ch正好等于一个汉字的宽度，也就是两个ch。左移值刚才已经分析过了，是对不起三个字的宽度，也就是6ch。将其绑定在伪元素上，让它在两秒钟内完成，并发布执行。
总共要删除四个字符，因此需要分四步执行，并在前面的动画完成后再执行，因此需要将动画的延迟时间设置为4.5秒，以保持动画的最终状态。两个伪元素都需要绑定这个动画，现在看一下最终的效果。没问题，已经删除了。
视频就到这里，感谢观看。
次看电影， 看到屏幕上一个个的文字蹦出来， 感觉像是有人在打字一样， 觉得挺有意思， 于是这里也用js实现了一个。
效果预览
最简单的打字效果
只要五行代码， 这里直接贴出来：
const dom=document.querySelector('.content')
const data='最简单的打字效果代码'.split('')
let index=0
function writing(index) {
if (index < data.length) {
dom.innerHTML +=data[index]
setTimeout(writing.bind(this), 200, ++index)
}
}是不是超级简单， 现在只要执行这个函数， 你就能看到这样的效果了：
实现原理：
通过setTimeout设置一个时间的间隔， 每隔一定时间向dom中插入对应的数据， 并将index加1， 然后重新调用这个写函数。
我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。
在字的后面加上模拟的闪烁光标
思路：
通过一个伪类after将光标定在dom的最后面， 并给一个显示隐藏的循环动画模拟光标的闪烁
通过css3的animation我们就实现了一个闪烁的光标效果。
实现：
我们可以把上面的代码放在一个class中， 然后我们执行writing时将这个class加到对应的dom中即可。
实现输入汉字加拼音
这里依赖一个插件pinyin， 大家可以通过npm安装
npm install pinyin
使用也很简单，我们只要把文本传入这个插件的方法中， 返回的就是每个汉字的拼音的数组。
import Pinyin from 'pinyin' let data='汉字' let pinyinData=Pinyin(data) //['han', 'zi']
然后我们通过模板字符串注入到对应的文字后面即可：
this.content.innerHTML +=`${arr[index]}<sup>(${pinyinData[index]})</sup>`这样就实现了加拼音的简单效果了。
加动画
加动画的代码也很简单， 关键是思路。
我开始的想法是将每个文字用span标签包裹起来， 给每个span加动画即可。后来发现这样行不通， 因为每次dom中的innerHTML其实是重新渲染的， 那样的话， 之前的span也会一直有动画， 这不是我们想要的效果。
解决方案：
给每个span加个class实现动画， 但在下个span渲染时清除之前span的class， 这样就实现了只有当前的span有动画了.
我这里直接选择了正则匹配粗暴的将class去掉。大家也可以寻找一种更好的方式解决。
代码如下：
this.content.innerHTML=this.content.innerHTML.replace(/span-animation/g, '') + `<span class="span-animation">${arr[index]}</span>`
实现效果：
源自：https://juejin.im/post/5ddf55835188257313541581
*请认真填写需求信息，我们会在24小时内与您取得联系。
