Bình luận css bên trong bình luận


Nhận xét CSS không được hiển thị trong trình duyệt, nhưng chúng có thể giúp ghi lại mã nguồn của bạn


Nhận xét được sử dụng để giải thích mã và có thể hữu ích khi bạn chỉnh sửa mã nguồn sau này

Nhận xét bị bỏ qua bởi các trình duyệt

Một chú thích CSS được đặt bên trong

My Heading

Hello World!

This paragraph is styled with CSS.

________số 8


p {
  color: red;  /* Set text color to red */
}
0

Bình luận(bình luận) được sử dụng để giải thích mã và có thể giúp ích khi bạn chỉnh sửa nguồn mã vào một ngày sau đó

Bình luận bị loại bỏ bởi các trình duyệt

Bình luận CSS được đặt bên trong phần tử

p {
  color: red;  /* Set text color to red */
}
1 và bắt đầu bằng /* và kết thúc bằng */

Ví dụ

 /* This is a single-line comment */
p {
  color: red;
} 

Bạn có thể thêm nhận xét bất cứ nơi nào bạn muốn trong mã

p {
  color: red;  /* Set text color to red */
}

Bình luận cũng có thể trải dài trên nhiều dòng

/* This is
a multi-line
comment */

p {
  color: red;
}

2. Bình luận HTML và CSS

Từ hướng dẫn HTML, bạn đã học được rằng bạn có thể thêm nhận xét (bình luận) vào mã HTML của mình bằng cách sử dụng cú pháp

p {
  color: red;  /* Set text color to red */
}
2

Trong ví dụ sau, chúng tôi sử dụng kết hợp các nhận xét HTML và CSS










My Heading

Hello Cafedev!

This paragraph is styled with CSS.

CSS comments are not shown in the output.

Sao chép và chạy mã

Nếu thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa

Để nhận phản hồi hoặc bất kỳ tin nhắn nào từ khách truy cập trang web, bạn cần có một hộp bình luận trên trang web của bạn. Một hộp nhận xét có thể được tạo bằng cách sử dụng bất kỳ công nghệ web nào cho dù đó là HTML, CSS hay thậm chí là JavaScript đơn giản. Ba công cụ HTML, CSS và JavaScript là đủ để tạo các trang web đầy đủ chức năng

Nội dung chính Hiển thị

  • Kết luận
  • Thông tin về các tác giả
  • Làm thế nào để bạn tạo một phần bình luận trong HTML và JavaScript?
  • Làm thế nào để bạn tạo một phần bình luận trong JavaScript?
  • Làm cách nào để đưa ra một phần bình luận trong HTML?
  • Làm thế nào để bạn nhận JavaScript trong HTML?

Nội dung chính Hiển thị Hiển thị

  • Kết luận
  • Thông tin về các tác giả
  • Làm thế nào để bạn tạo một phần bình luận trong HTML và JavaScript?
  • Làm thế nào để bạn tạo một phần bình luận trong JavaScript?
  • Làm cách nào để đưa ra một phần bình luận trong HTML?
  • Làm thế nào để bạn nhận JavaScript trong HTML?

Chúng tôi sẽ khám phá cách thực hiện một hộp nhận xét đơn giản với HTML, CSS và JavaScript trong bài đăng này

Mở thảo luận yêu thích của bạn và nhập hoặc sao chép mã dưới đây được đưa ra. Lưu tệp với tiện ích mở rộng HTML

& nbsp; . 0"DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      < tiêu đề . css"Comment Boxtitle>
    <link rel="stylesheet" href="style.css">
đầu >
<body>

& nbsp; <input type="text" id="comment-box" placeholder="Enter comment">
    <button id="post">Postbutton>
    <ul id="unordered">

  ul>

  . js" <script src="code.js">tập lệnh >
nội dung >
html>

Trong mã HTML ở trên, chúng tôi đã sử dụng thẻ liên kết trong thẻ đầu để tham chiếu tệp CSS mà chúng tôi sẽ sử dụng sau. Sau này, trong thẻ cơ thể trước, chúng tôi đã bắt đầu một hộp bắt đầu trong đó người dùng có thể nhập nhận xét của họ. Sau đó, một nút có tên của bài đăng được bắt đầu sẽ được nhấp để nhập nhận xét. Sau này, chúng tôi đã bắt đầu một danh sách không có thứ tự (UL) và để trống vì chúng tôi sẽ thêm một phần tử LI từ JavaScript trong thẻ này. Bạn cũng có thể thấy rằng chúng tôi sử dụng thuộc tính ID trong mã trên sẽ được sử dụng để tham chiếu các phần tử tương đồng trong mã JavaScript. Thẻ cuối cùng là tập lệnh thẻ nơi chúng tôi đã truyền tham chiếu của tệp JavaScript sẽ được đính kèm vào tệp HTML hiện tại. Tên tệp JavaScript là Mã. js. thẻ liên kết trong thẻ đầu để tham chiếu tệp CSS mà chúng tôi sẽ sử dụng sau này. Sau đó, trong thẻ body trước tiên, chúng tôi đã bắt đầu một hộp nhập nơi người dùng có thể nhập nhận xét của họ. Sau đó, một nút có tên của bài đăng được bắt đầu, nút này sẽ được nhấp để nhập bình luận. Sau đó, chúng tôi đã bắt đầu một danh sách không có thứ tự (ul) và để trống vì chúng tôi sẽ thêm phần tử li từ JavaScript vào thẻ này. Bạn cũng có thể thấy rằng chúng tôi sử dụng thuộc tính id trong đoạn mã trên sẽ được sử dụng để tham chiếu các phần tử tương ứng trong mã JavaScript. Thẻ cuối cùng là thẻ tập lệnh nơi chúng tôi đã chuyển tham chiếu của tệp JavaScript sẽ được đính kèm vào tệp HTML hiện tại. Tên tệp JavaScript là mã. js. thẻ liên kết trong thẻ đầu để tham chiếu tệp CSS mà chúng tôi sẽ sử dụng sau này. Sau đó, trong thẻ body trước tiên, chúng tôi đã bắt đầu một hộp nhập nơi người dùng có thể nhập nhận xét của họ. Sau đó, một nút có tên của bài đăng được bắt đầu, nút này sẽ được nhấp để nhập bình luận. Sau đó, chúng tôi đã bắt đầu một danh sách không có thứ tự (ul) và để trống vì chúng tôi sẽ thêm phần tử li từ JavaScript vào thẻ này. Bạn cũng có thể thấy rằng chúng tôi sử dụng thuộc tính id trong đoạn mã trên sẽ được sử dụng để tham chiếu các phần tử tương ứng trong mã JavaScript. Thẻ cuối cùng là thẻ tập lệnh nơi chúng tôi đã chuyển tham chiếu của tệp JavaScript sẽ được đính kèm vào tệp HTML hiện tại. Tên tệp JavaScript là mã. js

CSS

Tạo một tệp với tên của kiểu. css. Cần lưu ý rằng bạn có thể đặt tên cho tệp của mình bất cứ điều gì nhưng hãy nhớ tham chiếu tên đó trong thẻ liên kết tệp HTML. Sao chép và dán mã bên dưới vào tệp CSS của bạn

cơ thể {  . DodgerBlue tuyến tính-Gradient (45Deg, Aqua, DodgerBlue, Deeppink) đã được định sẵn;{     nền. Độ dốc tuyến tính Dodgerblue(45deg, aqua, Dodgerblue, deeppink) đã cố định; {
    nền . tuyến tính Dodgerblue - độ dốc (45deg, aqua, dodgerblue, deeppink) fixed;

} #bình luận-box, #post {  . No have; . 5px;} #Đăng. Di chuột {  . deeppink;} #comment-box, #post {     đường viền. không ai; . 5px;} #post. hover{     màu nền. deeppink;}
#bình luận - ô , #post {
    border: không có ;
    đường viền - bán kính . : 5px ;
}
#post . di chuột {
    nền - màu . : deeppink ;
}

Trong mã CSS ở trên, đầu tiên, chúng tôi đã tham khảo thẻ cơ sở của HTML và trang nền cơ thể với các màu khác nhau. Sau đó, sử dụng thuộc tính ID của hộp đầu vào, chúng tôi đã biến mất đường viền của hộp đầu vào và cho nó bán kính 5px. Kiểu dáng tương tự đã được áp dụng cho nút Đăng. Sau đó, sử dụng thuộc tính Di chuột, chúng tôi đặt màu nền của màu hồng đậm cho nút bài có nghĩa là bất cứ khi nào người dùng sẽ di chuột qua nút Bài đăng, màu của nó sẽ thay đổi thành màu hồng đậm. thẻ body của HTML và trang trí nền body với các màu khác nhau. Sau đó, sử dụng thuộc tính id của hộp nhập liệu, chúng tôi đã làm biến mất đường viền của hộp nhập liệu và đặt bán kính cho nó là 5px. Kiểu dáng tương tự đã được áp dụng cho nút đăng. Sau này, sử dụng thuộc tính hover, chúng tôi đặt màu nền là hồng đậm cho nút đăng, nghĩa là bất cứ khi nào người dùng di chuột qua nút đăng, màu của nó sẽ chuyển sang hồng đậm. thẻ body của HTML và trang trí nền body với các màu khác nhau. Sau đó, sử dụng thuộc tính id của hộp nhập liệu, chúng tôi đã làm biến mất đường viền của hộp nhập liệu và đặt bán kính cho nó là 5px. Kiểu dáng tương tự đã được áp dụng cho nút đăng. Sau này, sử dụng thuộc tính hover, chúng tôi đặt màu nền là hồng đậm cho nút đăng, nghĩa là bất cứ khi nào người dùng di chuột qua nút đăng, màu của nó sẽ chuyển sang hồng đậm

JavaScript

Tạo tệp JavaScript với tiện ích mở rộng JS ví dụ Code. js. Cần lưu ý rằng tên của tệp phải tương tự như tên được tham chiếu trong thẻ lệnh của tệp HTML. phần mở rộng js cho mã ví dụ. js. Cần lưu ý rằng tên của tệp phải giống với tên được tham chiếu trong thẻ script của tệp HTML. phần mở rộng js cho mã ví dụ. js. Cần lưu ý rằng tên của tệp phải giống với tên được tham chiếu trong thẻ script của tệp HTML

In File Code. js, trước tiên, chúng tôi nhận phần tử nút HTML bằng phương thức getEuityById () và chuyển tên của ID được đưa vào nút trong HTML. Bạn cũng có thể thấy một sự kiện nghe trình được gắn vào bài đăng về cơ bản là nút tử. Trình nghe sự kiện này sẽ liên tục lắng nghe và bất cứ khi nào người dùng nhấp vào nút Đăng, chức năng trong trình nghe sự kiện sẽ được thực thi. mã số. js, trước tiên, chúng tôi lấy phần tử nút HTML bằng phương thức getElementById() và chuyển tên của id được đặt cho nút trong HTML. Bạn cũng có thể thấy trình xử lý sự kiện được đính kèm với bài đăng, về cơ bản là phần tử nút. Trình lắng nghe sự kiện này sẽ liên tục lắng nghe và bất cứ khi nào người dùng nhấp vào nút đăng, chức năng trong Trình lắng nghe sự kiện sẽ được thực thi. mã số. js, trước tiên, chúng tôi lấy phần tử nút HTML bằng phương thức getElementById() và chuyển tên của id được đặt cho nút trong HTML. Bạn cũng có thể thấy trình xử lý sự kiện được đính kèm với bài đăng, về cơ bản là phần tử nút. Trình lắng nghe sự kiện này sẽ liên tục lắng nghe và bất cứ khi nào người dùng nhấp vào nút đăng, chức năng trong Trình lắng nghe sự kiện sẽ được thực thi

var bài viết = tài liệu. getEuityById("bài đăng"); . AdDeventListener("Nhấp", function() {   var bình luậnboxvalue=document. getEuityById ("bình luận-box"). value; . getElementById("bài đăng"); . addEventListener("click",function(){     var commentBoxValue= document. getElementById("hộp bình luận"). giá trị; đăng = tài liệu. getElementById("đăng");
post.addEventListener("click", function(){
    var commentBoxValue= document.getElementById("hộp nhận xét").giá trị;

  . phần tử tạo ("li"); . createTextNode (bình luậnboxvalue); . AppendChild(văn bản); . getEuityById ("không theo thứ tự"). appendChild (li);var li = tài liệu. createElement("li"); . tạoTextNode(commentBoxValue); . appendChild(văn bản); . getElementById("không có thứ tự"). appendChild(li); var li = tài liệu. createElement("li");
    var text = document.createTextNode( commentBoxValue ); .
    li.appendChild( văn bản ); .
    document.getElementById("không có thứ tự").appendChild( li );

& nbsp; });

Trong hàm người nghe sự kiện, trước tiên, chúng tôi sẽ nhận được giá trị của hộp đầu vào và sau đó, chúng tôi đã tạo ra một phần tử LI. Để đặt văn bản của phần tử LI, chúng tôi đã sử dụng CreatEtExtNode và sau đó sử dụng phương thức Phụ lục, chúng tôi đã cung cấp văn bản cho phần tử LI. Cuối cùng, bằng cách sử dụng phương thức phụ lục, chúng tôi đang cung cấp danh sách không có thứ tự về phần tử LI mà chúng tôi vừa tạo. createTextNode và sau đó sử dụng phương thức appendChild, chúng tôi đã cung cấp văn bản cho phần tử li. Cuối cùng, bằng cách sử dụng phương thức appendChild, chúng tôi đang cung cấp danh sách không có thứ tự của phần tử li mà chúng tôi vừa tạo. createTextNode và sau đó sử dụng phương thức appendChild, chúng tôi đã cung cấp văn bản cho phần tử li. Cuối cùng, bằng cách sử dụng phương thức appendChild, chúng tôi đang cung cấp danh sách không có thứ tự của phần tử li mà chúng tôi vừa tạo

Kết luận

HTML, CSS và JavaScript là các khối xây dựng cho nhà phát triển web và nhiều trang web được phát triển bằng ba công nghệ này

Trong bài đăng này, chúng tôi đã cung cấp cho bạn mã hóa và giải thích về mã về cách tạo hộp bình luận bằng HTML, CSS và JavaScript. Dự án này sẽ hữu ích khi bạn lập danh sách công việc cần làm, nhận xét trên trang web hoặc biểu mẫu phản hồi cũng như đính kèm văn bản vào một trang trong bất kỳ trang web dự án nào

Thông tin về các tác giả

Bình luận css bên trong bình luận

Một nhà phát triển JavaScript & người đam mê Linux với 4 năm kinh nghiệm công nghiệp và đã được chứng minh để kết hợp các quan điểm sáng tạo và khả năng sử dụng dẫn đến các ứng dụng web đẳng cấp thế giới. Tôi có kinh nghiệm làm việc với Vue, React & Node. js & hiện đang làm về viết bài viết và tạo video