Popis značky HTML span: čo to je, ako ju používať, funkcie

  • 29.05.2019

Reprezentácia informácií prostredníctvom moderná myšlienka hypertext je vo svojej podstate absurdný, ale tak to je a funguje. S týmto sa nemôžete hádať a musíte s tým počítať.

Z pohľadu moderný jazyk pri programovaní nezáleží na tom, ako sú údaje reprezentované: prísne typy a povinná dopredná deklarácia alebo žiadne typy a požadovaný popis jazyk „premýšľa“ sám o sebe, keď sa algoritmus vykonáva.

Je dôležité si uvedomiť, že čokoľvek, čo nie je „pochopené“ prehliadačom, JavaScriptom alebo jazykom na strane servera, sa nespustí. Bloková značka sa môže za daných okolností „zmeniť“ na vloženú značku, ale inline značka sa nemôže zmeniť na blokovú značku.

Logika stránky HTML

Historický príklad - HTML tag písmo. Už dlho sa to „neodporúča“. Motivácia „neodporúča sa“ – charakteristický znak moderné programovanie. Nedostatok kompatibility upstream kódu medzi verziami a žiadna stabilita pri sekvenčnom vývoji verzií softvérové ​​komponenty a tiež koncepty.

Značka span v HTML je skutočne oveľa praktickejšia: nie je to len o fonte. Span môže zmeniť mnohé atribúty zobrazenia a používania konkrétneho obsahu.

Reťazce boli vždy základnou reprezentáciou akýchkoľvek údajov, ale programovacie jazyky to nie vždy definovali v syntaxi a programátori si uvedomujú, že použité číslo alebo boolean je vždy reťazec.

Absurdita a objektivita hypertextu v HTML implementácie: layout je použitie množiny značiek (párových alebo jednoduchých) na formálny popis obsahu (údajov). Opis ani obsah nemožno rozumne nazvať informáciou. Prvým je nejaký rámec, ktorý obsahuje nejaký obsah – dáta.

Rám je postavený z pevne upevnených tehál (štítkov), ktoré zaberajú presne definované miesta v konštrukcii a relatívne prvky, ktoré sa nachádzajú „ako karta leží“.

Stránku môžete rozdeliť na sekcie zobrazenia údajov s tabuľkami alebo prvkami blokov a výslednú štruktúru môžete „naplniť“ údajmi s inými značkami. Zvyčajne sa nazývajú inline, to znamená, že sú usporiadané podľa aktuálnej príležitosti a aktuálneho obsahu.

Príklad rozsahu HTML: čo to je a ako to opísať

Zelené pole je príkladom kódu, ktorý prehliadač vykreslil sivé pozadie. Prvok div na úrovni bloku skončil v strede textu, ktorý nasleduje v kóde. Prvým prvkom bola značka s triedou scSpanLine. Potom bol umiestnený text, v ktorom boli označené dve sekcie tohto textu tagom span s triedou scSimpleSpan.

Druhý a tretí vložené prvky nachádza presne tak, ako je napísané v kóde.

Tento príklad ukazuje, ako funguje span v HTML. Je zrejmé, že ide len o sled údajov. Niečo iné nie je zrejmé: vývojár môže túto značku opísať, ako sa mu páči, môže dokonca použiť pravidlo:

  • POZÍCIA: absolútna;

Nebude to mať žiadny účinok. Zadanie súradníc a rozmerov tiež nehrá žiadnu rolu. Vycentrovanie alebo zarovnanie rozsahu v HTML je zbytočné. Medzitým je štítok veľmi praktický a v praxi žiadaný. Ide o veľmi šikovný obal na zvýraznenie dôležitý bod V všeobecný tokúdajov.

Hlavná vec je pochopiť to span HTML je spôsob, ako zmeniť zobrazenie reťazca alebo spresniť pravidlá pre zobrazenie časti reťazca.

Logika poskytovania inline informácií

Použite jazyk popisu HTML dáta podľa jeho účelu, teda opísať údaje, je to včera. Používanie jazyka na strane servera na vytvorenie tela stránky je moderné a robia to „všetci“ vývojári. Obľubujú to najmä redakčné systémy (CMS).

Skutočnou praxou a potrebou tvorby živých stránok je dynamická správa kostry stránky a jej obsahu. V tomto zmysle je výsledkom značka span v HTML (ktorá je len dynamická). JavaScript práca, umožňuje vytvárať dynamický obsah za behu.

JavaScript funguje ako prevodník zdroja na formátovanie a náhrady požadované značky s právom css pravidlá do odchádzajúceho prúdu, ktorý je distribuovaný cez rámec blokových prvkov stránky.

Čím vyššia je profesionalita vývojára, tým viac blokových (alebo tabuľkových) značiek stránky a tým menej reálnej prítomnosti tagov statického rozpätia v HTML. čo to dáva? dynamika. JavaScript je algoritmus, ktorý dokáže pracovať s prichádzajúcim prúdom reťazcov a zobrazuje ho tak, ako to vývojár zamýšľal. značky span sa objavia v správne miesto a v správnom čase.


Tituly
Pre
používajú sa značky nadpisov

...


Myslím, že tomu každý rozumie, nie je to ťažké.
Typ písma (typ) a farba písma

Tu sú dva spôsoby. Druhá bude popísaná neskôr. Po prvé - používa sa značka

S atribútmi tvár A farba, respektíve:

písmo Verdana

písmo Verdana


červené písmo

červené písmo


Farba písma MidnightBlue

Farba písma MidnightBlue


Farba písma MidnightBlue

Farba písma MidnightBlue


Farba má názov a číselnú hodnotu, ako je vidieť v tomto príklade.
(MidnightBlue=#191970). O kvetoch sa dá písať veľa, ale ja
Zostanem pri jednom odkaze:

Výber farieb. Na použitie sú vhodné farby bezpečné pre web a inteligentné farby pre web.


Formátovanie textu: Pomocou značky a atribút štýl (1)

Tag odkazuje na vybraný (formátovaný) fragment textu:
text
. Hneď podotýkam, že atribúty
(vlastnosti) pracujúce s tagom , možno použiť aj s
značky

A

. Avšak, tag

Vzťahuje sa na
odsek, čo nám nie vždy vyhovuje (aj keď pri formátovaní odseku
používať to racionálne). Tag

možno aplikovať
ako aj - je to skôr vec vkusu. Má viac
široký rozsah aplikácií a má množstvo pridané vlastnosti.
To už ale neplatí pre formátovanie textu. Preto pre
zamerajme sa na istotu .

Nahrávanie
text sám o sebe nemá žiadny význam.
Tag určené na pripísanie textu
nejaký majetok. Tu sa ich pokúsim uviesť
viac-menej logické poradie.

Farba písma

Farbu písma je možné nastaviť pomocou značky , ako je uvedené vyššie. Teraz použijeme značku a atribút štýl:

červené písmo - červené písmo

Rovnakým spôsobom môžete nastaviť digitálne hodnoty farieb (ďalšie podrobnosti nájdete vyššie.

Typ (druh) písma

O spôsobe nastavenia typu písma (druhu) písma pomocou značky diskutované aj minule.

Teraz zvážte druhú metódu - pomocou konštrukcie

písmo

na miesto ***
je potrebné nahradiť typ písma (typ) písma. Spravidla nahrádzajú
názov nie konkrétneho písma, ale celej rodiny písiem, napr. Verdana, Times atď. Získame:

Verdana font Písmo Times

Veľkosť písma

Konštrukcia slúži na určenie veľkosti písma.

písmo

Veľkosť
je možné nastaviť písmo rôzne cesty. Možno najzreteľnejšie a
jednoduché - nahraďte *** jednou z nasledujúcich siedmich hodnôt:

xx-veľký, x-veľký, veľký, stredný, malý, x-malý, xx-malý.

výsledok:

veľmi veľké písmo
veľmi veľké písmo
veľká tlač
stredné písmo
malé písmo
veľmi malé písmo
veľmi veľmi malé písmo

Veľkosť písma môžete určiť spôsobom známym z Wordu - v bodoch (pt). 1 bod sa rovná 1⁄72 palcom. Príklady:

12pt

36pt

Hodnoty 12pt, 36pt v týchto príkladoch sú nahradené *** in všeobecný vzorec písmo . Pixely možno použiť aj:

font 12px
font 36px

Vyššie uvedené rozmery sú absolútne. Ale veľkosť písma sa dá nastaviť relatívnym spôsobom- v percentách:
veľkosť písma 150 % originálu

veľkosť písma 150 % originálu


alebo vo vzťahu k šírke písmena „m“ v pôvodnom type písma (príslušná jednotka sa nazýva em):
veľkosť písma 1,5 em oproti originálu

veľkosť písma 1,5 em oproti originálu


Hmotnosť písma (sýtosť)

To je niečo, čo sa dá špecifikovať pomocou jednoduchej značky
miniatúra

miniatúra

Používaním robí sa to takto: tučné

tučné písmo


Výhodou tejto metódy je, že spolu s hodnotou hmotnosti písma tučný môžete použiť aj hodnoty odvážnejší a ľahší, získanie písma „inej váhy“ (in tento prípad sú relatívne hodnoty). A predvolená hodnota je normálne- bežné písmo.

Štýl písma

Kurzíva sa dá získať pomocou značky , a to nasledujúcim spôsobom:
kurzíva

kurzíva


Namiesto štýl písma: kurzíva môžeš písať štýl písma:šikmý, a potom by to nemalo byť kurzíva, ale šikmé ("uhlovité") písmo. Ale nie vždy to funguje.

Kapitál

Ahojte všetci!

Andrey je opäť s vami.

Dnes vám budú ponúknuté 2 verzie lekcie. Jeden v textová forma- vidíte to pred očami a druhé VIDEO - budete si ho musieť stiahnuť.

Podľa nás bude pre vás zrozumiteľnejšia video verzia.

Takže o dodatočnom html prvky

Povedzme, že musíte niektoré vyzdvihnúť jediné slovo v texte (predpokladajte inú farbu a pozadie), alebo tak, že obrázok a s ním súvisiaci text sú v bunke tabuľky hore a vpravo a hlavný obsah stránky povedzme dole a bližšie k ľavému okraju. Pokiaľ ide o prvý príklad, poviem, že to môžete urobiť pomocou značky so súpravou požadované parametre, ale je to jedna zo zakázaných značiek (nové prehliadače ju nemusia podporovať) a nemá vlastnosť nahradenia pozadia.

Pre takéto prípady sú k dispozícii dve špecifické značky, ktoré v skutočnosti nerobia nič. Ale pri aplikácii požadované štýly s nimi môžete dosiahnuť čokoľvek. Vo všeobecnosti, použitím iba týchto dvoch značiek a použitím štýlov na ne môžete vytvoriť celú stránku webu.

Áno, toto sú značky.

A .

Aký je medzi nimi rozdiel, ak sa používajú na rovnakú vec?

prvok div - Toto bloková značka, a môže obsahovať akékoľvek nám známe značky (zoznamy, obrázky, tabuľky ...).

prvok rozpätia je vložená značka a vzťahuje sa iba na text (zvýraznenie časti textu inou farbou).

Štýly, ktoré sú použiteľné pre tieto značky, sú všetky štýly, ktoré sme študovali. Neexistujú žiadne obmedzenia na používanie akýchkoľvek štýlov.

Pozrime sa na štýly, ktoré sú pre tieto značky najtypickejšie. Sú použiteľné aj pre všetky ostatné značky a používajú sa rovnakým spôsobom, len sa s týmito značkami používajú častejšie (najmä pre

) .

Prvá vec, ktorou by som chcel začať, je umiestnenie prvkov.

Táto nehnuteľnosť:

pozíciu- nastavuje alebo určuje polohu prvku.

Hodnoty:

statické- predvolený. Poloha objektu je určená prúdom HTML značky Autor: štandardné pravidlá.

absolútne- poloha objektu je určená vzhľadom k polohe nadradeného objektu alebo relatívne k telesnému objektu. príbuzný- Poloha objektu je určená posunom od pozície, v ktorej sa štandardne objavil.

vľavo/hore- nastavuje alebo určuje polohu prvku vzhľadom na ľavý/horný okraj.

Hodnoty:

X– číslo v percentách alebo pixeloch.

auto je predvolená hodnota.

Zvážte príklad:

XHTML

Akýkoľvek obsah bloku!!!

Tento príklad ukazuje, že naše pole so šírkou 300 pixelov sa posunie o 350 pixelov nadol a o 200 pixelov doľava od miesta, kde sa zobrazuje predvolene.

Ďalšia dôležitá vlastnosť:

marža- veľkosť odsadenia od nášho bloku k susedným objektom na štyroch stranách.

Hodnoty:

margin-top- nastavuje hodnotu horný okraj objekt

ľavý okraj— nastaví hodnotu ľavého odsadenia objektu

okraj-pravý— nastaví hodnotu pravého odsadenia objektu

okraj-dole- nastaví hodnotu spodného odsadenia objektu

XHTML

Akýkoľvek obsah bloku!!!

Vytvorili sme rámček s výplňou okolo 30 pixelov zo všetkých strán.

Na čo by som sa chcel ešte zamerať:

vypchávka– vlastnosť určuje množstvo priestoru vloženého medzi objekt a jeho hranice.

Hodnoty:

polstrovanie-dno Určuje veľkosť priestoru vloženého medzi objekt podľa jeho spodného okraja.

polstrovanie-vľavo— určuje veľkosť priestoru vloženého medzi objekt jeho ľavým okrajom.

čalúnenie vpravo- nastavuje veľkosť priestoru vloženého medzi objekt podľa jeho pravého okraja.

vypchávkový vrch- určuje veľkosť priestoru vloženého medzi jeho objekt Horná hranica.

XHTML

Akýkoľvek obsah bloku!!!

Vytvorili sme blok s 30px výplňou z obsahu na všetky jeho strany.

A zvážte príklad s použitím značky:

Povedzme, že máme takúto štruktúru:

Akýkoľvek text!

Chceme, aby bolo slovo text na žlté pozadie modrými písmenami. Ak to chcete urobiť, zabaľte ho do štítku a aplikujte príslušné štýly.




Webová stránka počítačovej pomoci

© Copyright 2023,
rzdoro.ru – stránka počítačovej pomoci

  • Kategórie
  • Železo
  • Windows 10
  • Skenovanie
  • Windows 7
  • Železo
  • Windows 10
  • Skenovanie
  • Windows 7