Мне нужно сделать простую веб -страницу в последнее время.
Учитывая отсутствие опыта на переднем крае, для того, чтобы быстро произвести, проект является всего лишь инструментом и не имеет требований к проекту, поэтому я выбрал начальную загрузку в качестве веб-структуры.
Оригинальное намерение писать, чтобы изучить начальную загрузку с нуля:
После долгого прочтения документации по начальной загрузке в течение долгого времени, в том числе официального (http://v3.bootcss.com/getting-started/) и неофициального (http://www.runoob.com/bootstrap/bootstrap-tutorial.html), а также простой ввод, написанный другим блогом, написанным другим, написанным другим блогом, написанным другим, написанным другим, написанным другим блогом, написанным другим, написанным другим, написанным другим, написанным другим блог, написанный другими. (http://www.cnblogs.com/fnng/p/44460 47.html) и комментарии по начальной загрузке на Zhihu (https://www.zhihu.com/question/35237472, https://www.zhihu.com/question/31472, https://www.zhihu.com/question/31472, https://www.zhihu.com/question/351472) Bootstrap должна быть очень полезной структурой, и его не сложно выучить. Это инструмент для высокоскоростного производства, но его гибкости недостаточно для разработчиков, чтобы играть с ним, как им угодно. Более того, на передней части слишком много вещей. Если у вас нет четкой цели обучения и маршрута, вы можете легко впадать в бесконечные детали и не иметь соответствующих результатов, и вы будете чувствовать себя разочарованными. Поэтому я решил записать свой путь обучения, чтобы я мог просмотреть себя и начать работу с большинством начинающих.
Начнем с простейшего шаблона начальной загрузки:
<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-совместимый" content = "ie = Edge"> <meta name = "viewport" content "и width = device-width, piront-scale = 1"> <! Другой контент * должен * следовать за ними! -> <title> шаблон Bootstrap 101 </title> <!-Bootstrap-> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <!-html5 shim and respond.js для поддержки IE8 html5 elements and media-> <! <!-[если LT IE 9]> <script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src = "// cdn.bootcss.com/respn.js/1.4.2/rer.min. <! [endif]-> </head> <body> <h1> Привет, мир! </h1> <!-jQuery (необходимо для плагинов Bootstrap's JavaScript)-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <!-включить все скомпилированные плагины (ниже) или включать отдельные файлы-> <сценарий> <! src = "js/bootstrap.min.js"> </script> </body> </html>
Давайте посмотрим на это один за другим (я использую # для объяснения):
<! Doctype html> # означает, что это страница HTML5
<html lang = "zh-cn"> #lang означает «язык», который является атрибутом тега HTML. Этот атрибут сообщает поисковым системам, что моя страница - это китайская страница, которая удобна для поисковых систем, и не влияет на отображение страницы. «ZH-CN»-это метод написания стандарта ISO, что означает китайский. «ZH» - это первые две буквы «Zhongwen» (если вы хотите сказать браузеру, что это английский интерфейс, Lang = «en» и «en» соответствует первым двум буквам «английский»), а «CN» - это код страны. (http://www.cnblogs.com/sink_cup/archive/2010/01/22/html401_lang_iso639_iso3166_iana_language_subtag.html)
<Meta charset = "UTF-8"> TAG #Meta-это тег, который облегчает браузер для разбора HTML-файлов. Атрибут Charset сообщает браузеру, что метод кодирования этого HTML-файла является UTF-8.
<meta http-equiv = "x-ua-совместимый" content = "IE = edge"> #http-equiv-атрибут рассказывает браузеру, каковы совместимость и другие детали, предусмотренные в этом HTML. (//www.vevb.com/web/70787.html) #x-ua-совместимое значение-это тег, который вступает в силу только в IE8 и более поздних версиях IE (IE9, IE10, 11, ...). Он используется для указания браузера для моделирования метода рендеринга конкретной версии браузера IE. (В некоторых статьях в Интернете говорится, что X-UA-совместимый является специальным маркером для IE8, который просто вводит в заблуждение!)
#Зачем это? Поскольку предыдущий IE Microsoft IE (IE6, IE7) не соответствовал стандарту W3C, некоторые коды веб -сайтов используют старые стандарты IE, а не стандарты W3C. Начиная с IE8, Microsoft приняла стандарт W3C.
#So Вы можете использовать это значение атрибута, чтобы заставить метод рендеринга браузера. При настройке Content = "IE6" пользователи также могут отображать HTML -веб -страницы в соответствии с стандартом IE6, обычно в браузерах IE8 и выше.
#content = "IE = EDGE" заставляет браузер отображаться с последней версией стандартов IE, которая может быть поддержана. Зачем это? Поскольку браузеры некоторых пользователей могут быть установлены в «Режим совместимости», они отображают HTML -файлы на основе старого стандарта IE, а ошибки будут возникнуть при встрече с стандартным HTML -кодом W3C. Поэтому, когда мой код является стандартом W3C и не учитывает поддержку старого стандарта IE, вынуждая последнюю версию рендеринга IE, которая может быть поддержана в браузере, может избежать ошибок отображения, вызванных «режим совместимости». (То есть пользователю не нужно вручную изменять режим рендеринга браузера) <meta name = "viewport" content = "width = width устройства, начальная масштаба = 1"> #Viewport Указывает соответствующие настройки окна отображения. Здесь ширина в контенте указывает ширину отображения, а начальная масштаба указывает начальный коэффициент масштабирования. (О других функциях: установите, может ли пользователь масштабировать, максимальное соотношение масштабирования, минимальное соотношение масштабирования и т. Д., См.
<!-[если я т.е. 9]>>
<script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script>
<script src = "// cdn.bootcss.com/respond.js/1.4.2/resper.min.js"> </script>
<! [endif]->
#Shere - это условное решение. Когда версия IE меньше IE9, Scrpit SRC берет вышеуказанные ресурсы CDN.
<script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script>
<script src = "js/bootstrap.min.js"> </script>
# Вот файл JS, который ссылается на jQuery и Bootstrap. Он помещается в конце, чтобы ускорить загрузку веб -страницы, то есть сначала отобразить содержимое веб -страницы, а затем загрузить файл JS. Если они размещены впереди, например, в теге головы, когда скорость интернета не очень хорошая, она будет застрять в загрузке файла JS, а содержимое веб -страницы не может быть быстро отображаться, влияя на пользовательский опыт.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.
Если вы все еще хотите учиться в глубине, вы можете нажать здесь, чтобы узнать и прикрепить к вам две захватывающие темы: учебник по обучению начальной загрузки.