Tôi có nên sử dụng mẫu html không?

Question

Tôi hoàn toàn nghĩ rằng các nhà thiết kế web mới bắt đầu nên sử dụng các mẫu. Và theo các mẫu, ý tôi là thứ mà bạn có thể mua từ ThemeForest hoặc dịch vụ bán mẫu khác. Dưới đây là một vài lý do tại sao

Nội dung chính Show

Ưu điểm chính của việc sử dụng các mẫu HTML là gì?
Tôi có nên sử dụng một mẫu cho trang web cá nhân của mình không?
Khi nào tôi nên sử dụng mẫu?
Tôi có nên sử dụng mẫu cho trang web danh mục đầu tư của mình không?

Tinh chỉnh = học tập. Mẫu cần được thay đổi/thay đổi/tinh chỉnh. Đó là toàn bộ ý tưởng của một mẫu. Khi một nhà thiết kế mới bắt đầu làm những việc đó, họ đang học cách mã hoạt động. Tinh chỉnh các chủ đề WordPress chính xác là cách tôi bắt đầu thiết kế web
Phẩm chất. Khi trang web được "hoàn thành", một người mới bắt đầu sẽ có thứ gì đó mà họ có thể rất tự hào. Có lẽ sẽ tự hào hơn là nếu họ bắt đầu từ đầu và kết thúc với một thứ gì đó rất cơ bản (hoặc hết sức xấu xí). Điều đó sẽ cung cấp động lực tốt để gắn bó với nó
"Thế giới thực. ” Giả sử mẫu được mã hóa tốt, người mới bắt đầu sẽ xem xét một lượng đánh dấu chất lượng tốt và CSS hiệu quả được tổ chức tốt. Điều đó thật tuyệt khi đi sâu vào thiết kế giao diện người dùng trong thế giới thực, trái ngược với việc bắt đầu với kiểu đánh dấu mà một cuốn sách giới thiệu về HTML có thể giúp bạn bắt đầu với

Nhưng nếu bạn không phải là người mới bắt đầu thì sao?

Nếu bạn là một nhà thiết kế chuyên nghiệp (ví dụ, một khách hàng đến gặp bạn với nhu cầu về web và bạn sẽ xây dựng một trang web tùy chỉnh cho họ và bạn sẽ tính phí họ hơn vài trăm đô la) thì việc sử dụng một mẫu là,

Công việc của một nhà thiết kế là xem xét cẩn thận các nhu cầu của khách hàng và các khó khăn hiện có và tạo ra một giải pháp. Theo tôi, điều đó bao gồm mọi pixel trên trang web đó. Nếu một số pixel đó được tái chế từ nơi khác, thì chúng không được tạo ra với mục đích giải quyết nhu cầu của khách hàng. Tôi không nói rằng bạn không thể sử dụng tìm/tái sử dụng/tái chế những thứ bạn tìm thấy ở nơi khác, tôi đang nói rằng khi bạn làm như vậy, bạn nên thao túng chúng và xem xét kỹ lưỡng cách chúng tích hợp vào tầm nhìn của trang web

Bạn nghĩ sao?

Đối với các nhà phát triển ngoài kia, bạn có cảm thấy tương tự không?

Trong các tin tức liên quan gần đây, tôi đã đặt một mục vào danh mục CodeCanyon CSS mới được phát hành. Thẻ CSS3. Gần đây, tôi đã có một số cuộc trò chuyện thú vị với mọi người về ý tưởng bán mã và thiết kế. Phần thú vị là cách bán các mẫu thiết kế phần lớn được tán thành trong khi việc bán mã phần lớn được đưa ra không thích. Tôi hoàn toàn có thể đồng cảm với những cảm xúc đó, nhưng tôi đã quyết định rằng nếu việc các nhà thiết kế được trả tiền để bán sản phẩm của họ là điều tuyệt vời, thì việc các nhà phát triển được trả tiền để bán sản phẩm của họ cũng là điều tuyệt vời (bất chấp vấn đề cấp phép)

Phần tử HTML

// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
    // Instantiate the table with the existing HTML tbody
    // and the row with the template
    const tbody = document.querySelector("tbody");
    const template = document.querySelector('#productrow');

    // Clone the new row and insert it into the table
    const clone = template.content.cloneNode(true);
    let td = clone.querySelectorAll("td");
    td[0].textContent = "1235646565";
    td[1].textContent = "Stuff";

    tbody.appendChild(clone);

    // Clone the new row and insert it into the table
    const clone2 = template.content.cloneNode(true);
    td = clone2.querySelectorAll("td");
    td[0].textContent = "0384928528";
    td[1].textContent = "Acme Kidney Beans 2";

    tbody.appendChild(clone2);

} else {
  // Find another way to add the rows to the table because
  // the HTML template element is not supported.
}

5 là cơ chế giữ HTML không được hiển thị ngay lập tức khi trang được tải nhưng có thể được khởi tạo sau đó trong thời gian chạy bằng JavaScript

Hãy nghĩ về một mẫu như một đoạn nội dung đang được lưu trữ để sử dụng sau này trong tài liệu. Mặc dù trình phân tích cú pháp xử lý nội dung của phần tử

// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
    // Instantiate the table with the existing HTML tbody
    // and the row with the template
    const tbody = document.querySelector("tbody");
    const template = document.querySelector('#productrow');

    // Clone the new row and insert it into the table
    const clone = template.content.cloneNode(true);
    let td = clone.querySelectorAll("td");
    td[0].textContent = "1235646565";
    td[1].textContent = "Stuff";

    tbody.appendChild(clone);

    // Clone the new row and insert it into the table
    const clone2 = template.content.cloneNode(true);
    td = clone2.querySelectorAll("td");
    td[0].textContent = "0384928528";
    td[1].textContent = "Acme Kidney Beans 2";

    tbody.appendChild(clone2);

} else {
  // Find another way to add the rows to the table because
  // the HTML template element is not supported.
}

5 trong khi tải trang, nhưng nó chỉ làm như vậy để đảm bảo rằng những nội dung đó hợp lệ;

Các thuộc tính tiêu chuẩn duy nhất mà phần tử

// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
    // Instantiate the table with the existing HTML tbody
    // and the row with the template
    const tbody = document.querySelector("tbody");
    const template = document.querySelector('#productrow');

    // Clone the new row and insert it into the table
    const clone = template.content.cloneNode(true);
    let td = clone.querySelectorAll("td");
    td[0].textContent = "1235646565";
    td[1].textContent = "Stuff";

    tbody.appendChild(clone);

    // Clone the new row and insert it into the table
    const clone2 = template.content.cloneNode(true);
    td = clone2.querySelectorAll("td");
    td[0].textContent = "0384928528";
    td[1].textContent = "Acme Kidney Beans 2";

    tbody.appendChild(clone2);

} else {
  // Find another way to add the rows to the table because
  // the HTML template element is not supported.
}

7 hỗ trợ là các thuộc tính toàn cục

Trong các trình duyệt dựa trên Chromium, phần tử

// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
    // Instantiate the table with the existing HTML tbody
    // and the row with the template
    const tbody = document.querySelector("tbody");
    const template = document.querySelector('#productrow');

    // Clone the new row and insert it into the table
    const clone = template.content.cloneNode(true);
    let td = clone.querySelectorAll("td");
    td[0].textContent = "1235646565";
    td[1].textContent = "Stuff";

    tbody.appendChild(clone);

    // Clone the new row and insert it into the table
    const clone2 = template.content.cloneNode(true);
    td = clone2.querySelectorAll("td");
    td[0].textContent = "0384928528";
    td[1].textContent = "Acme Kidney Beans 2";

    tbody.appendChild(clone2);

} else {
  // Find another way to add the rows to the table because
  // the HTML template element is not supported.
}

7 cũng hỗ trợ một , như một phần của đề xuất "Declarative Shadow DOM" thử nghiệm. Trong các trình duyệt đó, phần tử

// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
    // Instantiate the table with the existing HTML tbody
    // and the row with the template
    const tbody = document.querySelector("tbody");
    const template = document.querySelector('#productrow');

    // Clone the new row and insert it into the table
    const clone = template.content.cloneNode(true);
    let td = clone.querySelectorAll("td");
    td[0].textContent = "1235646565";
    td[1].textContent = "Stuff";

    tbody.appendChild(clone);

    // Clone the new row and insert it into the table
    const clone2 = template.content.cloneNode(true);
    td = clone2.querySelectorAll("td");
    td[0].textContent = "0384928528";
    td[1].textContent = "Acme Kidney Beans 2";

    tbody.appendChild(clone2);

} else {
  // Find another way to add the rows to the table because
  // the HTML template element is not supported.
}

7 có thuộc tính

// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
    // Instantiate the table with the existing HTML tbody
    // and the row with the template
    const tbody = document.querySelector("tbody");
    const template = document.querySelector('#productrow');

    // Clone the new row and insert it into the table
    const clone = template.content.cloneNode(true);
    let td = clone.querySelectorAll("td");
    td[0].textContent = "1235646565";
    td[1].textContent = "Stuff";

    tbody.appendChild(clone);

    // Clone the new row and insert it into the table
    const clone2 = template.content.cloneNode(true);
    td = clone2.querySelectorAll("td");
    td[0].textContent = "0384928528";
    td[1].textContent = "Acme Kidney Beans 2";

    tbody.appendChild(clone2);

} else {
  // Find another way to add the rows to the table because
  // the HTML template element is not supported.
}

0 được trình phân tích cú pháp HTML phát hiện và ngay lập tức được áp dụng làm gốc bóng tối của phần tử cha của nó

Ngoài ra,

// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
    // Instantiate the table with the existing HTML tbody
    // and the row with the template
    const tbody = document.querySelector("tbody");
    const template = document.querySelector('#productrow');

    // Clone the new row and insert it into the table
    const clone = template.content.cloneNode(true);
    let td = clone.querySelectorAll("td");
    td[0].textContent = "1235646565";
    td[1].textContent = "Stuff";

    tbody.appendChild(clone);

    // Clone the new row and insert it into the table
    const clone2 = template.content.cloneNode(true);
    td = clone2.querySelectorAll("td");
    td[0].textContent = "0384928528";
    td[1].textContent = "Acme Kidney Beans 2";

    tbody.appendChild(clone2);

} else {
  // Find another way to add the rows to the table because
  // the HTML template element is not supported.
}

2 có thuộc tính tiêu chuẩn

// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
    // Instantiate the table with the existing HTML tbody
    // and the row with the template
    const tbody = document.querySelector("tbody");
    const template = document.querySelector('#productrow');

    // Clone the new row and insert it into the table
    const clone = template.content.cloneNode(true);
    let td = clone.querySelectorAll("td");
    td[0].textContent = "1235646565";
    td[1].textContent = "Stuff";

    tbody.appendChild(clone);

    // Clone the new row and insert it into the table
    const clone2 = template.content.cloneNode(true);
    td = clone2.querySelectorAll("td");
    td[0].textContent = "0384928528";
    td[1].textContent = "Acme Kidney Beans 2";

    tbody.appendChild(clone2);

} else {
  // Find another way to add the rows to the table because
  // the HTML template element is not supported.
}

3 (không có thuộc tính đánh dấu/nội dung tương ứng), là một

// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
    // Instantiate the table with the existing HTML tbody
    // and the row with the template
    const tbody = document.querySelector("tbody");
    const template = document.querySelector('#productrow');

    // Clone the new row and insert it into the table
    const clone = template.content.cloneNode(true);
    let td = clone.querySelectorAll("td");
    td[0].textContent = "1235646565";
    td[1].textContent = "Stuff";

    tbody.appendChild(clone);

    // Clone the new row and insert it into the table
    const clone2 = template.content.cloneNode(true);
    td = clone2.querySelectorAll("td");
    td[0].textContent = "0384928528";
    td[1].textContent = "Acme Kidney Beans 2";

    tbody.appendChild(clone2);

} else {
  // Find another way to add the rows to the table because
  // the HTML template element is not supported.
}

4 chỉ đọc chứa cây con DOM mà mẫu đại diện. Lưu ý rằng việc sử dụng trực tiếp giá trị của thuộc tính

// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
    // Instantiate the table with the existing HTML tbody
    // and the row with the template
    const tbody = document.querySelector("tbody");
    const template = document.querySelector('#productrow');

    // Clone the new row and insert it into the table
    const clone = template.content.cloneNode(true);
    let td = clone.querySelectorAll("td");
    td[0].textContent = "1235646565";
    td[1].textContent = "Stuff";

    tbody.appendChild(clone);

    // Clone the new row and insert it into the table
    const clone2 = template.content.cloneNode(true);
    td = clone2.querySelectorAll("td");
    td[0].textContent = "0384928528";
    td[1].textContent = "Acme Kidney Beans 2";

    tbody.appendChild(clone2);

} else {
  // Find another way to add the rows to the table because
  // the HTML template element is not supported.
}

3 có thể dẫn đến hành vi không mong muốn;

Đầu tiên chúng ta bắt đầu với phần HTML của ví dụ

<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Codetd>
      <td>Product_Nametd>
    tr>
  thead>
  <tbody>
    
  tbody>
table>

<template id="productrow">
  <tr>
    <td class="record">td>
    <td>td>
  tr>
template>

Đầu tiên, chúng tôi có một bảng mà sau này chúng tôi sẽ chèn nội dung bằng mã JavaScript. Sau đó, đến mẫu, mô tả cấu trúc của một đoạn HTML đại diện cho một hàng của bảng

Bây giờ bảng đã được tạo và mẫu được xác định, chúng tôi sử dụng JavaScript để chèn các hàng vào bảng, với mỗi hàng được tạo bằng cách sử dụng mẫu làm cơ sở

// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
    // Instantiate the table with the existing HTML tbody
    // and the row with the template
    const tbody = document.querySelector("tbody");
    const template = document.querySelector('#productrow');

    // Clone the new row and insert it into the table
    const clone = template.content.cloneNode(true);
    let td = clone.querySelectorAll("td");
    td[0].textContent = "1235646565";
    td[1].textContent = "Stuff";

    tbody.appendChild(clone);

    // Clone the new row and insert it into the table
    const clone2 = template.content.cloneNode(true);
    td = clone2.querySelectorAll("td");
    td[0].textContent = "0384928528";
    td[1].textContent = "Acme Kidney Beans 2";

    tbody.appendChild(clone2);

} else {
  // Find another way to add the rows to the table because
  // the HTML template element is not supported.
}

Kết quả là bảng HTML gốc, với hai hàng mới được thêm vào bảng thông qua JavaScript

table {
  background: #000;
}
table td {
  background: #fff;
}

Một

// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
    // Instantiate the table with the existing HTML tbody
    // and the row with the template
    const tbody = document.querySelector("tbody");
    const template = document.querySelector('#productrow');

    // Clone the new row and insert it into the table
    const clone = template.content.cloneNode(true);
    let td = clone.querySelectorAll("td");
    td[0].textContent = "1235646565";
    td[1].textContent = "Stuff";

    tbody.appendChild(clone);

    // Clone the new row and insert it into the table
    const clone2 = template.content.cloneNode(true);
    td = clone2.querySelectorAll("td");
    td[0].textContent = "0384928528";
    td[1].textContent = "Acme Kidney Beans 2";

    tbody.appendChild(clone2);

} else {
  // Find another way to add the rows to the table because
  // the HTML template element is not supported.
}

4 không phải là mục tiêu hợp lệ cho các sự kiện khác nhau, do đó, thường tốt hơn là sao chép hoặc tham chiếu đến các phần tử bên trong nó

Hãy xem xét HTML và JavaScript sau

________số 8

const container = document.getElementById("container");
const template = document.getElementById("template");

function clickHandler(event) {
  event.target.append(" — Clicked this div");
}

const firstClone = template.content.cloneNode(true);
firstClone.addEventListener("click", clickHandler);
container.appendChild(firstClone);

const secondClone = template.content.firstElementChild.cloneNode(true);
secondClone.addEventListener("click", clickHandler);
container.appendChild(secondClone);

// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
    // Instantiate the table with the existing HTML tbody
    // and the row with the template
    const tbody = document.querySelector("tbody");
    const template = document.querySelector('#productrow');

    // Clone the new row and insert it into the table
    const clone = template.content.cloneNode(true);
    let td = clone.querySelectorAll("td");
    td[0].textContent = "1235646565";
    td[1].textContent = "Stuff";

    tbody.appendChild(clone);

    // Clone the new row and insert it into the table
    const clone2 = template.content.cloneNode(true);
    td = clone2.querySelectorAll("td");
    td[0].textContent = "0384928528";
    td[1].textContent = "Acme Kidney Beans 2";

    tbody.appendChild(clone2);

} else {
  // Find another way to add the rows to the table because
  // the HTML template element is not supported.
}

7 là một phiên bản DocumentFragment, vì vậy mặc dù nó được thêm vào bên trong vùng chứa như mong đợi, nhưng việc nhấp vào nó sẽ không kích hoạt sự kiện nhấp chuột.

// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
    // Instantiate the table with the existing HTML tbody
    // and the row with the template
    const tbody = document.querySelector("tbody");
    const template = document.querySelector('#productrow');

    // Clone the new row and insert it into the table
    const clone = template.content.cloneNode(true);
    let td = clone.querySelectorAll("td");
    td[0].textContent = "1235646565";
    td[1].textContent = "Stuff";

    tbody.appendChild(clone);

    // Clone the new row and insert it into the table
    const clone2 = template.content.cloneNode(true);
    td = clone2.querySelectorAll("td");
    td[0].textContent = "0384928528";
    td[1].textContent = "Acme Kidney Beans 2";

    tbody.appendChild(clone2);

} else {
  // Find another way to add the rows to the table because
  // the HTML template element is not supported.
}

8 là một phiên bản HTMLDivElement, nhấp vào nó sẽ hoạt động như mong đợi

Danh mục nội dung, , , Nội dung được phépKhông hạn chế Bỏ thẻKhông có, cả thẻ bắt đầu và thẻ kết thúc đều bắt buộc. Cha mẹ được phép Bất kỳ phần tử nào chấp nhận , hoặc. Cũng được phép là phần tử con của phần tử

// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
    // Instantiate the table with the existing HTML tbody
    // and the row with the template
    const tbody = document.querySelector("tbody");
    const template = document.querySelector('#productrow');

    // Clone the new row and insert it into the table
    const clone = template.content.cloneNode(true);
    let td = clone.querySelectorAll("td");
    td[0].textContent = "1235646565";
    td[1].textContent = "Stuff";

    tbody.appendChild(clone);

    // Clone the new row and insert it into the table
    const clone2 = template.content.cloneNode(true);
    td = clone2.querySelectorAll("td");
    td[0].textContent = "0384928528";
    td[1].textContent = "Acme Kidney Beans 2";

    tbody.appendChild(clone2);

} else {
  // Find another way to add the rows to the table because
  // the HTML template element is not supported.
}

9 không có thuộc tính. Vai trò ARIA ngầm định Vai trò ARIA được phép Không có

table {
  background: #000;
}
table td {
  background: #fff;
}

1 được phép Giao diện DOM

// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
    // Instantiate the table with the existing HTML tbody
    // and the row with the template
    const tbody = document.querySelector("tbody");
    const template = document.querySelector('#productrow');

    // Clone the new row and insert it into the table
    const clone = template.content.cloneNode(true);
    let td = clone.querySelectorAll("td");
    td[0].textContent = "1235646565";
    td[1].textContent = "Stuff";

    tbody.appendChild(clone);

    // Clone the new row and insert it into the table
    const clone2 = template.content.cloneNode(true);
    td = clone2.querySelectorAll("td");
    td[0].textContent = "0384928528";
    td[1].textContent = "Acme Kidney Beans 2";

    tbody.appendChild(clone2);

} else {
  // Find another way to add the rows to the table because
  // the HTML template element is not supported.
}

2

Ưu điểm chính của việc sử dụng các mẫu HTML là gì?

Nó tích hợp dễ dàng với các ngôn ngữ khác như JavaScript, CSS, v.v. HTML là nó dễ viết mã ngay cả đối với những lập trình viên mới làm quen. HTML cũng cho phép sử dụng các mẫu giúp việc thiết kế trang web trở nên dễ dàng . Tải xuống nhanh vì văn bản có thể nén được.

Tôi có nên sử dụng một mẫu cho trang web cá nhân của mình không?

Trang web của bạn sẽ đơn giản và tối thiểu. Nếu bạn đang muốn xây dựng một trang web mà không cần quá nhiều thứ phức tạp, một mẫu sẽ cung cấp cho bạn mọi thứ bạn đang tìm kiếm trong một trang web mới . Ngoài ra, nếu bạn không có nhiều trang hoặc nhiều nội dung, đây là nơi dành cho bạn.

Khi nào tôi nên sử dụng mẫu?

Mẫu phù hợp khi xác định giao diện hoạt động trên nhiều loại đối tượng không liên quan . Các mẫu có ý nghĩa hoàn hảo đối với các lớp vùng chứa khi cần khái quát hóa các đối tượng trong vùng chứa, nhưng vẫn giữ lại thông tin loại.

Tôi có nên sử dụng mẫu cho trang web danh mục đầu tư của mình không?

Có. Sử dụng mẫu là thông minh. Quá nhiều nhà thiết kế, bao gồm cả tôi, suy nghĩ quá nhiều về danh mục đầu tư của họ – và điều đó tạo ra căng thẳng không cần thiết. Khi chọn một mẫu, hãy đảm bảo chọn thứ gì đó đơn giản và không cản trở nội dung.

programming html

Tôi có nên sử dụng mẫu html không?

Ưu điểm chính của việc sử dụng các mẫu HTML là gì?

Tôi có nên sử dụng một mẫu cho trang web cá nhân của mình không?

Khi nào tôi nên sử dụng mẫu?

Tôi có nên sử dụng mẫu cho trang web danh mục đầu tư của mình không?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội