Хороший HTML-скелет - PullRequest
Новая
       62

Хороший HTML-скелет

40 голосов
/ 09 ноября 2010

Я хочу начать создавать веб-сайты снова, но я уже давно вне HTML-сцены.Мне просто интересно, если это хороший скелет для веб-сайта.И если нет, что я должен изменить, добавить и / или удалить? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>
    <head>
        <rel="stylesheet" type="text/css" href="css/main.css" />
        <meta http-equiv="content-type" content="text/php; charset=utf-8" />

        <title>Site Template - Welcome!</title>
    </head>

    <body>
        <div class="Container">
            <div class="Header">

            </div>

            <div class="Menu">
                <ul id="nav"> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                </ul> 
            </div>

            <div class="Body">

            </div>
        </div>

    </body>

    <footer>
        <div class="Footer">
            <b>Copyright - 2010</b>
        </div>
    </footer>
</html>

Ответы [ 6 ]

42 голосов
/ 23 декабря 2011

Попробуйте www.htmlshell.com , вы можете получить базовый скелет с дополнительными включениями для таких вещей, как jQuery или favicons и т. Д.

16 голосов
/ 09 ноября 2010

Я начал с HTML5 Boilerplate .. . это помогает убедиться, что все в разных браузерах наиболее согласованно и уже учитывает большинство того, что мне понадобится позже.

5 голосов
/ 29 мая 2015

ТЛ; др 

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <link rel="stylesheet" href="/default.css">
  <link rel="icon" href="/favicon.png" sizes="16x16" type="image/png">
  <link rel="canonical" href="http://example.com/">
  <meta name="description" content="…">
</head>
<body>

  <header>
    <!-- site-wide header -->
    <h1>Example <!-- site name --></h1>
  </header>

  <main>
    <!-- this page’s main content -->
  </main>

  <nav>
    <!-- site-wide navigation -->
  </nav>

  <footer>
    <!-- site-wide footer -->
  </footer>

</body>
</html>

Скелет HTML5 может выглядеть следующим образом: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CC</title>
</head>
<body>

</body>
</html>

(Обратите внимание, что это не самый минимальный документ HTML5 , поэтому многие части являются необязательными.)

Если вы используете кодировку, отличную от UTF-8, измените значение meta - charset соответственно.

Если вы используете язык содержимого, отличный от английского, измените значение атрибута lang соответственно.

Если вы хотите явно указать направление текста, используйте атрибут dir в элементе html, например: <html dir="ltr" lang="en">

Общие link / meta элементы для добавления к head

  • Ссылка на таблицу стилей (по умолчанию text/css): 

    <link rel="stylesheet" href="/default.css">

  • Ссылка на favicon : 

    <link rel="icon" href="/favicon.png" sizes="16x16" type="image/png">

  • Указание канонического URL документа: 

    <link rel="canonical" href="http://example.com/">

  • Предоставление описания содержимого страницы: 

    <meta name="description" content="…">

Элементы для body

Поскольку каждая страница отличается, на этот вопрос вообще нельзя ответить, поэтому лучше оставить body пустым.

Однако большинство страниц, вероятно, являются частью веб-сайта, и большинство веб-сайтов, вероятно, имеют общий заголовок (→ header) с названием сайта (→ h1), нижним колонтитулом (→ footer) и меню навигации (→ nav). Они должны принадлежать корню секционирования body (т.е. не иметь другого элемента контента секционирования как родительского). nav может быть или не быть частью header.
Основное содержимое (→ main) может состоять или не состоять из элементов секционирования (обычно article или section или их нескольких). 

<header>
  <!-- site-wide header -->
  <h1>Example <!-- site name --></h1>
</header>

<main>
  <!-- this page’s main content -->
</main>

<nav>
  <!-- site-wide navigation -->
</nav>

<footer>
  <!-- site-wide footer -->
</footer>
3 голосов
/ 09 ноября 2010

В XHTML 1.0 Transitional нет ничего похожего на элемент <footer>. Вы должны сделать это так: 

<body>
    ...
    <div class="footer">
        ...
    </div>
</body>

Мне нравится использовать строгий тип документа в моих проектах, но ваш тоже работает.

1 голос
/ 18 марта 2018

Ядро W3C DOM Level 1 - хорошее место для старта: 

<!DOCTYPE html>
<html>
<head>
  <title>My Document</title>
</head>
<body>
</body>
</html>

Уровень 1 W3C DOM позволяет вам изменять дерево контента любым способом, которым вы 1010 * хочу *. Это достаточно мощный инструмент для создания любого HTML-документа с нуля.

Оттуда вы можете добавить любую опцию (<html lang="en">, <meta charset="utf-8"> и т. Д.), Элемент (link, main, nav, div, footer и т. Д.) Или библиотеку зависимость (jQuery, Bootstrap и т. д.), основанная на ваших потребностях и предпочтениях.

1 голос
/ 09 ноября 2010 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="main/css.css">
        <meta http-equiv="content-type" content="text/html;charset=utf-8">

        <title>Site Template - Welcome!</title>
    </head>

    <body>
        <div class="Container">
            <div class="Header">

            </div>

            <div class="Menu">
                <ul id="nav"> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                    <li>menu item</li>  
                    <li>menu item</li> 
                </ul> 
            </div>

            <div class="Body">

            </div>
            <div class="Footer">
                Copyright - 2010
            </div>
        </div>
    </body>
</html>
...