Mã đẹp là gì và viết nó như thế nào? Mã PHP đẹp.

Chúc một ngày tốt lành cho tất cả những ai đang đọc bây giờ ấn phẩm này. Hôm nay tôi muốn kể cho bạn nghe về một trong những công cụ xây dựng trang web mà không tài nguyên web nào có thể làm được nếu không có. Đây là menu trang web, hay như người ta hay gọi là sơ đồ trang web. Ngày nay có vô số loại và loại phụ của menu.

Các nhà phát triển cửa hàng trực tuyến, blog, dịch vụ giáo dục và các tài nguyên khác đang thử nghiệm và tạo ra ngày càng nhiều bản đồ mới và khác thường. Sau khi đọc bài viết, bạn sẽ tìm hiểu tất cả các loại bảng điều hướng được chia thành những nhóm chính nào, bạn sẽ có thể thử từng nhóm và cũng học cách viết mã menu cho trang web html. Bây giờ chúng ta hãy bắt tay vào công việc!

Công cụ tạo thanh điều hướng

Có một số cách để tạo menu bằng ngôn ngữ đánh dấu. Khái niệm cơ bản của họ là sử dụng danh sách không đánh số. Do đó, trong html 4 quen thuộc với chúng ta, các nhà phát triển viết các thẻ trên trang

Và
• .

  Như đã nêu trong ấn phẩm trước đây, phần tử cặp

  tạo ra danh sách có dấu đầu dòng, MỘT
  • - một phần tử của danh sách. Để rõ ràng, hãy viết mã thực đơn đơn giản:

    Điều hướng Trang web

    • trang chủ
    • Tin tức trong tuần
    • Tiến bộ công nghệ
    • Trò chuyện

    Tuy nhiên, với sự ra đời của nền tảng, ngôn ngữ đánh dấu đã được bổ sung thêm các thẻ bổ sung. Đó là lý do tại sao menu của các trang web hiện đại được tạo bằng cách sử dụng một công cụ đặc biệt nhãn< thực đơn>. Khi sử dụng, phần tử này không khác gì danh sách có dấu đầu dòng.

    Thay vì một < ul>được quy định < thực đơn>. Tuy nhiên, sự khác biệt đáng kể xuất hiện khi được đánh giá từ phía công việc. Vì vậy, ví dụ thứ hai tăng tốc công việc chương trình tìm kiếm và robot trong . Khi phân tích cấu trúc trang web, họ hiểu ngay rằng đoạn mã này chịu trách nhiệm về sơ đồ trang web.

    Có các menu ngang, dọc và thả xuống. Đôi khi thanh điều hướng được thiết kế dưới dạng hình ảnh. Do phân khúc công nghệ đã mở rộng nên các dịch vụ web đang được cải tiến để thích ứng, tức là. Cấu trúc trang tự động điều chỉnh theo kích thước màn hình thiết bị. Hãy nhìn vào các nhóm menu được liệt kê.

    Hãy tạo một mô hình điều hướng ngang

    Loại điều hướng này là phổ biến nhất. Tại thiết kế ngang panel, tất cả các mục menu đều nằm ở tiêu đề trang hoặc ở “chân trang” (đôi khi các thành phần điều hướng bị trùng lặp, hiển thị đồng thời ở trên cùng và dưới cùng).

    Ví dụ: chúng tôi sẽ tạo một bảng điều khiển ngang có các mục menu sẽ được tạo kiểu như trợ giúp về css (bảng xếp tầng phong cách), hay đúng hơn là biến đổi. Vâng, mọi người phần tử riêng biệt sẽ nằm trong một hình chữ nhật vát. Có mưu đồ?

    Để chuyển đổi, chúng tôi sử dụng thuộc tính css được gọi là biến đổi. Để chỉ định một phép chuyển đổi, hãy sử dụng hàm dựng sẵn xiênX, trong đó góc nghiêng được biểu thị bằng độ.

    Thật không may, mỗi trình duyệt hoạt động với thuộc tính này theo cách riêng của mình, bất chấp các tiêu chuẩn quy định. Vì vậy, các tiền tố đặc biệt đã được tạo ra để chỉ ra điều này:

    • -ms- (Internet Explorer)
    • -o- (Opera)
    • -webkit- (Chrome, Safari)
    • -moz- (Firefox)

    Bây giờ hãy áp dụng kiến ​​thức thu được vào việc viết một ví dụ.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

    trang chủ Về công ty Các sản phẩm Liên lạc

    trang chủ
    Về công ty
    Các sản phẩm
    Liên lạc

    Và bây giờ theo chiều dọc. Tôi nói dọc!

    Đối với chương trình thứ hai, chúng tôi sử dụng mã trước đó làm cơ sở. Tôi muốn các món đồ của tôi trình đơn dọc không được vát cạnh mà có các góc tròn.
    

    Đối với điều này tôi đã sử dụng một cái khác thuộc tính css bán kính đường viền.

    Trong các bài viết trước, tôi đã làm việc với tham số này, vì vậy tôi không nghĩ sẽ có bất kỳ khó khăn nào trong việc hiểu chức năng của nó.

    trang chủ
    Về công ty
    Các sản phẩm
    Liên lạc

    Như bạn đã nhận thấy, thay đổi chính trong mã này là không có phần khai báo hiển thị: khối nội tuyến, người thực sự chịu trách nhiệm về sắp xếp theo chiều ngang các điểm điều hướng.

    Các mục con của menu: danh sách thả xuống

    Chúng tôi đã xem xét các nhóm chính thanh điều hướng, tuy nhiên, có một số loại khác hoặc tốt hơn là bổ sung.

    

    Đôi khi các tình huống phát sinh khi một số điểm bổ sung cho những điểm chính. Trong trường hợp này, bạn không thể làm gì nếu không có danh sách thả xuống. Chúng được tạo thông qua các phép biến đổi bằng công cụ css.

    Dưới đây tôi đã đính kèm mã của một chương trình nhỏ thực hiện phương pháp này.

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

    trang chủ Các sản phẩm Kẹo Bánh Bánh quy Liên lạc

    • trang chủ
    • Các sản phẩm
      • Kẹo
      • Bánh
      • Bánh quy
    • Liên lạc

    Trong ví dụ này, tôi chia các đơn vị menu thành hai lớp:

    1. thực đơn m
    2. menu s

    Lớp đầu tiên chịu trách nhiệm về menu chính và menu s chịu trách nhiệm về menu phụ.

    Trong mã bạn có thể tìm thấy một kỹ thuật như .m-menu > li:hover hoặc .m-menu > li.

    Vì vậy, bằng cách sử dụng:hover, bạn chỉ định cách phần tử sẽ hoạt động khi bạn di chuột qua nó.

    Trong trường hợp này, dấu “>” sửa đổi bộ chọn để chỉ các đối tượng thuộc cấp cao nhất là chữ thường.

    Ban đầu menu con được đặt trưng bày:không có, thông báo cho trình xử lý ẩn đối tượng này. Sau khi di chuột qua một mục điều hướng cho biết bay lượn, giá trị tài sản trưng bày thay đổi khối và thế là một danh sách thả xuống sẽ mở ra.

    Như bạn có thể thấy, việc thực hiện kỹ thuật này rất đơn giản.

    Bây giờ bạn đã thành thạo các loại bảng điều hướng chính và có thể tự sửa đổi, bổ sung và hiện đại hóa chúng. Nếu bạn thích bài viết của tôi thì hãy đăng ký để cập nhật blog và chia sẻ nguồn kiến ​​thức với bạn bè và đồng nghiệp. Tạm biệt!

    Trân trọng, Roman Chueshov

    Đọc: 1010 lần

    Tôi sẽ đưa ra các quy tắc cơ bản phải tuân theo khi phát triển mã, để trong một tuần bạn có thể xem mã và xác định chức năng nào sẽ làm gì. Một ưu điểm khác của việc viết mã có thể đọc được, đây là sự dễ dàng trong việc tìm kiếm và loại bỏ lỗi. Tôi sẽ nói ngay rằng các ví dụ mà tôi đánh dấu là “không chính xác” không có nghĩa là chúng không hoạt động, mà là chúng sai từ quan điểm phát triển mã có thể đọc được.

    1. Bỏ biến ra khỏi ngoặc

    Luôn luôn khi hiển thị văn bản trên màn hình, các biến trong dòng phải được đặt ngoài dấu ngoặc. Điều này không chỉ thuận tiện cho việc xem mà còn hiệu quả vì nó giúp xuất ra màn hình nhanh hơn.

    Ví dụ sai:

    echo "Giá trị là $val"

    Ví dụ đúng:

    echo "Giá trị là ".$val

    2. Hãy chắc chắn sử dụng ý kiến

    Mỗi chức năng nên được mô tả bằng một nhận xét ngắn nếu có thể. Mỗi đoạn, nếu bạn cho rằng khó hiểu, nên mô tả bằng một nhận xét ngắn gọn. Nói chung, nhận xét nên mô tả mọi thứ mà bạn cho là cần thiết. Bạn phải xác định loại bình luận cho chính mình. Đây có thể là một chuỗi văn bản hoặc một khối dòng mô tả mục đích của hàm, thông tin về tác giả của nó, v.v.

    3. Sử dụng phiên bản tốc ký của hàm echo. Ví dụ: một bản ghi như

    có thể dễ dàng thay thế bằng

    4. Nếu có thể, hãy di chuyển các khối HTML lớn ra ngoài cấu trúc PHP. Đừng lạm dụng chức năng php.

    Ví dụ sai:

    "; echo "Số trước là ".($i - 1); echo "
    "; } ?>

    Ví dụ đúng:

    Số là
    Số trước là
    

    Xin lưu ý rằng hai cấu trúc php được mở ở đây và được chèn vào giữa chúng văn bản HTML. Có lẽ theo ví dụ này và không có lợi ích rõ ràng nào khi di chuyển văn bản ra ngoài cấu trúc PHP, nhưng trên thực tế, khi bạn phải xử lý các bảng, quy tắc như vậy có thể rất hữu ích.

    5. Mã phải được căn chỉnh tương ứng với các khối.

    Ví dụ sai:

    Hãy nhớ rằng, php không phải là Pascal với các khối bắt đầu...kết thúc. Ở đây, khối sẽ mở trên cùng một dòng nơi nó bắt đầu và đóng thẳng hàng với phần đầu của khối:

    6. Đơn giản hóa các thiết kế phức tạp. Chia chúng thành những cái đơn giản.

    Ví dụ sai:

    $res = mysql_result(mysql_query("CHỌN Số TỪ db"), 0, 0)

    Ví dụ đúng:

    $query = mysql_query("CHỌN Số TỪ db"); $res = mysql_result($query, 0, 0);

    7. Sử dụng nhiều khoảng trống và dòng trống hơn.

    Thực ra thế là đủ rồi yếu tố quan trọng viết mã có thể đọc được. Tôi đã thấy một số người không rời đi dòng trống và sử dụng nó nhiều nhất có thể ít khoảng trống hơn, tin rằng chúng chiếm thêm không gian. Điều này về cơ bản là sai, vì các byte bổ sung sẽ cho phép người khác tiết kiệm thời gian phân tích mã của người khác.

    Ví dụ sai:

    Ví dụ đúng:

    8. Sử dụng phím tắt cho các phép toán và chuỗi.

    Hãy nhớ rằng +1 luôn có thể được thay thế bằng ++ và +n bằng +=n.

    Ví dụ về sự thay thế:

    $i = $i + 1 tương đương với $i++
    $i = $i — 1 tương đương với $i—
    $i = $i + $n tương đương với $i+=$n
    $i = $i."hello" tương đương với $i.="hello"

    Tốt xấu

    LÀM Mã chương trình xinh đẹp

    Nói chung, mã chương trình không cần phải đẹp, chỉ cần dễ đọc là được. Phần này cung cấp một số khuyến nghị đơn giản về thiết kế mã chương trình để giúp bạn dễ dàng giải mã mã chương trình của chính mình vào ngày mai, trong một tuần hoặc năm sau, nếu cần.

    Thụt lề trong chương trình

    Hãy nhớ rằng: bạn nên xây dựng các quy tắc sử dụng thụt lề và tuân thủ nghiêm ngặt chúng. Trình biên dịch VBA bỏ qua tất cả khoảng trắng ở đầu dòng, vì vậy bạn có thể sử dụng thụt lề một cách an toàn để tạo thứ tự. So sánh hai đoạn mã sau và quyết định xem đoạn mã nào dễ hiểu hơn:

    Nếu intA = 27 thì

    objCbar.Visible = Đúng

    Nếu intA = 27 thì

    Nếu txtChooseColor.Text = Màu be thì

    Đối với mỗi objCbar trong CommandBars

    Nếu objCbar.Name = Thanh công cụ của tôi thì

    Nếu objCbar.Visible = Sai thì

    objCbar.Visible = Đúng

    Cả hai đoạn này đều tạo ra cùng một kết quả, nhưng việc thụt lề trong đoạn thứ hai cho phép bạn cho biết ngay lập tức đối với mỗi câu lệnh End If câu lệnh If ở trên là câu lệnh nào. . .Vậy thì sẽ là trận đấu của anh ấy. Kết quả là, việc theo dõi lộ trình thực hiện chương trình sẽ dễ dàng hơn tùy thuộc vào các điều kiện hiện hành.

    Từ cuốn sách Nghệ thuật lừa dối bởi Mitnik Kevin

    “Làm ngay” Không phải ai áp dụng chiến thuật này kỹ thuật xã hội, là kỹ sư xã hội lý tưởng. Bất cứ ai sở hữu thông tin bên trong công ty, có thể mang lại nguy hiểm. Rủi ro thậm chí còn lớn hơn đối với những công ty lưu trữ trong tệp và cơ sở dữ liệu của họ

    Từ cuốn sách Internet Intelligence [Hướng dẫn hành động] tác giả Yushchuk Evgeniy Leonidovich

    Gói phần mềm"Intellectum.BIS" Mục đích chính của sản phẩm là cung cấp cho các chuyên gia tiếp thị và nhà phân tích các công cụ xử lý thông tin để thực hiện nghiên cứu kinh doanh nhằm cung cấp thông tin cho ban quản lý để đưa ra quyết định quản lý.

    Từ cuốn sách Tạp chí Computerra số 705 tác giả tạp chí máy tính

    Làm cho nó im lặng hơn Tác giả: Vladimir Guriev Vào tháng 8 năm 2007, tôi đã đến thăm Hungaroring, chặng đua Công thức 1 ở Hungary. Tất cả bạn bè của tôi - và đặc biệt là những người hâm mộ Công thức 1 - tất nhiên đều ghen tị với tôi, và tôi, với tư cách là một người trung thực, đã cố gắng không đánh lừa sự mong đợi của họ và những câu hỏi như "Chà, ở đó thế nào?"

    Từ cuốn sách Ngôn ngữ lập trình C# 2005 và Nền tảng .NET 2.0. bởi Troelsen Andrew

    Mã tác nhân Nếu mở tệp tác nhân đã tạo, bạn sẽ tìm thấy một loại có nguồn gốc từ System.Web.Services.Protocols.SoapHttpClientProtocol (trừ khi bạn chỉ định một giao thức giao tiếp khác bằng cách sử dụng tùy chọn /protocol lớp công khai một phần Máy tínhWebService: System . Web.Services.Protocols.SoapHttpClientProtocol (...) Cái này

    Từ cuốn sách Kiến trúc, giao thức, triển khai TCP/IP (bao gồm IP phiên bản 6 và Bảo mật IP) bởi Faith Sydney M

    2.2.4 Giao diện lập trình RPC Mặc dù không phổ biến như socket, giao diện phần mềm Cuộc gọi thủ tục từ xa (RPC) cho các kết nối máy khách/máy chủ thường được sử dụng trong hệ thống khác nhau. Ban đầu nó được triển khai ở

    Từ cuốn sách VBA dành cho người giả bởi Steve Cummings

    Nghỉ ngơi một lát! Chìa khóa để gỡ lỗi chương trình nằm ở chế độ tạm dừng của VBA. Chế độ tạm dừng là dừng tạm thời việc thực hiện chương trình tại một số câu lệnh trong mã chương trình. Vì trong trường hợp này chương trình vẫn còn hoạt động", bạn có cơ hội kiểm tra các giá trị hiện tại

    Từ cuốn sách Internet dành cho cha mẹ của bạn tác giả Shcherbina Alexander

    Hãy lựa chọn B Gần đây có một xu hướng ổn định cách xa chương trình thư. Nhiều người dùng cao cấp họ thậm chí không biết về sự tồn tại của họ. Điều này được giải thích là do sự hiện diện rộng rãi và truy cập nhanh Internet bù đắp những thiếu sót

    Từ cuốn sách Nhân đôi doanh số bán hàng trong cửa hàng trực tuyến tác giả Parabellum Andrey Alekseevich

    Làm cho quy trình đặt hàng trở nên hợp lý Hầu hết người dùng cảm thấy bối rối bởi quy trình thanh toán không nhất quán (phi tuyến tính) - không rõ cách mua sản phẩm hoặc bản thân việc mua hàng rất khó khăn. Nếu cửa hàng trực tuyến của bạn khi thanh toán đơn hàng có các bước phụ như “Tạo

    Từ cuốn sách PC không căng thẳng tác giả Zhvalevsky Andrey Valentinovich

    Làm cho văn bản đẹp, hoặc Người dùng máy tính định dạng là những người không đa cảm. Họ cảm thấy xấu hổ trước những từ “làm cho chữ đẹp” hoặc “làm cho văn bản đẹp”. Thay vào đó, họ sử dụng cụm từ "định dạng văn bản" và đôi khi khi Chúng ta đang nói vềồ

    Từ cuốn sách Ubuntu 10. Hướng dẫn nhanh người dùng tác giả Kolisnichenko D. N.

    23.2. Lỗi phần mềm Trước hết, bạn cần tìm hiểu và nếu có thể hãy loại bỏ nguyên nhân gây ra lỗi. Nếu thuần tuý là trục trặc phần mềm, thì có 2 lý do: cài đặt không chính xác chương trình (hoặc hệ thống) và lỗi

    Từ cuốn sách Kiếm tiền từ trang web. Bí mật nhiều tiền trên mạng tác giả Merkulov Andrey

    Đảm bảo rằng bài viết của bạn được đọc đến cuối. Giải pháp cho vấn đề nằm ở khả năng nói ngắn gọn về vấn đề của khách hàng trong hai đoạn đầu tiên của bài viết. Tuy nhiên, điều này sẽ hoàn toàn không thể thực hiện được nếu không có nghiên cứu sơ bộ về lợi ích khán giả mục tiêu,

    Từ cuốn sách Phòng mổ hệ thống UNIX tác giả Robachevsky Andrey M.

    Giao diện lập trình TLI Khi thảo luận về việc triển khai hỗ trợ mạng trong BSD UNIX, chúng tôi đã xem xét giao diện lập trình để truy cập tài nguyên mạng dựa trên ổ cắm. TRONG phần này mô tả Giao diện lớp vận chuyển (TLI), cung cấp

    Từ cuốn sách Nhiếp ảnh kỹ thuật số từ A đến Z tác giả Gazarov Artur Yuryevich

    Chế độ chương trình được ký hiệu bằng chữ P. Nói chung, chế độ này chế độ tự động, nhưng không giống như Tự động, nó cho phép bạn tự thay đổi nhiều thông số do máy ảnh chọn: thay đổi độ nhạy ISO, cân bằng trắng, chọn chế độ và điểm AF,

    Từ cuốn sách Bùng nổ học tập: Chín quy tắc để có một lớp học ảo hiệu quả của Murdoch Matthew
    Từ cuốn sách Linux và mọi thứ, mọi thứ, mọi thứ... Các bài viết và chuyên mục trong LinuxFormat, 2006-2013 tác giả Fedorchuk Alexey Viktorovich
    Từ cuốn sách của tác giả

    Làm cho tôi... Linux tốtĐịnh dạng, #104 (Tháng 4 năm 2008)Giấc mơ vĩnh cửu Người dùng Linux– để làm cho mọi thứ diễn ra suôn sẻ dường như đã gần thành hiện thực. Những gì có thể được quan sát trong ví dụ về phiên bản alpha của Kubfox - 8.04. Đã cài đặt, như trước đây, với một nửa lưng, trong cả Máy tính để bàn và

    Đôi khi mã của chúng tôi không phải lúc nào cũng hoàn hảo. Và tôi thực sự muốn nó không chỉ có chức năng mà còn được thiết kế và định dạng đẹp mắt. Thời gian là kẻ thù chính của chúng ta; nó hiếm khi cho phép chúng ta tuân theo các quy tắc thiết kế mã. Chúng tôi cố gắng hoàn thành nhanh chóng bố cục hoặc mô tả hàng tá kiểu CSS và làm điều này nhưng lại gây bất lợi cho khả năng đọc. Trong bài viết này, tôi sẽ cung cấp danh sách các dịch vụ sẽ giúp bạn định dạng mã của mình sao cho dễ nhìn.

    Bạn nên tin tưởng vào chương trình hay làm mọi thứ theo cách thủ công?

    Chắc chắn bạn có câu hỏi: làm thế nào để mã có thể đọc được? Liệu một chương trình có thể sắp xếp chính xác tất cả các khoảng thụt lề và ngắt dòng để mắt người chỉ nhận được niềm vui thẩm mỹ khi xem mã không? Tất nhiên là có thể! Đừng nhầm lẫn rằng vì về cơ bản robot đang làm công việc cho bạn nên nó sẽ bị coi là “bẩn”. Những dịch vụ sẽ được trình bày trong bài viết dưới đây đã nhiều lần cứu tôi. Ví dụ: trong trường hợp cần sao chép cùng một Mã HTML từ một trang web khác và khi được chèn vào, các thẻ hóa ra được sắp xếp đơn giản theo thứ tự hỗn loạn dọc theo các dòng: rất nhiều tab, ngắt dòng không logic, hoàn toàn không nhìn thấy lồng nhau! Điều này có lẽ quen thuộc với nhiều người. Và tôi thực sự muốn trang web của bạn trông khác biệt: gọn gàng và dễ đọc. Suy cho cùng, trước hết, chúng tôi làm việc này vì chính mình, để thuận tiện cho việc hỗ trợ thêm mã này hoặc mã kia.

    Hãy định dạng mã của bạn

    Nói ít đi, làm việc nhiều hơn. Như thực tế đã chỉ ra, việc định dạng mã trực tuyến khá đơn giản. Tất cả những gì bạn cần làm là sao chép mã bẩn của mình và dán nó vào phần đặc biệt Trường văn bản trên một trong các trang web được chỉ định. Sau đó nhấn nút, đợi một chút và - thì đấy! Bạn sẽ có được mã đẹp, được định dạng và dễ đọc.

    Đây là danh sách tất cả các "bộ lọc" mã mà tôi biết cho các ngôn ngữ khác nhau.