Computer >> Máy Tính >  >> Lập trình >> HTML

Cách sử dụng Phần tử HTML

Tìm hiểu cách sử dụng HTML <head> trên trang web của bạn.

HTML <head> phần tử là vùng chứa siêu dữ liệu (thông tin) về các trang web của bạn, chẳng hạn như tiêu đề trang, kiểu và tập lệnh.

Nội dung bên trong <head> phần tử là chủ yếu đọc và xử lý bởi máy (ví dụ:trình duyệt), không phải bởi khách truy cập trang web của bạn.

<head> không nên nhầm lẫn phần tử với <header> , phục vụ một mục đích khác.

<head> phần tử được đặt ngay bên dưới <html> mở và ngay trước thẻ mở <body> thẻ:

<!DOCTYPE html>
<html>
  <head>
    <!-- Contains Metadata primarily for machine processing -->
  </head>
  <body></body>
</html>

Các phần tử HTML sau có thể được đặt bên trong <head> phần tử:

  • </li> <li> <link> </li> <li> <style> </li> <li> <code><meta></code> </li> <li> <script> </li> <li> <code><base></code> </li> <li> <noscript> </li> </ul> <h2 id ="amples "style =" position:relative; "> Ví dụ </h2> <p> Hãy xem một vài ví dụ về cách sử dụng <code><head></code> với một số phần tử siêu dữ liệu thường được sử dụng bên trong. </P> <h3 id ="the-title-element" style ="position:relative;"> Phần tử <title> </h3> <p> <code><title></code> phần tử xác định tiêu đề tài liệu HTML của bạn, được hiển thị trong tab trang của trình duyệt:</P> <pre><code><!DOCTYPE html> <html> <head> <title>Document title</title> </head> <body></body> </html></code></pre> <p> Nếu bạn di chuột qua tab trang của bất kỳ trang web nào và giữ yên nó trong vài giây, bạn sẽ nhận được một cửa sổ bật lên nhỏ hiển thị toàn bộ tiêu đề trang. </P> <h3 id ="the-style-element" style ="position:relative;"> Phần tử <style> </h3> <p> <code><style></code> phần tử chứa thông tin tạo kiểu cho tài liệu HTML của bạn (kiểu chữ, khoảng cách, màu sắc, hoạt ảnh, v.v.) được viết bằng CSS:</P> <pre><code><!DOCTYPE html> <html> <head> <title>Document title</title> <style type="text/css"> body { background-color: red; } p { font-size: 18px; line-height: 1.5; } </style> </head> <body></body> </html></code></pre> <h3 id ="the-link-element" style ="position:relative;"> Phần tử <link> </h3> <p> Cách hiện đại hơn để áp dụng kiểu cho tài liệu HTML là nhập các trang định kiểu CSS bên ngoài, với <code><link></code> phần tử:</P> <pre><code><!DOCTYPE html> <html> <head> <title>Document title</title> <link href="/styles/main.css" rel="stylesheet" /> </head> <body></body> </html></code></pre> <p> Điều cần biết:nếu bạn sử dụng cả <code><style></code> và <code><link></code> trong cùng một tài liệu, các kiểu sẽ được áp dụng theo thứ tự bạn đưa chúng vào tài liệu của mình. CSS xếp tầng, vì vậy bất cứ thứ gì đến sau cùng (từ trên xuống dưới) sẽ ghi đè các kiểu trước đó, nếu chúng giải quyết các phần tử HTML giống nhau. </P> <h3 id ="the-script-element" style ="position:relative;"> Phần tử <script> </h3> <p> <code><script></code> phần tử được sử dụng để thực thi JavaScript theo hai cách khác nhau:</P> <ol> <li> Bằng cách nhúng mã JavaScript trực tiếp vào bên trong tài liệu của bạn (giống như bạn đã thấy với <code><style></code> phần tử). </li> <li> Bằng cách nhập các tệp tập lệnh JavaScript bên ngoài qua <code>src</code> thuộc tính. </li> </ol> <p> Nhúng mã JavaScript trực tiếp vào bên trong tài liệu của bạn:</P> <pre><code><!DOCTYPE html> <html> <head> <title>Document title</title> <script> // Make background color red document.body.style.backgroundColor = "red" </script> </head> <body></body> </html></code></pre> <p> Nhập tệp JavaScript bên ngoài:</P> <pre><code><!DOCTYPE html> <html> <head> <title>Document title</title> <script src="/scripts/main.js"></script> </head> <body></body> </html></code></pre> <br> </article> <div class="ad5"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4480737146802772" crossorigin="anonymous"></script><!-- computer.wsxdn --><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4480737146802772" data-ad-slot="4467655591" data-ad-format="auto" data-full-width-responsive="true"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </section> <div id="turn-page" class="f-between"> <div class="page up f-align"> <i class="prev"></i> <section> <a class='LinkPrevArticle' href='https://vn.wsxdn.com/fd034x/om351g/1003054549.html' >Cách thoát các ký tự HTML </a> </section> </div> <div class="page down f-align"> <section> <a class='LinkNextArticle' href='https://vn.wsxdn.com/fd034x/om351g/1003054551.html' >Cách sử dụng Phần tử <script> HTML </a> </section> <i class="next"></i> </div> </div> <section class="box4-l-list"> <div class="imgList f-between banner"> <ul class="f-between"> <li class="f-between f-align"><div> <a href="https://vn.wsxdn.com/fd034x/om351g/1003054544.html" class="text r-over r-over-3" title="Cách sử dụng Phần tử <noscript> HTML ">Cách sử dụng Phần tử <noscript> HTML </a> </div></li> <li class="f-between f-align"><div> <a href="https://vn.wsxdn.com/fd034x/om351g/1003054553.html" class="text r-over r-over-3" title="Cách sử dụng Phần tử <title> HTML ">Cách sử dụng Phần tử <title> HTML </a> </div></li> <li class="f-between f-align"><div> <a href="https://vn.wsxdn.com/fd034x/om351g/1003063875.html" class="text r-over r-over-3" title="Làm cách nào để sử dụng thuộc tính bắt buộc trong HTML? ">Làm cách nào để sử dụng thuộc tính bắt buộc trong HTML? </a> </div></li> <li class="f-between f-align"><div> <a href="https://vn.wsxdn.com/fd034x/om351g/1003064127.html" class="text r-over r-over-3" title="Làm cách nào để đặt tên của phần tử trong HTML? ">Làm cách nào để đặt tên của phần tử trong HTML? </a> </div></li> <li class="f-between f-align"><div> <a href="https://vn.wsxdn.com/fd034x/om351g/1003064182.html" class="text r-over r-over-3" title="Làm cách nào để thêm giá trị của phần tử trong HTML? ">Làm cách nào để thêm giá trị của phần tử trong HTML? </a> </div></li> </ul> </div> </section> </section> <aside class="box-r box4-r"> <div class="articleList"> <em>Bài báo nổi tiếng</em> <ol> <li><a href="https://vn.wsxdn.com/fd034x/om351g/1003054537.html" class="t-over" title="Cách sử dụng Phần tử <figcaption> HTML ">Cách sử dụng Phần tử <figcaption> HTML </a></li> <li><a href="https://vn.wsxdn.com/fd034x/om351g/1003054539.html" class="t-over" title="Cách sử dụng Thuộc tính Trì hoãn HTML ">Cách sử dụng Thuộc tính Trì hoãn HTML </a></li> <li><a href="https://vn.wsxdn.com/fd034x/om351g/1003054540.html" class="t-over" title="Cách sử dụng Thuộc tính đích HTML ">Cách sử dụng Thuộc tính đích HTML </a></li> <li><a href="https://vn.wsxdn.com/fd034x/om351g/1003054542.html" class="t-over" title="Cách sử dụng Phần tử <meta> HTML ">Cách sử dụng Phần tử <meta> HTML </a></li> <li><a href="https://vn.wsxdn.com/fd034x/om351g/1003054545.html" class="t-over" title="Cách sử dụng Danh sách HTML (<ul>, <ol>, <dl>) ">Cách sử dụng Danh sách HTML (<ul>, <ol>, <dl>) </a></li> <li><a href="https://vn.wsxdn.com/fd034x/om351g/1003054546.html" class="t-over" title="Cách sử dụng Phần tử HTML ">Cách sử dụng Phần tử HTML </a></li> <li><a href="https://vn.wsxdn.com/fd034x/om351g/1003054551.html" class="t-over" title="Cách sử dụng Phần tử <script> HTML ">Cách sử dụng Phần tử <script> HTML </a></li> <li><a href="https://vn.wsxdn.com/fd034x/om351g/1003054552.html" class="t-over" title="Cách sử dụng Phần tử <style> HTML ">Cách sử dụng Phần tử <style> HTML </a></li> </ol> </div> <section> <strong class="list-title"> <p>Máy Tính</p> <span></span> </strong> <ol class="texts"> <li> <a href="https://vn.wsxdn.com/fd034x/om351g/1003054554.html" class="t-title"><strong class="r-over r-over-2">Cách sử dụng Phần tử <link> HTML </strong></a> </li> <li> <a href="https://vn.wsxdn.com/fd034x/om351g/1003054555.html" class="t-title"><strong class="r-over r-over-2">Cách sử dụng Phần tử <span> HTML </strong></a> </li> <li> <a href="https://vn.wsxdn.com/fd034x/om351g/1003054556.html" class="t-title"><strong class="r-over r-over-2">Cách sử dụng phần tử HTML <article> </strong></a> </li> <li> <a href="https://vn.wsxdn.com/fd034x/om351g/1003054557.html" class="t-title"><strong class="r-over r-over-2">Cách sử dụng Phần tử <section> HTML </strong></a> </li> <li> <a href="https://vn.wsxdn.com/fd034x/om351g/1003054558.html" class="t-title"><strong class="r-over r-over-2">Cách sử dụng Phần tử <p> HTML </strong></a> </li> <li> <a href="https://vn.wsxdn.com/fd034x/om351g/1003054559.html" class="t-title"><strong class="r-over r-over-2">Cách sử dụng Phần tử <main> HTML </strong></a> </li> </ol> </section> <ul class="typeList container f-start box4-typeList"> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/sq344k/' target="_self">lập trình C</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/ay345t/' target="_self">C ++</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/zx346r/' target="_self">Redis</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/nk347f/' target="_self">Lập trình BASH</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/ur348m/' target="_self">Python</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/ca349u/' target="_self">Java</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/hf350z/' target="_self">Cơ sở dữ liệu</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/om351g/' target="_self">HTML</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/tr352l/' target="_self">Javascript</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/ay353s/' target="_self">Lập trình</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/jg354b/' target="_self">CSS</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/nl355g/' target="_self">Ruby</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/mk356e/' target="_self">SQL</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/ge357z/' target="_self">IOS</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/ec358x/' target="_self">Android</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/ol359g/' target="_self">MongoDB</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/vt360n/' target="_self">MySQL</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/vt361n/' target="_self">C#</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/wu365o/' target="_self">PHP</a></li> <li><a class='childclass' href='https://vn.wsxdn.com/fd034x/us371m/' target="_self">SQL Server</a></li> </ul> </aside> </section> <footer class="container"> <span class="container f-center"> Bản quyền © <a href="https://vn.wsxdn.com">https://vn.wsxdn.com</a> Đã đăng ký Bản quyền </span> </footer> </body> </html>