Tag HTML para Javascript

| | |

Entender as tags HTML básicas é a habilidade fundamental no desenvolvimento web. Se um site é uma casa, cada tag HTML é como um tijolo modelador. Assim como você não pode descobrir como construir uma casa sem entender como construir uma estrutura, você não pode descobrir como construir bons sites sem entender HTML.

Com o desenvolvimento web sendo um dos principais empregos de alta tecnologia de 2019 , a proficiência em tags HTML básicas é um ótimo lugar para aprender.

O que são tags HTML?

Código HTML exibido em um computador.

você está lendo este artigo em um site Você já se perguntou como o computador sabe o quê. para exibir o conteúdo e como exibi-lo? é um texto em negrito e itálico e alguns contêm um link para outra página da Web?

Parte da resposta são tags HTML. Era uma vez, HTML era a maior parte do código na Internet. Embora isso tenha mudado, o HTML ainda é uma parte importante da obtenção de conteúdo na Web.

HTML é uma linguagem de marcação. Depois que uma pessoa escreve o conteúdo, ela tem que marcá-lo com HTML para fazer coisas como distinguir o título dos parágrafos. A maior parte disso é feito colocando tags no conteúdo.

O que são tags HTML básicas?

codificando homem no laptop

Uma tag HTML é uma palavra-chave especial entre colchetes, como como:. eles vêm através do MPRE em pares, com um rótulo inicial e final. A diferença é que as tags finais têm uma barra adicional dentro dos parênteses:

A primeira tag é a início e o segundo rótulo é o fim.

Aqui estão 10 tags HTML comuns que todo desenvolvedor web deve saber e que são especialmente importantes para aqueles que estão começando a aprender HTML .

1.

Esta é a tag do elemento raiz. Indica que tudo entre esses colchetes contém código HTML.

2.

Esta tag distingue o cabeçalho da página do conteúdo. É aqui que você insere o código JavaScript ou fornece "meta" informações sobre o site.

3. </ title> </strong></h2><p>Você notou que as guias do navegador contêm texto que fornece uma visão geral do site ? Este texto é escrito como o título do site com esta tag.</p><h2>4. <strong><body> </ body> </strong></h2><p>A tag body especifica o conteúdo real do site.</p><h2><strong>5. <h1> </h1> </strong></h2><p>é uma tag de cabeçalho , que cria um título expandindo o texto e gordura. Há seis cabeçalhos tags: h1, h2, h3, h4, h5, h6, em ordem decrescente de tamanho.</p><h2>6. <strong><p></p></strong></h2><p>Esta tag indica que uma seção específica deve ser seu próprio parágrafo. Os navegadores geralmente inserem espaços em branco entre os parágrafos, o que facilita a leitura do texto.</p><h2>7. <strong><a> </a> </strong></h2><p>Esta tag permite que você crie um link com seu atributo `href`, assim: </p> <p><a href = www.somewebsite.com> Clique aqui </a>.</p><h2><strong>8. <img> </ img> </strong></h2><p>A tag `image` é a maneira como você insere imagens em uma página da web.</p><h2>9. <strong> </strong></h2><p>Grupo de divisão múltipla contido em um único contêiner, que permite realizar operações como aplicar um estilo distinto ao próprio conteúdo<br> </p><h2><strong>10. <span> </span> </strong></h2><p>Span é como uma versão menor de div, usada para estilizar ou interagir com conteúdo online . Você pode apenas adicionar algumas palavras a uma classe específica (<span> Texto </span>) que, novamente, é ótimo para estilizar e tornar o conteúdo mais responsivo.</p> </a> </div> <p>Isso deve ser mais do que suficiente para começar a criar ótimos sites!</p><iframe frameborder = "0" width = "100%" height = " 400px" data-src = "https://repl.it/@careerkarma/HTML-Tags?lite=true" class = "lazyload "src =" data: image / 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 -->