Heim > Artikel > Web-Frontend > [Frontend] Wie man HTML verwendet

[Frontend] Wie man HTML verwendet

高洛峰Original: 2017-03-23 09:54:491370Durchsuche

编程语言：解释型和编译型

WEB前端：HTML+CSS+JavaScript

一、 HTML介绍:

---------------------------------------

1. 什么是HTML？

超文本标记语言, <标签名>--标记（标签、节点）

2. HTML是由：标签和内容构成

3. 程序语言有两种：解释性语言（HTML、PHP、Javascript）和编译型语言（C、C++、Java

4. HTML的标签组成部分、属性、实体

HTML的实体： <:< >:> 空格:

5. HTML中注释：

注释的目的：1. 辅助说明 2.代码调试

6. HTML标签（标记）的语法：标签是由"<"和">"括起来

双标签：<标签名>....

单标签：<标签名/>

7. HTML中的颜色：可以是颜色单词：red/blue/green/yellow...

还可以是：#000000 --- #ffffff

十六进制：0123456789abcdef

其中前两位表示红色，中间两位绿色，后两位表示蓝色。

二、 HTML中HEAD头部设置

----------------------------------------

设置网页编码：

关键字：

描述：

网页标题：本网页标题

导入CSS文件：

CSS代码：

JS文件或代码：

... ...

三、 HTML中的文本标签、格式化标签

----------------------------------------

文本标签：

1. *
换行

2. *

...

换段

3. ... 斜体

4. ... 强调斜体

5. ... 加粗

6. *... 强调加粗

7. *... 其中n为1--6的值。标题标签（加粗、独立行）

8. 引用

9. _... ^...

10.* 删除线

....

格式化标签：

1. *
换行

2. *

...

换段

3. 列表：

Artikel

🎜>

-------- ----- in *HTML --------------------

*< ;a href=""> ; Hyperlink-Tag

Attribut: href ist erforderlich, bezieht sich auf die Link-Sprungadresse

Ziel: gibt an, wie der Link geöffnet wird:

_blank Neues Fenster

_parent übergeordnetes Fenster

_self dieses Fenster (Standard)

oben

Fenster der obersten Ebene

Framename Fenstername

Titel: Textaufforderungsattribut (Details)

Ankerlink:

Definieren Sie einen Anker: < /a> Zuvor verwendet

Ankerpunkt verwenden: Zu a1 springen

5. *Bild-Tag

img

------------- ------ --------

Ein Bild in die Webseite einfügen

Attribute: src: Bildname und URL-Adresse

alt: Eingabeaufforderung, wenn das Laden des Bildes fehlschlägt

Titel: Textaufforderungsattribut

width

: Bildbreite

Höhe

: Bildhöhe

Rand: Grenzlinienstärke

6. Multimedia-Tags (vertraut)

--------------- ----------- -

Sie Der Browser unterstützt nicht die Wiedergabe von

7. *TabelleTag

-------------- -- ------

*Beschriftung der Tabellentabelle

Titel der Beschriftungstabelle

*Beschriftung der Zeile der Zeile

*Beschriftung der Kopfzeile der Spalte

*td-Spaltenbezeichnung

Es bezieht sich auf den Drucker, wenn Sie die Kopf- und Fußzeile vor dem Tabellenkörper schreiben, um den Code anzuzeigen

*thead-Kopfzeile

* tbody Tabellenkörper

tfoot Tabellenfuß

8. **form form tag

----------------- - -------------------------------------

--Form-Tag

Allgemeine Attribute des Formular-Tags:

*Aktion Attribut: übermittelte Zieladresse (URL)

* Methodenattribut: Übermittlungsmethode: get (Standard) und post

Die get-Methode ist die URL-Adressleiste sichtbar, die Länge ist begrenzt (IE2k Firefox 8k), relativ unsicher

Die post-Methode ist die URL-Adresse. Unsichtbar, unbegrenzte Länge, relativ sicher.

enctype: Übermittlungstyp.

Ziel: Wo soll die Ziel-URL geöffnet werden.

name: Das Attribut gibt dem Formular einen Namen. HTML5 wird nicht unterstützt. Verwenden Sie stattdessen die ID.

2. Die Eingabe der Formularelementbezeichnung definiert das Eingabefeld, in das der Benutzer Daten eingeben kann. In HTML 5 hat das Typattribut viele neue Werte.

Details werden unten erläutert:

Zum Beispiel:

3. verwendet;

*Wertattribut: Dropdown-Element Der Wert von

*ausgewähltes Attribut: Standard-Dropdown-Element

4. *

*Name: Definieren Sie das Name für Speichert den Wert im Textbereich. <p style="text-align: left;"></p> *cols: Gibt die Anzahl der sichtbaren Spalten im Textbereich an. <p style="text-align: left;"></p> *rows: Gibt die Anzahl der sichtbaren Zeilen im Textbereich an. <p style="text-align: left;"></p> deaktiviert: Ob deaktiviert werden soll <p style="text-align: left;"></p> schreibgeschützt: schreibgeschützt <p style="text-align: left;"></p> ...<p style="text-align: left;"></p> Der Standardwert liegt zwischen zwei Tags <p style="text-align: left;"></p> 5. *<button>-Tag definiert die <p style="text-align: left;">-Schaltfläche </p>. <p style="text-align: left;"><a href="http://www.php.cn/code/5991.html" target="_blank"> Sie können Inhalte wie Dokumente oder Bilder innerhalb des Schaltflächenelements platzieren. Darin unterscheidet sich dieses Element von Schaltflächen, die aus Eingabeelementen erstellt wurden. </a></p> 6. <fieldset> Das HTML5-Tag --fieldset-Element kann <p style="text-align: left;"> verwandte Elemente im Formular gruppieren </p>. <p style="text-align: left;"><a href="http://www.php.cn/code/10425.html" target="_blank">disabled-Attribut: definiert, ob das Feldset sichtbar ist. </a></p> Formularattribut: Definiert ein oder mehrere Formulare, zu denen dieser Feldsatz gehört. <p style="text-align: left;"></p> 7. <legend> HTML5-Tag – <legend>-Tag definiert Titel für <fieldset> und <details> <p style="text-align: left;"></p> <form><p style="text-align: left;"></p>="text" /><br/><p style="text-align: left;"></p> Gewichtung: <input type="text" />< br/><p style="text-align: left;"></p> </fieldset><p style="text-align: left;"></p>
<p style="text-align: left;"> </form></p>
<p style="text-align: left;"> 8. <optgroup> html5-Tag – <optgroup> Mit diesem Element können Sie Optionen kombinieren </p>
<p style="text-align: left;"> Beispiel: </p>
<p style="text-align: left;"> <select></p>
<p style="text-align: left;"> <optgroup label="Swedish Cars"></p>
<p style="text-align: left;"> < option value="volvo">Volvo</option></p>
<p style="text-align: left;"> <option value="saab">Saab</option></p>
<p style="text-align: left;"> </optgroup></p>
<p style="text-align: left;"> <optgroup label="German Cars"></p>
<p style="text-align: left;"> <option value="mercedes">Mercedes</option></p>
<p style="text-align: left;"> <option value="audi">Audi< ;/option></p>
<p style="text-align: left;"> </optgroup></p>
<p style="text-align: left;"> </select></p>
<p style="text-align: left;"> 9. <datalist> html5 tag--<datalist> Tag-Definition optionale Liste von Daten. In Verbindung mit dem Eingabeelement können Sie eine Dropdown-Liste mit Eingabewerten erstellen. </p>
<p style="text-align: left;">Beispiel: </p>
<p style="text-align: left;"> <form action="demo_form.php" method="get"></p>
<p style="text-align: left;"> <input list="browsers" name="browser " ></p>
<p style="text-align: left;"> <datalist id="browsers"></p>
<p style="text-align: left;"> <option value="Internet Explorer"></p>
<p style="text-align: left;"> <option value="Firefox" > ;</p><p style="text-align: left;"> <option value="Chrome"></p>
<p style="text-align: left;"> <option value="Opera"></p>
<p style="text-align: left;"> <option value="Safari"> 🎜></p> </datalist><p style="text-align: left;"></p> <input type="submit"><p style="text-align: left;"></p> </form><p style="text-align: left;"></p> 10. **< /> Attribute in Formularelementen können <p style="text-align: left;"></p> *Typ-Attribut: gibt den Typ des Formularelements an: Der Wert lautet wie folgt: <p style="text-align: left;"></p> Text: einzeiliges Textfeld <p style="text-align: left;"></p> Passwort: Passwort-Eingabefeld <p style="text-align: left;"></p> Kontrollkästchen: Mehrfachauswahlfeld, bitte Wert angeben <p style="text-align: left;"></p> Radio: Optionsfeld, bitte Wert angeben <p style="text-align: left;"></p> <p style="text-align: left;">Datei<a href="http://www.php.cn/wiki/1313.html" target="_blank">: </a>Datei hochladen<a href="http://www.php.cn/code/8549.html" target="_blank">Feld auswählen</a></p> Schaltfläche: Normale Schaltfläche <p style="text-align: left;"></p> Senden: Schaltfläche „Senden“ <p style="text-align: left;"></p> Bild: Schaltfläche „Bild senden“ <p style="text-align: left;"></p> <p style="text-align: left;"> Zurücksetzen <a href="http://www.php.cn/wiki/1081.html" target="_blank">: Schaltfläche „Zurücksetzen“, stellt den Effekt auf den Anfang (beim ersten Öffnen) wieder her </a></p> ausgeblendet: Ausgeblendetes Hauptformularfeld, wenn die Informationen zusammen mit dem Formular übermittelt werden, aber keine Benutzeränderung erforderlich ist<p style="text-align: left;"></p> *Name-Attribut: Name des Formularelements, wird zum Speichern des Inhaltswerts verwendet <p style="text-align: left;"></p> *Wert-Attribut: Eingabewert (standardmäßig angegebener Wert) <p style="text-align: left;"></p> Größenattribut: Breitenwert des Eingabefelds <p style="text-align: left;"></p> maxlength-Attribut: die maximale Länge des Eingabeinhalts des Eingabefelds <p style="text-align: left;"></p> readonly-Attribut: schreibgeschütztes Attribut des Eingabefelds <p style="text-align: left;"></p> *disabled-Attribut: deaktiviertes Attribut <p style="text-align: left;"></p> *checked Attribut: Geben Sie die Standardoption für das Auswahlfeld an <p style="text-align: left;"></p> Accesskey-Attribut: Geben Sie die Tastenkombination an (nicht häufig verwendet) (IE: Alt+Taste Firefox: Alt+Umschalt+Taste) <p style="text-align: left;"></p> Tabindex-Attribut: Geben Sie die Tabulatortaste durch eine Zahl an. Die Umschaltsequenz (wird nicht häufig verwendet) <p style="text-align: left;"></p> src und alt werden für die Bildschaltfläche festgelegt. <p style="text-align: left;"></p> Hinweis: Die Schaltfläche „Zurücksetzen“ stellt das Formular wieder her Durch das Versetzen der Daten in den <p style="text-align: left;">-Zustand beim ersten Öffnen <a href="http://www.php.cn/code/8243.html" target="_blank"> wird die Bildschaltfläche </a></p> nicht gelöscht, die standardmäßig über die Formularübermittlungsfunktion verfügt. <p style="text-align: left;"></p><p>Das obige ist der detaillierte Inhalt von[Frontend] Wie man HTML verwendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="So analysieren Sie HTML" href="http://m.php.cn/de/faq/358137.html">So analysieren Sie HTML</a></span><span>Nächster Artikel：<a class="dBlack" title="So analysieren Sie HTML" href="http://m.php.cn/de/faq/358141.html">So analysieren Sie HTML</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="http://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/de/faq/348757.html" title="Zusammenfassung der HTML-Kenntnisse" class="aBlack">Zusammenfassung der HTML-Kenntnisse</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348804.html" title="So lernen Sie schnell HTML" class="aBlack">So lernen Sie schnell HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348873.html" title="Der Unterschied zwischen HTML xHTML XML" class="aBlack">Der Unterschied zwischen HTML xHTML XML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348884.html" title="Der Unterschied zwischen src- und href-Attributen" class="aBlack">Der Unterschied zwischen src- und href-Attributen</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/348902.html" title="Über die Verwendung von HTML5 und CSS-Ersatz" class="aBlack">Über die Verwendung von HTML5 und CSS-Ersatz</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p></div><div class="footermid"><a href="http://m.php.cn/de/about/us.html">Über uns</a><a href="http://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="http://m.php.cn/de/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p>                © php.cn All rights reserved
            </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
    var _times = times || -1, //100次
    _interval = interval || 20, //20毫秒每次
    _self = this,
    _selector = this.selector, //选择器
    _iIntervalID; //定时器id
    if( this.length ){ //如果已经获取到了，就直接执行函数
        func && func.call(this);
    } else {
        _iIntervalID = setInterval(function() {
            if(!_times) { //是0就退出
                clearInterval(_iIntervalID);
            }
            _times <= 0 || _times--; //如果是正数就 --

_self = $(_selector); //再次选择
            if( _self.length ) { //判断是否取到
                func && func.call(_self);
                clearInterval(_iIntervalID);
            }
        }, _interval);
    }
    return this;
}
$("table.syntaxhighlighter").wait(function() {
    $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
      $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>