Ich muss kürzlich eine einfache Webseite erstellen.
In Anbetracht des Mangels an Front-End-Erfahrung ist das Projekt nur ein Tool und hat keine Anforderungen für das Projekt. Deshalb habe ich mich für Bootstrap als Web-Framework entschieden.
Die ursprüngliche Absicht des Schreibens, Bootstrap von Grund auf neu zu lernen:
Nachdem sie lange Zeit die Bootstrap-Dokumentation gelesen haben, einschließlich des offiziellen (http://v3.bootcss.com/getting-started/) und der inoffiziellen (http://www.runoob.com/bootstrap/bootstrap-tutorial (http://www.cnblogs.com/fnng/p/44460 47.html) und die Kommentare zu Bootstrap auf Zhihu (https://www.zhihu.com/question/35237472, https Das Gefühl, dass Bootstrap ein sehr nützliches Framework sein sollte, und es ist nicht schwer zu lernen. Es ist ein Werkzeug für die Hochgeschwindigkeitsproduktion, aber seine Flexibilität reicht für Entwickler nicht aus, um damit zu spielen. Darüber hinaus gibt es zu viele Dinge am vorderen Ende. Wenn Sie kein klares Lernziel und keine klare Route haben, können Sie leicht in endlose Details geraten und keine entsprechende Ausgabe haben, und Sie werden sich frustriert fühlen. Daher habe ich mich entschlossen, meinen Lernweg aufzuzeichnen, damit ich mich selbst überprüfen und mit der Mehrheit der Anfänger beginnen kann.
Beginnen wir mit der einfachsten Vorlage von Bootstrap:
<! DocType html> <html Lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-äquiv = "x-ua-compatible" content = "ie = edge"> <meta name = "adveport" content = "width = toy-widdh, initial-mough, initial-scale = 1" 1 "1"> <; Und jeder andere Inhalt * muss ihnen folgen! -> <title> Bootstrap 101 Template </title> <!-Bootstrap-> <link href = "css <!-[wenn lt ie 9]> <script src = "// cdn.bootcs.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <src = "// cdn.bootcs.com/reatt </head> <body> <h1> Hallo, Welt! </h1> <!-jQuery (notwendig für die JavaScript-Plugins von Bootstrap)-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min src = "js/bootstrap.min.js"> </script> </body> </html>
Schauen wir es uns nacheinander an (ich benutze # zur Erklärung):
<! DocType html> # bedeutet, dass dies eine HTML5 -Seite ist
<html lang = "zh-cn"> #lang bedeutet "Sprache", was ein Attribut des HTML-Tags ist. Dieses Attribut gibt Suchmaschinen an, dass meine Seite eine chinesische Seite ist, die für Suchmaschinen bequem ist und keine Auswirkungen auf die Seitenanzeige hat. "ZH-CN" ist eine Schreibmethode des ISO-Standards, was Chinese bedeutet. "Zh" ist die ersten beiden Buchstaben von "Zhongwen" (wenn Sie dem Browser sagen möchten, dass es sich um eine englische Schnittstelle handelt, entsprechen Lang = "en" und "en" den ersten beiden Buchstaben von "Englisch"), und "CN" ist der Landcode. (http://www.cnblogs.com/sink_cup/archive/2010/01/22/html401_lang_iso639_ISO3166_IANA_GUGUAGE_SUBTAG.HTML)
<meta charset = "utf-8"> #meta-Tag ist ein Tag, das den Browser erleichtert, HTML-Dateien zu analysieren. Das Charset-Attribut teilt dem Browser mit, dass die Codierungsmethode dieser HTML-Datei UTF-8 ist.
<meta http-äquiv = "x-ua-kompatible" content = "ie = edge"> Das #http-äquiv-Attribut teilt dem Browser mit, wie die Kompatibilität und andere Details in dieser HTML festgelegt sind. (//www.vevb.com/web/70787.html) #X-UA-kompatibler Wert ist ein Tag, das nur in IE8 und späteren Versionen von IE (IE9, IE10, 11, ...) wirksam wird. Es wird verwendet, um den Browser anzugeben, um die Rendering -Methode einer bestimmten Version des IE -Browsers zu simulieren. (Einige Artikel im Internet sagen tatsächlich, dass X-UA-kompatible ein besonderer Marker für IE8 ist, der einfach irreführend ist!)
#Wa tust das? Da Microsofts früherer IE (IE6, IE7) den W3C -Standard nicht entsprach, verwenden einige Websitescodes die alten IE -Standards und nicht die W3C -Standards. Ab IE8 hat Microsoft den W3C -Standard übernommen.
#So können Sie diesen Attributwert verwenden, um die Rendering -Methode des Browsers zu erzwingen. Beim Einstellen von content = "IE6" können Benutzer auch HTML -Webseiten unter dem IE6 -Standard in Browsern von IE8 und höher anzeigen.
#content = "IE = Edge" zwingt den Browser, mit der neuesten Version der IE -Standards zu rendern, die unterstützt werden können. Warum tun das? Da einige Browser einiger Benutzer möglicherweise auf "Kompatibilitätsmodus" eingestellt werden, rendern sie HTML -Dateien basierend auf dem alten IE -Standard, und es treten Fehler auf, wenn der HTML -Code auf W3C -Standard auftritt. Wenn mein Code W3C -Standard ist und die Unterstützung des alten IE -Standards nicht berücksichtigt, kann das Erzwingen der neuesten Version des IE -Renderings, die im Browser unterstützt werden kann, die durch "Kompatibilitätsmodus" verursachten Anzeigefehler vermeiden. (Das heißt, der Benutzer muss den Rendering-Modus des Browsers nicht manuell ändern.) <Meta name = "Ansichtsplätze" content = "width = Gerätebreite, Initial-Scale = 1"> #Viewport Gibt die relevanten Einstellungen des Anzeigefensters an. Hier gibt die Breite im Inhalt die Anzeigebreite an, und der anfängliche Maßstab gibt das anfängliche Skalierungsverhältnis an. (Über andere Funktionen: Stellen Sie fest, ob der Benutzer skalieren kann, maximales Skalierungsverhältnis, Mindestskalierungsverhältnis usw., siehe: http://my.oschina.net/liangrockman/blog/380727)
<!-[wenn lt dh 9]>
<script src = "// cdn.bootcs.com/html5shiv/3.7.2/html5shiv.min.js"> </script>
<script src = "// cdn.bootcs.com/respect.js/1.4.2/respect.min.js"> </script>
<! [endif]->
#Her ist ein bedingter Kommentarurteil. Wenn die IE -Version kleiner als IE9 ist, nimmt Scrpit SRC die oben genannten CDN -Ressourcen auf.
<script src = "// cdn.bootcs.com/jquery/1.11.3/jquery.min.js"> </script>
<script src = "js/bootstrap.min.js"> </script>
# Hier ist die JS -Datei, die JQuery und Bootstrap verlinkt. Es wird am Ende platziert, um das Laden der Webseite zu beschleunigen, dh zuerst den Webseiteninhalt anzeigen und dann die JS -Datei laden. Wenn die Internetgeschwindigkeit, wenn die Internetgeschwindigkeit nicht gut ist, vor Ort platziert wird, bleibt sie in der Lade -JS -Datei festgehalten, und der Webseiteninhalt kann nicht schnell angezeigt werden, was die Benutzererfahrung beeinflusst.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.
Wenn Sie weiterhin ausführlich lernen möchten, können Sie hier klicken, um Ihnen zu lernen und Ihnen zwei aufregende Themen anzuhängen: Bootstrap -Lern -Tutorial Bootstrap Practical Tutorial