Hướng dẫn 30 days of html - 30 ngày html
|
Phần yếu tố Phần tiêu đềauthor to create more educational materials Phần chính Thuật ngữPhần chân trang 1 ngàyGiới thiệuPhong cách nội tuyến Ngày 4 Các yếu tố chặn và không chặn Ngày 5 Các yếu tố định dạng HTML5 Ngày 6
Ngày 8 Hình thức HTML Yêu cầuNgày 9
Phát triển webDanh sách được yêu cầu
Phát triển web frontendNgày 11
Có hàng trăm JavaScript cho phép xây dựng một ứng dụng web động. Hiện tại, ba thư viện JavaScript phổ biến nhất là:
Không học Tìm hiểu JavaScript trước đây, HTML và CSS. Không tìm hiểu các thư viện JavaScript trước khi bạn tìm hiểu JavaScript. Đây là trình tự học tập đúng: html> CSS> JavaScript> React hoặc Vue hoặc Angular. Phát triển web phụ trợPhát triển được hỗ trợ (phía máy chủ) đề cập đến các hoạt động xảy ra phía sau hiện trường. Phát triển phụ trợ bao gồm phụ trợ một ngôn ngữ lập trình và cơ sở dữ liệu. Phần phụ trợ tương tác với Frontend và cơ sở dữ liệu sử dụng ngôn ngữ lập trình phụ trợ có thể là (Node.js, Python, Ruby, PHP, v.v.). Nhìn vào con số sau đây để hiểu sự tương tác giữa máy khách. Một máy khách gửi yêu cầu HTTP đến phần phụ trợ và phần phụ trợ trả về phản hồi HTTP cho máy khách (phản hồi có thể là trang HTML, TXT, hình ảnh hoặc bất kỳ dạng dữ liệu nào khác). HTTP (Giao thức chuyển siêu văn bản) là một giao thức giao tiếp cho phép truyền dữ liệu giữa máy khách và SEV. Nó được thiết kế để giao tiếp giữa các trình duyệt web (máy khách) và máy chủ web. Phát triển web đầy đủFull-Stack là một từ thông dụng khác mà không ai đồng ý về định nghĩa. Bạn có thể hiểu phát triển web đầy đủ như một tổng số tiền tuyến, phụ trợ, thử nghiệm và bao gồm một số công nghệ khác. Tôi tin rằng bây giờ bạn có một bức tranh lớn về phát triển web. Cách hoạt động của webĐến bây giờ, bạn nên hiểu rõ về cách thức hoạt động của web dựa trên thông tin bạn nhận được trên hai phần trên. Nếu bạn muốn biết thêm, bạn cũng có thể đọc bài viết này. Công cụ phát triển webCác công cụ bạn cần làm nhà phát triển web
Trước khi chúng tôi bắt đầu phát triển một trang web, thật tốt khi nhớ lại các phần (thành phần) chung của một trang web. Trong phần tiếp theo, chúng tôi sẽ đề cập đến điều này. Các bộ phận của một trang webMột trang web có thể có một vài tính năng hoặc một số tính năng. Không có hướng dẫn cho biết những gì một trang web nên có nhưng hầu hết thời gian một trang web có các phần phổ biến sau (các thành phần). Chẳng hạn, nếu bạn nhìn vào trang web đầu tiên được tạo, nó chỉ có một trang và một số liên kết. Tuy nhiên, kể từ năm 1993 cho đến ngày nay, trong ba thập kỷ qua, HTML đã phát triển và chỉ có HTML, có thể phát triển một trang web tĩnh khá. Hãy xem các phần phổ biến nhất (các thành phần) của một trang web:
Nếu bạn đồng ý rằng đây là các thành phần của một trang web, thì bạn sẽ tạo các thành phần này để xây dựng một trang web. Trên thực tế, một khi bạn tạo một tính năng nhất định, nó có thể được sử dụng trong các dự án khác nhau (có thể tái sử dụng). Do đó, bất cứ khi nào bạn tạo ra một phần nhất định, hãy cố gắng xem xét khả năng duy trì và khả năng tái sử dụng. Bạn không cần phải có tất cả các tính năng được đề cập ở trên khi bạn phát triển một trang web. Không có hướng dẫn nghiêm ngặt những gì cần có trên trang web của bạn. Bài tập
Ngày 2Thiết lập môi trường phát triểnTrình duyệtCó nhiều trình duyệt ngoài kia nhưng hầu hết các nhà phát triển đều thích sử dụng Google Chrome hoặc Firefox. Tôi thường sử dụng Google Chrome để phát triển và tôi cũng đề nghị nó. Tải xuống Google Chrome nếu bạn không có. Trình duyệt hiển thị mã HTML của bạn cho một trang web đọc người. Biên tập mãLà nhà phát triển web, bạn nên viết mã bằng trình chỉnh sửa văn bản hoặc mã. Do đó, để viết mã HTML, CSS, JS, React hoặc khác bạn cần để chỉnh sửa mã. Tôi sẽ sử dụng Code Visual Studio và tôi cũng sẽ sử dụng nó trong thử thách này. Tôi thực sự khuyên bạn nên sử dụng mã Visual Studio vì nó có rất nhiều phần mở rộng năng suất làm cho siêu năng suất. Bây giờ, chúng ta hãy tải xuống mã Visual Studio. Cách sử dụng mã Visual StudioĐể biết cách sử dụng mã Visual Studio, hãy xem video sau Giới thiệu với HTMLLịch sử của HTMLBản phát hành ban đầu của HTML là năm 1993. Phiên bản đầu tiên của HTML được viết bởi Tim Berners-Lee vào năm 1993. HTML đã phát triển trong ba thập kỷ qua và hiện tại phiên bản mới nhất là HTML5. HTML là gì?Từ html là một từ viết tắt. Đó là viết tắt của ngôn ngữ đánh dấu siêu văn bản. Đây là ngôn ngữ đánh dấu tiêu chuẩn để phát triển các trang web. HTML là khối xây dựng của web cho phép xây dựng bố cục trang bằng các phần tử HTML. HTML không phải là ngôn ngữ lập trình thay vào đó là ngôn ngữ đánh dấu. Mã HTML sẽ được hiển thị bởi một trình duyệt và nó cho đầu ra có thể đọc được của con người. Nhìn vào hình dưới để hiểu rõ hơn cách mã HTML chuyển đổi sang trang web bằng trình duyệt. Phần tử HTMLCác phần tử HTML bao gồm một thẻ mở (), thuộc tính, nội dung và thẻ đóng (). Nhìn vào hình dưới đây để hiểu một cú pháp của phần tử HTML. <h2>Welcome to 30 Days of HTMLh2> Tên thẻ là H2 và nội dung là 30 ngày của HTML. H2 sẽ bảo trình duyệt làm cho văn bản có kích thước phông chữ lớn mà tại sao chúng ta gọi HTML là ngôn ngữ đánh dấu. <p> HTML elements are the blocking of a website. There is not website without HTML. Learn HTML and build a website. p> Thẻ P đánh dấu văn bản là đoạn mà tại sao chúng ta gọi HTML là ngôn ngữ đánh dấu. Thuộc tínhCác thuộc tính HTML cung cấp thông tin bổ sung về phần tử. Một thuộc tính chỉ có thể được thêm vào thẻ mở. Sẽ rất khó để liệt kê tất cả các thuộc tính HTML nhưng chúng tôi có thể liệt kê những thuộc tính phổ biến nhất.
Ngoài ra còn có thuộc tính người nghe sự kiện lắng nghe chuột hoặc bàn phím. Chẳng hạn, onclick, onsubmit, onkeydown, onkeyup, onscroll, v.v. Hãy nhớ rằng, đừng cố nhớ khó. Để biết chi tiết thông tin về, các thuộc tính HTML, bạn có thể kiểm tra liên kết này <h2 id="first-title">Welcome to 30 Days of HTMLh2> Một phần tử HTML có nhiều thuộc tính <h2 id="first-title" class="title">Welcome to 30 Days of HTMLh2> <p style="color:gray;"> HTML elements are the blocking of a website. There is not website without HTML. Learn HTML and build a website. p> Thẻ p trên có một thuộc tính kiểu. Thuộc tính phong cách có thuộc tính màu và màu xám giá trị. Phong cách thay đổi màu văn bản thành màu xám. Bạn có thể thử nó bằng cách thêm thuộc tính và giá trị khác trong kiểu. Mỗi giá trị phải được phân tách bằng một dấu chấm phẩy. Một số phần tử HTML không có thẻ đóng, thay vào đó chúng có thẻ tự đóng. <area /> <base /> <br /> <col /> <embed /> <hr /> <img /> <input /> <link /> <meta /> <para /> <source /> <track /> <wbr /> Sự chém là tùy chọn nhưng tôi thực sự khuyên bạn nên sử dụng dấu gạch chéo với các thẻ tự đóng. Chẳng hạn, React.js không cho phép bạn sử dụng mà không bị chém. Nhận xét HTMLNhận xét trong bất kỳ ngôn ngữ lập trình nào giúp một mã dễ đọc hơn. Do đó, thông thường để lại một số văn bản trên một mã để làm cho nó dễ đọc và có thể duy trì hơn. Hãy để chúng tôi cú pháp của nhận xét HTML, nó có mở () Tập thể dục
Ngày 3DomTrong phần này, chúng tôi sẽ bắt đầu viết cây DOM của tài liệu hoặc tệp HTML. DOM là viết tắt của mô hình đối tượng tài liệu. DOM là cấu trúc giống như một sự thật. Nó bắt đầu với một phần tử gốc HTML theo sau là đầu và cơ thể. Đầu và cơ thể là những đứa trẻ ngay lập tức của yếu tố gốc, HTML. Trước phần tử gốc, có một tuyên bố. Tờ khaiTrước phần tử gốc, có một tuyên bố. Tuyên bố này nói với trình duyệt rằng tài liệu là HTML. Do đó, trình duyệt kết xuất nó theo cách mà một HTML cho rằng sẽ được hiển thị. Đây là mã để khai báo HTML. Tuyên bố không phải là một phần của cây Dom. Phần tử gốcPhần tử HTML là gốc của cây dom và là cha mẹ của đầu và cơ thể. Việc thử DOM phải được bao bọc bởi thẻ HTML. > <html>html> Thẻ HTML với hai đứa trẻ, đầu và cơ thể. > <html> <head>head> <body> content goes here body> html> Tạo thư mục trên máy tính để bàn và đặt cho nó bất kỳ tên nào và thậm chí bạn có thể gọi nó (30daysofhtml), bên trong thư mục này tạo tệp index.html. Mỗi tệp HTML phải kết thúc với phần mở rộng .html. Và thật tốt khi có ít nhất trên tệp index.html trong dự án A và thiết lập lại của tệp sẽ có các tên khác nhau. Đây là một cấu trúc DOM đơn giản có chứa HTML, đầu, tiêu đề, cơ thể, các yếu tố H2. > <html> <head> <title>30 Days Of HTMLtitle> head> <body> <h2 id="first-title">The Building Blocks of the webh2> body> html> Cây dom của HTML trên trông giống như sơ đồ sau. Các yếu tố tiêu đềHTML là một ngôn ngữ đánh dấu. Chúng tôi đánh dấu một nội dung bằng thẻ HTML và trình duyệt hiển thị nó thành một trang web sạch. Thẻ H2 có nghĩa là tạo một văn bản thành một văn bản kích thước phông chữ lớn, theo mặc định, nó tạo văn bản kích thước 32px. Chúng tôi có các thẻ khác nhau H2 đến H6 để viết tiêu đề kích thước phông chữ khác nhau. Pixel (PX) là một đơn vị để đo kích thước nhỏ như dấu chấm. <p> HTML elements are the blocking of a website. There is not website without HTML. Learn HTML and build a website. p>0 Kích thước của thẻ H2 đến H6:
Yếu tố đoạn vănBây giờ, hãy thêm đoạn văn vào trang web của chúng tôi bằng thẻ P. <p> HTML elements are the blocking of a website. There is not website without HTML. Learn HTML and build a website. p>1 Bây giờ, có sáu yếu tố trong mã HTML trên. Một yếu tố HTML có thể có cha mẹ, một đứa trẻ, anh chị em. Phần tử HTML là gốc hoặc cha mẹ của đầu và cơ thể. Đầu và cơ thể là con của thẻ HTML. Đầu và cơ thể là anh chị em. Tiêu đề là đứa con của người đứng đầu. Cơ thể có hai đứa con, H2 và p. Phần yếu tốNếu chúng tôi đi tạo phần cho trang của chúng tôi, chúng tôi có thể sử dụng phần tử div hoặc phần. Phần tử phần có ý nghĩa ngữ nghĩa. Hãy thêm Div vào trang trước. <p> HTML elements are the blocking of a website. There is not website without HTML. Learn HTML and build a website. p>2 Như bạn có thể thấy từ mã trên, tất cả các yếu tố bên trong cơ thể được bao bọc bởi một div. Thay vì div, một phần cũng có thể được sử dụng <p> HTML elements are the blocking of a website. There is not website without HTML. Learn HTML and build a website. p>3 Phần tiêu đềBây giờ, chúng ta hãy thêm tiêu đề vào trang web của chúng tôi bằng thẻ HTML tiêu đề. <p> HTML elements are the blocking of a website. There is not website without HTML. Learn HTML and build a website. p>4 Ở bên tiêu đề, chúng ta có thể thêm bất kỳ loại phần tử HTML nào. Nhưng tôi thích tạo kiểu cho bốn chữ cái của văn bản HTML. Do đó, tôi phải gắn thẻ chúng trong phần tử Span. <p> HTML elements are the blocking of a website. There is not website without HTML. Learn HTML and build a website. p>5 Phần chínhChúng ta hãy sử dụng thẻ HTML chính để bọc tất cả nội dung sẽ đi đến phần chính. <p> HTML elements are the blocking of a website. There is not website without HTML. Learn HTML and build a website. p>6 Phần chân trangCó một thẻ HTML chân trang để tạo chân trang. Hãy để chúng tôi tạo chân trang cho trang web. <p> HTML elements are the blocking of a website. There is not website without HTML. Learn HTML and build a website. p>7 Thay vì chỉ ném văn bản vào thẻ chân trang, hãy để chúng tôi thêm một thẻ HTML nhỏ để bọc văn bản và nó sẽ được kết xuất thành một văn bản kích thước nhỏ. <p> HTML elements are the blocking of a website. There is not website without HTML. Learn HTML and build a website. p>8 Phong cách nội tuyếnChúng ta có thể áp dụng CSS cho phần tử HTML bằng cách sử dụng kiểu dáng nội tuyến. Nhìn vào hình dưới đây Chúng tôi sử dụng thuộc tính kiểu để áp dụng CSS cho phần tử HTML. Ví dụ, chúng ta hãy áp dụng phong cách cho H2. <p> HTML elements are the blocking of a website. There is not website without HTML. Learn HTML and build a website. p>9 Chúng tôi có thể thêm nhiều thuộc tính CSS bằng cách tách bằng dấu chấm phẩy <h2 id="first-title">Welcome to 30 Days of HTMLh2>0 Như bạn có thể thấy từ mã trên, các thuộc tính kích thước phông chữ và nền đã được sử dụng. Tương tự cho chúng tôi áp dụng phong cách cho các yếu tố nhịp. <h2 id="first-title">Welcome to 30 Days of HTMLh2>1 Màu sắc có thể được mô tả bằng tên, thập lục phân, RGB (đỏ, xanh lá cây, xanh dương) và HSL (HUE, SATHERATION, SILLEDNESS). Có khoảng 1,67 triệu màu sắc và thật khó để mô tả chúng bằng tên. Có khoảng 140 màu có thể được mô tả bằng tên và phần còn lại của các màu có thể được mô tả bằng cách sử dụng thập lục phân, RGB hoặc HSL. Một dạng của màu có thể được chuyển đổi thành khác. Hãy xem dạng khác nhau của màu đỏ (tên), hexadecimal (#ff0000), rgb (RGB (255, 0, 0)) và HSL (HSL (0, 100%, 50%)) Nếu bạn làm theo tất cả các bước bây giờ, bạn sẽ có được một cái gì đó như thế này. Xin chúc mừng! Bạn đã hoàn thành Thử thách ngày 3 Tập thể dục
<h2 id="first-title">Welcome to 30 Days of HTMLh2>1 Ngày 4Các yếu tố chặn và không chặnCác phần tử HTML giống như một hộp. Một số yếu tố lấy toàn bộ chiều rộng của cổng xem trong khi một số yếu tố chiếm nhiều không gian chỉ phù hợp với nội dung. Theo một cách khác, một số yếu tố không cho phép các yếu tố khác xuất hiện bên cạnh cả hai ở bên trái và bên phải, tuy nhiên, một số yếu tố cho phép các yếu tố khác đến bên cạnh chúng.
Danh sách các yếu tố chặn: <h2 id="first-title">Welcome to 30 Days of HTMLh2>3 Bây giờ, chúng ta hãy sử dụng một số phần tử chặn trong đoạn mã sau. <h2 id="first-title">Welcome to 30 Days of HTMLh2>4 Danh sách các yếu tố không chặn <h2 id="first-title">Welcome to 30 Days of HTMLh2>5 Hãy sử dụng các thẻ trên trong đoạn mã trước đó. <h2 id="first-title">Welcome to 30 Days of HTMLh2>6 Để tạo một ranh giới mới giữa các phần tử không chặn, chúng ta có thể sử dụng phần tử Break (BR). Bài tập
Ngày 5Các yếu tố định dạng HTML5Chúng tôi định dạng văn bản ở dạng khác nhau trên cơ sở hàng ngày. Mỗi người dùng Microsoft Office đều biết cách định dạng một văn bản trên tài liệu Microsoft Office. Tương tự, chúng ta có thể định dạng văn bản trên web bằng các phần tử HTML khác nhau. Các yếu tố định dạng HTML <h2 id="first-title">Welcome to 30 Days of HTMLh2>7 Tôi muốn được in đậm Tôi là một văn bản rất quan trọng Tôi muốn trở thành một văn bản chữ in chữ Tôi được nhấn mạnh Tôi được đánh dấu văn bản Tôi là một văn bản nhỏ hơn Tôi bị xóa văn bản ngôn ngữ yêu thích của tôi không phải là python. Đó là JavaScript 2H2 + O2 = 2H2 O 210 = 1024bold Text <h2 id="first-title">Welcome to 30 Days of HTMLh2>8 Tôi được gạch chân Bài tậpYếu tố chặn là gì? Yếu tố không chặn là gì?Sự khác biệt giữa các yếu tố khối và không chặn là gì?Liệt kê ít nhất năm yếu tố chặn Liệt kê ít nhất năm yếu tố không chặn are not semantic elements because they do not give any meaning to a browser. However, or is a semantic element because it clearly describe and defines its content. List of some semantic elements: <h2 id="first-title">Welcome to 30 Days of HTMLh2>9 Ngày 5 Các yếu tố định dạng HTML5Chúng tôi định dạng văn bản ở dạng khác nhau trên cơ sở hàng ngày. Mỗi người dùng Microsoft Office đều biết cách định dạng một văn bản trên tài liệu Microsoft Office. Tương tự, chúng ta có thể định dạng văn bản trên web bằng các phần tử HTML khác nhau. Các yếu tố định dạng HTMLTôi muốn được in đậm Tôi là một văn bản rất quan trọng Tôi muốn trở thành một văn bản chữ in chữ Tôi được nhấn mạnh Tôi được đánh dấu văn bản Tôi là một văn bản nhỏ hơn Tôi bị xóa văn bản ngôn ngữ yêu thích của tôi không phải là python. Đó là JavaScript 2H2 + O2 = 2H2 O 210 = 1024
<h2 id="first-title">Welcome to 30 Days of HTMLh2>8 Tôi được gạch chân
<h2 id="first-title" class="title">Welcome to 30 Days of HTMLh2>0 Ngày 6 Bài tập
|
| Siêu dữ liệu tài liệu HTML | Tài liệu HTML bắt đầu bằng một khai báo theo sau là thẻ gốc. Bên trong thẻ, có và. Các chứa siêu dữ liệu tài liệu HTML. Siêu dữ liệu chứa thông tin về trang bao gồm các kiểu, tập lệnh và dữ liệu để giúp người dùng phần mềm và hiển thị trang. Trong phần này, chúng ta sẽ học cách sử dụng siêu dữ liệu khác nhau. Nhìn vào cú đánh bàn hiểu siêu dữ liệu khác nhau. | Nguồn, mdn |
| Cơ sở: Thẻ cơ sở đề cập đến URL cơ sở cho tất cả các URL tương đối trong tài liệu | 250 | Xin chúc mừng! Bây giờ, bạn đã biết về siêu dữ liệu. |
Các yếu tố siêu dữ liệu là gì?
<h2 id="first-title" class="title">Welcome to 30 Days of HTMLh2>4
ID là gì?
| Sự khác biệt giữa ID và lớp là gì? | Điều gì là sự khác biệt giữa phong cách và kịch bản? | SEO là gì? |
|---|---|---|
| Cơ sở: Thẻ cơ sở đề cập đến URL cơ sở cho tất cả các URL tương đối trong tài liệu | 250 | Xin chúc mừng! Bây giờ, bạn đã biết về siêu dữ liệu. |
Các yếu tố siêu dữ liệu là gì?
<h2 id="first-title" class="title">Welcome to 30 Days of HTMLh2>5
ID là gì?
Sự khác biệt giữa ID và lớp là gì?
Điều gì là sự khác biệt giữa phong cách và kịch bản?
Danh sách rất quan trọng để liệt kê các mục xuống.Trong HTML, chúng tôi có các loại danh sách khác nhau như danh sách được đặt hàng, danh sách không theo thứ tự và danh sách mô tả.
Danh sách được yêu cầu
Nếu bạn muốn trở thành một nhà phát triển web, hãy tìm hiểu các công nghệ sau đây theo đơn đặt hàng:
<h2 id="first-title" class="title">Welcome to 30 Days of HTMLh2>6
Danh sách chưa được đặt hàng
Chúng tôi sử dụng danh sách không theo thứ tự nếu chúng tôi không quan tâm đến thứ tự hoặc phân cấp của danh sách.
Chẳng hạn, nếu chúng ta muốn liệt kê các quốc gia Scandinavi.
<h2 id="first-title" class="title">Welcome to 30 Days of HTMLh2>7
Danh sách mô tả
Một danh sách mô tả thụt vào danh sách bên phải.
<h2 id="first-title" class="title">Welcome to 30 Days of HTMLh2>8
Đầu ra của mã trên
HTMLHTML (Ngôn ngữ đánh dấu siêu văn bản) là khối xây dựng Web.csscss (Bảng kiểu xếp tầng) làm cho trang HTML trông đẹp.JavaScriptJavaScript là ngôn ngữ lập trình có thể thêm tính tương tác với trang webReactreact là một thư viện JavaScript hiện đại được phát hành ban đầu vào ngày 29 tháng 5 năm 2013.
