Einführung in HTML

Inhaltsverzeichnis

1. HTML-Übersicht

2.html-Betriebsumgebung

3.html-Entwicklungsumgebung

4.html-Basis-Tags

5.html-Entitätssymbol

6.html-Formular

7.html Hintergrundfarbe und Hintergrundbild

8. Bild img in HTML

9. Hyperlinks

*10. Exkurs.

11. Ungeordnete und geordnete Listen

12. Fokus – Form

12.1 Formularübersicht

12.2 So erstellen Sie ein Anmeldeformular

12.3 Erstellung eines Benutzerregistrierungsformulars

13. Fragmentarische Anordnung der Wissenspunkte

13.1 Mehrfachauswahl in Dropdown-Liste

13.2 Dateikontrolle

 13.4hidden verstecktes Feld

13.5schreibgeschützt和deaktivieren

13.6 Das maxlength-Attribut von Formularelementen

13.7 Das id-Attribut von Elementen in HTML

13,8 Div- und Span-Schichten

 14. Zusammenfassung



1. HTML-Übersicht

        html, Hyper Text Mark Language, Hypertext Markup Language. Die Computersprache, die Front-End-Mitarbeiter lernen müssen, um einfache Webinhalte zu erstellen, ist eine relativ einfache Sprache, die ohne Kompilierung direkt im Browser ausgeführt werden kann.

        Hypertext bezieht sich auf nicht-einfache Textinhalte wie Streaming-Medien, Ton, Video, Bilder usw.;

        Auszeichnungssprache: Diese Sprache besteht aus einer großen Anzahl von Tags.

        Beispiel: <label>: Startlabel </label>: Endlabel

        Streng genommen ist HTML nur eine Spezifikation, eine im Browser angezeigte Spezifikation (Label-Sprache) und kann nicht als Programmiersprache bezeichnet werden, da es in HTML keine Variablen, Datentypen oder Steueranweisungen gibt. HTML verfügt nicht über den charakteristischen Inhalt dieser Programmiersprachen.

2.html-Betriebsumgebung

        HTML läuft im Browser.

        Mittlerweile sind die Mainstream-Browser der Welt: Edge, Chrome, Firefox usw.

        Die Umgebung, in der HTML ausgeführt wird, ist relativ einfach, daher werde ich sie hier nicht wiederholen.

3.html-Entwicklungsumgebung

        Für die HTML-Entwicklung müssen Sie lediglich eine neue Datei mit der Endung .html oder .htm erstellen, sie dann zum Schreiben im Notepad öffnen und dann entwickeln. Sie können sie ohne Kompilierung direkt im Browser ausführen.

        Um jedoch die Entwicklungseffizienz zu verbessern und den Code zu standardisieren, wird empfohlen, einige gängige Compiler wie vscode und webstorm zu verwenden. Der Editor verwendet vscode, dessen Benutzeroberfläche einfach und komfortabel ist.

        In Bezug auf die Installation und den Umgebungsaufbau von vscode können Sie die neueste Version direkt von der offiziellen Website herunterladen und den Inhalt der Konfigurationsumgebung in csdn abfragen.

4.html-Basis-Tags

Die grundlegenden HTML-Tags basieren hauptsächlich auf dem Auswendiglernen und können durch mehr Schreiben gut verwendet werden.

<!--这是HTML的注释信息-->
<!--这是根-->

<html>
    <!--头-->
    <head>
        <!--标题栏-->
        <title>  基本标签 </title>
    </head>
    <!--网页体-->
    <body>
        <!--这里的内容显示到网页上-->
        <p>段落标记</p><!--分段-->
        <p>段落标记</p>

        <!--标题字-->
        <h1>h1</h1>
        <h2>h2</h2>
        <h3>h3</h3>
        <!--一共有6种标题字,由h1到h6-->

        <!--换行标记-->
        hello
        world<!--不可行-->
        hello<br>world!<!--独目标记-->

        <!--画一条水平线-->
        <hr><!--独目标记-->
        <!--color是一个属性,用来指定属性-->
        <!--color是属性名,red是属性值-->
        <hr color="red">
        <hr color='red'>
        <hr color=green>
        <!--HTML语法较为松散,大小写,有无单双引号也不影响-->
        <!--文本框-->
        <input>

    </body>
</html>
        <!--预留格式-->
        <!--保留格式,在HTML源码上是什么格式,到网页上还是什么格式,保持不变。-->
        <pre>
            for i in range(10):
                print(i)
                if i >=5:
                brek
        </pre>

        <!--粗体字-->
        <b>粗体字</b>
        <!--斜体字-->
        <i>斜体字</i>
        <!--插入字-->
        <ins>插入字</ins>
        <!--删除字-->
        <del>删除字</del>
        <!--右上标-->
        10<sup>2</sup>
        <!--右下标-->
        m<sub>2</sub>
        <!--font字体标签-->
        <font>hello world</font>

        Es gibt viele grundlegende Tags in HTML, aber einige Tags sind weit verbreitet, sodass Sie sich nicht alle merken müssen, sondern nur einen Eindruck hinterlassen müssen.

5.html-Entitätssymbol


<!--凡是html页面中第一行是以下代码的,表示该页面是一个html5页面,h5-->
<!DOCTYPE html>
<html>
    <head>
        <!--这个是告诉浏览器采用哪一种字符编码方式打开该页面,一般与文件编码方式相同,否则会乱码-->
        <!--windows操作系统的浏览器在没有指定任何编码方式的时候,浏览器默认采用GBK的简体中文方式打开
        ,这是因为我们的windows操作系统是简体中文环境-->
        <!--而我们程序员工作区当中文件的编码方式是utf-8,因为unicode更加通用-->
        <!--当前这个文件就是utf-8的编码方式,如果不写如下代码,浏览器就会默认用GBK打开,会乱码-->      
        <meta charset="utf-8">
        <title>实体符号</title>
    </head>
    <body>
        <!--空格-->
        a       bc
        <br>
        <!--&nbsp;这是一个空格,属于实体符号-->
        a&nbsp;&nbsp;&nbsp;&nbsp;bc
        <!--大小于号-->
        a&lt;b&gt;c<!--&lt;是小于号&gt;是大于号-->
    </body>
</html>


       Es gibt weniger physische Symbole in HTML, Sie sollten jedoch auf die Verwendung des Größer-als-Zeichens und des Kleiner-als-Zeichens achten, da die beiden Symbole <> in HTML eine besondere Bedeutung haben und daher nicht zur Angabe des Größer-als-Zeichens oder verwendet werden können kleiner als Vorzeichen. Eine weitere Sache, auf die man achten muss, ist das Problem des Dateikodierungsformats. Um zu verhindern, dass der Text verstümmelt erscheint, wenn der Browser die von uns geschriebene HTML-Webseite öffnet, müssen wir auf die Angabe des Textbearbeitungsformats achten das zu öffnende Kodierungsformat.

6.html-Formular

        Tabellen sind erforderlich, um in HTML zu schreiben und Tabellen auf Webseiten zu implementieren.

<html>
    <head>
        <meta charset="utf-8">
        <title>html表格table</title>   
    </head>
    <body>
        <!--border 用来设置边框的宽度,1px表示一像素-->
        <table border="1px" width='300px' height='200px' align="center">
        <!--width,height分别表示表格的宽度和高度-->
        <!--高度宽度还可以写成百分比的方式-->
        <!--align表示表格的对齐方式-->
            <!--tr表示表格中的一行,td表示一行中的一个单元格-->
            <!--第一行-->
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <!--第二行-->
            <tr align="center">
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <!--第三行-->
            <tr>
                <td>1</td>
                <td>2</td>
                <td align="center">3</td>
            </tr>
        </table>
    </body>
</html>

        Der Zusammenführungsvorgang von Zellen in HTML ist in vertikales Zusammenführen und horizontales Zusammenführen unterteilt.

            <tr>
                <td>1</td>
                <td colspan="2">xy</td>
                <!--<td>y</td>-->
                <!--同一行中左右单元格合并为一个,这项操作为纵向合并,只需要保留其中一个单元格
                在使用clospan来表示合并的单元格数量-->
            </tr>
            <!--第二行-->
            <tr>
                <td>1</td>
                <td>2</td>
                <td rowspan="2">king queen</td>
                <!--同一列中上下单元格合并为一个,这项操作为横向合并,只需要保留其中一个单元格
                在使用rowspan来表示合并的单元格数量-->
            </tr>
            <!--第三行-->
            <tr>
                <td>1</td>
                <td>2</td>
                <!-- <td>queen</td> -->
            </tr>

        Bei einer anderen geht es um die Verwendung von th in HTML-Tabellen. Durch die Verwendung von th anstelle von td kann der Inhalt der Tabelle automatisch fett und zentriert werden.

<html>
    <head>
        <title>th标签</title>
    </head>
    <body>
        <table border='5px' wider='1000px' height='200px'>
            <tr>
                <!-- <td>员工编号</td>
                <td>员工姓名</td>
                <td>员工薪资</td> -->
                <th>员工编号</th>
                <th>员工姓名</th>
                <th>员工薪资</th>
                <!--th可以代替td做单元格,th中的内容可以自动加粗自动居中。-->
            </tr>
            <tr>
                <td>369</td>
                <td>小编</td>
                <td>0.00</td>
            </tr>
            <tr>
                <td>370</td>
                <td>小小编</td>
                <td>1.00</td>
            </tr>
        </table>
    </body>
</html>

        Wir können auch thead, tbody, tfoot verwenden, um die Tabelle in drei Teile zu unterteilen.

<!--一个table可以被thead tbody tfoot分割为三部分-->
        <!--这个语法主要是为了后期JavaScript提供方便-->
        <table border='5px' wider='50%' height='200px'>
            <thead>
                <tr>               
                    <th>员工编号</th>
                    <th>员工姓名</th>
                    <th>员工薪资</th>
                </tr>
            </thead>
            <tbody> 
                <tr>
                    <td>369</td>
                    <td>小编</td>
                    <td>0.00</td>
                </tr>
            </tbody>
           <tfoot> 
               <tr>
                    <td>370</td>
                    <td>小小编</td>
                    <td>1.00</td>
                </tr>
            </tfoot>
           
        </table>

7.html Hintergrundfarbe und Hintergrundbild

<html>
    <head>
        <title>背景颜色以及背景图片</title>
    </head>
    <!--body标签的bgcolor属性指定背景颜色-->
    <!--body标签的background属性指定背景图片-->
    <body background="images/公子.jpg">
        

    </body>
</html>

        Beachten Sie, dass Sie beim Festlegen eines Hintergrundbilds sicherstellen müssen, dass Bilder im Dateiverzeichnis abgelegt werden müssen. Es wird empfohlen, einen neuen Bilderordner im HTML-Ordner zu erstellen, um die Bilder zu speichern, die benötigt werden verwendet werden.

8. Bild img in HTML

        Das Bild in HTML unterscheidet sich vom Hintergrundbild. Das Bild ist ein Element auf der Webseite und schwebt im Hintergrund. Für Bilder haben wir eine Reihe von Vorgängen, um sie einzurichten.

<html>
    <head>
        <title>图片</title>
    </head>
    <!--背景图片与图片不同-->
    <body>
        <!--图片是网页中的一个元素-->
        <!--<img src="images/百度.png"></img>-->
        <!--开始标签结束标签之间没有内容的话可以将结束标签删除,在开始标签末尾加上/-->
        <img src="images/百度.png"/>
        <!--img 这个标签有什么属性?-->
        <!--scr属性指定图片的路径-->
        <!--width属性,用来指定图片的宽度,高度会等比例缩放,
            尽量不要自定义高度,容易导致图片失真-->
        <!--title属性用来设置鼠标悬停在该图片上的提示信息-->
        <img src="images/百度.png" width ='200px' title="点击我跳转到百度哦" />
        <!--alt属性,当图片加载失败时的提示信息-->
        <img scr = 'abc/公子.jpg' alt="图片找不到哦!"/>   
    </body>
</html>

9. Hyperlinks

        Auf Webseiten stoßen wir häufig auf eine solche Situation: Einige Wörter auf einigen Webseiten werden unterstrichen, und wenn die Maus auf die Schriftart gesetzt wird, wird sie automatisch zu einer kleinen Hand. Neues Fenster, das ist Hyperverbindung. Darüber hinaus handelt es sich bei der Art des Hyperlinks nicht nur um Text, sondern auch um ein Bild, das zu einem Hyperlink werden kann.

 <!--链接到百度的超链接-->
 <!-- href属性表示,hot reference,用来指定链接的路径-->
 <a href="http://www.baidu.com">百度</a>
 <br>
 <!-- 链接路径可以时一个网络中的路径,也可以是本地的一个路径 -->
 <a href="html表格.html">链接到本地表格</a>
 <!-- 超链接特点:1.鼠标停留在超链接上时自动变成小手2.超链接自动添加下划线 -->
 <!-- 图片也可以做热链接(起始标签和结束标签中的内容会变成链接) -->
 <a href="http://map.baidu.com"><img src="images/百度.png" title="点击我跳转到百度地图哦"></a>
    

        Hier müssen wir auch ein Attribut von Hyperlinks verstehen: Ziel. Dies ist hilfreich für die spätere Entwicklung.

<!-- 关于超链接的target属性 -->
        <!-- targer属性用来设置最终打开窗口的位置 -->
        <!--
            target:
                _self:当前窗口
                _blank:新窗口
                _parent:当前窗口的父窗口
                _top:当前窗口的顶级窗口

        -->
        <a href="http://www.baidu.com" target="_self" >百度(当前窗口)</a><br>
        <a href="http://www.baidu.com" target="_blank" >百度(新开窗口)</a>
        <br>

*10. Exkurs.

        Über das Prinzip der B/S-Architektur: (grob gesagt)

Schritt 1: Der Benutzer gibt die URL im Browser ein.

Schritt 2: Geben Sie eine Anfrage (Anfrage) ein (dieser Schritt entspricht dem Senden einer Anfrage an den Server über den Browser).

Browser -> Server (der Browser sendet eine Anfrage an den Server)

Schritt 3: Der Server gibt dem Browser eine Antwort und antwortet schließlich mit einem HTML-Code an den Browser. Der Browser führt den HTML-Code aus und zeigt ein Ergebnis an. Antwort

Server -> Browser (der Server antwortet dem Browser)

        In unserem täglichen Leben geben wir 1. die URL ein, um die Seite zu besuchen, oder 2. klicken auf den Hyperlink, um die neue Seite zu besuchen, was alles auf die B/S-Architektur zurückzuführen ist.

11. Ungeordnete und geordnete Listen

        Die ungeordnete Liste ist relativ einfach und wird nicht im Detail beschrieben.

       

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>列表</title>
    </head>
    <body>
        <!-- 无序列表 -->
        <!-- ul的tyoe属性是指定列表前的标识 -->
        <ul type='circle'>
            <!-- 列表项 -->
            <li>中国</li>
            <ul>
                <li>北京</li>
                <ul>
                    <li>烤鸭</li>
                    <li>爆肚</li>
                    <li>炒肝</li>
                    <li>糖葫芦</li>
                </ul>
                <li>上海</li>
                <li>天津</li>
                <li>重庆</li>
            </ul>
            <li>华夏</li>
            <li>东方</li>
            <li>雄狮</li>
        </ul>
    </body>
</html>

        Der einzige Unterschied zwischen einer geordneten Liste und einer ungeordneten Liste besteht darin, dass es keine Sortierbezeichnung gibt.

<!DOCTYPE html>
<html>
    <head>
        <title>有序列表</title>
    </head>
    <body>
        <!-- 有序列表 -->
        <ol type='A'>
            <li>水果</li>
            <ol type="1">
                <li>香蕉</li>
                <li>苹果</li>
                <li>哈密瓜</li>
                <li>菠萝</li>
            </ol>
            <li>蔬菜</li>
            <li>茶</li>
            <ol type="I">
                <li>普洱</li>
                <li>龙井</li>
                <li>铁观音</li>
                <li>绿茶</li>
                <ol>
                    <li>毛尖</li>
                </ol>
            </ol>
            <li>肉</li>
        </ol>
    </body>
</html>

12. Fokus – Form

12.1 Formularübersicht

        Man kann sagen, dass Formulare der wichtigste Teil des HTML-Lernens sind. Wenn Sie die Verwendung von Formularen nicht beherrschen, kann man sagen, dass Ihr HTML-Lernen nicht gut genug ist.

        So. Was genau ist ein Formular? Schauen wir uns ein Bild an:


 Dies ist ein Screenshot der Registrierungsseite des Baidu-Kontos. Das Formular oben ist!

1. Was ist ein Formular? Was ist der Nutzen?

         Senden Sie eine Anfrage und übertragen Sie Daten an den Server

         Formulare und Hyperlinks haben eine gemeinsame Funktion: Sie können beide Anfragen an den Server senden

         Der Hyperlink ist lediglich der direkte Klick des Benutzers zum Senden der Anfrage und die Daten können nicht ausgefüllt werden.

         Wenn der Benutzer zum Absenden auf das Formular klickt, kann nicht nur die Anfrage gesendet werden, sondern auch die eingegebenen Daten können in der Anfrage enthalten sein.        

         Die Hauptfunktion des Formulars besteht darin, Benutzerinformationen zu sammeln

         Das Wort, das der Form entspricht: Form

        2. Wie definiere ich ein Formularobjekt? grammatikalisches Format

         <Formular>

             Formular Punkt 1:

             Formularpunkt 2:

         </form>

         Beachten Sie außerdem: Auf einer Webseite können mehrere Formularobjekte vorhanden sein        

         3. Das Formular-Tag enthält ein Aktionsattribut, das mit dem href des Hyperlinks identisch ist. Beide müssen die URL ausfüllen

12.2 So erstellen Sie ein Anmeldeformular

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>登录的表单</title>
    </head>
    <body>
        <!-- 画一个登录的表单 -->

        <!-- "http://192.168.145.2:8080/crm/login"
            协议:http协议
            访问的服务器IP地址是:192.168.145.2
            访问这个服务器上的哪个软件:8080端口对应的一个服务
            /crm/login:是这个服务器上的某个资源名!(他可能是一段处理登录的java程序) -->

            <!-- 重点*****重点*****重点*****重点*****重点*****重点*****重点*****
            表单最终提交的时候,表单项的name属性非常重要,有name属性才会提交
            并且浏览器向服务器提交数据的格式是:
                url?name=value&name=value&name=value&name=value&name=value
            以上提交数据的格式,是W3C制定的格式,所有浏览器都是这样的。

            这个格式非常重要,必须背会,所有浏览器都是这样提交数据的。
            重点*****重点*****重点*****重点*****重点*****重点*****重点***** -->
        <form action="http://192.168.145.2:8080/crm/login">
            <!--input是输入域,type不同,展示样式不同-->
            <!-- type="text"是文本框 -->
            <!-- value属性是不需要填写 -->
                用户名:<input type="text" name="x"/>
                <br>
            <!-- type="password"表示密码框,输入的内容会被修饰 -->
                密码:<input type="password" name="y"/>
                <br>
            <!-- 提交表单的按钮 -->
                <input type="submit" value="登录"/>
        </form>

    </body>
</html>

Bei der Erstellung des Formulars müssen wir die Übertragungsmethode der Formularelementdaten berücksichtigen, um unseren nachfolgenden Entwicklungsprozess zu erleichtern.

12.3 Erstellung eines Benutzerregistrierungsformulars

        Dieses Formular beinhaltet viele verschiedene Eingabeoptionsausdrücke. Es wird empfohlen, den Code selbst zu schreiben, um die Auswirkungen verschiedener Attributeinstellungen der Eingabeoption zu erleben.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>用户注册表单</title>
    </head>
    <body>
        <!--若表单项是由用户自己填写,则value不需要程序员提供,若是由用户选择,则需要提供value-->
        <!--表单中,如果有一些项用户没有填写,默认提交的就是空字符串-->
        <form action="http://localhost:80/cr/register">
            用户名:<input type="text"name='username'/><!--value不需要程序员提供-->
            <br>
            密码:<input type="password"name="userpwd"/><!--value不需要程序员提供-->
            <br>
            性别:<!--最终提交给服务器的数据是,sex=1或sex=0-->
                 <!--同一组的单选按钮,name是需要一致的-->
                 <!--checked表示默认选择-->
                <input type="radio" name="sex" value="1" checked/>男
                <input type="radio" name="sex"value="0"/>女
            <br>
            兴趣:<!--复选框(可以同时选择多项),同一组的复选框name也是一致的-->
                <input type="checkbox" name="aihao" value="basketball" checked/>打篮球
                <input type="checkbox" name="aihao" value="yuanshen"/>原神
                <input type="checkbox" name="aihao" value="duanlain"/>锻炼
            <br>
            学历:<!--下拉列表-->
                <select name="xueli" ><!--假设选择**,则提交的是xueli=**-->
                    <!-- selected表示默认选中 -->
                    <option value="gz">高中</option>
                    <option value="zk">专科</option>
                    <option value="bk" selected>本科</option>
                    <option value="yjs">研究生</option>
                </select>
            <br>
            简介:<!--文本域,其中value也是用户来填写的-->
                <textarea name="jianjie" cols="60" rows="10">

                </textarea>
            <br>
                <input type="submit"value="提交注册">
                <!--提交按钮不可以由name,不然提交按钮也会提交给服务器-->
                <!-- reset是重置表单 -->
                <input type="reset" value="重置">
        </form>
    </body>
</html>

13. Fragmentarische Anordnung der Wissenspunkte

13.1 Mehrfachauswahl in Dropdown-Liste

        Beim Erstellen einer Dropdown-Liste können Sie die maximale Anzahl der angezeigten Elemente festlegen und Mehrfachauswahlen unterstützen.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>下拉列表多选</title>
    </head>
    <body>
        <!--multiple表示下拉列表支持多选-->
        <!--size是设置下拉列表一次最多显示的条目数量-->
        <select name="province" size="3" multiple>
            <option value="hebei">河北省</option>
            <option value="henan">河南省</option>
            <option value="shandong">山东省</option>
            <option value="shanxi">山西省</option>
            <option value="hunan">湖南省</option>
            <option value="hubei">湖北省</option>
        </select>
    </body>
</html>

13.2 Dateikontrolle

        Die Hauptfunktion dieses Steuerelements besteht darin, Dateien zu übertragen.

<!DOCTYPE html>
<html>
    <head>
        <title>file控件</title>
    </head>
    <body>
        <!--后台java程序使用IO六的方式接收这个文件-->
        <form action="http://www.baidu.com">
            文件:<input type="file"/>
            <br>
            <input type="submit" value="文件上传">
        </form>
    </body>
</html>

 13.4hidden verstecktes Feld

        Es wird verwendet, um einige Informationen zu verbergen, die Benutzer nicht sehen möchten, die aber an den Server übermittelt werden müssen.

<!DOCTYPE html>
<html>
    <head>
        <title>hidden控件</title>
    </head>
    <body>
        <!-- hidden的隐藏域空间 -->
        <form action="http://127.0.0.1:8080/crm/save">
            <!--隐藏域-->
            <!-- 不希望用户在浏览器上看到,但希望可以将这个数据提交过去 -->
            <input type="hidden" name="uesrcode" value="111111"/>

            <!--提交按钮-->
            <input type="submit" value="提交"/>
        </form>
    </body>
</html>

13.5schreibgeschützt和deaktivieren

        Es wird empfohlen, den Code direkt einzugeben, um ihn selbst zu erleben.

<!DOCTYPE html>
<html>
    <head>
        <title>readonly和disable</title>
    </head>
    <body>
        <!-- readonly和disable 都是只读的 -->
        <!-- readonly修饰的表单项可以提交给服务器,但是disable修饰的不会提交 -->
        <form action="http://127.0.0.1:8080/crm/save">
            机构代码 <input type="text" name="orgcode" value="1111" readonly/>
            <br>
            用户代码 <input type="text "name="usercode" value = "2222" disabled/>
            <br>
            <input type="submit" value="提交">
        </form>
    </body>
</html>

13.6 Das maxlength-Attribut von Formularelementen

        Einfach ausgedrückt geht es darum, die maximale Anzahl von Zeichen zu begrenzen, die in ein Formularelement eingegeben werden dürfen.

<!DOCTYPE html>
<html>
    <head>
        <title>maxlength属性</title>        
    </head>
    <body>
        <!-- 最多输入maxlenth个字符 -->
        <input type="text"maxlength="3">
    </body>
</html>

13.7 Das id-Attribut von Elementen in HTML

        Jeder Knoten in HTML verfügt über ein eindeutiges ID-Attribut, das beim anschließenden JavaScript-Lernen verwendet wird.

        1. Auf jedem Knoten in HTML gibt es ein ID-Attribut

        2. Auf derselben Webseite kann das ID-Attribut nicht wiederholt werden

        3.id repräsentiert diesen Knoten und id ist die ID-Nummer dieses Knotens

        4. Nachdem wir später JavaScript gelernt haben, möchten wir HTML-Knoten über JavaScript hinzufügen, löschen und ändern

        Zuerst müssen wir das Knotenobjekt abrufen, und das ID-Attribut ermöglicht es uns, das Knotenobjekt bequem abzurufen.

        5. Der Knoten kann in JavaScript einfach über das id-Attribut abgerufen werden.

        Bearbeiten Sie dann diesen Knoten und generieren Sie schließlich den dynamischen Effekt der Webseite.

13,8 Div- und Span-Schichten

        1. Beides sind Schichten

        2. Bedeutung und Funktion von Schichten:

         Jede Ebene ist ein unabhängiges Feld auf der Webseite

         Die Hauptfunktion der Ebene ist: Webseitenlayout

        3. Ist das Tabellenlayout nicht richtig? Warum gerade Schichten?

         Das Tabellenlayout ist nicht flexibel genug

         Das div- und span-Layout ist flexibler

        4. Die Scheitelpunkte in der oberen linken Ecke jedes Div und Span haben x- und y-Koordinaten.

        Anhand dieser Koordinate kann die Position des Div auf der Webseite ermittelt werden. Wenn Sie später CSS lernen,

        Wir können über den CSS-Stil positionieren.

        5. Tabellenlayout wurde vor langer Zeit verwendet, aber moderne Webseiten werden mit div+span angelegt

        6. Für das Web-Frontend, der Debugger:

            Jeder Browser verfügt über einen integrierten Debugger

            Verwenden Sie die Tastenkombination F12, um den Debugger aufzurufen

        7. Der Unterschied zwischen div und span:

            div belegt standardmäßig eine einzelne Zeile

            span belegt keine Zeile      

        8. div kann div und span verschachteln

 14. Zusammenfassung

        Das Erlernen von HTML basiert hauptsächlich auf dem Auswendiglernen, der Verwendung einiger Schlüssel-Tags, der Anordnung einiger Steuerelemente und der Einstellung einiger Attribute usw. Darüber hinaus müssen Sie den Code selbst eingeben, denn Übung macht den Meister die Grundlage des Lernens! weiter so! !

Supongo que te gusta

Origin blog.csdn.net/hfh1999/article/details/120171244
Recomendado
Clasificación