1.HTML 1.1 Formular-Tag: form Das Formular-Tag erstellt ein Formular auf der HTML-Seite. Das Formular-Tag zeigt nichts im Browser an. Wenn die Daten an den Server übermittelt werden müssen, muss das für die Datenerfassung verantwortliche Tag im Inhalt des Formular-Tag-Körpers platziert werden. Aktionsattribut: Anforderungspfad, bestimmen Sie die Adresse (Pfad), an die das Formular an den Server gesendet wird Methodenattribut: Anforderungsmethode. Häufig verwendete Werte: get, post get:Standardwert Die übermittelten Daten werden an den Anforderungspfad angehängt. Beispiel: /1.html?username=alex&password=1234, Datenformat k/v, mit ?-Verbindung anhängen und dann &-Verbindung für jedes Datenpaar verwenden Da die Länge des Anforderungspfads begrenzt ist, übermitteln alle Get-Anforderungen begrenzte Daten. Beitrag: Die übermittelten Daten werden nicht mehr an den Anforderungspfad angehängt (und werden auch nicht in der Adressleiste angezeigt) Die Größe der übermittelten Daten wird nicht angezeigt 1.2 Beschriftung des Eingabefelds: Eingabe Das -Tag wird verwendet, um Benutzereingabeinformationen zu erhalten. Der Typattributwert ist unterschiedlich und die Erfassungsmethode ist unterschiedlich. Am häufigsten verwendete Tags. rype-Attribut Text: Textfeld, ein einzeiliges Eingabefeld, in das der Benutzer Text eingeben kann. Die Standardbreite beträgt 20 Zeichen Passwort: Passwortfeld, Passwortfeld. Zeichen in diesem Feld werden in schwarzen Kreisen angezeigt. radio: Optionsfeld, das eines aus einer Reihe sich gegenseitig ausschließender Optionsfelder darstellt. Wenn eine Schaltfläche ausgewählt wird, wird die Auswahl der zuvor ausgewählten Schaltfläche aufgehoben. Senden: Schaltfläche „Senden“. Die Schaltfläche „Senden“ sendet die Formulardaten an den Server. Im Allgemeinen wird das Namensattribut nicht geschrieben, andernfalls wird das Wort „submit“ an den Server übermittelt. Da unterschiedliche Projekte unterschiedliche Felder erfordern, habe ich nicht alle Formularelemente ausgeschrieben. Auch die Verwendung der folgenden Tags muss von jedem beherrscht werden. Kontrollkästchen: Kontrollkästchen Filee: Datei-Upload-Komponente, bietet „Durchsuchen“, drücken Sie, um die hochzuladende Datei auszuwählen. Versteckt: Verstecktes Feld, die Daten werden an den Server gesendet, aber vom Browser nicht angezeigt. Zurücksetzen: Reset-Taste. Stellen Sie das Formular auf die Standardwerte zurück. Bild: Bildübermittlungsschaltfläche, legen Sie das Bild für die Schaltfläche über src fest. Schaltfläche: Allgemeine Schaltfläche, die häufig in Kombination mit JavaScript verwendet wird. Name: Elementname. Wenn Sie Formulardaten an den Server senden müssen, müssen Sie den Attributwert „Name“ angeben. Der Server erhält die übermittelten Daten über den Attributwert. Wert: Legen Sie den Standardwert des Eingabe-Tags fest. Die Schaltflächen „Senden“ und „Zurücksetzen“ senden Daten Größe: Größe Aktiviertes Attribut: Das Optionsfeld oder Kontrollkästchen ist aktiviert. readonly: ob es schreibgeschützt ist deaktiviert: ob es verfügbar ist maxlength: Die maximal zulässige Länge für die Eingabe 1.3 Dropdown-Listenbezeichnung: auswählen Dropdown-Liste Verfügbar für Einzel- oder Mehrfachauswahl. Sie müssen das Sub-Tag verwenden, um Listenelemente anzugeben Namensattribut: der an den Server gesendete Name Mehrfachattribut: Schreiben Sie nicht die standardmäßige Einzelauswahl. Der Wert ist „Mehrfach“, um eine Mehrfachauswahl anzuzeigen Größenattribut: Bei der Auswahl mehrerer Elemente die Anzahl der sichtbaren Optionen. Unter-Tag: eine Option (ein Element) in der Dropdown-Liste ausgewählt: Überprüfen Sie das aktuelle Listenelement Wert: Der an den Server gesendete Optionswert. 1.4 Beschriftung des Textbereichs: textarea Textbereich. Steuerelement für die mehrzeilige Texteingabe. </p> <p> cols-Attribut: die Anzahl der Spalten im Textfeld</p> <p> rows-Attribut: die Anzahl der Zeilen im Textfeld</p> <h3> 1.5 Schaltflächenbezeichnung: Schaltfläche (verstehen)</h3> <p> <button type="button|reset|submit"> Schaltflächenbeschriftungen werden im Allgemeinen selten verwendet und bieten die Funktion „normal|reset|submit“. Verschiedene Browser haben unterschiedliche Standardwerte. </p> <h2> 2. DIV+CSS</h2> <h3> 2.1 Was ist div</h3> <p>? div ist ein gewöhnliches HTML-Tag, das Bereiche unterteilt. Eigenschaften: Exklusive Linie. Komplexe Effekte können nicht allein erreicht werden. Muss zum Rendern mit CSS-Stilen kombiniert werden. </p> <p> div ist normalerweise ein Element auf Blockebene</p> <blockquote> <div> kann eine Abteilung oder einen Abschnitt (Abteilung/Abschnitt) im Dokument definieren. Das <div>-Tag unterteilt ein Dokument in unabhängige, unterschiedliche Teile. Es kann als strenges Organisationstool verwendet werden und verwendet keine damit verbundenen Formatierungen. Wenn <div> mit einer ID oder Klasse markiert ist, wird das Tag effektiver. </blockquote> <h3> 2.2 Überblick über CSS</h3> <h4> 2.2.1 Was ist CSS</h4> <p>? CSS wird normalerweise als CSS-Stil oder Cascading Style Sheet bezeichnet. Es wird hauptsächlich zum Festlegen des Textinhalts (Schriftart, Größe, Ausrichtung usw.), der Bildform (Höhe und Breite, Rahmenstil, Rand usw.) und des Layouts verwendet Seite im Erscheinungsbild von HTML-Seiten. </p> <p> CSS kann dafür sorgen, dass HTML-Seiten besser aussehen, die Anpassung von CSS-Farben kann den Benutzern mehr Komfort bieten, das CSS+DIV-Layout ist flexibler und es ist einfacher, die Struktur zu zeichnen, die Benutzer benötigen. </p> <h4> 2.2.2 CSS名词解释</h4> <p> CSS(Cascading Style Sheets):指层叠样式表</p> <p> 样式：给HTML标签添加需要显示的效果。</p> <p> 层叠：使用不同的添加方式，给同一个HTML标签添加样式，最后所有的样式都叠加到一起，共同作用于该标签。</p> <h4> 2.2.3 CSS样式规则</h4> <p> 使用HTML时，需要遵从一定的规范。CSS亦如此，想要熟练的使用CSS对网页进行修饰，首先需要了解CSS样式规则。具体格式如下</p> <pre>选择器{属性1:属性值;属性2:属性值;..}</pre> <p> 在上面的样式规则中，“选择器”用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。属性和属性值以键值对方式出现，使用英文冒号“:”分隔。多个属性之间使用英文分号“;”分隔。例如：</p> <pre><style> h3{ color: red; font-size: 100px; } </style></pre> <p> 初学者在书写CSS样式时，除了要遵循CSS样式规则，还必须注意CSS代码结构中的几个特点，具体如下：</p> <p> CSS样式“选择器”严格区分大小写，“属性”和“属性值”不区分大小写。</p> <p> 多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是，为了便于增加新样式最好保留。</p> <p> 如果属性的值由多个单词组成且之间包含空格，则必须为这个属性值加上英文状态下的引号。例如：</p> <pre>p{font-family:"Times New Roman";}</pre> <p> 在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释，例如：</p> <pre>/* 这是css注释文本，此文本不会显示在浏览器窗口中 */</pre> <p> 在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。因此，可以使用空格键、Tab键、回车键等对样式代码进行排版，即所谓的格式化CSS代码，这样可以提高代码的可读性。例如：</p> <pre>h2{color: red; font-size: 20px;}</pre> <p> 和</p> <pre><style> h2{ color: red; /* 定义字体大小属性 */ font-size: 20px; /* 定义颜色属性 */ } </style></pre> <p> 上述两段代码所呈现的效果是一样的，但是，第二种书写方式的可读性更高。需要注意的是，属性的值和单位之间是不允许出现空格的，否则浏览器解析时会出错。例如，下面这行代码就是不正确的。</p> <pre>h2{ font-size:20 px;} /* 20和单位px之间有空格 */</pre> <h4> 2.2.4 引入CSS样式</h4> <p> CSS使用非常灵活，即可以嵌入在HTML文档中，也可以是一个单独的文件，如果是单独的文件，则必须以.css为扩展名。CSS和HTML的结合3种常用方式：</p> <p> (1)行内样式</p> <p> 行内样式，是通过标签的style属性来设置元素的样式。</p> <p> <!-- 方式1：行内样式<br/> color ： 表示字体颜色<br/> font-size ： 表示字体大小<br/> --><br> <a style="color: #f00; font-size: 30px;">小灰灰</a></p> <p><img src="https://img.php.cn/upload/article/000/465/014/168223255783682.jpg" alt="java web的HTML和CSS知识点有哪些"></p> <p> 行内样式通过标签的属性来控制样式，这样并没有做到结构与表现(HTML展示结构、CSS显示效果)相分离，所有一般很少使用。学习阶段有时候为了快速编程，偶尔使用。</p> <p> (2)内部样式</p> <p> 内部样式又称为内嵌式，是将CSS代码集中卸载HTML文档的<head>头部标签体中，并且使用<style>标签定义。</p> <p> 给当前html文件中的多个标签设置样式。</p> <p> 在html的<head>标签中使用<style>标签来定义CSS</p> <pre><!-- 方式2：内部样式 background-color ：表示背景色 --> <style type="text/css"> body{ background-color: #ddd; } </style></pre> <p> <img src="https://img.php.cn/upload/article/000/465/014/168223255744571.jpg" alt="java web的HTML和CSS知识点有哪些"></p> <p> (3)外部样式</p> <p> 外部样式又称为链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link>标签将样式连接到HTML文档中。</p> <pre><!-- 方式3：外部样式 rel="stylesheet",固定值，表示样式表 type="text/css"，固定值，表示css类型 href，表示css文件位置 font-family 表示使用的字体系列，多个字体使用逗号分隔。例如："字体1,字体2,字体3"，此时优先使用"字体1",如果"字体1"系统不存在，再使用"字体2"，以此类推。 --> <link rel="stylesheet" type="text/css" href="css/demo00.css"/></pre> <p><img src="https://img.php.cn/upload/article/000/465/014/168223255847224.jpg" alt="java web的HTML和CSS知识点有哪些"></p> <p><img src="https://img.php.cn/upload/article/000/465/014/168223255841419.jpg" alt="java web的HTML和CSS知识点有哪些"></p> <p> 链入式最大的好处是同一个CSS样式表可以被不同的HTML页面链接使用，同时一个HTML页面也可以通过多个<link/>标记链接多个CSS样式表。</p> <h3> 2.3 选择器</h3> <p> 想要将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则不符被称为选择器，本小节将对CSS基础选择器进行详细地讲解，具体如下：</p> <h4> 2.3.1 元素选择器</h4> <p> 标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。其基本语法格式如下：</p> <pre>标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }</pre> <p> 该语法中，所有的HTML标记名都可以作为标记选择器，例如body、h2、p、strong等。用标记选择器定义的样式对页面中该类型的所有标记都有效</p> <p> 例如：</p> <pre><head> <style type="text/css"> h2{ color: #F00; font-size: 50px; } </style> <meta charset="utf-8" /> <title>超链接</title> </head> <body> <h2>小灰灰一号</h2> <h2>小灰灰二号</h2> <h2>小灰灰三号</h2> </body></pre> <p><img src="https://img.php.cn/upload/article/000/465/014/168223255816212.jpg" alt="java web的HTML和CSS知识点有哪些"></p> <p> 标记选择器最大的优点是能快速为页面中同类型的标记统一样式，同时这也是他的缺点，不能设计差异化样式</p> <h4> 2.3.2 ID选择器</h4> <p> id选择器使用"#"进行标识，后面紧跟id名，其基本语法格式如下：</p> <pre>#id名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }</pre> <p> 该语法中，id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。</p> <p> 例如：</p> <pre><head> <style type="text/css"> #demo1{ color: #0f0; } </style> <meta charset="utf-8" /> <title>超链接</title> </head> <body> <h2 id="demo1">小灰灰</h2> </body></pre> <p><img src="https://img.php.cn/upload/article/000/465/014/168223255886040.jpg" alt="java web的HTML和CSS知识点有哪些"></p> <h4> 2.3.3 类选择器</h4> <p> 类选择器使用“.”(英文点号)进行标识，后面紧跟类名，其基本语法格式如下：</p> <pre>.类名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }</pre> <p> 该语法中，id名即为HTML元素的class属性值，大多数HTML元素都可以定义class属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式。</p> <p> 例如：</p> <pre><head> <style type="text/css"> .myClass{ font-size: 25px; } </style> <meta charset="utf-8" /> <title>超链接</title> </head> <body> <h2 class="myClass">小灰灰</h2> </body></pre> <p> <img src="https://img.php.cn/upload/article/000/465/014/168223255818800.jpg" alt="java web的HTML和CSS知识点有哪些"></p> <p> 类选择器的高级用法：给指定的标签设置class样式</p> <pre>标签.类名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }</pre> <h4> 2.3.4 扩展：属性选择器</h4> <p> 属性选择器，在标签后面是有中括号标记，其基本语法格式如下：</p> <pre>标签名 [标签属性='标签属性值'] {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</pre> <p> 该选择器，是对"元素选择器"的扩展，对一组标签进一步过滤。</p> <p> 例如：</p> <pre><head> <style type="text/css"> input[type="text"]{ background-color: yellow; } input[type="password"]{ background-color: green; } </style> <meta charset="utf-8" /> <title>超链接</title> </head> <body> <form action="" method="post"> <input type="text" id="" value="" /> <input type="password" name="" /> </form> </body></pre> <p> <img src="https://img.php.cn/upload/article/000/465/014/168223255810717.jpg" alt="java web的HTML和CSS知识点有哪些"></p> <h4> 2.3.5 扩展：包含选择器</h4> <p> 包含选择器，两个标签之间使用空格，给指定父标签的后代标签设置样式，可以方便在区域内编写样式。</p> <pre>父标签 后代标签{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }</pre> <p> 该选择器，是对"元素选择器"的扩展，对一个标签内部所有后代标签进行过滤。</p> <pre><head> <style type="text/css"> #d1 div{ color: red; } </style> <meta charset="utf-8" /> <title>超链接</title> </head> <body> <div id="d1"> <div id="d2"> 小灰灰1 </div> <span id="s1"> 小灰灰2 </span> </div> </body></pre> <p><img src="https://img.php.cn/upload/article/000/465/014/168223255843949.jpg" alt="java web的HTML和CSS知识点有哪些"></p> <h3> 2.4 CSS的样式：</h3> <h4> 2.4.1 边框和尺寸：border、width、height</h4> <p> border：设置边框的样式</p> <p> 格式：宽度 样式 颜色</p> <p> 例如：style="border:1px solid #f00" ，1像素实边红色。</p> <p> 样式取值：solid 实线，none 无边， double 双线 等</p> <p> width、height：用于设置标签的宽度、高度。</p> <pre><head> <style type="text/css"> div{ border: 1px solid #000; /* 1像素，实边，黑色*/ width:200px; height:200px; } </style> <meta charset="utf-8" /> <title>超链接</title> </head> <body> <div id=""> 小灰灰 </div> </body></pre> <p><img src="https://img.php.cn/upload/article/000/465/014/168223255879669.jpg" alt="java web的HTML和CSS知识点有哪些"></p> <h4> 2.4.2 布局：float、clear</h4> <p> 通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版，就需要使用浮动</p> <pre>选择器{float:属性值} 常用属性值： left:元素向左浮动 right:元素向右浮动 none:元素不浮动(默认值)</pre> <p> 由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。如果要避免影响，需要使用clear属性进行清除浮动。</p> <pre>选择器{clear:属性值;} 常用属性值： left：不允许左侧有浮动元素(清除左侧浮动的影响) right：不允许右侧有浮动元素(清除右侧浮动的影响) both：同时清除左右两侧浮动的影响</pre> <p> 例如：</p> <p> <head><br><br> <meta charset="utf-8" /> <br> <title>超链接</title><br> </head><br> <body><br> <!-- 默认上下布局 --><br> <div><br> <div>区域1-1</div><br> <div>区域1-2</div><br> </div><br> <hr /><br> <!-- 浮动左右布局 --><br> <div><br> <div style="float: left;">区域2-1</div><br> <div style="float: left;">区域2-2</div><br> </div><br> <!-- 取消浮动，另起一行布局 --><br> <div style="clear: both;"></div><br> <hr /><br> <div><br> <div style="float: left;">区域3-1</div><br> <div style="float: left;">区域3-2</div><br> <div style="float: left;">区域3-3</div><br> </div><br> </body></p> <p><img src="https://img.php.cn/upload/article/000/465/014/168223255966355.jpg" alt="java web的HTML和CSS知识点有哪些"></p> <h4> 2.4.3 转换：display</h4> <p> HTML提供丰富的标签，这些标签被定义成了不同的类型，一般分为：块标签和行内标签。</p> <p> 块标签：以区域块方式出现。每个块标签独占一整行或多整行。</p> <p> 常见的块元素：<h2>、<div>、<ul>等</p> <p> 行内元素：不必再新一行开始，同时也不强迫其他元素在新的一行显示。</p> <p> 常见的行内元素：<span>、<a>等</p> <p> 在开发中，希望行内元素具有块元素的特性，需要使用display进行转换</p> <pre>选择器{ display:属性值} 常用的属性值： inline:此元素将显示为行内元素(行内元素默认的display属性值) block：此元素将显示为块元素(块元素默认的display属性值) inline-block:将对象呈递为内联对象，但是对象的内容作为块对象呈递。 none：此元素将被隐藏，不显示，也不占用页面空间。</pre> <p> 例如：</p> <pre><head> <style type="text/css"> span{ border: 1px solid #000; width: 100px; height: 40px; } </style> <meta charset="utf-8" /> <title>超链接</title> </head> <body> <!-- 默认显示一行、边框环绕，高宽没有作用 --> <span>显示1-1</span> <span>显示1-2</span> <!-- 每一行显示，高宽有作用 --> <span style="display: block;">显示2-1</span> <span style="display: block;">显示2-2</span> </body></pre> <p><img src="https://img.php.cn/upload/article/000/465/014/168223255987064.jpg" alt="java web的HTML和CSS知识点有哪些"></p> <p> 2.4.4 字体：color、font-size</p> <pre>color：颜色，字体颜色</pre> <p> 例如：</p> <pre><head> <meta charset="utf-8" /> <title>超链接</title> </head> <body> <div style="height: 50px;width: 200px;border: 1px solid #000;"> <a href="">点击</a> <a href="" style="text-decoration: none;">点击</a> </div> <div style="height: 50px;width: 200px;border: 1px solid #000;"> <a href="" style="line-height: 50px;">点击</a> <a href="" style="color: red;">点击</a> </div> </body></pre> <p><img src="https://img.php.cn/upload/article/000/465/014/168223255978539.jpg" alt="java web的HTML和CSS知识点有哪些"></p> <h4> 2.4.5 背景色：background-color</h4> <pre><ul style="background-color: #999;color: #FFF;"> <li>点击</li> <li>点击</li> <li style="background-color: #000;">点击</li> <li>点击</li> </ul></pre> <p><img src="https://img.php.cn/upload/article/000/465/014/168223255966066.jpg" alt="java web的HTML和CSS知识点有哪些"></p> <h3> 2.5 CSS的盒子模型</h3> <h4> 2.5.1 什么是盒子模型</h4> <p> CSS框模型(Box Model)规定了元素框处理元素内容、内边距、边框和外边距的方式。</p> <p><img src="https://img.php.cn/upload/article/000/465/014/168223255957685.jpg" alt="java web的HTML和CSS知识点有哪些"></p> <h4> 2.5.2 内边距：padding</h4> <p> 例如，如果您希望所有h2元素的个边都有10px的内边距，只需要这样：</p> <pre>h2{ padding:10px;}</pre> <p> 还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：</p> <pre>h2 {padding:10px 0.25em 2ex 20%}</pre> <p> 单边内边距属性</p> <p> 也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：</p> <p> padding-top</p> <p> padding-right</p> <p> padding-bottom</p> <p> padding-left</p> <h4> 2.5.3 边框：border</h4> <p> border-top-style</p> <p> border-right-style</p> <p> border-bottom-style</p> <p> border-left-style</p> <h4> 2.5.4 外边距：margin</h4> <p> margin-top</p> <p> margin-right</p> <p> margin-bottom</p> <p> margin-left</p>
