Heim > Artikel > Web-Frontend > Ein vorläufiges Verständnis der Grundstruktur und Tags von HTML

Ein vorläufiges Verständnis der Grundstruktur und Tags von HTML

巴扎黑Original: 2017-06-23 14:51:112272Durchsuche

1. Ein vorläufiges Verständnis von HTML

HTML ist eine Hypertext-Tag-Sprache und der Browser ist ein Werkzeug zum „Interpretieren und Ausführen“ von HTML-Quellcode.

Grundstruktur von HTML

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body></body></html>

Wobei die Dokumenttypdeklaration ist, die angibt, dass es sich bei dieser Datei um eine HTML5-Datei handeln muss, damit der Browser sie gemäß HTML5 analysieren kann Vorbereitung und muss in HTML5 vorliegen, vorhanden sein und am Anfang der Datei stehen.

ist der Titel der Webseite, der oben angezeigte Text:

<span style="font-size: 16px"><span style="font-family: 宋体"><head> </head>是用来描述网页的一些关键信息。例如网页的配置、设置、关键字等等。</span>。</span><span style="font-size: 18px"><span style="font-size: 16px">。这些信息，大多在浏览器看不到，但是对网页的解析至关重要！</span><br></span>

<span style="font-family: 宋体; font-size: 16px"> <body> </body>则是所有的代码都写在其中。<br><span style="font-size: 18pt; background-color: #cc99ff">二、初步了解标签<br></span></span>

1. Header-Teil

1) Link: Web Seitentitel-Symbol

链接网页的小图标，网页选项卡上面的小图片

wobei rel="icon" bedeutet, dass der aktuelle Link zum Verlinken auf das Webseitensymbol

verwendet wird

href ="img/ss.gif" gibt den Standort der Adresse des Symbols an

<link rel="icon" href="img/sss.gif" />

2)meta: Verschiedene verwendete Informationen um Webseiten zu beschreiben

<span style="font-family: 宋体; font-size: 16px; background-color: #ffffff"><span style="font-family: 宋体"><span style="line-height: 36px"><span style="color: #ff6600; background-color: #ffffff">①</span>其中<meta charset="utf-8" />设置网页的编码格式为utf-8格式<br>常见的中文编码格式：GB2312：国标码，简体中文；GBK：扩展国标码，简体中文<br><span style="color: #ff0000">utf-8：万国码，兼容各种语言编码，常用！<br></span></span></span></span>

<meta charset="utf-8" />

<br>

②Sie können Schlüsselwörter für Webseiten festlegen, um Suchmaschinen zu helfen Mehrere Schlüsselwörter trennen

<meta name="keywords"content="杰睿教育,网页开发" />

③, um bei der Suche die detaillierten Informationen der Webseite und einen Textabschnitt unter dem Titel festzulegen für Motoren!

name="description" bedeutet, dass dieses Meta-Tag die Beschreibungsinformationen der Webseite festlegt; content="" bedeutet die detaillierten Informationen Beschreibung Informationen Inhalt! !

<br>

<meta name="description"content="这是我在，，，，"/>

<br>

2、主体部分

1）标签的分类

①块级标签：显示为块状，独占一行，自动换行。 ②行级标签：在一行中，从左往右依次排列，不会自动换行。

2）块级标签

常见的块级标签有：

a.标题标签：

......

特点:h1最大，h6最小且自动加粗。

b.水平线标签：

c.段落标签：

d.换行标签：

e.引用标签：

要的cite属性表明引用的来源，一般为网址，且网址不会在网页中展示，浏览器一般显示为首行缩进

f.预格式标签：

浏览器默认显示样式：①显示为等宽字体

②代码中的换行，空格等元素可在浏览器中直接显示。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML基本块级标签</title></head>
    <body><h1>这是h1标签</h1><h2>这是h2标签</h2><h3>这是h3标签</h3><h4>这是h4标签</h4><h5>这是h5标签</h5><h6>这是h6标签</h6><hr/><p>这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！
            
            哈哈啊哈哈哈啊哈哈哈哈啊哈！<br/>这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！</p><p>这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！</p><pre class="brush:php;toolbar:false">if(entity != null){  
    tring result = EntityUtils.toString(entity,"UTF-8");//HttpEntity转为字符串类型  
    jsonObject = JSONObject.fromObject(result);//字符串类型转为JSON类型  
}

光明正大的不要脸！这段话就是抄的！你能咋地！

g.有序列表

h.无序列表

i.定义描述列表

一般只有一项: 可以有很多项; 132; 123

g.组合标签显示效果：上面是图片，下面是图片的标题，同时图片和标题前代缩进。

k.分区标签

可以包裹任何标签，也可以被包裹进任何标签。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML基本块级标签</title></head>
    <body><ul><li>这是无序列表第一项</li><li>这是无序列表第二项</li><li>这是无序列表第三项</li><li>这是无序列表第四项</li></ul>
        <ol><li>这是无序列表第一项</li><li>这是无序列表第二项</li><li>这是无序列表第三项</li><li>这是无序列表第四项</li></ol>
        <dl><dt>这是dl列表的标题</dt><dd>这是dl列表的描述项1</dd><dd>这是dl列表的描述项2</dd><dd>这是dl列表的描述项3</dd></dl>
        <figure><img src="img/icon.jpg" /><figcaption>图片的描述标题</figcaption></figure>
        <div style="width: 500px; height: 100px; background-color: yellow;">这是div里面的文字！！！<p>11111</p></div>
                <div style="height: 500px;"></div></body></html>

3) Tags auf Zeilenebene

Gemeinsame Tags auf Zeilenebene:

(1) Text-Tag span

① Das span-Tag ist nur eine Umbruchfunktion und hat keine andere Bedeutung ② Die span-Funktion ähnelt dem eines div und muss mit CSS verwendet werden. Es ist nur so, dass div ein Tag auf Blockebene und span ein Tag auf Zeilenebene ist

(2) Betonung auf Tags em und strong tag i; ; zwischen den vier Der Unterschied

① Sowohl sie als auch ich können gekippt werden. Sowohl stark als auch b können fett gemacht werden! Allerdings sind i und b einfach schräg und fett, während em und strong eine stärker hervorgehobene Semantik haben. ② em und strong weisen beide auf eine Betonung hin, aber strong betont eine höhere Ebene! ! Hinweis: 1. Der Zweck der Hervorhebung: Suchmaschinen wissen lassen, was die Webseite hervorhebt! Einfache Anzeige in Suchmaschinen! 2. Strong und em können in mehreren Ebenen verschachtelt werden, um eine zunehmende Betonung anzuzeigen!

(3) Kurzes Zitat-Tag q: Zeigt ein kurzes Zitat an. Cite-Attribut: wird verwendet, um die Quelle des Zitats anzugeben.

[Häufig verwendete Zitat-Tags]

Wird verwendet, um einen Teil des Inhalts zu zitieren
Wird verwendet, um einen Satz zu zitieren Wird häufig verwendet, um den Titel von Werken, Kalligraphien und Gemälden zu zitieren. usw. Ähnlichkeit: Die drei Zitat-Tags verwenden alle das Zitat-Attribut, um die Quelle des Zitats anzugeben Unterschied: ① Die Der Inhalt des Zitats ist unterschiedlich. Blockquote-> ein Absatz, q-> ein Satz, Zitieren-> Werkname ② Die angezeigten Standardeffekte sind unterschiedlich. blockquote->Der gesamte Absatz wird standardmäßig nach rechts eingerückt; q->Anführungszeichen werden standardmäßig hinzugefügt cite->Italic!

(4) Tag verkleinern klein: Schrift um eine Größe verkleinern; Tag groß: Schrift um eine Größe vergrößern Größe.

Hinweis: ① klein und groß können in mehreren Ebenen verschachtelt werden, bis die Schriftart das Minimum oder Maximum erreicht; > ② Diese beiden Tags wurden entfernt und werden nicht zur Verwendung empfohlen. 
(5) Bild-Tag img
① src-Attribut: Gibt den Pfad des Bildes an
[Legaler Weg des Bildpfads] A. Internet-Link: Da sich die Bilder auf anderen Websites befinden, können wir nicht darauf zugreifen, wenn andere Websites sie löschen. Daher wird die Verwendung dieser Methode nicht empfohlen. 

B. Absoluter Pfad: Auf Bilder mit absoluten Pfaden kann nur über das Dateiprotokoll zugegriffen werden Maschine! Daher ist die Verwendung dieser Methode strengstens untersagt! 
 C. Relativer Pfad: a. Das Bild befindet sich im selben Ordner wie das aktuelle Dokument: Geben Sie den Bildnamen direkt ein < img src="icon.jpg" /> b. Das Bild befindet sich im Ordner unter dem aktuellen Dokument: Ordnername/Bildname < img src="img/icon.jpg" /> c Das Bild befindet sich im Ordner eine Ebene über dem aktuellen Dokument: ../Bildname (../ bedeutet gehen eine Ebene zurück) Beachten Sie jedoch unbedingt: Das Bild muss enthalten sein im Projekt und sind außerhalb der Projektbilder nicht zugänglich. ② Höhe: die Höhe des Bildes Breite: die Breite des Bildes ;img src="img/icon.jpg" title="Eingabeaufforderungstext wird angezeigt, wenn die Maus darüber ist" /> ④ alt: Text wird angezeigt, wenn das Bild nicht geladen werden kann ⑤ align: image Wie der umgebende Text relativ zum Bild ausgerichtet wird. Optionale Werte: oben->oben im Bild, Mitte->Mitte im Bild, unten->unten im Bild 12345 (6) Hyperlink-Tag a 

A . href-Attribut: Gibt die Seite an, zu der der Hyperlink springt. ① Sie können die Netzwerkadresse schreiben:

Dies ist ein Hyperlink ② Sie können eine lokale HTML-Datei öffnen: Verwenden Sie einen relativen Pfad, um die Dateiadresse zu bestimmen. Wird auf die gleiche Weise wie das img-Tag bestimmt.

 Dies ist ein Hyperlink B. title-Attribut: Der Eingabeaufforderungstext, der angezeigt wird, nachdem die Maus über Dies ist ein Hyperlink< /a> ;
C、target属性：设置新页面打开的窗口位置
可选值：_self自身页面打开（默认）
_blank 新窗口打开
 这是一个超链接
 【超链接的特殊应用】 1、功能性链接：（了解） mailto:// 点击链接给指定邮箱发送邮件 点击发送邮件 tencent://message/?uin=1105093212" 还有：tell://手机端点击打电话 message://手机端点击发送短信 ftp://使用ftp协议进行文件的上传下载 2、锚点链接： >>>本页面锚链接 ① 在页面的指定位置中设置一个锚点，用那么属性表示锚点名字： a name="top"> 
 ② 将超链接的href属性，设置为#加锚点名字 点击链接，跳转到top锚点位置 >>>页面间锚链接 ① 在新页面的指定位置中设置一个锚点，用那么属性表示锚点名字： a name="top"> 
 ② 将超链接的href属性，设置为“新页面地址#加锚点名字”： 点击链接，跳转到锚地.html的top锚点位置
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML基本行级标签</title></head><body><a name="e"></a>
        
        糖糖真帅！！！ 
        这是em标签 这是strong标签 这是i标签 这是b标签 这是b标签 
        <q cite="http://www.jianghaozhenshuai.com">我是q标签引用</q><blockquote>我是blockqoute的引用！！！！！</blockquote><cite cite="">我是cite标签的引用！！</cite> 
        我比正常小两号 <big>我比正常大一号</big> 
        
              <img src="img/icon.jpg" align="top" />12345
        --><img src="img/icon.jpg" align="bottom" />12345        <a href="tencent://message/?uin=1105093212"target"_blank">点击发送邮件</a><div style="background-color: aqua;height: 1000px"></div><a href="#e">点击</a><a href="锚点.html#1">1</a><a href="锚点.html#2">2</a><a href="锚点.html#3">3</a></body></html>
4）块级标签与行级标签的区别

1、块级标签：默认宽度100%(占满一行)； 块级标签自动换行(独占一行，右边不能有任何东西)； 块级标签可以使用CSS设置宽度高度！ 2、行级标签：默认宽度由内容撑开(内容多宽、宽度就占多宽)； 行级标签不会自动换行(一行当中，从左往右依次排列)； 行级标签的宽度高度不能设置！

5）表格

（1）表格table

表格用table表示，表格中的每一行tr表示，一行中的每一列用td表示 th表示的是：表头。表头中的文字，默认为加粗居中。th要放在tr中，用于替换掉td。 （2）table的常用属性 A、border：给表格加边框。默认给所有td加边框，并且给整个table加外边框。当增大border的值时，td上的边框不变化，只有最外层大边框变宽。 B、cellspacing：单元格与单元格之间的距离。 cellspacing="0" 表示单元格与单元格之间没有距离，但是边框线的宽度依然是两条线的宽度。 [注意] 表格边框合并的CSS写法： style="border-collapse: collapse;" 这条CSS与cellspacing="0"有什么区别？ cellspacing="0"仅仅是将单元格之间的距离调整为0，实际上单元格之间依然还是两条线； border-collapse: collapse; 是将表格相邻的两条边框进行合并处理，只有一条线存在。(一旦边框合并，cellspace属性将会失效。) C、cellpadding：单元格中的文字与单元格边框的距离。 D、 height：表格的高度 width：表格的宽度 使用表格宽、高属性设置大小： 
 使用CSS样式设置大小： 
 E、align：设置表格在浏览器中的位置。不建议使用了。 可选值：left 表格居左 /center 表格居中/right 表格居右 F、bgcolor：背景色 bordercolor:边框颜色 background:背景图 background="img/computer.jpg" 背景色和背景图同时存在时，背景图会覆盖背景色 （3）tr与td常用属性 A、width：单元格宽度 height：单元格的高度 B、bgcolor：单元格的颜色 C、align:设置单元格中的文字，水平对齐方式。 left、center、right valign:设置单元格中的文字，垂直对齐方式。 top、middle、bottom D、 nowrap="nowrap" 当单元格文字过多时，设置单元格文字不断行显示。但是，会把表格的宽度撑大!!! （4）表格的跨行与跨列 ①跨列：在td上使用属性colspan="n"进行跨列。如果一个单元格跨n列，则，单元格右边的n-1个单元格需要去掉。 ②跨行：在td上使用属性rowspan="n"进行跨行。如果一个单元格跨n行，则，单元格下边的n-1个单元格需要去掉。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>表格</title></head><body><table border="1"><tr><th >标题一</th><th colspan="2">标题二</th></tr><tr><td rowspan="2">1-1</td><td>1-2</td><td>1-3</td></tr><tr><td>2-2</td><td>2-3</td></table>
        
            <table border="10" width="500" height="400" bordercolor="#ff99cc" style="border-collapse: collapse;"><tr><td rowspan="7"></td><td rowspan="4"></td><td rowspan="2"></td><td ></td></tr><tr><td ></td></tr><tr><td rowspan="2"></td><td></td></tr><tr><td rowspan="4"></td>
                </tr><tr><td rowspan="2"></td><td rowspan="2"></td></tr><tr>
                
                </tr><tr><td colspan="2"></td>
            
                </tr></table>
        </body></html>
3. Was steht am Ende?

Es ist mein erster Kontakt zu einem Blog. Als ich meinen ersten Beitrag gepostet habe, war ich etwas aufgeregt Als Programmierer habe ich das Gefühl, dass Code ein magischer Ort ist, der sowohl magisch als auch unterhaltsam ist.

Ich habe immer gedacht, dass diese Dinge sehr tiefgründig und außerhalb meiner Reichweite liegen, aber als ich mit ihnen in Berührung kam, gefielen sie mir immer noch.

Bitte kümmern Sie sich endlich um mich.

Das obige ist der detaillierte Inhalt vonEin vorläufiges Verständnis der Grundstruktur und Tags von HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：JS Case Contact Message BoardNächster Artikel：JS Case Contact Message Board

In Verbindung stehende Artikel

Mehr sehen