I. HTML Block and Inline Elements (Khối và dòng)
Mỗi phần tử HTML có giá trị hiển thị mặc định tùy thuộc vào loại phần tử đó. Giá trị hiển thị mặc định cho hầu hết các phần tử là khối hoặc dòng nội tuyến
1. Block-level Elements
Một khối luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn. Ví dụ như thẻ được dùng phổ biến là <div>. Các phần tử cấp khối của HTML
<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<output>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>
<!DOCTYPE html> <html> <body> <div>Hello</div> <div>World</div> <p>The DIV element is a block element, and will start on a new line.</p> </body> </html>2. Inline Elements
Một phần tử nội tuyến không bắt đầu trên một dòng mới và chỉ chiếm tối đa chiều rộng nếu cần Các thành phần nội tuyến trong HTML
<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>
<!DOCTYPE html> <html> <body> <span>Hello</span> <span>World</span> <p>The SPAN element is an inline element, and will not start on a new line.</p> </body> </html>3. Phần tử <div>
Phần tử <div> thường được sử dụng như một vùng chứa cho các phần tử HTML khác.
Các <div> không yêu cầu các thuộc tính, nhưng chúng thường được đặt id hoặc class để chèn css cho các thuộc tính bên trong
<div style="background-color:black;color:white;padding:20px;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div>4. Phần tử <span>
Tương tự như <div> nhưng do là phần tử nội tuyến dòng nên span có thể được dùng ở một số trường hợp cần thiết không cần chiếm trọng không gian khối
<h1>My <span style="color:red">Important</span> Heading</h1>
II. HTML The class Attribute
1. Using The class Attribute
Class trong HTML rất quan trọng, các phần tử chung 1 class khi sử dụng css sẽ có style giống nhau, bên cạnh đó class cũng được sử dụng trong javascript và jquery. Gọi class trong css bằng dấu .
Cách dùng class khi viết CSS
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
Cách dùng class khi viết javascript
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
2. Multiple Classes
Một phần tử có thế có nhiều class bằng việc bạn thêm dấu cách.
<h2 class="city main">London</h2> <h2 class="city">Paris</h2> <h2 class="city">Tokyo</h2>3. Cùng class và khác tags
Không sao cả, chúng vẫn cùng 1 style
<h2 class="city">Paris</h2> <div class="city">Paris is the capital of France</div>
III. HTML The id Attribute
1. Using The id Attribute
ID dùng để đặt định danh cho phần tử, dùng trong viết code css hoặc javascript, jquery. Khác với class, id chỉ dùng cho một phần tử duy nhất và nó là duy nhất. Gọi id trong code css bằng dấu #
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
<h1 id="myHeader">My Header</h1>
- Thuộc tính id có thể được sử dụng trên bất kỳ phần tử HTML nào .
- Giá trị id phân biệt chữ hoa chữ thường.
- Giá trị id phải chứa ít nhất một ký tự và không được chứa khoảng trắng (tab, ...).
Bạn có thể thấy được sự khác biệt giữa class và id qua ví dụ sau
<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "city" */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>Difference Between Class and ID</h2>
<p>An HTML page can only have one unique id applied to one specific element, while a class name can be applied to multiple elements.</p>
<!-- A unique element -->
<h1 id="myHeader">My Cities</h1>
<!-- Multiple similar elements -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>
2. Sử dụng id trong javascript<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
3. Bookmarks with ID and Links
Vấn đề này đã được trình bày ở phần HTML Links
IV. HTML Iframes
Đặt độ rộng và chiều cao
<iframe src="demo_iframe.htm" style="height:200px;width:300px;"></iframe>
Xóa viền khung
<iframe src="demo_iframe.htm" style="border:none;"></iframe>Chèn target cho link
<iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="https://hung1001.github.io/" target="iframe_a">hung1001</a></p>
V. HTML JavaScript
1.The HTML <script> Tag
Chỉ có HTML và CSS thì trang web của bạn chỉ là trang tĩnh, javascript giúp trang web có tương tác với người dùng. Javascript được khai báo bằng cặp thẻ <script> đặt trong thẻ <head> hoặc thẻ <body> hoặc có thể gọi từ nguồn khác qua thuộc tính src
<!DOCTYPE html>
<html>
<body>
<h2>Use JavaScript to Change Text</h2>
<p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
</html>
JS có thể thay đổi nội dung<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p>JavaScript can change the content of an HTML element:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">This is a demonstration.</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
</body>
</html>
JS có thể thay đổi css
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
Chi tiết hơn đến mục học js ta sẽ tìm hiểu thêm2. Thẻ <noscript>
Được sử dụng để cung cấp một nội dung thay thế khi người dùng vô hiệu hóa javascript trong trình duyệt của họ hoặc có một trình duyệt không hỗ trợ client-side script
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
1. Không vi phạm luật pháp nước CHXHCN Việt Nam
2. Không vi phạm thuần phong mỹ tục Việt Nam
3. Không bàn luận vấn đề liên quan đến tôn giáo, chính trị
4. Không đả kích, chửi bới hay đưa ra những lời nói không phù hợp với mục tiêu của website
5. Không bình luận với mục đích quảng cáo, trao đổi, mua bán
6. Khuyến khích sử dụng Tiếng Việt có dấu, hạn chế sử dụng tiếng lóng, viết tắt
7. Khi cần sự trợ giúp, vui lòng miêu tả chi tiết lỗi và để lại link đính kèm, tránh nói chung chung gây mất thời gian cho đôi bên