Heim > Artikel > Web-Frontend > Eine Zusammenfassung der HTML-Wissenspunkte

Eine Zusammenfassung der HTML-Wissenspunkte

巴扎黑Original: 2017-05-21 10:10:401434Durchsuche

Der folgende Editor bietet Ihnen eine Zusammenfassung der Front-End-HTML-Wissenspunkte (empfohlen). Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Kommen Sie und schauen Sie sich den Editor an

1. Übersicht über HTML

htyper Text Markup Language, also Hypertext Markup Language

Hypertext: bedeutet, dass die Seite Bilder, Links und sogar Nicht-Text-Elemente wie Musik und Programme enthalten kann.

Auszeichnungssprache: eine aus Tags (Tags) zusammengesetzte Sprache

Webseite == HTML-Dokument, vom Browser analysiert, zur Anzeige verwendet

Statische Webseite: statisch Ressourcen wie xxx.html

Dynamische Webseite: Der HTML-Code wird dynamisch von einer bestimmten Entwicklungssprache gemäß Benutzeranforderungen generiert

Das Folgende ist das Baumstrukturdiagramm der HTML-Datei

Das Konzept des Tags:

• Es besteht aus einem Wortpaar in spitzen Klammern . Zum Beispiel: *Alle Tags dürfen nicht mit einer Zahl beginnen

• Tags sind in zwei Teile unterteilt: Start-Tag und End-Tag Einfach. Diese Art von Tag wird als Selbstverschluss bezeichnet. Zum Beispiel:
>• Beschriftungen können verschachtelt werden.

Attribute des Tags:

• Erscheinen normalerweise in Form von Schlüssel-Wert-Paaren, zum Beispiel name="alex"

•Attribute können nur in öffnenden oder schließenden Tags erscheinen.

• Attributnamen sind alle in Kleinbuchstaben geschrieben. *Attributwerte müssen in doppelte oder einfache Anführungszeichen gesetzt werden. Beispiel: name="alex"

•Wenn der Attributwert genau mit dem Attributnamen übereinstimmt, schreiben Sie einfach der Attributname direkt. Zum Beispiel readonly

2. Einführung in die Hauptkopf-Tags

•Die Zusammensetzung des Meta-Tag: Das Meta-Tag hat zwei Attribute, nämlich das http-equiv-Attribut und das Namensattribut. Verschiedene Attribute haben unterschiedliche Parameterwerte. Diese sind unterschiedlich. Die Parameterwerte realisieren unterschiedliche Webseitenfunktionen.

1 Das Namensattribut wird hauptsächlich zur Beschreibung von Webseiten verwendet, und der entsprechende Attributwert ist Inhalt. Der Inhalt im Inhalt wird hauptsächlich von Suchmaschinenrobotern verwendet, um Informationen zu finden und Informationen zu klassifizieren.

//(Beachten Sie die Anführungszeichen am Ende vor dem Sekunden und nach der URL)

•Oldboy

•

3. Body-Tag

Grundlegende Tags: : Der Wertebereich von n liegt zwischen 1 und 6; wird zur Darstellung von Titeln verwendet Etikett. Zwischen dem oberen und unteren Inhalt befindet sich eine Leerzeile

: Fettgedrucktes Etikett ;strike>: für Text Fügen Sie eine Mittellinie hinzu.
: Der Text wird kursiv.
^{und _{: Hochgestellt und tiefgestellt.

: Zeilenumbruch.
: Horizontale Linie

Tags auf Blockebene und Inline Tags
Tags auf Blockebene:

Inline-Tags: < ;a>< input>_{^{<span><p></p>
<p></p>Eigenschaften von Blockelementen<p></p>
<p> </p>① beginnt immer in einer neuen Zeile; <p></p>② Höhe, Zeilenhöhe sowie Ränder und Abstand können alle gesteuert werden <p></p>③ Die Standardbreite beträgt 100 % des Containers; sofern keine Breite angegeben ist. <p></p>
<p>④ 它可以容纳内联元素和其他块元素</p>
<p><strong><span style="color:#ff0000">inline元素的特点</span></strong></p>
<p>① 和其他元素都在一行上；</p>
<p>② 高，行高及外边距和内边距不可改变；</p>
<p>③ 宽度就是它的文字或图片的宽度，不可改变</p>
<p>④ 内联元素只能容纳文本或者其他内联元素</p>
<p>对行内元素，需要注意如下</p>
<p>设置宽度width 无效。</p>
<p>设置高度height 无效，可以通过line-height来设置。</p>
<p>设置margin 只有左右margin有效，上下无效。</p>
<p>设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。</p>
<p><strong><span style="color:#ff0000">特殊字符：</span></strong></p>
<p>< >；"；©®</p>
<p>图形标签<img>：</p>
<p>src: 要显示图片的路径.</p>
<p>alt: 图片没有加载成功时的提示.</p>
<p>title: 鼠标悬浮时的提示信息.</p>
<p>width: 图片的宽</p>
<p>height:图片的高 (宽高两个属性只用一个会自动等比缩放.)</p>
<p>超链接标签<a>:　</p>
<p>href:要连接的资源路径格式如下: href="http://www.jb51.net"</p>
<p>target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.</p>
<p>name: 定义一个页面的书签.</p>
<p>用于跳转 href : #书签名称.</p>
<p><strong>列表标签:</strong></p>
<p><ul>: 无序列表</p>
<p><ol>:有序列表</p>
<p>      <li>:列表中的每一项.</p>
<p><dl> 定义列表</p>
<p>      <dt> 列表标题</p>
<p>      <dd> 列表项</p>
<p>表格标签<table>：</p>
<p><br>border: 表格边框.</p>
<p>cellpadding: 内边距</p>
<p>cellspacing: 外边距.</p>
<p>width: 像素百分比.（最好通过css来设置长宽）</p>
<p><tr>: table row</p>
<p>         <th>: table head cell</p>
<p>         <td>: table data cell</p>
<p>rowspan: 单元格竖跨多少行</p>
<p>colspan: 单元格横跨多少列（即合并单元格）</p>
<p><th>: table header <tbody>(不常用): 为表格进行分区</p>
<p>表单标签<form></p>
<p><br>表单用于向服务器传输数据。</p>
<p>表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。</p>
<p>表单还可以包含textarea、select、fieldset和 label 元素。</p>
<p><strong><span style="color:#ff00ff">1、表单的属性</span></strong></p>
<p>HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.</p>
<p>action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web</p>
<p>method: 表单的提交方式 post/get 默认取值就是 get（信封）</p>
<p>get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.</p>
<p>post:1.提交的键值对不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.</p>
<p>get/post是常见的两种请求方式.</p>
<p><strong><span style="color:#ff00ff">2.表单元素</span></strong></p>
<p><input>     <br>type:     <br>text 文本输入框</p>
<p>password 密码输入框</p>
<p>radio 单选框</p>
<p>checkbox 多选框 </p>
<p>submit 提交按钮           </p>
<p>button 按钮(需要配合js使用.) button和submit的区别？</p>
<p>file 提交文件：form表单需要加上属性enctype="multipart/form-data"</p>
<p class="codeText"><br></p>
<p class="codeHead"><span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span></p>
<ol class="dp-xml list-paddingleft-2">
<li><p>def index(request):   </p></li>
<li><p>    print request.POST   </p></li>
<li><p>    print request.GET   </p></li>
<li><p>    print request.FILES   </p></li>
<li><p>    for item in request.FILES:   </p></li>
<li><p>        <span class="attribute">fileObj</span> = <span class="attribute-value">request</span>.FILES.get(item)   </p></li>
<li><p> <span class="attribute">f</span> = <span class="attribute-value">open</span>(fileObj.name, 'wb') </p></li>
<li><p> <span class="attribute">iter_file</span> = <span class="attribute-value">fileObj</span>.chunks() </p></li>
<li><p> für Zeile in iter_file: </p></li>
<li><p> f.write(line) </p></li>
<li><p> f.close() </p></li>
<li><p> return HttpResponse('ok') </p></li>
</ol>
<p>name: form Der Schlüssel des übermittelten Elements ist der Unterschied zum id-Attribut: Das name-Attribut ist der Name, der bei der Kommunikation mit dem Server verwendet wird. Dieses Attribut dient hauptsächlich der Benutzerfreundlichkeit der Client-Programmierung , und in </p>
<p>Wird in CSS und Javascript verwendet. </p>
<p>Wert: Der Wert des Formularübermittlungselements. Für verschiedene Eingabetypen ist auch die Verwendung des Wertattributs unterschiedlich: </p>
<p>type="button", "reset", "submit" - definiert auf der Schaltfläche Der angezeigte Text</p>
<p>type="text", "password", "hidden" - definiert den Anfangswert des Eingabefeldes</p>
<p>type="checkbox", "radio ", "image" – Definieren Sie den mit der Eingabe verknüpften Wert </p>
<p>aktiviert: Radio und Kontrollkästchen sind standardmäßig aktiviert </p>
<p>schreibgeschützt: schreibgeschützt. Text und Passwort</p>
<p>deaktiviert : Arbeit für alle verwendeten Eingaben. </p>
<p><select> Dropdown-Auswahlbezeichnungsattribute: </p>
<p>Name: Schlüssel des Formularübermittlungselements.</p>
<p>Größe: Anzahl der Optionen </p>
<p>multiple: multiple</p>
<p><option> Attribute jedes im Dropdown-Menü ausgewählten Elements: Wert: Der Wert des ausgewählten Formularübermittlungselements Standard </p>
<p><optgroup> Gruppen für jedes Element hinzufügen </p>
<p><textarea> der Schlüssel des Formularübermittlungselements: wie viele Spalten der Textbereich standardmäßig hat : wie viele Zeilen der Textbereich standardmäßig hat </p>
<p><label></p>
<p> <label for="www">Name</label><br> <input id=" www" type="text"></p>
<p><fieldset></p>
<p><fieldset><br> <legend>Anmelden</legend><br> <input type= "text"><br></fieldset></p><p>Das obige ist der detaillierte Inhalt vonEine Zusammenfassung der HTML-Wissenspunkte. 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="Detaillierte Erläuterung der Verwendung von Meta-Tags in HTML" href="http://m.php.cn/de/faq/362710.html">Detaillierte Erläuterung der Verwendung von Meta-Tags in HTML</a></span><span>Nächster Artikel：<a class="dBlack" title="Detaillierte Erläuterung der Verwendung von Meta-Tags in HTML" href="http://m.php.cn/de/faq/362716.html">Detaillierte Erläuterung der Verwendung von Meta-Tags in 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><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><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><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><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>}}}}