整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
#.#.#.# 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>在本課中，你學習了如何創(chuàng)建自己的 HTML 文件、設置它們的樣式、利用第三方框架以及使用 JavaScript。具體來說，我們討論了...
下次見！
原文出處：https://cs50.harvard.edu/college/2022/fall/notes/8/
否用CSS編寫一個模擬打字輸出“對”的過程？
有同學留言，讓我用CSS實現(xiàn)這個效果。大家看看，是不是很有趣？七夕快到了，我想了想，寫了一個demo。首先看一下效果，屏幕上會出現(xiàn)打字的動畫，好像想了一下又刪掉了“我愛你”，只留下了“對不起”，有點內涵。再看一次，打字的動畫并不難。但如果只用CSS來實現(xiàn)，就有一定難度了。我們只看一下只用CSS實現(xiàn)這個效果的代碼。這個效果除了打字，還需要文字的回刪和光標的閃爍。只用CSS來做其實是有點難度的，代碼不多，但需要扎實的基本功和思路。
先看一下現(xiàn)在的布局，這幾個字出現(xiàn)了。這里用了一個叫做monospace的字體。
為什么要用這個字體呢？因為這套字體是等寬字體，每個字母和數(shù)字的寬度相等。每個漢字的寬度是字母的兩倍。這樣計算會更方便。由于我將body轉換為彈性容器，所以r1的大小已經(jīng)接近于里面文字的大小了。我們可以看到，r1占滿了整個行，如果沒有轉換為彈性容器，它會占一行。
我們需要將其位置設置為原來的位置。現(xiàn)在需要用到偽元素了。先設置一下偽元素的背景顏色。由于偽元素是絕對定位，四個方向的偏移量為0，所以應該會占滿整個h1。這樣就覆蓋住了所有的文字，然后做一個動畫，讓偽元素的左位移量值發(fā)生變化，這樣文字就一個一個出現(xiàn)了。
我們來寫一個動畫。動畫很簡單，讓最終狀態(tài)的左位移量值為100%即可。動畫開始時，左位移量值是從0開始的，和這里的初始值一樣，因此可以省略from，直接寫to。動畫需要3秒鐘完成，文字就可以顯示出來了。現(xiàn)在的效果是很平滑的。我希望文字像打字一樣一個一個出現(xiàn)，所以讓它按七個字符的步驟出現(xiàn)，然后停在最后一個狀態(tài)。
現(xiàn)在文字就這樣一個一個地跳出來了。
·我們把紅色的背景換成黑色，同時刪除了前面的黑色邊框。現(xiàn)在看起來有點像打字的效果，但正常打字還應該有光標。這里我們用after偽元素來實現(xiàn)，寬度設為2個像素即可。背景顏色設為黑色，出現(xiàn)了黑色的光標，但它應該隨著文字移動。同樣地，將前面的動畫與之綁定。現(xiàn)在光標隨著文字出現(xiàn)了，但應該有閃爍的效果。因此，我們需要編寫一個動畫，使光標閃爍，并在開始和結束時保持透明，并在中間過渡到白色。將動畫的播放時間設置為500毫秒，并循環(huán)播放。現(xiàn)在，打字的效果就出來了。不過，先讓光標出現(xiàn)，再讓文字出現(xiàn)可能更真實。因此，我們將前兩個動畫的播放時間延遲了500毫秒。
好了！現(xiàn)在打字的效果基本完成了。但是，難點是如何在打完這句話后刪除“我愛你”這幾個字。
這并不難，但需要一些技巧。我們需要編寫另一個動畫來控制這兩個偽元素的左移值，起始位置應為100%，即最右端。關鍵是to應該是多少，應該刪除到do號處，也就是后面這段文字全部刪除的位置，即對不起前面三個字的寬度。
to的值應該是多少？我們介紹一個很少使用的單位ch，一個ch等于一個字母，在使用等寬字體的情況下，它等于一個字母的寬度。兩個ch正好等于一個漢字的寬度，也就是兩個ch。左移值剛才已經(jīng)分析過了，是對不起三個字的寬度，也就是6ch。將其綁定在偽元素上，讓它在兩秒鐘內完成，并發(fā)布執(zhí)行。
總共要刪除四個字符，因此需要分四步執(zhí)行，并在前面的動畫完成后再執(zhí)行，因此需要將動畫的延遲時間設置為4.5秒，以保持動畫的最終狀態(tài)。兩個偽元素都需要綁定這個動畫，現(xiàn)在看一下最終的效果。沒問題，已經(jīng)刪除了。
視頻就到這里，感謝觀看。
次看電影， 看到屏幕上一個個的文字蹦出來， 感覺像是有人在打字一樣， 覺得挺有意思， 于是這里也用js實現(xiàn)了一個。
效果預覽
最簡單的打字效果
只要五行代碼， 這里直接貼出來：
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)
}
}是不是超級簡單， 現(xiàn)在只要執(zhí)行這個函數(shù)， 你就能看到這樣的效果了：
實現(xiàn)原理：
通過setTimeout設置一個時間的間隔， 每隔一定時間向dom中插入對應的數(shù)據(jù)， 并將index加1， 然后重新調用這個寫函數(shù)。
我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。
在字的后面加上模擬的閃爍光標
思路：
通過一個偽類after將光標定在dom的最后面， 并給一個顯示隱藏的循環(huán)動畫模擬光標的閃爍
通過css3的animation我們就實現(xiàn)了一個閃爍的光標效果。
實現(xiàn)：
我們可以把上面的代碼放在一個class中， 然后我們執(zhí)行writing時將這個class加到對應的dom中即可。
實現(xiàn)輸入漢字加拼音
這里依賴一個插件pinyin， 大家可以通過npm安裝
npm install pinyin
使用也很簡單，我們只要把文本傳入這個插件的方法中， 返回的就是每個漢字的拼音的數(shù)組。
import Pinyin from 'pinyin' let data='漢字' let pinyinData=Pinyin(data) //['han', 'zi']
然后我們通過模板字符串注入到對應的文字后面即可：
this.content.innerHTML +=`${arr[index]}<sup>(${pinyinData[index]})</sup>`這樣就實現(xiàn)了加拼音的簡單效果了。
加動畫
加動畫的代碼也很簡單， 關鍵是思路。
我開始的想法是將每個文字用span標簽包裹起來， 給每個span加動畫即可。后來發(fā)現(xiàn)這樣行不通， 因為每次dom中的innerHTML其實是重新渲染的， 那樣的話， 之前的span也會一直有動畫， 這不是我們想要的效果。
解決方案：
給每個span加個class實現(xiàn)動畫， 但在下個span渲染時清除之前span的class， 這樣就實現(xiàn)了只有當前的span有動畫了.
我這里直接選擇了正則匹配粗暴的將class去掉。大家也可以尋找一種更好的方式解決。
代碼如下：
this.content.innerHTML=this.content.innerHTML.replace(/span-animation/g, '') + `<span class="span-animation">${arr[index]}</span>`
實現(xiàn)效果：
源自：https://juejin.im/post/5ddf55835188257313541581
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
