HTML-tag voor Javascript

| | |

Het begrijpen van elementaire HTML-tags is de fundamentele vaardigheid in webontwikkeling. Als een website een huis is, is elke HTML-tag als een vormsteen. Net zoals je er niet achter kunt komen hoe je een huis moet bouwen zonder te begrijpen hoe je een structuur moet bouwen, kun je er niet achter komen hoe je goede websites kunt bouwen zonder HTML te begrijpen.

Met webontwikkeling als een van de belangrijkste top high-tech banen van 2019 , vaardigheid in elementaire HTML-tags is een geweldige plek om van te leren.

Wat zijn HTML-tags?

HTML-code weergegeven op een computer.

je leest dit artikel op een website Heb je je ooit afgevraagd hoe de computer wat weet. om de inhoud weer te geven en hoe deze weer te geven? is het vetgedrukt, cursief gedrukt en sommige bevatten een link naar een andere webpagina?

Een deel van het antwoord zijn HTML-tags. het grootste deel van de code op internet. Hoewel dat is veranderd, is HTML nog steeds een belangrijk onderdeel van het verkrijgen van inhoud op internet.

HTML is een opmaaktaal. Zodra iemand de inhoud heeft geschreven, zal hij moet het met HTML taggen om dingen te doen zoals titel van alinea`s onderscheiden. Het meeste hiervan wordt gedaan door tags in de inhoud te plaatsen.

Wat zijn basis-HTML-tags?

coding man on laptop

Een HTML-tag is een speciaal trefwoord tussen haakjes, zoals als:. ze komen door MPRE in paren, met een begin- en eindlabel. Het verschil is dat de eindtags een extra schuine streep tussen haakjes hebben:

De eerste tag is de start en het tweede label is het einde.

Hier zijn 10 veel voorkomende HTML-tags die elke webontwikkelaar zou moeten weten en die vooral belangrijk zijn voor die beginnen met het leren van HTML .

1.

Dit is de tag van het hoofdelement. Geeft aan dat alles tussen deze haakjes HTML-code bevat.

h2>2.

Deze tag onderscheidt de paginakoptekst van de inhoud. Hier voert u de JavaScript-code in of geeft u "meta"-informatie op de site.

3. </ title> </strong></h2><p>Heb je gemerkt dat de browsertabbladen tekst bevatten die je een overzicht van de site geeft ? Deze tekst is geschreven als de titel van de site met deze tag.</p><h2>4. <strong><body> </ body> </strong></h2><p>De body-tag specificeert de daadwerkelijke inhoud van de site.</p><h2><strong>5. <h1> </h1> </strong></h2><p>is een header-tag , die een titel creëert door de tekst uit te breiden en vet. Er zijn zes header tags: h1, h2, h3, h4, h5, h6, in aflopende volgorde van grootte.</p><h2>6. <strong><p></p></strong></h2><p>Deze tag geeft aan dat een bepaalde sectie een eigen alinea moet zijn. Browsers voegen over het algemeen spaties in tussen alinea`s, waardoor de tekst gemakkelijker te lezen is.</p><h2>7. <strong><a> </a> </strong></h2><p>Met deze tag kun je een link maken met het `href`-attribuut, zoals dit: </p> <p><a href = www.somewebsite.com> Klik hier </a>.</p><h2><strong>8. <img> </ img> </strong></h2><p>De tag `image` is de manier waarop u afbeeldingen in een webpagina invoegt.</p><h2>9. <strong> </strong></h2><p>Meerdere divisiegroepen in een enkele container, waarmee u bewerkingen kunt uitvoeren zoals het toepassen van een aparte stijl op de inhoud zelf<br> </p><h2><strong>10. <span> </span> </strong></h2><p>Span is als een kleinere versie van div, gebruikt voor styling of interactie met online inhoud. Je kunt gewoon een paar woorden toevoegen aan een bepaalde klasse (<span>Text </span>), wat wederom geweldig is voor styling en om de inhoud responsiever te maken.</p> </a> </div> <p>Dit zou meer dan genoeg moeten zijn om geweldige websites te bouwen!</p><iframe frameborder = "0" width = "100%" height = " 400px" data-src = "https://repl.it/@careerkarma/HTML-Tags?lite=true" class = "lazyload "src =" data: afbeelding / gif; base64, R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw == "> </ iframe><br> </div> </div> <div class="article__right"> <div class="hub_ad"> <div id="ezoic-pub-ad-placeholder-106"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9381065361874746" crossorigin="anonymous"></script> <!-- PYE aside NEW --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9381065361874746" data-ad-slot="8755532771" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="shop-aside shop-aside--mt"> <h2 class="shop-aside__title">Shop</h2> <div class="shop__items shop__items--column"> <div class="shop__item"><a class="shop__item-link" href="https://python.engineering/learn-programming-in-r-courses/"></a><img class="shop__item-img" src=""> <p class="shop__item-name">Learn programming in R: courses</p><span class="shop__item-price">$</span> </div> <div class="shop__item"><a class="shop__item-link" href="https://python.engineering/best-python-online-courses-for-2022/"></a><img class="shop__item-img" src=""> <p class="shop__item-name">Best Python online courses for 2022</p><span class="shop__item-price">$</span> </div> <div class="shop__item"><a class="shop__item-link" href="https://python.engineering/best-laptop-for-fortnite/"></a><img class="shop__item-img" src=""> <p class="shop__item-name">Best laptop for Fortnite</p><span class="shop__item-price">$</span> </div> <div class="shop__item"><a class="shop__item-link" href="https://python.engineering/best-laptop-for-excel/"></a><img class="shop__item-img" src=""> <p class="shop__item-name">Best laptop for Excel</p><span class="shop__item-price">$</span> </div> <div class="shop__item"><a class="shop__item-link" href="https://python.engineering/best-laptop-for-solidworks/"></a><img class="shop__item-img" src=""> <p class="shop__item-name">Best laptop for Solidworks</p><span class="shop__item-price">$</span> </div> <div class="shop__item"><a class="shop__item-link" href="https://python.engineering/best-laptop-for-roblox/"></a><img class="shop__item-img" src=""> <p class="shop__item-name">Best laptop for Roblox</p><span class="shop__item-price">$</span> </div> <div class="shop__item"><a class="shop__item-link" href="https://python.engineering/best-computer-for-crypto-mining/"></a><img class="shop__item-img" src=""> <p class="shop__item-name">Best computer for crypto mining</p><span class="shop__item-price">$</span> </div> <div class="shop__item"><a class="shop__item-link" href="https://python.engineering/best-laptop-for-sims-4/"></a><img class="shop__item-img" src="http://python.engineering/wp-content/uploads/2022/04/pye-best-laptop-for-sims-4.jpg"> <p class="shop__item-name">Best laptop for Sims 4</p><span class="shop__item-price">$</span> </div> </div> </div> <div class="hub_ad"> <div id="ezoic-pub-ad-placeholder-106" style="position:sticky; position:-webkit-sticky; top:0; margin-top:10px; z-index: 1000"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9381065361874746" crossorigin="anonymous"></script> <!-- PYE aside NEW --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9381065361874746" data-ad-slot="8755532771" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="l-questions l-questions--mt"> <p class="l-questions__title">Latest questions</p> <div class="l-questions__list"> <div class="l-questions__item"><a class="l-questions__item-link" href="https://python.engineering/8134602-psycopg2-insert-multiple-rows-with-one-query/"></a> <div class="l-questions__item-tags"><span class="l-questions__item-tag violet">NUMPY</span><span class="l-questions__item-tag yellow">NUMPY</span></div> <p class="l-questions__item-title">psycopg2: insert multiple rows with one query</p> <p class="l-questions__item-answers"><span>12</span> answers</p> </div> <div class="l-questions__item"><a class="l-questions__item-link" href="https://python.engineering/3930188-how-to-convert-nonetype-to-int-or-string/"></a> <div class="l-questions__item-tags"><span class="l-questions__item-tag violet">NUMPY</span><span class="l-questions__item-tag yellow">NUMPY</span></div> <p class="l-questions__item-title">How to convert Nonetype to int or string?</p> <p class="l-questions__item-answers"><span>12</span> answers</p> </div> <div class="l-questions__item"><a class="l-questions__item-link" href="https://python.engineering/33945261-how-to-specify-multiple-return-types-using-type-hints/"></a> <div class="l-questions__item-tags"><span class="l-questions__item-tag violet">NUMPY</span><span class="l-questions__item-tag yellow">NUMPY</span></div> <p class="l-questions__item-title">How to specify multiple return types using type-hints</p> <p class="l-questions__item-answers"><span>12</span> answers</p> </div> <div class="l-questions__item"><a class="l-questions__item-link" href="https://python.engineering/51922480-javascript-error-ipython-is-not-defined-in-jupyterlab/"></a> <div class="l-questions__item-tags"><span class="l-questions__item-tag violet">NUMPY</span><span class="l-questions__item-tag yellow">NUMPY</span></div> <p class="l-questions__item-title">Javascript Error: IPython is not defined in JupyterLab</p> <p class="l-questions__item-answers"><span>12</span> answers</p> </div> </div> <div class="l-questions__more-link"><a href="/cat/wiki/so/">All questions</a></div> </div> <div class="hub_ad"> <div id="ezoic-pub-ad-placeholder-106" style="position:sticky; position:-webkit-sticky; top:0; margin-top:10px; z-index: 1000"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9381065361874746" crossorigin="anonymous"></script> <!-- PYE aside NEW --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9381065361874746" data-ad-slot="8755532771" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> </div> </div> <!-- news --> <div class="news"> <div class="container"> <h2 class="news__title h2">News</h2> <div class="news__items"> <!-- <a class="news__item" href="https://python.engineering/microsoft-paid-13-7m-to-335-white-hat-hackers-for-discovered-vulnerabilities/" style="background-image: url('https://python.engineering/wp-content/uploads/2022/08/pye-microsoft-15-08-2022.jpeg')"> --> <a class="news__item" href="https://python.engineering/microsoft-paid-13-7m-to-335-white-hat-hackers-for-discovered-vulnerabilities/" style="background-color: #243978;"> <span class="news__item-overlay"> <span class="news__item-cat">15/08/2022</span> <span class="news__item-title">Microsoft paid $13.7M to 335 white hat hackers for discovered vulnerabilities</span> </span> </a> <!-- <a class="news__item" href="https://python.engineering/new-gpus-from-intel-xe-and-arc-will-not-support-directx-9/" style="background-image: url('https://python.engineering/wp-content/uploads/2022/08/pye-intel-15-08-2022.jpeg')"> --> <a class="news__item" href="https://python.engineering/new-gpus-from-intel-xe-and-arc-will-not-support-directx-9/" style="background-color: #243978;"> <span class="news__item-overlay"> <span class="news__item-cat">15/08/2022</span> <span class="news__item-title">New GPUs from Intel Xe and Arc will not support DirectX 9</span> </span> </a> <!-- <a class="news__item" href="https://python.engineering/meta-will-start-testing-automatic-end-to-end-encryption-in-messenger-in-the-coming-weeks/" style="background-image: url('https://python.engineering/wp-content/uploads/2022/08/pye-meta-15-08-2022.jpeg')"> --> <a class="news__item" href="https://python.engineering/meta-will-start-testing-automatic-end-to-end-encryption-in-messenger-in-the-coming-weeks/" style="background-color: #243978;"> <span class="news__item-overlay"> <span class="news__item-cat">15/08/2022</span> <span class="news__item-title">Meta will start testing automatic end-to-end encryption in Messenger in the coming weeks</span> </span> </a> </div> </div> </div> <!-- /new --> <br> <!-- wiki --> <div class="wiki"> <div class="container"> <h2 class="wiki__title h2">Wiki</h2> <div class="wiki-grid"> <div class="l-questions__item"><a class="l-questions__item-link" href="https://python.engineering/python-opencv-cv2-puttext-method/"></a> <div class="l-questions__item-tags"> <a href=""><span class="l-questions__item-tag violet">__del__</span></a> </div> <p class="l-questions__item-title">Python OpenCV | cv2.putText () method</p> </div> <div class="l-questions__item"><a class="l-questions__item-link" href="https://python.engineering/numpy-arctan2-python/"></a> <div class="l-questions__item-tags"> <a href=""><span class="l-questions__item-tag violet">__del__</span></a> </div> <p class="l-questions__item-title">numpy.arctan2 () in Python</p> </div> <div class="l-questions__item"><a class="l-questions__item-link" href="https://python.engineering/python-os-path-realpath-method/"></a> <div class="l-questions__item-tags"> <a href=""><span class="l-questions__item-tag violet">__del__</span></a> </div> <p class="l-questions__item-title">Python | os.path.realpath () method</p> </div> <div class="l-questions__item"><a class="l-questions__item-link" href="https://python.engineering/python-opencv-cv2-circle-method/"></a> <div class="l-questions__item-tags"> <a href=""><span class="l-questions__item-tag violet">around</span></a> </div> <p class="l-questions__item-title">Python OpenCV | cv2.circle () method</p> </div> <div class="l-questions__item"><a class="l-questions__item-link" href="https://python.engineering/python-opencv-cv2-cvtcolor-method/"></a> <div class="l-questions__item-tags"> <a href=""><span class="l-questions__item-tag violet">cvtcolor</span></a> </div> <p class="l-questions__item-title">Python OpenCV cv2.cvtColor () method</p> </div> <div class="l-questions__item"><a class="l-questions__item-link" href="https://python.engineering/python-move-element-to-end-of-the-list/"></a> <div class="l-questions__item-tags"> <a href=""><span class="l-questions__item-tag violet">Python functions</span></a> </div> <p class="l-questions__item-title">Python - Move item to the end of the list</p> </div> <div class="l-questions__item"><a class="l-questions__item-link" href="https://python.engineering/time-perf_counter-function-in-python/"></a> <div class="l-questions__item-tags"> <a href=""><span class="l-questions__item-tag violet">Counters</span></a> </div> <p class="l-questions__item-title">time.perf_counter () function in Python</p> </div> <div class="l-questions__item"><a class="l-questions__item-link" href="https://python.engineering/python-check-if-one-list-is-subset-of-other/"></a> <div class="l-questions__item-tags"> <a href=""><span class="l-questions__item-tag violet">__dict__</span></a> </div> <p class="l-questions__item-title">Check if one list is a subset of another in Python</p> </div> <div class="l-questions__item"><a class="l-questions__item-link" href="https://python.engineering/python-os-path-join-method/"></a> <div class="l-questions__item-tags"> <a href=""><span class="l-questions__item-tag violet">__del__</span></a> </div> <p class="l-questions__item-title">Python os.path.join () method</p> </div> </div> </div> </div> <!-- /wiki --> <!-- new footer --> <footer class="footer"> <div class="container"> <div class="footer__row"> <div class="footer__left"><img class="footer__logo" src="/wp-content/themes/nimani/img/footer-logo.svg" alt="Python Engineering"> <p class="footer__copyright">© 2017—2022 <br> Python Engineering Hub</p> <p class="footer__desc"> <a href="/cat/wiki/" class="footer__nav-link">EN</a> | <a href="/cat/es_sp/" class="footer__nav-link">ES</a> | <a href="/cat/de_de/" class="footer__nav-link">DE</a> | <a href="/cat/fr_fr/" class="footer__nav-link">FR</a> | <a href="/cat/it_it/" class="footer__nav-link">IT</a> | <a href="/cat/ru_ru/" class="footer__nav-link">RU</a> | <a href="/cat/tr_tr/" class="footer__nav-link">TR</a> | <a href="/cat/pl_pl/" class="footer__nav-link">PL</a> | <a href="/cat/pt_pt/" class="footer__nav-link">PT</a> | <a href="/cat/ja_jp/" class="footer__nav-link">JP</a> | <a href="/cat/ko_kr/" class="footer__nav-link">KR</a> | <a href="/cat/zh_cn/" class="footer__nav-link">CN</a> | <a href="/cat/hi_in/" class="footer__nav-link">HI</a> | <a href="/cat/nl_nl/" class="footer__nav-link">NL</a> </p> <br> <p class="footer__desc"> Python.Engineering is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to amazon.com </p> </div> <div class="footer__nav-col"> <p class="footer__nav-title">Python</p> <ul class="footer__nav-list"> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/loops/">Loops</a></li> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/counters/">Counters</a></li> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/numpy/">NumPy</a></li> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/nlp/">NLP</a></li> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/regex/">Regular Expressions</a></li> </ul> </div> <div class="footer__nav-col"> <p class="footer__nav-title">Wiki</p> <ul class="footer__nav-list"> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/news/">Tech news</a></li> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/wiki/">Python Wiki</a></li> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/wiki/so/">StackOverflow</a></li> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/php/">PHP</a></li> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/javascript/">JavaScript</a></li> </ul> </div> <div class="footer__nav-col"> <p class="footer__nav-title">Books</p> <ul class="footer__nav-list"> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/books/">All books</a></li> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/computations/">Computations</a></li> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/development/">Development</a></li> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/cryptography/">Cryptography</a></li> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/beginners/">For dummies</a></li> <li class="footer__nav-item"><a class="footer__nav-link" href="/cat/bigdata/">Big Data</a></li> </ul> </div> </div> </div> </footer> <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script> <script src="/wp-content/themes/nimani/js/libs.js"></script> <script src="/wp-content/themes/nimani/js/index.js"></script> <script src="/wp-content/themes/nimani/js/vendor/lazysizes.min.js" async></script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q022WLXW4X" async></script> <script async src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?autoload=true&skin=desert&lang=python"></script> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", () => { let arrayCode = document.querySelectorAll('pre'); arrayCode.forEach(element => { element.classList.add("prettyprint"); }); }); </script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q022WLXW4X'); </script> <!-- ===================== LEAVE POPUP ===================== --> <!-- <script src="/wp-content/themes/nimani/js/ouibounce.js"></script> <script> // if you want to use the 'fire' or 'disable' fn, // you need to save OuiBounce to an object var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), { aggressive: true, timer: 0, delay: 1000, callback: function() { console.log('ouibounce fired!'); } }); $('body').on('click', function() { $('#ouibounce-modal').hide(); }); $('#ouibounce-modal .modal-footer').on('click', function() { $('#ouibounce-modal').hide(); }); $('#ouibounce-modal .modal').on('click', function(e) { e.stopPropagation();}); </script> <script> $("#reload_form_button" ).click(function() { console.log("hui"); $('#reload_form').load('/wp-content/themes/nimani/af.html'); }); </script> --> <!-- ===================== /LEAVE POPUP ===================== --> </body> </html> <!-- /new footer -->