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

Sự khác biệt giữa HTML, CSS và JavaScript là gì?

Tìm hiểu về sự khác biệt giữa HTML, CSS và JavaScript.

Khi bạn bắt đầu tìm hiểu về phát triển web, cụ thể là phát triển giao diện người dùng, HTML, CSS và JavaScript phần lớn được coi là 3 yếu tố cơ bản nhất trong chồng kỹ năng của bạn.

HTML, CSS và JavaScript đều là một phần của cùng một hệ sinh thái phát triển web và cần phải làm việc cùng nhau để tối đa hóa tiềm năng của web hiện đại.

Nhưng ... chính xác thì điều gì làm cho HTML, CSS và JavaScript khác biệt với nhau?

  • HTML là viết tắt của Ngôn ngữ đánh dấu siêu văn bản.
  • CSS viết tắt của Cascading Stylesheets
  • JavaScript viết tắt của ... well JavaScript (phím tắt JS )

HTML

HTML là một ngôn ngữ đánh dấu mà chúng tôi sử dụng để mô tả nội dung và bố cục cấu trúc thô cơ bản của một trang web.

Phép tương tự: HTML là khung và nội dung của một ngôi nhà. Vì vậy, những thứ như ghế, bàn, cửa, cầu thang, những thứ thiết yếu nhất cấu thành nên một ngôi nhà, không có gì hơn.

Công việc của nhà phát triển HTML là cung cấp các yêu cầu tối thiểu nhất của trang web bằng cách mô tả nội dung của trang web một cách chính xác để khi các nhà thiết kế vào, họ biết đâu là nút và đâu là đoạn.

Ví dụ:

<!-- Describe content -->

<p>This text is described correctly by wrapping it between opening and closing paragraph tags.</p>

<button>I’m a button</button>

CSS

CSS là một ngôn ngữ tạo kiểu mà chúng tôi sử dụng để định hình và tạo kiểu cho nội dung trang web về màu sắc, kiểu chữ, khoảng cách, đường viền, v.v.

Phép tương tự: CSS là màu sơn và các cạnh bo tròn của một ngôi nhà làm cho hình ảnh hấp dẫn và thoải mái khi ở. Về mặt kỹ thuật, định nghĩa ghế là thứ mà bạn ngồi, nhưng những thứ như hình dạng, kích thước và lớp đệm (thiết kế) mới là thứ tạo nên ghế thoải mái (hoặc không thoải mái) để ngồi.

Công việc của nhà phát triển CSS là đảm bảo rằng trang web có phong cách trực quan phù hợp mà chủ sở hữu muốn về màu sắc, kiểu chữ, khoảng cách, hình dạng và bố cục tổng thể khi xem trên các thiết bị khác nhau.

Ví dụ:

/* Style text element */
p {
	font-family: "Helvetica";
	font-size: 20px;
	line-height: 1.5;
}

/* Style button */
button {
	font-size: 16px;
	font-weight: bold;
	padding: 16px 32px;
	border-radius: 8px;
	color: white;
	background-color: green;
}

JavaScript

JavaScript là một ngôn ngữ lập trình động cho phép bạn tạo các trang web tương tác và phản ứng.

Tương tự: JavaScript là nguồn cung cấp điện và nước giúp một ngôi nhà hiện đại trở thành một ngôi nhà hiện đại và giúp bạn có thể tắm, nấu thức ăn và không bị chết cóng trong mùa đông. Một nhà phát triển JavaScript đảm bảo rằng đèn bật sáng khi bạn lật công tắc và nước nóng / lạnh chảy ra khi bạn vặn vòi nước.

Công việc của các nhà phát triển JavaScript là đảm bảo rằng khi bạn nhấp vào nút có nội dung “Menu”, một menu ngoài canvas sẽ sẵn sàng để sử dụng. JavaScrip là thứ làm cho các phần tử của trang web phản hồi với thông tin người dùng nhập vào.

Ví dụ:

// Make button interactive 

const button = document.querySelector("button")

button.addEventListener("click", showModal)

function showModal() {
	alert("You clicked on the button!")
}