<br> - Bold text thẻ - In đậm chữ
<strong > - Important text - In đậm chữ quan trọng
<i> - talic text - In nghiên chữ
<em> -Emphasized text - Nhấn mạnh chữ
<mark> - Marked text - Đánh dấu chữ
<small> - Smaller text - Chữ nhỏ
<del> - Deleted text - Chữ Xoá
<ins> - Inserted text - Chèn Chữ
<sub> - Subscript text - Chữ nhỏ trên
<sup> - Superscript text - Chữ nhỏ dưới
<blockquoe> - Blockquote - Trích dẫn chữ 1 nguồn khác
<q> quotation - Dấu 2 chấm bao quanh đoạn văn

<abbr> abbreviation - Viết tắt hoạt động thì đưa chuột vào chữ Chủ Đầu Tư

<address> address - Địa chỉ: HCM - Quận Gò Vấp

<bdo> Bi-Directional Override - Chữ bị lật ngược: Hello Từ Phải Sang Trái

<!--Comen--> Commen Code - Ghi chú Code

 style: {backround: color: blue}  : Sét màu background bằng thuộc tính color 
 style: {backround: rgb(red, green, blue)}  : Sét màu background bằng thuộc tính rgb

style: {backround: rgba(red, green, blue, alpha)} : Sét màu background bằng thuộc tính rgba alpha là thuộc tính độ mờ và rõ của màu

style: {backround: color: #ee82ee (mã hex)} : Sét màu background bằng thuộc tính color và mã màu hex

style: {backround: color: hsl(hue, saturation, lightness)} : Sét màu background bằng hsl(màu sắt,bão hoà,độ nhẹ nhàng)

style: {backround: color: hsla(hue, saturation, lightness, alpha)} : Sét màu background bằng hsl(màu sắt,bão hoà,độ nhẹ nhàng, độ trong suốt) 

 Thẻ <pre> reformatted  - Giữ nguyên định dạng đoạn văn
             Các Cách chèn CSS vào HTML:
            Inline - by using the style attribute inside HTML elements - Viết bên trong thẻ Style bên trong thẻ HTML 
            Internal - by using a <style> element in the <head> section - Viết trong thẻ Style bên trong thẻ head
            External - by using a <link> element to link to an external CSS file - Viết Css bằng link file css
        
 <a href="url" target="value" title="Ghi chu">link text</a> : thẻ <a> chuyển hướng đến 1 url nào đó khi click vào link
            The target thuộc tính target= "gía trị" như sau:

            _self - Mặc định. khi nhấn nào link sẽ ở bằng tag đang mở
            _blank - Mở link sang 1 tab mới
            _parent - Mở trong class cha
            _top - mở link dưới dạng full màn hình
            ex: Click Vào Đây

            * Ta cũng có thể chèn css để có 1 thẻ a đẹp
            Nút a màu sắt
            * Ta cũng có thể cho thẻ A chuyển đến 1 vị trí nào đó gọi là Bookmark khi ta gắn href="#id" của thẻ cần chuyển đến"
            Chuyển Đến Thẻ <b>

HTML Image

Thẻ  <img> : <img src="img_chania.jpg" alt="Flowers in Chania"  style="width: 300px; height: 250px;" >   - chèn image vào ảnh 
                src - Specifies the path to the image - chỉ định đường dẫn đến image
                alt - Specifies an alternate text for the image - chỉ định 1 tên khác bằng text cho hình ảnh
            Ex1: thẻ image gán Width và Height:
            
            Ex2: Kết hợp thẻ a và thẻ img => khi click vào ảnh thì chuyển hướng
            
                Nhấn Chuyển Hướng Google
                google
            

            *Image + map: Nhấn vào các trí ví trên ảnh sẽ chuyển vào các url khác nhau:
                      
            <img src="workplace.jpg" usemap="#image-map">

                <map name="image-map">
                    <area target="_blank" alt="" title="" href="" coords="268,343,32,37" shape="rect">
                    <area target="_blank" alt="" title="" href="" coords="291,174,333,249" shape="rect">
                    <area target="_blank" alt="" title="" href="" coords="385,344,293,258" shape="rect">
                </map>
            
            - Thẻ <map> là khu vực để set các toạ độ trên ảnh. Khi người dùng click vào vùng đó thì sẽ chuyển hướng: 
            Ex1:
            Workplace

            
              Computer
              Phone
              Coffee
            
            * Set background nền cho thẻ: 
                
                    background-image: url(./background.png); - set link hình ảnh
                    background-repeat: no-repeat; - set hình ảnh có lặp lại không
                    background-attachment: fixed; - set cách cuộn của hình nền
                    background-size: cover; - set hình nền có rộng nên khung không
                
            


            

       
            * Thẻ <picture> : dùng để hiển thị nhiều hình ảnh ở các kích thước màn hình khác nhau
            
            <picture>
            <source media="(min-width: 800px)" srcset="large-image.jpg">
            <source media="(min-width: 400px)" srcset="medium-image.jpg">
            <img src="small-image.jpg" alt="Description of image">
            </picture>
            
            
                
                
                Description of image
              
        
* Thẻ   <link rel="icon" type="image/x-icon" href="/images/favicon.ico"> thay đổi icon của website
        
* Thẻ   <title>HTML Tutorial</title> Thẻ thay đổi title của web

HTML Table

            * Tạo Table cho Website của bạn:
            
                <table>
                <tr>
                    <th>Cột 1</th>
                    <th>Cột 2</th>
                    <th>Cột 3</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>Dương Đinh Lam</td>
                    <td>20 Tuổi</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Dương Đinh Lam</td>
                    <td>20 Tuổi</td>
                </tr>
                </table>
            
                --------------------------
                <Table> - thẻ tạo table
                <tr> - Data row - hàng dữ liệu
                <th> - Table Header - Hàng dữ liệu được in đậm
                <td> - Table Data - Hàng dữ liệu
            
            Ex1:
            

                Bảng Test
                
                    
                
                

                    Cột 1
                    Cột 2
                    Cột 3
                

                

                    1
                    Dương Đinh Lam
                    20 Tuổi
                

                

                    2
                    Dương Đinh Lam
                    20 Tuổi
                

                

                    3
                    Dương Đinh Lam
                    20 Tuổi
                

            

           
            - Có thể set các thuộc tính sau:

HTML List

* Có 2 Kiểu hiển thị HTML List:
      1. ul => li : Hiển thị list kiểu không có thứ tự 1,2,3 mà là những dấu chấm ...   
                
                    <ul>
                        <li>Giá trị</li>
                        <li>Giá trị 2</li>
                        <li>Giá trị 3</li>
                    </ul>
                
            
            
            Ex: Kiểu 1
                
      2. ol => li : Hiển thị kiểu có thứ tự 1,2,3,4  
                
                    
                        <ol>
                        <li>Giá trị</li>
                        <li>Giá trị 2</li>
                        <li>Giá trị 3</li>
                        </ol>
                    
                
                Ex: Kiểu 2
                
    
                    
  1. Giá trị
    2. 
                    
  2. Giá trị 2
    3. 
                    
  3. Giá trị 3
    4. 
                

     3. dl => dt => dd : Hiển thị kiểu TreeView 
                
                    
                        <dl>
                            <dt>1. Giá Trị 1</dt>
                                <dd>1.1 Giá trị con của 1</dd>
                                <dd>1.2 Giá trị con của 1</dd>
                            <dt>2. Giá Trị 2</dt>
                                 <dd>2.1 Giá trị con của 2</dd>
                        </dl>
                    
                
                Ex: Kiểu 3
                

                    
1. Giá Trị 1

                    
1.1 Giá trị con của 1

                    
1.2 Giá trị con của 1

                    
2. Giá Trị 2

                    
2.1 Giá trị con của 2

HTML Block and Inline Elements

     * 1. Block: Là thẻ có width chiếm 1 line
            Có 2 thẻ thông dụng nhất là  <div> và  <p> , <ul>, <address>
            EX:
            
Thẻ Div 

            
 Thẻ P

             * 1.1 Div: Hoạt động như một thẻ Cha chứa các thẻ con
            

                
Nội Dung thẻ H2

                
Nội Dung thẻ P

                
Nội Dung P2

                
Nội Dung P3
-- Sử dụng thuộc tính display:inline-block

London

London is the capital city of England.

London has over 13 million inhabitants.

Oslo

Oslo is the capital city of Norway.

Oslo has over 600.000 inhabitants.

Oslo

Oslo is the capital city of Norway.

Oslo has over 600.000 inhabitants.

-- Sử dụng thuộc tính display: flex

London

London is the capital city of England.

London has over 13 million inhabitants.

Oslo

Oslo is the capital city of Norway.

Oslo has over 600.000 inhabitants.

Oslo

Oslo is the capital city of Norway.

Oslo has over 600.000 inhabitants.

-- Sử dụng thuộc tính display: gird

London

London is the capital city of England.

London has over 13 million inhabitants.

Oslo

Oslo is the capital city of Norway.

Oslo has over 600.000 inhabitants.

Oslo

Oslo is the capital city of Norway.

Oslo has over 600.000 inhabitants.

                 * 2. Inline: là các thẻ có độ rộng chỉ chiếm vừa đủ nội dung của nó 
                - Thẻ này có nhiều như <span>, <button>.....
                EX:
                Đây là 1 nút bấm

Used Class CSS

 1. Cách Dùng:
        
            <div class="ClassName"> Nội Dung </div> 
            .ClassName {
                display:block
            }  
        
    Ngoài ra có thể dùng multi class: 2 class hay nhiều class trong 1 thẻ
         
            <div class="ClassName1 ClassName2"> Nội Dung </div>       
            .ClassName1 {
                color: red;
            } 
            .ClassName2{
                align-items: center;
            }  
    => lúc này thẻ sẽ được chạy các thuộc tính css của 2 thẻ.
Class
Class 2
Class 3

Used ID

  
1. Cách Dùng:
 
    - ID là duy nhất trong trong 
    <div id="TenID"> Nội Dung </div>
      #TenID{
        color: red;
      }
- ID: thường sẽ được để trỏ để bookmart 
    <a href="TenID"> Click vào đây để trỏ đến thẻ div có id là tên ID </a>

    

        
Nội Dung NÈ

        Nội dung trong thẻ div được gán ID

Used IFrame

1. Dùng để lòng 1 website vào 1 website khác
   <iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

Used JavaScript in HTML

1. Javascript có chức năng xử lý các sự kiện và các thẻ HTML 1 cách logic mà không load lại trang. 
- Các code JavaScript được lưu trữ trong thẻ 
            <script></script>
- JavaScript có thể xử lý các sự kiện khi người dùng click.. hover ... 
- JavaScript có thẻ thay đổi nội dung của 1 thẻ. 
- JavaScript có thể add các html ví dụ như:
      Ex:
      document.getElementById("demo").style.fontSize = "25px";
      document.getElementById("demo").style.color = "red";
      document.getElementById("demo").style.backgroundColor = "yellow";
    <script> 
    document.getElementById('ABC'); // lấy ra phần tử html có id là ABC 
    </script>

HTML File Paths

1. Các đường dẫn của HTML 
  1.1 Đường dẫn tuyệt đối
      - chỉ rõ đường dẫn
      Ex: http://google.com
      <a href="http://google.com"></a>  //đây là đường dẫn tuyệt đối
  1.2 Đường dẫn tương đối:
    - Đường dẫn nằm trong thư mục root của web thì khai báo như này: 
     <img src="/images/picture.jpg" alt="Mountain">
      - Đường dẫn cùng cấp mới file với nhau:   
      <img src="images/picture.jpg" alt="Mountain">
       - Đường dẫn thư mục cao hơn 1 cấp so với thư mục chạy code   
      <img src="../images/picture.jpg" alt="Mountain">

HTML - The Head Element

1. Thẻ <head></head> giúp người dùng có thể add các thông tin như title hoặc link css và Javascript 
 - Thẻ  <head>Tiêu đề của web</head> //thêm tiêu đề 
 - Thẻ  <link rel="stylesheet" href="mystyle.css">   // giúp add file css
 - add các thuộc tính web:
  <meta charset="UTF-8">
        <meta name="description" content="Free Web tutorials">
        <meta name="keywords" content="HTML, CSS, JavaScript">
        <meta name="author" content="John Doe"> 
  - Các thuộc tính lên trên web:
  <head>
        <base href="https://www.w3schools.com/" target="_blank">
        </head>
        
        <body>
        <img src="images/stickman.gif" width="24" height="39" alt="Stickman">
        <a href="tags/tag_base.asp">HTML base Tag</a>
        </body>

HTML Layout Elements

Các cách Setup Layout trong HTML:
 1. Sử dụng float + clear:  

     <div class="clear">
          <div class="content">1</div>
          <div class="content">2</div>
          <div class="content">3</div>
     </div>
     .content {
      background-color: rosybrown;
      border: 1px solid red;
      float: left;
      width: calc(90% / 3);
      height: 50px;
      padding-right: 3px;
    }
    .clear ::after {
      content: "";
      display: table;
      clear: both;
    }
1
2
3
2. Sử dụng display : flex; 
        
      <div class="data-flex">
      <div class="content-flex">1</div>
      <div class="content-flex">2</div>
      <div class="content-flex">3</div>
    </div>
    .data-flex {
      display: flex;
      align-items: center;
    }
    .content-flex {
      background-color: aquamarine;
      border: 1px solid red;
      width: calc(100% / 3);
      height: 50px;
    }
1
2
3
3. Sử dụng display : gird; 
    
    <div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
  </div>
  .grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    text-align: center;
    border: 2px solid rebeccapurple;
  }
  .grid-item {
    border: 2px solid blueviolet;
    height: 30px;
    line-height: 30px;
  }
1
2
3
4
5
6
7
8
9

HTML Responsive

 Responsive là thủ thuật giúp giao diện web được tối ưu cho nhiều thiết bị kích thước khác nhau
  - Tôi ưu về fontsize 
   <h1 style="font-size:10vw;">Responsive Text</h1> // chữ = 10% so với kích thước màn hình
 - Tối ưu về Layout 
  Ví dụ: Xem
- Tôi ưu hình ảnh hiển thị  

  <picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_smallflower.jpg" alt="Flowers">
  </picture>

    Để thiết lập màn hình sẽ chạy css khác nhau ta dùng: 
  
    @media screen and (max-width: 800px) {
      .left, .main, .right {
        width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
      }
    }

HTML Thẻ Code

    Thẻ chứa nội dung code
    
      <code>
        function helloWorld() {
            console.log('Hello, world!');
        }
    </code>

Semantic Elements in HTML (Thẻ Ngữ Nghĩa HTML)

<article>: Định nghĩa nội dung độc lập, tự chứa. <aside>: Định nghĩa nội dung bên lề, tách biệt với nội dung chính của trang. <details>: Định nghĩa các chi tiết bổ sung mà người dùng có thể xem hoặc ẩn. <figcaption>: Định nghĩa chú thích cho phần tử <figure>. <figure>: Chỉ định nội dung tự chứa, như hình minh họa, sơ đồ, ảnh, danh sách mã, v.v. <footer>: Định nghĩa phần chân trang cho một tài liệu hoặc một phần. <header>: Chỉ định phần đầu trang cho một tài liệu hoặc một phần. <main>: Chỉ định nội dung chính của một tài liệu. <mark>: Định nghĩa văn bản được đánh dấu/nhấn mạnh. <nav>: Định nghĩa các liên kết điều hướng. <section>: Định nghĩa một phần trong tài liệu. <summary>: Định nghĩa tiêu đề hiển thị cho phần tử <details>. <time>: Định nghĩa một ngày/thời gian.
<article>
  <h2>Tiêu đề bài viết</h2>
  <p>Nội dung bài viết.</p>
</article>

Tiêu đề bài viết

Nội dung bài viết.

<aside>
  <h2>Thông tin bên lề</h2>
  <p>Đây là nội dung phụ, không phải là nội dung chính của trang.</p>
</aside>
<details>
  <summary>Thông tin chi tiết</summary>
  <p>Đây là thông tin bổ sung mà người dùng có thể xem hoặc ẩn.</p>
</details>
Thông tin chi tiết

Đây là thông tin bổ sung mà người dùng có thể xem hoặc ẩn.

<figure>
  <img src="image.jpg" alt="Mô tả hình ảnh">
  <figcaption>Chú thích hình ảnh</figcaption>
</figure>
Mô tả hình ảnh
Chú thích hình ảnh
<figure>
  <img src="diagram.png" alt="Sơ đồ">
  <figcaption>Sơ đồ minh họa</figcaption>
</figure>
Sơ đồ
Sơ đồ minh họa
<footer>
  <p>© 2024 Công ty của bạn. Bảo lưu mọi quyền.</p>
</footer>

© 2024 Công ty của bạn. Bảo lưu mọi quyền.

<header>
  <h1>Tiêu đề chính của trang</h1>
  <nav>
    <ul>
      <li><a href="#home">Trang chủ</a></li>
      <li><a href="#about">Giới thiệu</a></li>
      <li><a href="#contact">Liên hệ</a></li>
    </ul>
  </nav>
</header>

Tiêu đề chính của trang

<main>
  <h2>Nội dung chính</h2>
  <p>Đây là nội dung chính của tài liệu.</p>
</main>

Nội dung chính

Đây là nội dung chính của tài liệu.

<p>Đây là một đoạn văn bản có chứa <mark>văn bản được đánh dấu</mark>.</p>

Đây là một đoạn văn bản có chứa văn bản được đánh dấu.

<nav>
  <ul>
    <li><a href="#home">Trang chủ</a></li>
    <li><a href="#about">Giới thiệu</a></li>
    <li><a href="#contact">Liên hệ</a></li>
  </ul>
</nav>
<section>
  <h2>Phần giới thiệu</h2>
  <p>Đây là phần giới thiệu của tài liệu.</p>
</section>

Phần giới thiệu

Đây là phần giới thiệu của tài liệu.

<details>
  <summary>Chi tiết bổ sung</summary>
  <p>Đây là nội dung bổ sung mà người dùng có thể xem hoặc ẩn.</p>
</details>
Chi tiết bổ sung

Đây là nội dung bổ sung mà người dùng có thể xem hoặc ẩn.

<p>Sự kiện sẽ diễn ra vào <time datetime="2024-06-25">25 tháng 6, 2024</time>.</p>

Sự kiện sẽ diễn ra vào .

HTML Form

  
    <input type="text">	Displays a single-line text input field - Hiển thị 1 text 1 dòng
    <input type="radio">	Displays a radio button (for selecting one of many choices) - Hiển thị dưới dạng nút chọn dưới dạng hình tròn
    <input type="checkbox">	Displays a checkbox (for selecting zero or more of many choices) // Hiển chị nút chọn dưới dạng hình vuông
    <input type="submit">	Displays a submit button (for submitting the form) // nút bấm xử lý nút bấm gửi form đi
    <input type="button"> // nút bấm xử lý nút bấm gửi form đi
  
 




  
Form attribute : Các thuộc tính của Form

  0. accept-charset: 

  Mô tả: Chỉ định các mã hóa ký tự được sử dụng cho việc gửi dữ liệu biểu mẫu.
  Ví dụ: <form accept-charset="UTF-8">
  Chi tiết: Điều này rất hữu ích khi bạn cần đảm bảo rằng dữ liệu biểu mẫu được mã hóa theo một chuẩn cụ thể để tránh lỗi ký tự khi xử lý dữ liệu.
  1.action:
  
  Mô tả: Chỉ định nơi gửi dữ liệu biểu mẫu khi biểu mẫu được gửi.
  Ví dụ: <form action="https://example.com/submit-form">
  Chi tiết: URL này có thể là một trang web hoặc một endpoint trên máy chủ để xử lý dữ liệu biểu mẫu.
  2.autocomplete:
  
  Mô tả: Chỉ định liệu biểu mẫu có sử dụng chức năng tự động điền của trình duyệt hay không.
  Ví dụ: <form autocomplete="on"> hoặc <form autocomplete="off">
  Chi tiết: Khi bật (on), trình duyệt sẽ cố gắng điền trước các trường dữ liệu dựa trên thông tin người dùng đã nhập trước đó.
  3.enctype:
  
  Mô tả: Chỉ định cách dữ liệu biểu mẫu được mã hóa khi gửi tới máy chủ (chỉ áp dụng cho phương thức post).
  Ví dụ: <form enctype="multipart/form-data">
  Chi tiết: Các giá trị thường gặp là application/x-www-form-urlencoded (mặc định), multipart/form-data (sử dụng khi tải tệp), và text/plain.
  4. method:
  
  Mô tả: Chỉ định phương thức HTTP để sử dụng khi gửi dữ liệu biểu mẫu.
  Ví dụ: <form method="post"> hoặc <form method="get">
  Chi tiết: Phương thức post gửi dữ liệu trong phần thân của yêu cầu HTTP, trong khi get gửi dữ liệu trong URL.
  5.name:
  
  Mô tả: Chỉ định tên của biểu mẫu.
  Ví dụ: <form name="userForm">
  Chi tiết: Tên này có thể được sử dụng để tham chiếu đến biểu mẫu trong JavaScript.
  6.novalidate:
  
  Mô tả: Chỉ định rằng biểu mẫu không nên được kiểm tra hợp lệ khi gửi.
  Ví dụ: <form novalidate>
  Chi tiết: Thuộc tính này bỏ qua các kiểm tra hợp lệ mặc định của trình duyệt đối với các trường trong biểu mẫu.
  7.rel:
  
  Mô tả: Chỉ định mối quan hệ giữa tài nguyên liên kết và tài liệu hiện tại.
  Ví dụ: <form rel="noopener noreferrer">
  Chi tiết: Thường được sử dụng trong các thẻ liên kết (<a>) và không phổ biến trong thẻ <form>.
  8.target:
  
  Mô tả: Chỉ định nơi hiển thị phản hồi nhận được sau khi gửi biểu mẫu.
  Ví dụ: <form target="_blank"> hoặc <form target="_self">
  Chi tiết: _blank mở kết quả trong tab mới, _self mở trong cùng khung, _parent mở trong khung cha, và _top mở trong cửa sổ trên cùng.
<form action="https://example.com/submit-form" method="post" enctype="multipart/form-data" accept-charset="UTF-8" autocomplete="on" name="userForm" novalidate target="_blank" > <label for="username">Username:</label> <input type="text" id="username" name="username"> <br> <label for="email">Email:</label> <input type="email" id="email" name="email"> <br> <input type="submit" value="Submit"> </form> 
  
Form Element : Các thẻ trong thẻ Form

  
    <input> // thẻ dữ liệu text
    <label> // hiển thị tên nhãn
    <select> // hiển hiện dưới dạng Combobox
    <textarea> // Nhập chữ dạng nhiều dòng 
    <button> // Dạng nút bấm
    <fieldset>
    <legend> // hết hợp với feeldset gom nhóm các thẻ HTML thành 1 nhóm có viền
    <datalist> // Data gợi ý của textbox
    <output> // Dùng để hiển thị kết quả của 1 hàm javascrip (ví dụ máy tính)
    <option> // Thẻ chứa dữ liệu của Datalist và select
    <optgroup>// góm nhóm data trong Option
Nhóm 1


TextArea 



    
HTML Input Types : Các thẻ input

    
      <input type="button"> -- nút bấm
      <input type="checkbox"> --Nút tích chọn
      <input type="color"> -- màu sắt
      <input type="date"> -- Ngày
      <input type="datetime-local"> -- ngày có localtion
      <input type="email"> -- email
      <input type="file"> -- chọn file
      <input type="hidden"> -- ẩn
      <input type="image"> -- hình ảnh
      <input type="month"> -- tháng
      <input type="number"> -- số
      <input type="password"> -- mật khẩu
      <input type="radio"> -- chọn ô tròn
      <input type="range"> -- từ số đến số
      <input type="reset"> -- reset kết quả
      <input type="search"> - tìm kiếm
      <input type="submit"> -- chọn
      <input type="tel"> -- số điện thoại
      <input type="text"> -- text
      <input type="time"> -- thời gian 
      <input type="url"> -- địa chỉ
      <input type="week"> -- Tuần
Button:

Checkbox :

color :

date :

datetime-local :

email :

file :

hidden :

image :

month:

number:

password:

radio:

range:

reset:

search:

submit:

tel:

text:

text:

url:

url: 

    
Input Attributes : Thuộc tính của thẻ input

    
      type -- loại
name -- tên biến
value -- giá trị biến
id -- id 
class -- class 
placeholder -- hiện thị text mờ gợi ý người dùng
required  -- không để null
disabled -- disabled
readonly -- chỉ đọc
maxlength -- giá trị cao nhất
min - giá trị nhỏ nhất
max -- giá trị lớn nhất
step -- bỏ qua
pattern --cho các quy tắc vào pattern="[a-zA-Z0-9]+"
autofocus -- khi mở trang auto trỏ chuột vào đấy
autocomplete -- bật chế độ gợi ý
size - kích thước
multiple -- nhiều giá trị 
accept -- chỉ cho phép các định dạng  accept=".jpg,.png"
form
list
alt (được sử dụng với type="image")
checked (được sử dụng với type="checkbox" hoặc type="radio")
dirname
formaction (được sử dụng với type="submit" và type="image")
formenctype (được sử dụng với type="submit" và type="image")
formmethod (được sử dụng với type="submit" và type="image")
formnovalidate (được sử dụng với type="submit" và type="image")
formtarget (được sử dụng với type="submit" và type="image")
height (được sử dụng với type="image")
width (được sử dụng với type="image")
src (được sử dụng với type="image")
novalidate (chỉ sử dụng trong thẻ <form>, nhưng ảnh hưởng đến các trường nhập liệu trong form)
inputmode
is
    
   
    
HTML Input form* Attributes : Các Attributes mở rộng cho thẻ form

    1. Trường hợp add thêm thẻ vào form với attribute (form="id form") 
    
      <form action="/action_page.php" id="form1">
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname"><br><br>
      <input type="submit" value="Submit">
    </form>

    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname" form="form1">
    
    2. Trường hợp trong 1 form 2 button submit 2 url khác nhau (formaction="url") 
    
      <form action="/action_page.php">
        <label for="fname">First name:</label>
        <input type="text" id="fname" name="fname"><br><br>
        <label for="lname">Last name:</label>
        <input type="text" id="lname" name="lname"><br><br>
        <input type="submit" value="Submit">
        <input type="submit" formaction="/action_page2.php" value="Submit as Admin">
     </form>
    
    3. Trường hợp 1 form nhưng action nhiều kiểu khác nhau (formenctype="multipart/form-data") 
    
      <form action="/action_page_binary.asp" method="post">
        <label for="fname">First name:</label>
        <input type="text" id="fname" name="fname"><br><br>
        <input type="submit" value="Submit">
        <input type="submit" formenctype="multipart/form-data"
        value="Submit as Multipart/form-data">
     </form>
    
    4. Trường hợp 1 form nhưng action method khác nhau (formmethod="post") 
    
      <form action="/action_page.php" method="get">
          <label for="fname">First name:</label>
          <input type="text" id="fname" name="fname"><br><br>
          <label for="lname">Last name:</label>
          <input type="text" id="lname" name="lname"><br><br>
          <input type="submit" value="Submit using GET">
          <input type="submit" formmethod="post" value="Submit using POST">
      </form>
    
    5. Trường hợp 1 form nhưng sumit loại target (formtarget="_blank") 
    
      <form action="/action_page.php">
          <label for="fname">First name:</label>
          <input type="text" id="fname" name="fname"><br><br>
          <label for="lname">Last name:</label>
          <input type="text" id="lname" name="lname"><br><br>
          <input type="submit" value="Submit">
          <input type="submit" formtarget="_blank" value="Submit to a new window/tab">
      </form>
    
    6. Trường hợp 1 form nhưng sumit bỏ qua check điều kiện hoặc không (formnovalidate="formnovalidate") 
    
      <form action="/action_page.php">
          <label for="email">Enter your email:</label>
          <input type="email" id="email" name="email"><br><br>
          <input type="submit" value="Submit">
          <input type="submit" formnovalidate="formnovalidate"
          value="Submit without validation">
      </form>
    
    7. Bỏ qua tất cả các điều kiện trong form (novalidate) 
    
      <form action="/action_page.php" novalidate>
          <label for="email">Enter your email:</label>
          <input type="email" id="email" name="email" required><br><br>
          <input type="submit" value="Submit">
      </form>

HTML Canvas

Sử dụng Canvas để vẽ các hình <canvas id="craw" width="100px" height="100px" style="border: 1px solid red;"> </canvas> <script> var hinh = document.getElementById('craw'); var hinhcontext = hinh.getContext('2d') hinhcontext.strokeText("Hello World", 10, 50); hinhcontext.font = "30px Arial"; </script> ----------------------------------------- Phương thức beginPath(): Bắt đầu một đường vẽ mới. closePath(): Đóng đường vẽ hiện tại. moveTo(x, y): Di chuyển bút vẽ đến vị trí (x, y). lineTo(x, y): Vẽ một đường thẳng từ vị trí hiện tại đến vị trí (x, y). stroke(): Vẽ đường viền của các hình dạng đã định nghĩa. fill(): Tô màu cho các hình dạng đã định nghĩa. rect(x, y, width, height): Vẽ một hình chữ nhật. arc(x, y, radius, startAngle, endAngle, anticlockwise): Vẽ một cung tròn. arcTo(x1, y1, x2, y2, radius): Vẽ một cung tròn nối giữa hai điểm tiếp tuyến. ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise): Vẽ một hình ellipse. drawImage(image, dx, dy): Vẽ hình ảnh lên canvas tại tọa độ (dx, dy). drawImage(image, dx, dy, dWidth, dHeight): Vẽ hình ảnh lên canvas tại tọa độ (dx, dy) với kích thước (dWidth, dHeight). drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight): Vẽ một phần của hình ảnh lên canvas. createImageData(width, height): Tạo một đối tượng ImageData trống. getImageData(sx, sy, sw, sh): Lấy dữ liệu pixel từ một vùng nhất định của canvas. putImageData(imagedata, dx, dy): Đặt dữ liệu pixel vào canvas. clearRect(x, y, width, height): Xóa một vùng hình chữ nhật trên canvas. fillRect(x, y, width, height): Vẽ một hình chữ nhật được tô màu đầy. strokeRect(x, y, width, height): Vẽ viền của một hình chữ nhật. fillText(text, x, y, maxWidth): Vẽ văn bản lên canvas. strokeText(text, x, y, maxWidth): Vẽ viền của văn bản lên canvas. measureText(text): Trả về một đối tượng TextMetrics chứa thông tin về kích thước của văn bản. scale(x, y): Phóng to hoặc thu nhỏ hệ tọa độ của canvas. rotate(angle): Xoay hệ tọa độ của canvas. translate(x, y): Dịch chuyển hệ tọa độ của canvas. transform(a, b, c, d, e, f): Áp dụng phép biến đổi ma trận lên hệ tọa độ của canvas. setTransform(a, b, c, d, e, f): Đặt phép biến đổi ma trận cho hệ tọa độ của canvas. resetTransform(): Đặt lại hệ tọa độ của canvas về trạng thái ban đầu. createLinearGradient(x0, y0, x1, y1): Tạo một gradient tuyến tính. createRadialGradient(x0, y0, r0, x1, y1, r1): Tạo một gradient hình tròn. createPattern(image, repetition): Tạo một mẫu hình từ hình ảnh. createConicGradient(startAngle, x, y): Tạo một gradient hình nón. save(): Lưu trạng thái hiện tại của canvas. restore(): Khôi phục trạng thái đã lưu của canvas. clip(): Tạo vùng cắt (clipping path) cho canvas. isPointInPath(x, y, fillRule): Kiểm tra xem điểm (x, y) có nằm trong đường vẽ hiện tại không. isPointInStroke(x, y): Kiểm tra xem điểm (x, y) có nằm trên đường viền hiện tại không. Thuộc tính canvas: Tham chiếu đến đối tượng canvas gốc. globalAlpha: Độ trong suốt của các thao tác vẽ (0.0 đến 1.0). globalCompositeOperation: Xác định cách các hình ảnh mới được vẽ lên canvas. fillStyle: Màu hoặc gradient để tô cho các hình dạng. strokeStyle: Màu hoặc gradient để vẽ đường viền. shadowColor: Màu của bóng đổ. shadowBlur: Độ mờ của bóng đổ. shadowOffsetX: Độ dịch chuyển bóng đổ theo trục X. shadowOffsetY: Độ dịch chuyển bóng đổ theo trục Y. lineCap: Hình dạng của điểm cuối của các đường thẳng (butt, round, square). lineJoin: Hình dạng của góc nối các đường thẳng (bevel, round, miter). lineWidth: Độ dày của các đường thẳng. miterLimit: Giới hạn của độ dài góc nối khi lineJoin là miter. lineDashOffset: Độ dịch chuyển của mẫu đường đứt nét. font: Định dạng văn bản (ví dụ: 20px Arial). textAlign: Căn chỉnh văn bản (start, end, left, right, center). textBaseline: Đường cơ sở của văn bản (top, hanging, middle, alphabetic, ideographic, bottom). direction: Hướng văn bản (ltr, rtl, inherit). imageSmoothingEnabled: Bật hoặc tắt chế độ làm mịn hình ảnh khi vẽ. imageSmoothingQuality: Chất lượng làm mịn hình ảnh (low, medium, high).

HTML SVG Graphics (Vẽ các hình Ngôi Sao, Vuông....)

<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> Thẻ Cơ Bản <svg>: Thẻ gốc của tài liệu SVG, chứa các phần tử SVG khác. <g>: Nhóm các phần tử SVG lại với nhau. <defs>: Định nghĩa các phần tử mà có thể được sử dụng lại trong SVG (ví dụ: gradient, patterns). <symbol>: Định nghĩa các thành phần đồ họa mà có thể được sử dụng lại. <use>: Sử dụng lại các thành phần được định nghĩa trong <symbol> hoặc <defs>. Thẻ Đồ Họa Hình Học <rect>: Vẽ một hình chữ nhật. <circle>: Vẽ một hình tròn. <ellipse>: Vẽ một hình ellipse. <line>: Vẽ một đường thẳng. <polyline>: Vẽ một chuỗi các đường thẳng. <polygon>: Vẽ một đa giác. <path>: Vẽ một đường hoặc hình dạng phức tạp. Thẻ Văn Bản <text>: Vẽ văn bản. <tspan>: Nhóm các phần của văn bản với nhau và cho phép áp dụng kiểu dáng khác nhau. <textPath>: Định vị văn bản theo một đường dẫn <path>. Thẻ Định Nghĩa Đối Tượng <pattern>: Định nghĩa một mẫu hình lặp lại. <marker>: Định nghĩa các mũi tên hoặc các đầu mút khác cho đường. <clipPath>: Định nghĩa một vùng cắt để ẩn đi các phần tử nằm ngoài vùng này. <mask>: Định nghĩa một mặt nạ để che đi các phần tử nằm dưới. Thẻ Gradient và Hiệu Ứng <linearGradient>: Định nghĩa một gradient tuyến tính. <radialGradient>: Định nghĩa một gradient hình tròn. <stop>: Định nghĩa các điểm dừng cho gradient. <filter>: Định nghĩa các hiệu ứng lọc như blur, shadow, hoặc color manipulation. <feGaussianBlur>: Áp dụng hiệu ứng blur Gaussian. <feOffset>: Di chuyển vị trí của đồ họa. <feBlend>: Áp dụng hiệu ứng hòa trộn giữa hai đồ họa. <feColorMatrix>: Thay đổi màu sắc của đồ họa bằng ma trận màu. Thẻ Metadata và Script <title>: Cung cấp tiêu đề cho SVG, hiển thị khi người dùng di chuột qua. <desc>: Cung cấp mô tả cho SVG, hữu ích cho trợ năng. <metadata>: Cung cấp thông tin metadata cho SVG. <script>: Nhúng mã JavaScript vào trong SVG. Thẻ Animation <animate>: Thêm hoạt hình cơ bản vào thuộc tính của phần tử SVG. <animateTransform>: Thêm hoạt hình vào thuộc tính transform của phần tử SVG. <animateMotion>: Di chuyển phần tử dọc theo một đường dẫn. <set>: Đặt một thuộc tính cụ thể của phần tử SVG trong một khoảng thời gian.
Sorry, your browser does not support inline SVG. X Y (250, 250) (50, 50)

HTML Video

<video width="320" height="240" autoplay muted> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

HTML Audio

<audio controls autoplay muted> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>

HTML Plug-ins

Phần tử <object> trong HTML được sử dụng để nhúng một đối tượng bên ngoài vào trang web, như một ứng dụng Flash, một video, hoặc một ứng dụng khác không phải HTML. <object data="URL_hoặc_đường_dẫn_đến_đối_tượng" type="kiểu_đối_tượng"></object> Các thuộc tính chính của phần tử <object> là: data: Đường dẫn đến tài nguyên mà bạn muốn nhúng, ví dụ: URL của video, file Flash, vv. type: Kiểu đối tượng của đối tượng được nhúng. Đây thường là một loại MIME type, như "video/mp4" cho video MP4 hoặc "application/x-shockwave-flash" cho Flash.

HTML Youtube

<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"> </iframe>

HTML Get Vị Trí GPS

<button onclick="getLocation()">Try It</button> <p id="demo"></p> <script> const x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script>

Nhấn Nút Để Xem Vị Trí - Copy Giá trị vào google map là có vị trí


HTMl Kéo Thả Các Giá Trị Qua Lại

<style> #div1, #div2 { float: left; width: 100px; height: 35px; margin: 10px; padding: 10px; border: 1px solid black; } </style> <script> function allowDrop(ev) { // hàm set cho element có chức năng thả không có gì không khéo được (nghĩa đồng ý add thêm data vào thẻ) ev.preventDefault(); } function drag(ev) { // hàm kéo - nghĩa là khi người dùng kéo thẻ thì nó truyền id của thẻ đang kéo vào dataTransfer với tên biên là "text" ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { // hàm thả - set cho thẻ định thả cho đồng ý thả ev.preventDefault(); var dataid = ev.dataTransfer.getData("text"); // lấy id của thẻ lúc nãy kéo ra từ dataTransfer với biến text; var data = document.getElementById(dataid); //lấy toàn bộ thẻ element ev.target.appendChild(data); // ev.target này là lấy data thẻ mà bạn thực hiện sự kiện .appendChild(data) / /thêm data vào thẻ } </script> </head> <body> <h2>Drag and Drop</h2> <p>Drag the image back and forth between the two div elements.</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"> // ondragstart(bắt đầu kéo) => chạy làm drag(event) </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> // ondrop(bắt đầu thả) thực hiện hàm thả drop(event) - ondragover(kết thúc kéo)="allowDrop(event)" </body>

Drag and Drop

Drag the image back and forth between the two div elements.

Data Kéo Thả 1
Data Kéo Thả 2

HTML Web Storage API (Lưu trữ data dạng Local và Session)

    1. localStorage:
          Lưu trữ dữ liệu lâu dài: Dữ liệu được lưu trữ trong localStorage sẽ tồn tại ngay cả khi người dùng đóng và mở lại trình duyệt.
          Dung lượng lớn hơn cookie: localStorage cho phép lưu trữ nhiều dữ liệu hơn so với cookie, thường là lên đến 5MB mỗi miền (domain).
          Truy cập nhanh chóng: Dữ liệu trong localStorage được lưu trữ dưới dạng văn bản và có thể được truy xuất nhanh chóng.
          
            <script>
            function setItem() {
              localStorage.setItem("username", "JohnDoe");
              alert("Item set!");
            }
            
            function getItem() {
              var value = localStorage.getItem("username");
              alert("Stored value: " + value);
            }
            
            function removeItem() {
              localStorage.removeItem("username");
              alert("Item removed!");
            }
            </script>
          
         

   2. sessionStorage:
        Lưu trữ dữ liệu tạm thời: Dữ liệu trong sessionStorage chỉ tồn tại trong suốt phiên làm việc của trình duyệt. Khi người dùng đóng trình duyệt hoặc tab, dữ liệu sẽ bị xóa.
        Dung lượng lớn hơn cookie: Tương tự localStorage, sessionStorage cũng cho phép lưu trữ nhiều dữ liệu hơn so với cookie.
        Truy cập nhanh chóng: Dữ liệu trong sessionStorage cũng được lưu trữ dưới dạng văn bản và có thể được truy xuất nhanh chóng.
        
          function setItem() {
            sessionStorage.setItem("sessionUser", "JaneDoe");
            alert("Item set!");
          }
          
          function getItem() {
            var value = sessionStorage.getItem("sessionUser");
            alert("Stored value: " + value);
          }
          
          function removeItem() {
            sessionStorage.removeItem("sessionUser");
            alert("Item removed!");
          }




HTML Web Workers API (Tạo ra 1 luồng khác để chạy code)

    HTML Web Workers API là một phần của HTML5 cho phép các nhà phát triển chạy các đoạn mã JavaScript trong các luồng nền riêng biệt (background threads), 
    giúp thực hiện các tác vụ tốn thời gian mà không làm ảnh hưởng đến hiệu suất của giao diện người dùng. 
    Điều này rất hữu ích để tránh làm treo hoặc làm chậm ứng dụng web khi xử lý các tác vụ nặng như tính toán phức tạp, 
    xử lý dữ liệu lớn, hay giao tiếp với máy chủ.

        **Các loại Web Workers
        Có hai loại Web Workers chính:

        1. Dedicated Workers: Chỉ được sử dụng bởi một script duy nhất.
        2. Shared Workers: Có thể được sử dụng bởi nhiều script khác nhau từ cùng một nguồn gốc (origin).
demo.js var i = 0; function timedCount() { i = i + 1; postMessage(i); setTimeout("timedCount()",500); } timedCount(); <p>Count numbers: <output id="result"></output></p> <button onclick="startWorker()">Start Worker</button> <button onclick="stopWorker()">Stop Worker</button> <script> var w; function startWorker() { if (typeof(Worker) !== "undefined") { if (typeof(w) == "undefined") { w = new Worker("demo_workers.js"); } w.onmessage = function(event) { document.getElementById("result").innerHTML = event.data; }; } else { document.getElementById("result").innerHTML = "Sorry! No Web Worker support."; } } function stopWorker() { w.terminate(); w = undefined; } </script>

Count numbers:

HTML SSE API (EventSource)

Hoạt động như WebSocKet tuy nhiên không phức tạp bằng


    EventSource là một tính năng của HTML5, được sử dụng để thiết lập một kết nối một chiều giữa máy chủ và trình duyệt, 
    cho phép máy chủ gửi các bản cập nhật theo thời gian thực đến trình duyệt mà không cần phải thiết lập một kết nối mới cho mỗi bản cập nhật. 
    Kỹ thuật này được gọi là Server-Sent Events (SSE).

    Cách thức hoạt động của EventSource
    Khi sử dụng EventSource, máy chủ có thể gửi các sự kiện hoặc dữ liệu đến trình duyệt mà không cần yêu cầu từ phía trình duyệt.
    Điều này rất hữu ích cho các ứng dụng web thời gian thực như cập nhật thông tin thị trường chứng khoán, thông báo tin tức, hoặc cập nhật trạng thái đơn hàng.
// File Server <?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $time = date('r'); echo "data: The server time is: {$time}\n\n"; flush(); ?> <!-- hoạt đồng như 1 server response về API --> <h1>Getting server updates</h1> <div id="result"></div> <script> if(typeof(EventSource) !== "undefined") { var source = new EventSource("server_demo.php"); source.onmessage = function(event) { document.getElementById("result").innerHTML += event.data + "<br>"; }; } else { document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events..."; } </script>
Bắt đầu cập nhật dữ liệu server
Kết Quả