Teilen Sie eine Reise zum Erlernen von HTML

Website-Prozess entwickeln

• Stil und Funktionen festlegen (Forum, Message Board, Zahlung, Benutzeranmeldung usw.).

• Künstler erstellen Webseiten-Renderings (Homepage, Listenseite, Inhaltsseite).

• Das Produktionspersonal schneidet die Bilder zu und bringt sie in ein Webseitenformat.

• Das Hintergrundprogramm beginnt mit dem Schreiben des Programms.

• Das Front-End und das Backend werden kombiniert.

HTML-Kommentare

Hinweis: Kommentare sind nur für die Zukunft bestimmt Wartungsgebrauch.

Gemeinsame Attribute von Aufzählungszeichen

<ul><li>内容</li>　　<li>内容</li>　　<li>内容</li></ul>

oder

• l Typ: Aufzählungstyp, Wert : Scheibe (kleiner schwarzer Punkt), Kreis (Kreis), Quadrat (durchgezogenes Quadrat)

  HTML-Nummernliste (geordnet)

  <ol> <li>内容</li> <li>内容</li> <li>内容</li></ol>

  Gemeinsame Attribute von

  oder

  1. • Typ: Nummerierungstyp , Werte: 1, a, A, i, I

     • Start: Von welcher Zahl aus soll mit der Nummerierung begonnen werden

     Rollende Untertitelmarkierung (veraltet)

     <marquee> 内容…..  
     
     </marquee>

     Gemeinsame Attribute

     • Richtung: Scrollrichtung, Werte: oben, unten, links, rechts

     • Breite: Scrollbreite

     • Höhe: Scrollhöhe

     • BgColor: Scroll-Hintergrundfarbe

     • ScrollAmount: Scroll-Schrittwert

     • ScrollDelay: Der Verweilwert zwischen zwei Schritten

     • Schleife: Die Anzahl der Schleifen-Scrolls

     Bildmarkierung

     Syntaxformat: Attribute="value">

     Gemeinsame Attribute:

     • Breite: Bildbreite.

     • Höhe: Bildhöhe.

     • Rand: Der Rand des Bildes.

     • Src: Der Pfad des Bildes.

     • Ausrichten: links, zentriert, rechts. (Kann den Effekt gemischter Grafiken und Texte erzielen)

     • Hspace: linker und rechter Abstand zwischen Bildern und Text.

     • Vspace: der obere und untere Abstand zwischen Bildern und Text.

     Hyperlink

     Syntaxformat: Attribute="Value"> ; Inhalt

     Gemeinsame Attribute:

     • Href: Zieldatei-Adress-URL .

     • Ziel: Offene Methode. _blank: neues Fenster, _self: dieses Fenster, _parent: das vorherige Fenster wird geöffnet, top: das Fenster der obersten Ebene wird geöffnet.

     • Name: Definieren Sie den Namen des Zeichenpunkts.

     • mailto

     • #Leerer Link.

     • JsVerbindung:

     HTML-Farbdarstellung

     Es gibt drei Möglichkeiten, auszudrücken:

     Farbwörter: blau, grün, rot, gelb.

     Dezimaldarstellung: rgb (255, 0, 0)

     Hexadezimaldarstellung #FF0000 (rot), #00FF00 (grün), # 0000FF (blau)

     Ankerlink

     • Bedeutung: Ankerlink springt zu verschiedenen Bereichen einer Webseite

     • Ankerpunkt (Markierung) definieren:

     • Zum Beispiel:

     • 
       

     • Zum Ankerpunkt (Marker) springen:

     • Syntax: Content…..

     • 
       

     Tags

     Funktion: Bereitstellung von Metainformationen des Webs Seiten. Geben Sie Suchschlüsselwörter für Webseiten an.

     -Tag hat zwei Attribute: http-equiv und name

     1 http-equiv-Attribut

     • Funktion: HTTP-Protokolldatei simulieren Header-Informationen teilen dem Browser mit, wie die Webseite geöffnet werden soll.

     • Das http-equiv-Attribut wird im Allgemeinen in Verbindung mit dem Content-Attribut verwendet. Das Content-Attribut gibt die detaillierten Attribute der Informationen an.

     • Legen Sie den Zeichensatz der Webseite fest:

     • 
       

     • 
       

     • Webseite automatisch aktualisieren: ;

     • 
       

     2. Das Namensattribut

     legt die Suchschlüsselwörter und das Urheberrecht der Webseiteninformationen, Autoren usw. fest.

     （1）       设置网页搜索关键词

     （2）       设置网页描述信息

     Xhtml规范

     • l  所有标记和属性全部小写

     • l  单边标记必须关闭。如：
       -----
       

     • l  所有的属性值都必须加引号。

     • l  所有属性都必须有值。如：

       ---

       ---

       ---

     • l  标机之间要顺序嵌套，外层套内层。

     • l  Xhtml网页必须有DTD文档类型定义代码

      

      

     DTD文档类型定义

     三大类型：

      

     表格标签

     （1）结构：(一行四列)

     <table border=“1”>   <tr><td> </td><td> </td><td> </td><td>< /td>   </tr></table>

      

     （2）border属性：

     •   Width：宽度

     •   Height：高度

     •   Border：边框

     •   Bordercolor：边框颜色

     •   Bgcolor：表格背景色

     •   Background：背景图片

     •   Cellpadding：单元格与内容距离

     •   Cellspacing：单元格与单元格距离

     •   Rules：合并边框线，取值：all

      

     （3）       tr属性：

     bgcolor

     align

     height：水平：left、center、right

     valign：垂直：top、middle、bpttom

     （4）      td属性：

     •   colspan：合并单元格（左右）

     •   rowspan：合并单元格（上下）

     •   background

     •   width

     •   height

     •   bgcolor

     •   align

     •   valign

     表单

     （1）结构：

              

     　　<form name=”form1” method=“get” action=“login.php”>   用户名：<input type=”text” name=”username”/>   密码：<input type=”password” name=”userpwd”/>   <input type=”submit” value=”提交表单”/></form>

      

     （2）

     标记属性----块元素

     •   name

     •   method:提交方式 get、post

     •   action：指定表单的处理程序，一般是PHP文件

     •   enctype：指定表单数据的编码方式。只能在method=post情况下。

     •   application/x-www-form-urldecoded   //默认加密方式

     •   multipart/form-data   //上传文件，值是他自己

     （3）get和post方法

                  Get提交方式：将表单数据追加到action指定的处理程序的后面，然后向服务器发出请求。不安全

                    如果某个表单元素，不想往服务器传递数据，那么，name可以不用写。

                   POST提交方式：POST提交的数据相对安全，可以提交海量数据，可以上传附件。

     单行文本域

              语法格式：属性=“值”>

       属性：            

     •   name：文本框的名字

     •   Type：表单元素类型

     •   Value：文本框的值

     •   Size：文本框的长度

     •   Maxlength：最多可以输入多少个字符。

     •   Readonly：只读属性。可以选中，但不能修改。Readonly=“readonly”

     •   Disabled：禁用属性 同上。

     单行密码域

     语法格式：

       属性：    

     •   name：文本框的名字

     •   Type：表单元素类型

     •   Value：文本框的值

     •   Size：文本框的长度

     •   Maxlength：最多可以输入多少个字符。

     •   Readonly：只读属性。可以选中，但不能修改。Readonly=“readonly”

     •   Disabled：禁用属性 同上。

      

     单选按钮

     语法格式:男

                        女

       属性：

     •   name：元素名称

     •   Checked：默认选择checked=“checked”

     •   Value：值

     复选框

     语法格式： 游戏

                          杀人

                          放火

      属性：

     •   name：元素名称

     •   Checked：默认选择checked=“checked”

     •   Value：值

     下拉列表

      

     语法格式：

     <select name=””> <option value=”北京”>北京</option> <option value=”天津”>天津</option> <option value=”重庆”>重庆</option></select>

      

     •   ：只有一个name属性。

     •   ：两个属性value、selected

     •   Selected：默认选中

     •   层叠样式表方式改下拉列表宽度：type=”width:100px”

      

     文本区域

     语法格式：

       属性：

     •   name：元素名称

     •   Cols：宽度

     •   Rows：高度

      

      

     各种按钮

     •   提交按钮

     •   重置按钮

     •   图片按钮

     •   普通按钮

     •   普通按钮本身不具备任何功能，需与js配合使用。

     上传文件域

     语法格式：

       属性：

     •   Name：名称

     •   Value：上传文件名。Value属性是只读属性，

     • 必须与enctype=”multipart/form-data”>配合实现才能上传

     隐藏域

     功能：看不见的框。传递一些值，而又不想让别人看到。主要用于php后台。如id号。

     语法格式：

      

     表格标题

     语法格式：

      

     是

     的子标记。

     放在的后面。

      

     网页多媒体

     网页视频一般是flash格式，flash比较小、兼容性好，适合网站播放。

      

      

     图片热点

     图片热点：给一张图片加多个热点。

     语法结构：

     <ing src=”inmages/01.jpg” usemap=”#Map”/><map id=”Map”><area shap=”热区形状” cords=”热区坐标”  href=”链接地址” /><area shap=”热区形状” cords=”热区坐标”  href=”链接地址” /><area shap=”热区形状” cords=”热区坐标”  href=”链接地址” /></map>

      

     标记常用属性：

     •  Shape：热区的形状，取值：rect（矩形）、circle（圆）、polygon（多边形）

     •  Coords：热区的坐标

     •    如果shap=rect时，那么，coords=“x1,y1,x2,y2”列如：coords=”50,20,200,150”

     •  （x1,y1）为左上角坐标，（x2，y2）为右下角坐标。

     •    如果shap=circle时，那么，coords=“x,y,r”,其中（x，y）圆心坐标，r为半径。

      

      

     普通框架

     框架集和框架页：

     框架集：:主要用来划分窗口。

     框架页：:主要用来指定默认显示的网页地址。

     属性：

     •   Cols:划分左右型框架。

     •   Cols=”200,*”   左边为宽度200px，剩下的为右边。

     •   Cols=”180,*,180”   左右框架为180px，剩下的为中间框架

     •   Rows：划分上下型框架

     •   Rows=”200,*”  上框架高度为200px，剩下的为下框架。

     •   Frameborder：是否显示边框线，取值0或1.

     •   Border：边框粗细。

     •   Bordercolor：边框颜色。

     框架页的属性 ：

     •   Src：该小窗口中，默认显示的网页地址。

     •   Noresize：不能调整大小。Noresize=”noresize”

     •   Scrolling:是否显示滚动条，取值：auto、yes、no

     •   Name：给当前小窗口起个名字。这个name就是给标记target属性来用的。

     </strong><strong>含义：</strong>当浏览器不支持框架时，会提示信息。低版本不支持。高版本都支持。</p> <p><strong>语法格式：</strong><noframes>内容

     内嵌框架（行内框架）

     与普通框架区别：

     常用属性：

     •   Src：引入文件地址。

     •   Width：宽度

     •   Height：高度

     •   Frameborder：是否显示框架的边框线，取值：yes或no。

     •   Scrolling：是否显示滚动条。取值：yes、no、auto。

     •   Name：制定小窗口的名称，改名称也是给标记的target属性来用。

     •   Align：框架在网页中对齐方式，取值：left、center、right。

     CSS简介

     CSS 层叠样式表。

     CSS的主要目的：是给html标记添加各种各样的表现（表格、样式）。比如：文字样式、背景、文本样式、连接样式。

      

     语法格式：

     <style type=”text/css”> h1{Color:red;    //文本颜色

Text-align:center;    //对齐方式

Border:1px solid #444;     //半框样式

Background-color:#ffff00;    //背景色}</style>

      

     CSS选择器

     基本选择器

     (1) “*”选择器：通配符

     •   描述：将匹配所有的html标记，所有标记都会改变。

     •   语法：*{color：red；}

      

     （2）标签选择器

     •   描述：将匹配指定的html标记

     •   语法：h1{color：red；}

     （3）class选择器（类选择器）-----使用最多的选择器

     •   描述：给一类html标记加样式。这里所指的“一类”是：每个html标记都有的一个class属性，且class的一样。Class属性是公共属性，每个html标记都有。

     •   格式：

       　　　　　　  

       　　　　　　 

         

       　　　　　　 

         

       　　　　　　 

       (3) Auswahl für untergeordnete Elemente

       Beschreibung: Stil zu den untergeordneten Elementen eines Elements hinzufügen

       CSS-Größenattribut

       Breite: Elementbreite , Achten Sie darauf, px-Einheiten hinzuzufügen.

       Höhe: Elementhöhe.

       CSS-Schriftarteigenschaften

       • Schriftgröße: Textgröße. Zum Beispiel: Schriftgröße: 14px;

       • Schriftfamilie: Schriftart. Zum Beispiel: Schriftfamilie: Microsoft Yahei;

       • Schriftstil: kursiv, Wert: kursiv. Zum Beispiel: Schriftstil: kursiv;

       • Schriftstärke: fett, Wert: fett. Zum Beispiel: Schriftstärke: fett;

       CSS-Textattribut

       • Farbe: Textfarbe

       • Textdekoration: Textdekorationslinie, Werte: keine, unterstrichen, überstrichen, durchgestrichen

       • Textausrichtung: horizontale Ausrichtung des Texts, Werte: links, zentriert, rechts

       • Zeilenhöhe: Zeilenhöhe, die ein fester Wert oder ein Prozentsatz sein kann, wie zum Beispiel: Zeilenhöhe: 24px; Zeilenhöhe: 150 %;

       Texteinzug: Die erste Zeile wird eingerückt. Texteinzug: 28px;
       Buchstabenabstand: Wortabstand.
       Pseudoklassenselektor

       Ein Hyperlink mit vier Zuständen

       Normalzustand (: Link): Maus Der Stil der Der vorherige Link wurde nicht platziert.
       Put-Status (:hover): Der Stil, wenn die Maus auf dem Link platziert wird.
       Aktivierungszustand (: Aktion): Halten Sie die linke Maustaste gedrückt, ohne sie loszulassen.
       Besuchter Status (: besucht): Drücken Sie die linke Maustaste und öffnen Sie den Stil zu diesem Zeitpunkt.

       Bei der täglichen Arbeit verwende ich die folgende Schreibmethode, um Stile zu Links hinzuzufügen:

       A:link,a:visited{ color :#444;text-decoration:none; } // „Normalzustand“ und „Besuchter Zustand“ zu einem kombinieren.

       A:hover{ color:#990000;text-decoration:underline; } //„Mouse over“, um einen einzelnen Effekt zu erstellen

       CSS-Listenattribut

       Liste - Stil: Listenstil, Wert: keiner. Entfernen Sie verschiedene Symbole vor Aufzählungszeichen oder Zahlen.

       >

       & lt; li & gt; Shanghai City & lt;/li & gt;

       & lt; li & gt; shenzhen City & lt;/li & gt;

       & lt;

       CSS-Randattribute: Jedes Element kann eine Grenzlinie hinzufügen

       Rand-links: linke Grenzlinie.

       Format: Rand links: Dicke und dünne Linienfarbe

       Linienstil: keine, durchgezogen, gestrichelt (gestrichelte Linie), gepunktet ( Gepunktete Linie)

       • Beispiel:
       Rand links: 5 Pixel gestrichelt rot
       Rand rechts: rechter Rand Draht .
       Rand oben: Obere Randlinie.

       • Border-bottom: untere Grenzlinie.

       • Rand: Fügen Sie an vier Seiten gleichzeitig Ränder hinzu.

       • CSS-Auffülleigenschaften: Abstand von der Grenzlinie zum Inhalt

       Hinweis: Wenn wir normalerweise die Eigenschaften „Breite“ und „Höhe“ aufrufen, beziehen sie sich auf die Breite und Höhe des Inhalts . Enthält keine inneren und äußeren Ränder und Grenzlinien.
       Padding-left: linker Innenabstand, Abstand von der rechten Zeile zum Inhalt.
       Polsterung rechts: rechter innerer Polsterungsabstand. Wie oben

       Polsterung oben: Oben.

       • Paddingbottom: Weiter.

       • Kurzform

       • Auffüllung:10px; //Die Auffüllung auf den vier Seiten beträgt jeweils 10px; >

         Auffüllung: 10px 20px; //Die obere und untere Seite sind 20px;

       • Auffüllung: 20px 10px 5px 20px; oben rechts, unten links;

       • Rand links: Der Abstand von der linken Linie nach außen

       • Rand rechts: Rechts. .

       • Rand oben: Oben….

       • Rand unten: Unten….

       • Abkürzung:
       Rand: 10px //Die vier äußeren Ränder sind jeweils 10px groß.

       • Rand: 10px 20px // Der obere und untere Rand sind 10px und der linke und rechte Rand sind 20px.

       • Rand: 10 Pixel 20 Pixel 50 Pixel // Der obere Rand beträgt 10 Pixel, der linke und rechte Rand betragen 20 Pixel und der untere Rand beträgt 50 Pixel.

       • Rand: 10px 20px 30px 40px //Die Reihenfolge ist oben rechts, unten links.

       CSS-Hintergrundeigenschaft

       • Hintergrundfarbe: Hintergrundfarbe.

       • Hintergrundbild: Hintergrundbildadresse. Hintergrundbild:url(image/banner.jpg)

       Das obige ist der detaillierte Inhalt vonTeilen Sie eine Reise zum Erlernen 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：Wie kann mit dem Problem umgegangen werden, dass ein Teil des Popup-Fensters nach dem Schließen in iOS immer noch „auf der Seite verbleibt“?Nächster Artikel：Wie kann mit dem Problem umgegangen werden, dass ein Teil des Popup-Fensters nach dem Schließen in iOS immer noch „auf der Seite verbleibt“?

       In Verbindung stehende Artikel

       Mehr sehen

       • Zusammenfassung der HTML-Kenntnisse
       • So lernen Sie schnell HTML
       • Der Unterschied zwischen HTML xHTML XML
       • Der Unterschied zwischen src- und href-Attributen
       • Über die Verwendung von HTML5 und CSS-Ersatz

       • Heim

       • Kurs

       • Fragen und Antworten

       • Mein
       • Heim
       • Kurs
       • Artikel
       • Fragen und Antworten
       • Wörterbuch
       • Handbuch
       • Herunterladen
       • Thema
       Heim

       Artikel

       Fragen und Antworten

       Kurs

       Thema

       Herunterladen

       Spiel

       Wörterbuch

       简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）