Bạn đang xem : mã html chạy trực tuyến

Trình chỉnh sửa mã HTML Trực tuyến

Viết, Chạy & amp; Chia sẻ mã HTML trực tuyến bằng trình soạn thảo Mã trực tuyến HTML của OneCompiler miễn phí. Đây là một trong những trình soạn thảo Mã trực tuyến mạnh mẽ, giàu tính năng dành cho ngôn ngữ HTML, chạy trên phiên bản HTML5 mới nhất. Bắt đầu với trình biên dịch HTML của OneCompiler rất đơn giản và khá nhanh. Trình chỉnh sửa hiển thị mã mẫu soạn sẵn khi bạn chọn ngôn ngữ là HTML . Bạn cũng có thể chỉ định thông tin biểu định kiểu trong tab styles.css và thông tin tập lệnh trong tab scripts.js và bắt đầu viết mã.

Giới thiệu về HTML

HTML (Ngôn ngữ đánh dấu siêu văn bản) là ngôn ngữ đánh dấu tiêu chuẩn cho các trang Web, được tạo ra bởi Berners-Lee vào năm 1991. Hầu hết mọi trang web trên internet đều có thể sử dụng HTML.

Cú pháp trợ giúp

Nguyên tắc cơ bản

  • Mọi tài liệu HTML phải bắt đầu bằng khai báo tài liệu & lt;! DOCTYPE html & gt;
  • Tài liệu HTML bắt đầu bằng & lt; html & gt; và kết thúc bằng & lt; / html & gt;
  • Các tiêu đề được xác định bằng & lt; h1 & gt; thành & lt; h6 & gt; trong đó & lt; h1 & gt; là tiêu đề quan trọng nhất và & lt; h6 & gt; là tiêu đề phụ ít quan trọng nhất.
  • Các đoạn chữ được xác định trong thẻ & lt; p & gt; .. & lt; / p & gt; .
  • Các liên kết được xác định trong & lt; a & gt; thẻ.

    Ví dụ:

      & lt; a href = "https: // onecompil er.com/html">HTML trình biên dịch trực tuyến & lt; / a & gt;  
  • Hình ảnh được xác định trong thẻ & lt; img & gt; , trong đó Thuộc tính src bao gồm tên hình ảnh.
  • Các nút được xác định trong thẻ & lt; button & gt; .. & lt; / button & gt;
  • Danh sách được định nghĩa trong & lt; ul & gt; cho danh sách không có thứ tự / dấu đầu dòng và & lt; ol & gt; cho danh sách có thứ tự / số và các mục danh sách được xác định trong & lt; li & gt ; .

Phần tử và thuộc tính HTML

  • Phần tử HTML là mọi thứ hiện diện từ thẻ bắt đầu đến thẻ kết thúc.
  • Văn bản nằm giữa thẻ bắt đầu và thẻ kết thúc được gọi là nội dung phần tử HTML.
  • Bất kỳ thứ gì cũng có thể là một tên thẻ nhưng bạn nên đặt tiêu đề có ý nghĩa cho nội dung được hiển thị dưới dạng tên thẻ.
  • Làm không quên thẻ kết thúc.
  • Các phần tử không có nội dung được gọi là phần tử trống.
  • Các phần tử có thể có các thuộc tính cung cấp thông tin bổ sung về phần tử.
  • Trong ví dụ dưới đây, href là một thuộc tính ↑ và a là tên thẻ.

    Ví dụ:

      & lt; a href = "https://onecompiler.com/html" & gt; Trình biên dịch trực tuyến HTML & lt; / a & gt;  

CSS

CSS (các biểu định kiểu xếp tầng) mô tả cách các phần tử HTML sẽ trông như thế nào trên trang web như màu sắc, kiểu phông chữ, phông chữ- kích thước, màu nền, v.v.

Ví dụ:

Dưới đây là biểu định kiểu mẫu hiển thị tiêu đề bằng màu xanh lá cây và ở phông chữ Candara với khoảng cách đệm là 25px.

  body {
  đệm: 25px;
}
.Tiêu đề {
màu: # 228B22;
phông-họ: Candara;
}  

Bảng HTML

  • Bảng HTML được xác định trong thẻ & lt; table & gt; .
  • Bảng hàng phải được xác định trong thẻ & lt; tr & gt;
  • Tiêu đề bảng phải được xác định trong thẻ & lt; th & gt;
  • Bảng dữ liệu phải được xác định trong thẻ & lt; td & gt;
  • Chú thích bảng phải được xác định trong thẻ & lt; caption & gt;

HTML-Javascript

  • Javascript được sử dụng trong các trang HTML để làm cho chúng tương tác hơn.
  • & lt; script & gt; là thẻ được sử dụng để viết tập lệnh trong HTML
  • Bạn có thể tham chiếu tập lệnh bên ngoài hoặc viết mã tập lệnh trong thẻ này.

Ví dụ

  & lt; script src = "script.js" & gt; & lt; / script & gt;  


Xem thêm những thông tin liên quan đến chủ đề mã html chạy trực tuyến

7 Best Browser-based, Online Code Editors for Web Developers

  • Tác giả: Elegant Themes
  • Ngày đăng: 2020-05-14
  • Đánh giá: 4 ⭐ ( 8184 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In today's video, we'll check out the 7 best browser based, online code editors for web developers

    Blog post: https://www.elegantthemes.com/blog/wordpress/7-best-browser-based-online-code-editors-for-web-developers

    ➡️ Learn more about Divi: https://www.elegantthemes.com/gallery/divi
    🔵 Like us on Facebook: https://www.facebook.com/elegantthemes/

    OnlineCodeEditors WordPress ElegantThemes

Di chuyển trang tính Excel trực tuyến, chia sẻ, nhúng mã trên trang web

  • Tác giả: blog.hocexcel.online
  • Đánh giá: 4 ⭐ ( 9207 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các công nghệ mới mà Học Excel Online trình bày sau đây có khả năng chia sẻ dữ liệu Excel trực tuyến là phương pháp đơn giản và dễ sử dụng.

5 trình biên tập HTML trực tuyến tốt nhất cho dân lập trình

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 4 ⭐ ( 5223 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 5 trinh bien tap HTML truc tuyen tot nhat cho dan lap trinh, 5 trình biên tập HTML trực tuyến tốt nhất cho dân lập trình

Xem Kênh HTV7 HD Online

  • Tác giả: hplus.com.vn
  • Đánh giá: 3 ⭐ ( 5886 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Xem Kênh HTV7 HD Online: Truyền hình HTV7 HD đang phát trực tiếp World cup 2018, Bạn Muốn Hẹn Hò, Cô Nàng Hoàn Hảo, Yêu Là Chọn, Vợ Chồng Son, Chương Trình 60 Giây, Quý Cô Hoàn Hảo, ...

10 trang web để bạn test code online

  • Tác giả: nhatphuc.com
  • Đánh giá: 3 ⭐ ( 9717 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Dĩ nhiên bạn cần một kết nối Internet để thử nghiệm. Hầu hết các công cụ này chắc chắn sẽ hữu ích khi bạn đang cố gắng gỡ lỗi một đoạn mã JavaScript hoặc PHP.

Cách kiểm tra mã HTML trong trình duyệt

  • Tác giả: helpex.vn
  • Đánh giá: 3 ⭐ ( 4338 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: HTML là một trong những ngôn ngữ dễ dàng nhất để phát triển web. Kiểm tra mã HTML để đảm bảo rằng trang web hoạt động tốt trên các trình duyệt là yêu cầu chính đối với hầu hết các nhà phát…

Mã HTML trực tuyến chạy công cụ xem trước

  • Tác giả: ytool.net
  • Đánh giá: 4 ⭐ ( 5716 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Công cụ xem trước chạy mã HTML trực tuyến, bạn có thể nhanh chóng chạy mã HTML, xem và xem trước hiệu ứng hiển thị thực tế của trang HTML.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  35 hiệu ứng di chuột qua hình ảnh Bootstrap tốt nhất - nút bootstrap trên hình ảnh

By ads_php