Regelmäßige Hinweise und neue Elemente von HTML5

Bevor Sie das Thema eingeben, fügen Sie zunächst eine Website ein: https://www.processon.com/

ProcessOn ist eine Online-Plattform für kollaboratives Zeichnen, die Benutzern die leistungsstärksten und benutzerfreundlichsten Zeichenwerkzeuge bietet!

Es ist sehr praktisch, einfach online etwas zu zeichnen und es sich im Detail verstehen zu lassen.

Regulärer Ausdruck

Bei der heutigen Regex geht es nur darum, die einfache Verwendung von Regex zu erlernen. Angesichts der Leistungsfähigkeit von HTML5-Tag-Attributen

Es ist nicht mehr notwendig, vor der Regularisierung Javascript zu lernen, da das Eingabe-Tag von HTML5

ist Das

Muster kann eine Tag-Verifizierung implementieren und in etwa komplexes Javascript mithilfe regulärer Verifizierungsformulare in

ersetzen

Es wird in Zukunft definitiv komplett ersetzt.

Einfache Verwendung regulärer Ausdrücke:

[0-9] findet jede Zahl von 0 bis 9.
[a-z] findet jedes Zeichen vom Kleinbuchstaben a bis zum Kleinbuchstaben z.
[A-Z] Findet jedes Zeichen von Großbuchstabe A bis Großbuchstabe Z.
[A-z] findet jedes Zeichen vom Großbuchstaben A bis zum Kleinbuchstaben z.

n{X} entspricht einer Zeichenfolge, die eine Folge von enthält
n{X,Y} entspricht einer Zeichenfolge, die X- oder Y-Sequenzen von n enthält.
n{X,} entspricht einer Zeichenfolge, die mindestens X Folgen von n enthält.

Denken Sie daran, dass diese einfache reguläre Operationen implementieren können. Zum Beispiel:

<span style="color: #0000ff;"><</span><span style="color: #800000;">form </span><span style="color: #ff0000;">action</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> pattern</span><span style="color: #0000ff;">="[0-9a-zA-Z]{1,}"</span><span style="color: #ff0000;"> required</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="submit"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="提交"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span>

Dies ist eine einfache Formularvalidierung mit einem Bereich von mehr als 1 Zeichen von 0 bis 9 oder a bis z oder A bis Z und

erforderlich legt diesen Text als erforderlich fest, andernfalls wird er beim Absenden des Formulars zum Ausfüllen aufgefordert.

Um reguläre Regeln gezielt zu verwenden, müssen Sie sich die Bedeutung von Metazeichen, Quantoren und eckigen Klammern merken.

Das Musterattribut gibt die reguläre Vergleichsmethode an und kann nur die Länge schreiben, die dem regulären Muster entspricht.

Es ist derzeit nicht so praktisch wie das RegExp-Objekt von JavaScript. Es kann keine Modifikatoren festlegen, z. B. die Einstellung von Global- oder Groß-/Kleinschreibung usw.

Aber seine Funktion ist bereits sehr mächtig.

Warum kann der Modifikator nicht festgelegt werden? Weil es ein regulärer Ausdruck ist und die Erklärung in w3c lautet, dass Muster ein regulärer Ausdruck ist, kein String,

muss den Modifikator weglassen, damit dieser Modifikator nicht festgelegt werden kann und kein Fehler auftritt.

Ergänzende Kenntnisse: Matching chinesischer regulärer Ausdrücke

[u4e00-u9fa5] Dies trifft tatsächlich nur auf Chinesisch zu

[^x00-xff] entspricht allen Nicht-ASCII-Zeichen, bei denen es sich im allgemeinen Sinne um Zeichen halber Breite handelt, und diese %! ) (und dergleichen sind Zeichen in voller Breite.

HTML5-Audio- und Videoelemente

Audio-Audio-Tag

<span style="color: #0000ff;"><</span><span style="color: #800000;">audio </span><span style="color: #ff0000;">controls autoplay loop </span><span style="color: #0000ff;">></span>
       <span style="color: #0000ff;"><</span><span style="color: #800000;">source </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="URL"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="audio/mp4"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">source </span><span style="color: #ff0000;">ssrc</span><span style="color: #0000ff;">="URL"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="audio/ogg"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>你的浏览器不支持<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>   
<span style="color: #0000ff;"></</span><span style="color: #800000;">audio</span><span style="color: #0000ff;">></span>

Rendering:

Seine Eigenschaften:

Autoplay Autoplay Wenn dieses Attribut vorhanden ist, wird das Audio abgespielt, sobald es fertig ist.

Steuerelemente Steuerelemente Wenn dieses Attribut angezeigt wird, werden dem Benutzer Steuerelemente angezeigt, z. B. eine Wiedergabeschaltfläche.

loop loop Wenn dieses Attribut vorhanden ist, wird die Wiedergabe jedes Mal neu gestartet, wenn das Audio endet.

preload preload Wenn dieses Attribut erscheint, wird das Audio beim Laden der Seite geladen und für die Wiedergabe vorbereitet. Bei Verwendung von „Autoplay“ wird dieses Attribut ignoriert.

src url Die URL des abzuspielenden Audios.

Video-Tag

<span style="color: #0000ff;"><</span><span style="color: #800000;">video </span><span style="color: #ff0000;">controls loop muted width</span><span style="color: #0000ff;">="400"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="400"</span><span style="color: #ff0000;"> poster</span><span style="color: #0000ff;">="播放前的显示图片URL"</span><span style="color: #0000ff;">></span>
          <span style="color: #0000ff;"><</span><span style="color: #800000;">source </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="视频本地地址URL"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="video/mp4"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">source </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="视频本地地址URL"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="video/ogg"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>你的浏览器不支持<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>        
<span style="color: #0000ff;"></</span><span style="color: #800000;">video</span><span style="color: #0000ff;">></span>

Seine Eigenschaften:

Autoplay Autoplay Wenn dieses Attribut vorhanden ist, wird das Video abgespielt, sobald es fertig ist.

Steuerelemente Steuerelemente Wenn dieses Attribut angezeigt wird, werden dem Benutzer Steuerelemente angezeigt, z. B. eine Wiedergabeschaltfläche.

Schleife Schleife Wenn dieses Attribut angezeigt wird, beginnt die Wiedergabe erneut, nachdem die Wiedergabe der Mediendatei abgeschlossen ist.

muted muted gibt an, dass die Audioausgabe des Videos stummgeschaltet werden soll.

Die Poster-URL gibt das Bild an, das angezeigt wird, wenn das Video heruntergeladen wird, oder das Bild, das angezeigt wird, bevor der Benutzer auf die Wiedergabeschaltfläche klickt.

Preload Preload Wenn dieses Attribut erscheint, wird das Video beim Laden der Seite geladen und ist bereit zur Wiedergabe. Bei Verwendung von „Autoplay“ wird dieses Attribut ignoriert.

src url Die URL des abzuspielenden Videos.

Breite Pixel legt die Breite des Videoplayers fest.

Höhe Pixel legt die Höhe des Videoplayers fest.

Sie haben alle drei Formate: mp4, ogg und webm. Die derzeit in dieser Hinsicht unterstützten Formate sind nicht perfekt genug.