Inleiding tot MathML - De markup-taal voor wiskunde

MathML is een opmaaktaal die kan worden gebruikt om wiskundige notaties weer te geven . U kunt MathML-tags rechtstreeks vanuit HTML5 gebruiken. Het is handig als u meer dan eenvoudige notaties van wiskunde in uw webpagina's wilt laten zien en het is vrij eenvoudig te gebruiken vanwege de eenvoud en gelijkenis met HTML .

MathML heeft twee soorten markeringen; presentatie (voor layout) en inhoud (voor betekenis). Omdat alleen de presentatie-opmaak door browsers wordt ondersteund, is dat het enige opmaaktype dat met HTML kan worden gebruikt. Je kunt er ook CSS en JavaScript op gebruiken, net als HTML.

Laten we eens naar MathML kijken.

MathML begrijpen

Er is een lijst met aanwezige MathML-elementen op de Mozilla-website voor ontwikkelaars. Ik heb ook de elementen vermeld die in de voorbeelden aan het einde van dit bericht worden gebruikt voor een snelle referentie.

Het element op het hoogste niveau in MathML is de $element,\; wanneer\; je\; MathML-code\; in\; de\; HTML\; schrijft,\; vergeet\; deze\; dan\; niet\; in\; de\; HTML-code\; te\; plaatsen$ -tags.$$

, , , zijn de basiselementen die respectievelijk een identifier, operator, nummer en string vertegenwoordigen. Merk op dat alle onderstaande MathML-elementen beginnen met de letter 'm'.

Hier zijn enkele eenvoudige voorbeelden.

Superscript en subscript weergeven

De element is voor het weergeven van superscript. Er is een voor subscripts.

$n^7$

Hoe Fracties Weer te geven

$\frac{7}{26}$

Hoe root gehele getallen weergeven

Hier is nog een eenvoudig voorbeeld voor het weergeven van root-getallen.

$\sqrt[5]{\mathrm{<mo>\; -\; </mo>\; 678}}$

Voor alleen vierkantswortel, dat is het .

Laten we nu verder gaan met meer complexe notaties, de matrix.

Hoe een matrix weer te geven

Om een ​​matrix te construeren, moeten we een tabelstructuur hebben voor rijen en kolommen. Hiervoor gebruiken we , en .

Afgezien daarvan gebruiken we de tags om de operatoren [ en ] rond de matrix toe te voegen en ze uiteindelijk allemaal in de matrix te plaatsen element, een element dat uitdrukkingen groepeert.

Dit is het eindresultaat:

$\left[\begin{array}{ccc}0& 4& 10\\ 5& 2& X\\ 9& 11& 1\end{array}\right]$

Laten we ook een beetje CSS toevoegen om ervoor te zorgen dat die 'X' opvalt in de matrix.

 mi {kleur: rood; } 

Hoe integrale vergelijkingen te tonen

Hieronder staat een voorbeeld van een basistype integrale vergelijking. De wordt gebruikt om de limieten voor de integraal toe te voegen.

Net als HTML heeft MathML ook tekens en entiteiten, waarvan er één in het voorbeeld wordt gebruikt om het Griekse phi-symbool te tonen. U kunt als volgt de bovenstaande integrale vergelijking weergeven:

$f\left(X\right)=\&Integraal;_{\mathrm{een}}^{b}K(X,t)\phi \left(t\right)dt$

Klik hier voor een lijst met MathML-karakterentiteiten om ze te vinden op de W3C-website.

MathML-kenmerken

Naast attributen die hetzelfde zijn als die van HTML (zoals id ), heeft MathML ook een reeks eigen attributen. De Mozilla-website voor ontwikkelaars heeft een verzameling MathML-kenmerken voor uw referentie. Voor fallbacks kunt u de JavaScript-bibliotheek MathJax gebruiken. Als je meer tools nodig hebt, kijk dan hier.

Ik neem afscheid van deze codepen met alle bovenstaande voorbeelden, voor uw eenvoudige referentie.

Referentielijst van MathML-elementen

Elements	Definitie
$$	Element op het hoogste niveau MathML
	Geeft ID's (variabelen, constanten, functienamen) weer
	Geeft numeriek letterlijke weer
	Geeft de operator weer
	Toont letterlijke tekenreeks
	Voegt een superscript toe aan een basis
	Voegt een subscript toe aan een basis
	Gebruikt om breuken weer te geven
	Geeft radicalen weer met indexen
	Geeft vierkantswortel weer
	Geeft een tabel of matrix weer
	Rij van
	Kolom in
	Groepen sub-uitdrukkingen
	Gebruikt om superscript, subscript, presuperscript en presubscript toe te voegen

Voeg Emoji-ondersteuning toe aan uw website met Emoji CSS

Emoji's hebben digitale gesprekken overgenomen en deze schattige kleine pictogrammen drongen snel door in de internetcultuur. Ze zijn nu een dagelijks onderdeel van ons leven en je kunt ze overal vinden, van desktop-apps tot WordPress.En als u ooit aangepaste emoji's op uw site wilde hebben, dan is Emoji CSS de perfecte bibliotheek om te gebruiken

(Technische en ontwerptips)

15 JavaScript-methoden voor DOM-manipulatie voor webontwikkelaars

Als webontwikkelaar moet u vaak de DOM manipuleren, het objectmodel dat door browsers wordt gebruikt om de logische structuur van webpagina's te specificeren en op basis van deze structuur HTML-elementen op het scherm weergeven .HTML definieert de standaard DOM-structuur . In veel gevallen wilt u dit misschien wel manipuleren met JavaScript, meestal om extra functionaliteiten aan een site toe te voegen

(Technische en ontwerptips)