HTML vadovas

Pastaba: galite atsisiųsti šios knygos PDF / ePub / Mobi versiją, kad galėtumėte ją perskaityti neprisijungę.

Įvadas

Sveiki! Parašiau šią knygą norėdamas padėti greitai išmokti HTML ir susipažinti su išplėstinėmis HTML temomis.

HTML, „Hyper Text Markup Language“ sutrumpinimas, yra vienas iš svarbiausių interneto elementų.

HTML oficialiai gimė 1993 m. Ir nuo tada jis tapo dabartine būsena, nuo paprastų tekstinių dokumentų pereidamas prie turtingų žiniatinklio programų.

Šis vadovas skirtas didžiulei auditorijai.

Pirma, pradedantysis. Aiškinu HTML nuo nulio glaustai, bet išsamiai, todėl galite naudoti šią knygą, kad išmoktumėte HTML iš pagrindų.

Tada profesionalas. HTML dažnai laikomas antraeiliu dalyku, kurio reikia išmokti. Tai gali būti suteikta kaip savaime suprantama.

Vis dėlto daugelis dalykų yra neaiškūs daugeliui žmonių. Aš įskaitant. Parašiau šį vadovą, kad galėčiau geriau suprasti temą, nes kai man reikia ką nors paaiškinti, geriau įsitikinkite, kad pirmiausia žinau dalyką iš vidaus.

Net jei nerašote HTML kasdieniame darbe, žinojimas, kaip veikia HTML, gali padėti sutaupyti galvos skausmo, kai reikia kartkartėmis jį suprasti, pavyzdžiui, keičiant tinklalapį.

Su manimi galite susisiekti „Twitter“ @flaviocopes.

Mano svetainė yra flaviocopes.com.

Knygų rodyklė

  • Įvadas
  • HTML pagrindai
  • Dokumento antraštė
  • Dokumento turinys
  • Žymos, kurios sąveikauja su tekstu
  • Nuorodos
  • Konteinerių žymos ir puslapio struktūros HTML
  • Formos
  • Lentelės
  • Daugialypės terpės žymės: garso ir vaizdo įrašai
  • iframes
  • Vaizdai
  • Prieinamumas

PRATARMĖ

HTML yra stebuklo, vadinamo žiniatinkliu, pamatas.

Po šiuo gana paprastu ir ribotu taisyklių rinkiniu yra neįtikėtina jėga, kuri leidžia mums - kūrėjams, kūrėjams, dizaineriams, rašytojams ir tinkuotojams - kurti dokumentus, programas ir patirtį žmonėms visame pasaulyje.

Pirmoji mano HTML knyga pasirodė 1997 m. Ir buvo pavadinta „HTML Unleashed“. Didelis, daug puslapių, ilgas tomas.

Praėjo daugiau nei 20 metų, o HTML vis dar yra žiniatinklio pagrindas su minimaliais pakeitimais nuo tada.

Aišku, mes gavome daugiau prasminių žymių, pateikiamas HTML nebėra dalykas, o CSS rūpinosi daiktų dizainu.

HTML sėkmė grindžiama vienu dalyku: paprastumu .

Jis priešinosi pagrobimui į XML tarmę per XHTML, kai galų gale žmonės suprato, kad tas dalykas yra pernelyg sudėtingas.

Tai padarė dėl kitos mums teikiamos savybės: atleidimo . Yra keletas taisyklių, tiesa, bet išmokęs jas, turi daug laisvės.

Naršyklės išmoko būti atsparios ir visada stengtis padaryti viską, kas įmanoma analizuojant ir pateikiant HTML vartotojams.

Ir visa interneto platforma padarė teisingai: ji niekada nesugadino atgalinio suderinamumo. Gana neįtikėtina, bet galime grįžti prie HTML dokumentų, parašytų 1991 m., Ir jie atrodo gana panašūs, kaip atrodė tada.

Mes netgi žinome, koks buvo pirmasis tinklalapis. Tai: //info.cern.ch/hypertext/WWW/TheProject.html

Be to, galite pamatyti puslapio šaltinį dėl kitos didelės žiniatinklio ir HTML funkcijos: mes galime patikrinti bet kurio tinklalapio HTML .

Negalima to laikyti savaime suprantamu dalyku. Aš nepažįstu jokios kitos platformos, suteikiančios mums šį sugebėjimą.

Išskirtiniai kūrėjų įrankiai, įmontuoti bet kurioje naršyklėje, leidžia mums apžiūrėti ir pasisemti įkvėpimo iš HTML, parašyto bet kurio pasaulio žmogaus.

Jei dar nesinaudojote HTML, šios knygos tikslas - padėti jums pradėti. Jei esate patyręs žiniatinklio kūrėjas, ši knyga pagerins jūsų žinias.

Rašydama sužinojau tiek daug, nors jau daugiau nei 20 metų dirbu su žiniatinkliu ir esu tikra, kad rasite ir ką nors naujo.

Arba iš naujo išmoksite ką nors seno, ką pamiršote.

Bet kokiu atveju knygos tikslas yra būti jums naudingam ir tikiuosi, kad tai pavyks.

HTML PAGRINDAI

HTML yra standartas, kurį apibrėžia WHATWG , trumpinys „Web Hypertext Application Technology Working Group“, organizacijos, kurią suformavo žmonės, dirbantys populiariausioje interneto naršyklėje. Tai reiškia, kad jį iš esmės valdo „Google“, „Mozilla“, „Apple“ ir „Microsoft“.

Anksčiau W3C („World Wide Web Consortium“) buvo organizacija, atsakinga už HTML standarto kūrimą.

Valdiklis neoficialiai perėjo iš W3C į WHATWG, kai paaiškėjo, kad W3C pastūmėjimas link XHTML nebuvo gera idėja.

Jei dar niekada negirdėjote apie XHTML, pateikite trumpą istoriją. 2000-ųjų pradžioje visi tikėjome, kad interneto ateitis yra XML (rimtai). Taigi HTML iš SGML pagrįstos autorių kalbos perėjo į XML žymėjimo kalbą.

Tai buvo didelis pokytis. Turėjome žinoti ir gerbti daugiau taisyklių. Griežtesnės taisyklės.

Galų gale naršyklės pardavėjai suprato, kad tai nėra tinkamas žiniatinklio kelias, ir jie grįžo, sukurdami tai, kas dabar vadinama HTML5.

W3C iš tikrųjų nesutiko atsisakyti HTML kontrolės, o daugelį metų mes turėjome 2 konkuruojančius standartus, kurių kiekvienas siekė būti oficialus. Galų gale 2019 m. Gegužės 28 d. W3C paskelbė, kad „tikroji“ HTML versija yra ta, kurią paskelbė WHATWG.

Paminėjau HTML5. Leisk man paaiškinti šią mažą istoriją. Žinau, iki šiol tai tarsi painu, kaip ir daugelyje dalykų gyvenime, kai dalyvauja daugybė aktorių, tačiau tai taip pat žavi.

HTML versiją 1 turėjome 1993 m. Čia yra originalus RFC.

HTML 2 atsirado 1995 m.

HTML 3 mes gavome 1997 m. Sausio mėn., O HTML 4 - 1997 m. Gruodžio mėn.

Užimtas laikas!

Praėjo daugiau nei 20 metų, mes turėjome visą šį XHTML dalyką ir galiausiai priėjome prie šio HTML5 „dalyko“, kuris iš tikrųjų nebėra tik HTML .

HTML5 yra terminas, kuris dabar apibrėžia visą technologijų rinkinį, kuris apima HTML, bet prideda daugybę API ir standartų, tokių kaip „WebGL“, SVG ir dar daugiau.

Pagrindinis dalykas, kurį reikia suprasti, yra toks: dabar nėra (daugiau) HTML versijos. Tai pragyvenimo lygis. Kaip CSS, kuris vadinamas „3“, tačiau iš tikrųjų yra krūva nepriklausomų modulių, sukurtų atskirai. Kaip ir „JavaScript“, kur kasmet turime po vieną naują leidimą, tačiau šiais laikais svarbu tik tai, kurias pavienes funkcijas variklis įgyvendina.

Taip, mes jį vadiname HTML5, bet HTML4 yra 1997 m. Tai ilgas laikas bet kam, o ką jau kalbėti apie internetą.

Čia standartas dabar „gyvena“: //html.spec.whatwg.org/multipage.

HTML yra žymėjimo kalba, kurią naudojame kurdami turinį, kurį vartojame internete.

HTML naršyklei pateikiamas įvairiais būdais.

  • Jį gali sugeneruoti serverio programa, kuri ją kuria priklausomai nuo užklausos ar seanso duomenų, pavyzdžiui, „Rails“ arba „Laravel“ ar „Django“ programa.
  • Jį gali sugeneruoti „JavaScript“ kliento programa, kuri HTML generuoja sklandžiai.
  • Paprasčiausiu atveju jis gali būti išsaugotas faile ir pateiktas naršyklei žiniatinklio serverio.

Pasinerkime į šį paskutinį atvejį. Nors praktikoje tai yra bene mažiausiai populiarus būdas generuoti HTML, vis tiek būtina žinoti pagrindinius elementus.

Pagal susitarimą HTML failas įrašomas su plėtiniu .htmlarba .htmplėtiniu.

Šiame faile mes organizuojame turinį naudodami žymas .

Žymos suvynioja turinį, o kiekviena žyma suteikia ypatingą reikšmę tekstui, kurį jis suvynioja.

Pateikime keletą pavyzdžių.

Šis HTML fragmentas sukuria pastraipą naudodamas pžymą:

A paragraph of text

Šis HTML fragmentas sukuria elementų sąrašą naudodamas ulžymą, kuri reiškia nesutvarkytą sąrašą , ir ližymas, kurios reiškia sąrašo elementą :


    
  • First item
  • Second item
  • Third item

Kai HTML puslapį aptarnauja naršyklė, žymos interpretuojamos ir naršyklė pateikia elementus pagal taisykles, apibrėžiančias jų vizualinę išvaizdą.

Kai kurios iš šių taisyklių yra įmontuotos, pavyzdžiui, kaip pateikiamas sąrašas arba kaip nuoroda pabraukiama mėlynai.

Kai kurias kitas taisykles nustatote jūs naudodami CSS.

HTML nėra pristatomasis. Tai nesusiję su tuo, kaip viskas atrodo . Užtat rūpinamasi tuo, ką reiškia dalykai .

Naršyklė turi nuspręsti, kaip viskas atrodo, vadovaudamosi direktyvomis, kurias nustato puslapis kuriantis, ir CSS kalba.

Šie du mano pateikti pavyzdžiai yra HTML fragmentai, paimti už puslapio konteksto.

HTML puslapio struktūra

Pateikime tinkamo HTML puslapio pavyzdį.

Viskas prasideda nuo „Dokumento tipo deklaracijos“ (dar žinomo kaip „ doctype“ ) - būdas pasakyti naršyklei, kad tai yra HTML puslapis, ir kurią HTML versiją naudojame.

Šiuolaikiniame HTML naudojamas šis dokumento tipas:

Tada turime htmlelementą, kuriame yra atidarymo ir uždarymo žyma:

  ...  

Dauguma žymų pateikiamos poromis su pradine ir uždara žyma. Baigiamoji žyma parašyta tokia pati kaip pradinė žyma, bet su /:

some content 

Yra keletas savarankiškai uždarymo žymės, o tai reiškia, jiems nereikia atskiro uždarymo tegus, nes jie neturi būti nieko į juos .

htmlPradedant žyma naudojama dokumento pradžioje, iškart po dokumento tipo deklaracijos.

Galutinė htmlžyma yra paskutinis dalykas, esantis HTML dokumente.

htmlElemento viduje turime 2 elementus: headir body:

   ...   ...   

Viduje headturėsime žymes, kurios yra būtinos kuriant tinklalapį, pvz., Pavadinimą, metaduomenis ir vidinį ar išorinį CSS ir „JavaScript“. Dažniausiai dalykai, kurie nėra tiesiogiai rodomi puslapyje, bet tik padeda naršyklei (ar robotams, pvz., „Google“ paieškos robotui), tinkamai ją parodyti.

Viduje bodyturėsime puslapio turinį. Matomi dalykai .

Žymos ir elementai

Minėjau žymes ir elementus. Koks skirtumas?

Elementai turi pradinę žymą ir baigiamąją žymą. Šiame pavyzdyje mes naudojame ppradžios ir pabaigos žymas kurdami pelementą:

A paragraph of text

Taigi elementas sudaro visą paketą :

  • pradinė žyma
  • teksto turinys (ir galbūt kiti elementai)
  • uždarymo žyma

Jei elemente nėra baigiamosios žymos, jis rašomas tik su pradine žyma ir jame negali būti jokio teksto turinio.

Be to, knygoje galėčiau naudoti žymę ar elemento terminą, reiškiantį tą patį dalyką, išskyrus atvejus, kai aiškiai pamenu pradinę žymą arba pabaigos žymą.

Atributai

Pradinė elemento žyma gali turėti specialius informacijos fragmentus, kuriuos galime pridėti, vadinamus atributais .

Atributai turi key="value"sintaksę:

A paragraph of text

Taip pat galite naudoti atskiras kabutes, tačiau dvigubų kabučių naudojimas HTML yra puikus susitarimas.

Mes galime turėti daug jų:

A paragraph of text

o kai kurie atributai yra loginiai, vadinasi, jums reikia tik rakto:

classIr idatributai yra du labiausiai paplitusių rasite naudota.

Jie turi ypatingą reikšmę ir yra naudingi tiek CSS, tiek „JavaScript“.

Skirtumas tarp jų yra tas id, kad internetinio puslapio kontekste yra unikalus; jo negalima dubliuoti.

Kita vertus, klasės gali pasirodyti kelis kartus ant kelių elementų.

Be to, an idyra tik viena vertybė. classgali turėti kelias reikšmes, atskirtas tarpu:

A paragraph of text

-Klasės brūkšneliui atskirti žodžius klasės vertėje yra įprasta, tačiau tai tik sutartinė.

Tai tik du galimi atributai. Kai kurie atributai naudojami tik vienai žymai. Jie yra labai specializuoti.

Kitus atributus galima naudoti bendresniu būdu. Jūs ką tik matėte idir class, bet mes turime ir kitų, stylekuriuos galime naudoti įterpdami į CSS taisykles elementą.

Didžiosios ir mažosios raidės

HTML neskiria didžiųjų ir mažųjų raidžių. Žymas galima rašyti didžiosiomis raidėmis arba mažosiomis raidėmis. Pirmosiomis dienomis kepurės buvo įprasta. Šiandien mažosios raidės yra norma. Tai konvencija.

Paprastai rašote taip:

A paragraph of text

ne taip:

A paragraph of text

balta vieta

Gana svarbu. HTML, net jei prie eilutės pridedate kelis baltus tarpus, naršyklės CSS variklis sutraukia.

Pavyzdžiui, pateikiama ši pastraipa:

A paragraph of text

yra tas pats kaip šis:

A paragraph of text

ir tas pats kaip šis:

A paragraph of text

> Naudodami balto tarpo CSS ypatybę, galite pakeisti, kaip viskas elgiasi. Daugiau informacijos apie tai, kaip CSS apdoroja tuščią erdvę, galite rasti CSS specifikacijoje

Aš paprastai pritariu

A paragraph of text

arba

A paragraph of text

Įdėtos žymos, atsižvelgiant į jūsų pageidavimus, turėtų būti įtraukiamos į 2 arba 4 simbolius:

A paragraph of text

  • A list item

Pastaba: ši funkcija „tarpai nėra aktualūs“ reiškia, kad jei norite pridėti papildomos vietos, tai gali jus išprotėti. Siūlau naudoti CSS, kad prireikus būtų daugiau vietos.

Pastaba: ypatingais atvejais galite naudoti HTML objektą (akronimą, kuris reiškia neskaidomą erdvę ) - vėliau apie HTML objektus. Manau, kad tuo piktnaudžiauti nereikėtų. CSS visada teikiama pirmenybė norint pakeisti vaizdinį vaizdą.

DOKUMENTO PAVADINIMAS

headŽymė yra specialių žymes, kurios apibrėžia dokumento savybes.

Jis visada rašomas prieš bodyžymą, iškart po pradine htmlžyma:

   ...  ...  

Šioje žymoje niekada nenaudojame atributų. Ir mes jame nerašome turinio.

Tai tik kitų žymų talpykla. Jo viduje galime turėti daugybę žymių, priklausomai nuo to, ką jums reikia padaryti:

  • title
  • script
  • noscript
  • link
  • style
  • base
  • meta

titležymė

titleŽymė apibrėžia puslapio pavadinimą. Pavadinimas rodomas naršyklėje, ir jis yra ypač svarbus, nes tai yra vienas iš pagrindinių paieškos sistemų optimizavimo (SEO) veiksnių.

scriptžymė

Ši žyma naudojama norint pridėti „JavaScript“ į puslapį.

Galite įtraukti jį įterpdami, naudodami pradinę žymą, „JavaScript“ kodą ir tada uždarymo žymą:

 ..some JS  

Arba galite įkelti išorinį „JavaScript“ failą naudodami srcatributą:

Pagal typenumatytuosius nustatymus atributas yra nustatytas text/javascript, todėl jis yra visiškai neprivalomas.

Apie šią žymą reikia žinoti ką nors gana svarbaus.

Kartais ši žyma naudojama puslapio apačioje, prieš pat baigiamąją žymą. Kodėl? Dėl našumo priežasčių.

Įkeliant scenarijus pagal numatytuosius nustatymus blokuojamas puslapio atvaizdavimas, kol scenarijus bus išanalizuotas ir įkeltas.

Įdėjus jį į puslapio apačią, scenarijus įkeliamas ir vykdomas po to, kai visas puslapis jau yra išanalizuotas ir įkeltas, suteikiant vartotojui geresnę patirtį, kai jis laikomas headžymoje.

Mano nuomone, tai dabar yra bloga praktika. Tegul scriptgyvena headžymoje.

Šiuolaikinėje „JavaScript“ turime alternatyvą, kuri yra efektyvesnė nei scenarijaus laikymas puslapio apačioje - deferatributas. Tai pavyzdys, įkeliantis file.jsfailą, palyginti su dabartiniu URL:

Tai scenarijus, kuris paleidžia greitesnį kelią į greitai įkraunamą puslapį ir greitai įkeliamą „JavaScript“.

Pastaba: asyncatributas yra panašus, bet, mano nuomone, blogesnis variantas nei defer. Kodėl, išsamiau aprašau puslapyje //flaviocopes.com/javascript-async-defer/

noscriptžymė

Ši žyma naudojama aptikti, kai naršyklėje neleidžiami scenarijai.

Pastaba: vartotojai gali pasirinkti išjungti „JavaScript“ scenarijus naršyklės nustatymuose. Arba naršyklė gali jų nepalaikyti pagal numatytuosius nustatymus.

Jis naudojamas skirtingai, atsižvelgiant į tai, ar jis įdėtas į dokumento galvutę, ar į dokumento turinį.

Dabar kalbame apie dokumento galvutę, todėl pirmiausia pristatykime šį naudojimą.

Tokiu atveju noscriptžymoje gali būti tik kitos žymos:

  • link žymos
  • style žymos
  • meta žymos

pakeisti išteklius, kuriuos teikia puslapis, arba metainformaciją, jei scenarijai yra išjungti.

Šiame pavyzdyje nustatiau elementą su no-script-alertklase rodyti, jei scenarijai yra išjungti, kaip buvo display: nonepagal numatytuosius nustatymus:

   ...   .no-script-alert { display: block; }   ...  ...  

Išspręskime kitą atvejį: jei jis įdėtas į turinį, jame gali būti turinio, pvz., Pastraipų ir kitų žymų, kurios pateikiamos vartotojo sąsajoje.

linkžymė

linkTegus yra naudojamas nustatyti santykius tarp dokumento ir kitų išteklių.

Jis daugiausia naudojamas norint susieti išorinį CSS failą, kurį norite įkelti.

Šiame elemente nėra baigiamosios žymos.

Naudojimas:

   ...  ...  ...  

Šis mediaatributas leidžia įkelti įvairius stiliaus lapus, atsižvelgiant į įrenginio galimybes:

Taip pat galime susieti su kitais šaltiniais, išskyrus stiliaus lapus.

Pavyzdžiui, mes galime susieti RSS kanalą naudodami

Arba galime susieti favicon naudodami:

Ši žyma taip pat buvo naudojama kelių puslapių turiniui, norint nurodyti ankstesnį ir kitą puslapį naudojant rel="prev"ir rel="next". Daugiausia „Google“. Nuo 2019 m. „Google“ paskelbė daugiau nenaudojanti šios žymos, nes be jos gali rasti teisingą puslapio struktūrą.

styležymė

Ši žyma gali būti naudojama stiliams pridėti prie dokumento, o ne įkelti išorinį stiliaus lapą.

Naudojimas:

 .some-css {}  

Kaip ir su linkžyma, galite naudoti mediaatributą naudoti tą CSS tik nurodytoje terpėje:

 .some-css {}  

basežymė

Ši žyma naudojama nustatant visų santykinių URL, esančių puslapyje, pagrindinį URL.

   ...  ...  ...  

metažymė

Meta žymos atlieka įvairias užduotis ir jos yra labai labai svarbios.

Ypač SEO.

meta elementai turi tik pradinę žymą.

Pats paprasčiausias yra descriptionmetažyma:

Tai gali naudoti „Google“, kad sugeneruotų puslapio aprašymą savo rezultatų puslapiuose, jei mano, kad jis geriau apibūdina puslapį nei puslapio turinys (neklauskite, kaip).

charsetMeta žymeles yra naudojamas nustatyti puslapio koduotę. utf-8daugeliu atvejų:

robotsTag instruktuoja paieškos robotai ar indekso puslapio ar ne:

Arba, jei jie turėtų sekti nuorodas, ar ne:

Taip pat galite nustatyti nofollow atskirose nuorodose. Taip galite nustatyti nofollowvisame pasaulyje.

Galite juos sujungti:

Numatytasis elgesys yra index, follow.

Jūs galite naudoti kitas savybes, įskaitant nosnippet, noarchive, noimageindexir dar daugiau.

Taip pat galite tiesiog pasakyti „Google“, užuot taikę visus paieškos variklius:

Ir kitos paieškos sistemos gali turėti savo metažymą.

Kalbėdami apie tai, galime nurodyti „Google“ išjungti kai kurias funkcijas. Tai užkerta kelią vertimo funkcijoms paieškos variklio rezultatuose:

viewportMeta žymeles yra naudojamas pasakyti naršyklę nustatyti puslapio plotį remiantis prietaiso plotį.

Sužinokite daugiau apie šią žymą.

Kita gana populiari metažyma yra ta http-equiv="refresh". Ši eilutė nurodo naršyklei palaukti 3 sekundes, tada nukreipti į tą kitą puslapį:

Naudojant 0, o ne 3 bus peradresuota kuo greičiau.

Tai nėra išsami nuoroda; Yra ir kitų rečiau naudojamų metažymų.

Po šio dokumento antraštės įvado galime pradėti nerti į dokumento turinį.

DOKUMENTŲ KŪNAS

Po baigiamosios galvos žymos HTML dokumente galime turėti tik vieną dalyką: bodyelementą.

   ...   ...   

Kaip ir headir htmlžymes, bodyviename puslapyje galime turėti tik vieną žymą.

bodyŽymos viduje turime visas žymes, kurios apibrėžia puslapio turinį.

Techniškai pradžios ir pabaigos žymos yra neprivalomos. Bet manau, kad juos pridėti yra gera praktika. Tik dėl aiškumo.

Kituose skyriuose apibrėžsime žymių, kurias galite naudoti puslapio turinio viduje, įvairovę.

Bet prieš tai turime įvesti skirtumą tarp blokinių elementų ir įterptinių elementų.

Blokuoti elementus ir įterptinius elementus

Vaizdinius elementus, apibrėžtus puslapio tekste, paprastai galima suskirstyti į 2 kategorijas:

  • blokuoti elementus ( p,, divantraštės elementus, sąrašus ir sąrašo elementus, ...)
  • inline elementai ( a, span, img, ...)

Koks skirtumas?

Blokuoti elementai, kai jie yra puslapyje, neleidžia kitų elementų šalia jų. Kairėje arba dešinėje.

Įterptieji elementai gali sėdėti šalia kitų įterptųjų elementų.

Skirtumas slypi ir vizualinėse savybėse, kurias galime redaguoti naudodami CSS. Mes galime pakeisti bloko elementų plotį / aukštį, paraštę, užpildą ir kraštą. Negalime to padaryti įdėtais elementais.

Atkreipkite dėmesį, kad naudodami CSS galime pakeisti kiekvieno elemento numatytąjį nustatymą, nustatydami, kad pžyma būtų, pavyzdžiui, įterpta, arba a span- kaip blokinis elementas.

Kitas skirtumas yra tas, kad inline elementai gali būti blokų elementuose. Netiesa netiesa.

Kai kuriuose blokiniuose elementuose gali būti kitų blokinių elementų, tačiau tai priklauso. Pavyzdžiui, pžyma neleidžia tokios parinkties.

ŽYMĖS, SĄVEIKOS SU TEKSTU

pžymė

Ši žyma apibrėžia teksto pastraipą.

Some text

Tai blokinis elementas.

Jo viduje galime pridėti bet kokį mums patinkantį įterptinį elementą, patinkantį spanarba a.

Negalime pridėti blokinių elementų.

Mes negalime įdėti pelemento į kitą.

Pagal numatytuosius nustatymus naršyklės suformuluoja pastraipą su paraštėmis viršuje ir apačioje. 16px„Chrome“, bet tiksli vertė gali skirtis skirtingose ​​naršyklėse.

Dėl to dvi eilės iš eilės yra išdėstytos tarpusavyje, atkartojant tai, ką galvojame apie „pastraipą“ spausdintame tekste.

spanžymė

Tai yra tiesioginė žyma, kurią galima naudoti norint sukurti skyrių skyriuje, kurį galima taikyti naudojant CSS:

A part of the text and here another part

bržymė

Ši žyma reiškia eilutės pertrauką. Tai įterptasis elementas ir jam nereikia uždaromosios žymos.

Mes naudojame ją norėdami sukurti naują eilutę pžymos viduje , nekurdami naujos pastraipos.

Ir palyginus su naujos pastraipos kūrimu, ji neprideda papildomų tarpų.

Some text

A new line

Antraštės žymos

HTML suteikia mums 6 antraštės žymas. Nuo svarbiausia mažiausiai svarbus, mes turime h1, h2, h3, h4, h5, h6.

Paprastai puslapyje bus vienas h1elementas, tai yra puslapio pavadinimas. Tada, h2priklausomai nuo puslapio turinio, galite turėti vieną ar daugiau elementų.

Antraštės, ypač antraštės organizavimas, taip pat yra svarbios SEO, o paieškos sistemos jas naudoja įvairiai.

Pagal numatytuosius nustatymus naršyklė h1žymę padarys didesnę, o elementų dydis bus mažesnis, kai artimas skaičius hpadidės:

Visos antraštės yra blokiniai elementai. Juose negali būti kitų elementų, tik tekstas.

strongžymė

Ši žyma naudojama pažymėti jos viduje esantį tekstą kaip stiprų . Tai gana svarbu, tai ne vaizdinė, o semantinė užuomina. Priklausomai nuo naudojamos terpės, jos interpretacija skirsis.

Naršyklės pagal numatytuosius nustatymus paryškina šios žymos tekstą .

emžymė

Ši žyma naudojama pažymėti jos viduje esantį tekstą kaip pabrėžtą . Kaip ir su strong, tai ne vaizdinė užuomina, bet semantinė užuomina.

Naršyklės pagal numatytuosius nustatymus tekstą kuria šiuo kursyvu .

Citatos

blockquoteHTML tegus yra naudinga įterpti citatas tekste.

Naršyklės pagal numatytuosius nustatymus blockquoteelementui taiko paraštę . „Chrome“ taiko 40 taškų kairę ir dešinę bei 10 taškų viršutinę ir apatinę paraštes.

qHTML tegus yra naudojamas inline kabučių.

Horizontali linija

Iš tikrųjų nėra pagrįstas tekstu, tačiau hržyma dažnai naudojama puslapio viduje. Tai reiškia horizontal ruleir prideda horizontalią liniją puslapyje.

Naudinga atskirti puslapio skyrius.

Kodo blokai

codeŽymė yra ypač naudinga parodyti kodą, nes naršyklės suteikti jai Monospaced šriftą.

Paprastai tai yra vienintelis dalykas, kurį daro naršyklės. Tai CSS, kurią taiko „Chrome“:

code { font-family: monospace; } 

Ši žyma paprastai suvyniota į prežymą, nes codeelementas ignoruoja tarpą ir eilučių pertraukas. Patinka pžymė.

„Chrome“ suteikia prešį numatytąjį stilių:

pre { display: block; font-family: monospace; white-space: pre; margin: 1em 0px; } 

kuris apsaugo nuo baltosios erdvės griūties ir paverčia ją blokiniu elementu.

Sąrašai

Mes turime 3 tipų sąrašus:

  • nesutvarkyti sąrašai
  • užsakyti sąrašai
  • apibrėžimų sąrašai

Nesutvarkyti sąrašai kuriami naudojant ulžymą. Kiekvienas sąrašo elementas sukurtas su ližyma:


    
  • First
  • Second

Užsakyti sąrašai yra panašūs, tik sudaryti su olžyma:


    
  1. First
  2. Second

Skirtumas tarp jų yra tas, kad užsakytuose sąrašuose prieš kiekvieną elementą yra skaičius:

Apibrėžimų sąrašai yra šiek tiek kitokie. Turite terminą ir jo apibrėžimą:


    
Flavio
The name
Copes
The surname

Štai kaip naršyklės juos paprastai pateikia:

Turiu pasakyti, kad jūs retai juos matote laukinėje gamtoje, tikrai ne tiek ulir ol, bet kartais jie gali būti naudingi.

Kitos teksto žymos

Yra daug žymių, skirtų pristatymo tikslams:

  • markžymė
  • insžymė
  • delžymė
  • supžymė
  • subžymė
  • smallžymė
  • ižymė
  • bžymė

Tai yra jų vizualinio atvaizdavimo, kurį naršyklės taiko pagal numatytuosius nustatymus, pavyzdys:

Jums gali kilti klausimas, kuo bskiriasi nuo strong? Ir kuo iskiriasi nei em?

Skirtumas slypi semantinėje prasmėje. Nors bir iyra tiesioginė užuomina į naršyklę, kad teksto dalis būtų paryškinta arba kursyvu strongir emsuteiktų tekstui ypatingą reikšmę, o naršyklė turi suteikti stilių. Kas nutinka, yra visiškai tas pats, kas bir ipagal nutylėjimą. Nors tai galite pakeisti naudodami CSS.

Yra daugybė kitų, mažiau naudojamų žymių, susijusių su tekstu. Aš ką tik paminėjau tuos, kurie, manau, naudojami labiausiai.

NUORODOS

Nuorodos apibrėžiamos naudojant ažymą. Nuorodos paskirties vieta nustatoma per jos hrefatributą.

Pavyzdys:

click here 

Tarp pradžios ir pabaigos žymos turime nuorodos tekstą.

Ankstesnis pavyzdys yra absoliutus URL. Nuorodos taip pat veikia su santykiniais URL:

click here 

Tokiu atveju spustelėjus nuorodą vartotojas perkeliamas į /testdabartinės kilmės URL.

Būkite atsargūs su /personažu. Jei praleista, užuot pradėjusi nuo kilmės, naršyklė tiesiog pridės testeilutę prie dabartinio URL.

Pvz., Esu puslapyje //flaviocopes.com/axios/ir turiu šias nuorodas:

  • /test kartą spustelėjęs mane atveda //flaviocopes.com/test
  • test kartą spustelėjęs mane atveda //flaviocopes.com/axios/test

Nuorodų žymose gali būti ne tik tekstas, bet ir kiti dalykai. Pvz., Vaizdai:

ar bet kuriuos kitus elementus, išskyrus kitas žymes.

Jei norite atidaryti nuorodą naujame skirtuke, galite naudoti targetatributą:

open in new tab 

KONTEINERIO ŽYMOS IR PUSLAPIO STRUKTŪRA HTML

Konteinerių žymos

HTML pateikia sudėtinių rodinių žymų rinkinį. Tose žymose gali būti nenurodytas kitų žymų rinkinys.

Mes turime:

  • article
  • section
  • div

ir gali būti painu suprasti skirtumą tarp jų.

Pažiūrėkime, kada naudoti kiekvieną iš jų.

article

Straipsnio žymoje nurodomas dalykas, kuris gali būti nepriklausomas nuo kitų puslapio dalykų .

Pavyzdžiui, tinklaraščio įrašų sąrašas pagrindiniame puslapyje.

Arba nuorodų sąrašas.

A blog post

Read more

Another blog post

Read more

Mes neapsiribojame tik sąrašais: straipsnis gali būti pagrindinis puslapio elementas.

A blog post

Here is the content...

articleŽymos viduje turėtume turėti pavadinimą ( h1- h6) ir

section

Atstovauja dokumento skyrių. Kiekvienoje skiltyje yra antraštės žyma ( h1- h6), tada skyriaus turinys .

Pavyzdys:

A section of the page

...

Naudinga suskaidyti ilgą straipsnį į skirtingas dalis .

Neturėtų būti naudojamas kaip bendras konteinerio elementas. divtam yra sukurta.

div

div yra bendras konteinerio elementas:

 ... 

Prie šio elemento dažnai pridedate classarba idatributą, kad jį būtų galima stilizuoti naudojant CSS.

Mes naudojame divbet kurioje vietoje, kur mums reikalingas konteineris, tačiau esamos žymos netinka.

Žymos, susijusios su puslapiu

nav

Ši žyma naudojama kuriant žymėjimą, apibrėžiantį puslapio naršymą. Į tai mes paprastai įtraukiame ularba olsąrašą:


    
  1. Home
  2. Blog

aside

asideTegus yra naudojamas pridėti turinį, kuris yra susijęs su pagrindinio turinio gabalas.

Pavyzdžiui, langelis, kuriame galite pridėti citatą. Arba šoninė juosta.

Pavyzdys:

some text..

A quote..

other text...

Naudojimas asideyra signalas, kad jame esantys daiktai nėra įprasto skyriaus, kuriame jis gyvena, srautas.

header

headerŽyma atstovauja puslapio, yra įvadas dalį. Pavyzdžiui, jame gali būti viena ar daugiau antraštės žymų ( h1- h6), straipsnio žymos eilutė, vaizdas.

Article title

...

main

mainŽyma atstovauja didžiąją dalį puslapio:

 ....  

....

footer

footerTegus yra naudojamas siekiant nustatyti straipsnį, ar puslapio apačią poraštės:

 ....  

Footer notes..

FORMOS

Formos yra būdas, kuriuo galite bendrauti su puslapiu ar programa, sukurta naudojant žiniatinklio technologijas.

Turite valdiklių rinkinį, o kai pateikiate formą spustelėdami mygtuką „Pateikti“ arba programiškai, naršyklė nusiųs duomenis į serverį.

Pagal numatytuosius nustatymus siunčiant duomenis, puslapis iš naujo įkeliamas, tačiau naudodami „JavaScript“ galite pakeisti šį elgesį (nepaaiškinsite, kaip šioje knygoje).

Forma sukuriama naudojant formžymą:

 ...  

Pagal numatytuosius nustatymus formos pateikiamos naudojant GET HTTP metodą. Kuris turi savo trūkumų, ir dažniausiai norite naudoti POST.

Galite nustatyti formą naudoti POST, kai ji pateikiama, naudojant methodatributą:

 ...  

Forma pateikiama naudojant GET arba POST tam pačiam URL, kuriame ji yra.

Taigi, jei forma yra //flaviocopes.com/contactspuslapyje, paspaudus mygtuką „Pateikti“, bus pateikta užklausa tam pačiam URL.

Dėl to gali nieko nevykti.

Norėdami tvarkyti užklausą, jums reikia kažko serverio pusės, ir paprastai jūs „klausote“, kaip tos formos pateikia įvykius tam skirtu URL.

URL galite nurodyti naudodami actionparametrą:

 ...  

Tai paskatins naršyklę formos duomenis per POST /new-contactpateikti tos pačios kilmės URL.

Jei kilmė (protokolas + domenas + prievadas) yra //flaviocopes.com(numatytasis 80 prievadas), tai reiškia, kad formos duomenys bus siunčiami //flaviocopes.com/new-contact.

Aš kalbėjau apie duomenis. Kurie duomenys?

Duomenis vartotojai teikia naudodamiesi valdiklių rinkiniu, kuris yra prieinamas interneto platformoje:

  • įvesties laukeliai (vienos eilutės tekstas)
  • teksto sritys (kelių eilučių tekstas)
  • pažymėti langelius (išskleidžiamajame meniu pasirinkite vieną parinktį)
  • radijo mygtukai (pasirinkite vieną parinktį iš visada matomo sąrašo)
  • žymės langeliai (pasirinkite nulį, vieną ar daugiau parinkčių)
  • failų įkėlimai
  • ir dar!

Pateikime kiekvieną iš jų toliau pateiktoje formos laukų apžvalgoje.

inputžymė

inputLaukas yra vienas iš plačiausiai naudojamų formos elementų. Tai taip pat labai universalus elementas, kuris gali visiškai pakeisti elgesį, pagrįstą typeatributu.

Numatytasis elgesys yra vienos eilutės teksto įvesties valdiklis:

Prilygsta naudojimui:

Kaip ir visuose kituose laukuose, turite suteikti laukui pavadinimą, kad jo turinys būtų išsiųstas į serverį, kai pateikiama forma:

placeholderAtributas naudojamas turėti kokį nors tekstą rodomi, šviesiai pilka spalva, kai laukas yra tuščias. Naudinga pridėti naudotojui užuominą, ką įvesti:

El

Naudojant type="email"bus patvirtinta kliento pusės (naršyklėje) el. Laiško teisingumas (semantinis teisingumas, neužtikrinant el. Pašto adreso egzistavimo) prieš pateikiant.

Slaptažodis

Naudojant type="password"kiekvienas įvestas raktas bus rodomas kaip žvaigždutė (*) arba taškas, naudingas laukams, kuriuose yra slaptažodis.

Skaičiai

Galite leisti įvesties elementui priimti tik skaičius:

Galite nurodyti priimtiną mažiausią ir didžiausią vertę:

Šis stepatributas padeda nustatyti skirtingų reikšmių žingsnius. Pvz., Atliekant 5 veiksmus priimama vertė nuo 10 iki 50:

Paslėptas laukas

Laukai gali būti paslėpti nuo vartotojo. Jie vis tiek bus išsiųsti į serverį pateikus formą:

Tai paprastai naudojama tokioms vertėms kaip CSRF prieigos raktas, saugumui ir vartotojo identifikavimui ar net šlamštą siunčiantiems robotams aptikti naudojant specialias technikas.

Jis taip pat gali būti naudojamas tik formai ir jos veiksmams nustatyti.

Numatytosios vertės nustatymas

Visi šie laukai priima iš anksto nustatytą vertę. Jei vartotojas jo nepakeis, tai bus serveriui siunčiama vertė:

Jei nustatysite vietos rezervavimo ženklą, ši vertė bus rodoma, jei vartotojas išvalys įvesties lauko vertę:

Pateikti formą

type="submit"Laukas yra mygtukas, kuris, kai paspaudžiamas vartotojas, pateikia formą:

valueAtributas nustato tekstą ant mygtuko, kuris, jei trūksta šou "Pateikti" tekstas:

Formos patvirtinimas

Naršyklės teikia kliento pusės patvirtinimo formas formoms.

Galite nustatyti laukus pagal poreikį, užtikrindami, kad jie būtų užpildyti, ir pritaikyti konkretų kiekvieno lauko įvesties formatą.

Pažiūrėkime abu variantus.

Nustatykite laukus, kaip reikalaujama

Šis requiredatributas padeda jums patvirtinti. Jei laukas nenustatytas, nepavyksta patikrinti kliento pusės ir naršyklė nepateikia formos:

Įgyvendinti konkretų formatą

Aš aprašiau type="email"lauką aukščiau. Jis automatiškai patvirtina el. Pašto adresą pagal specifikacijoje nustatytą formatą.

Lauke type="number"paminėjau minir maxatributą ribinėms vertėms, įvestoms į intervalą.

Galite padaryti daugiau.

Bet kuriame lauke galite pritaikyti konkretų formatą.

Šis patternatributas suteikia galimybę nustatyti reguliarią išraišką, kad būtų galima patvirtinti vertę.

Rekomenduoju perskaityti „Reguliariųjų reiškinių vadovą“ šiuo adresu: flaviocopes.com/javascript- regular-expressions/.

modelis = "//.*"

Kiti laukai

Failų įkėlimas

Galite įkelti failus iš vietinio kompiuterio ir siųsti juos į serverį naudodami type="file"įvesties elementą:

Galite pridėti kelis failus:

Naudodami acceptatributą galite nurodyti vieną ar kelis leidžiamus failų tipus . Tai priima vaizdus:

Galite naudoti konkretų MIME tipą, pvz., application/jsonArba nustatyti failo plėtinį .pdf. Arba nustatykite kelis failų plėtinius, pavyzdžiui:

Mygtukai

Į type="button"įvesties laukai gali būti naudojamas pridėti papildomų mygtukus formos, kurios nėra pateikiate mygtukus:

Jie naudojami programiškai ką nors daryti, naudojant „JavaScript“.

Yra specialus laukas, pateiktas kaip mygtukas, kurio specialus veiksmas yra išvalyti visą formą ir grąžinti laukų būseną į pradinę:

Radijo mygtukai

Radijo mygtukai naudojami kuriant pasirinkimų rinkinį, iš kurių vienas paspaudžiamas, o visi kiti išjungiami.

Šis pavadinimas kilęs iš senų automobilių radijo imtuvų, kurie turėjo tokią sąsają.

Apibrėžiate type="radio"įvesties rinkinį , visi su tuo pačiu nameatributu ir skirtingu valueatributu:

Pateikus formą, colorduomenų ypatybė turės vieną vertę.

Visada yra patikrintas vienas elementas. Pirmasis elementas yra tas, kuris tikrinamas pagal numatytuosius nustatymus.

Iš anksto pasirinktą vertę galite nustatyti naudodami checkedatributą. Kiekvienoje radijo įvesties grupėje galite naudoti tik vieną kartą.

Pažymėkite langelius

Panaši į radijo dėžutes, tačiau jomis galima pasirinkti kelias vertes arba jų iš viso nėra.

Apibrėžiate type="checkbox"įvesties rinkinį , visi su tuo pačiu nameatributu ir skirtingu valueatributu:

Visi šie žymimieji laukeliai bus pažymėti pagal numatytuosius nustatymus. Norėdami checkedįgalinti juos įkeliant puslapį, naudokite atributą.

Kadangi šiame įvesties lauke leidžiamos kelios vertės, pateikiant formą, vertė (-os) bus siunčiama į serverį kaip masyvas.

Data ir laikas

Datos reikšmėms priimti turime keletą įvesties tipų.

type="date"Įvesties laukas leidžia vartotojui įvesti datą ir rodo datą krautuvai, jei reikia:

type="time"Įvesties laukas leidžia vartotojui įvesti laiką, ir rodo laiką krautuvai, jei reikia:

type="month"Įvesties laukas leidžia vartotojui įvesti per mėnesį ir per metus:

type="week"Įvesties laukas leidžia vartotojui įvesti per savaitę ir per metus:

Visi šie laukai leidžia apriboti intervalą ir žingsnį tarp kiekvienos vertės. Rekomenduoju patikrinti MDN, kad būtų pateikta nedidelė informacija apie jų naudojimą.

type="datetime-local"Laukas leidžia Jums pasirinkti datą ir laiką.

Čia yra puslapis, kuriame galite išbandyti juos visus: //codepen.io/flaviocopes/pen/ZdWQPm

Spalvų rinkiklis

Galite leisti vartotojams pasirinkti spalvą naudodami type="color"elementą:

Numatytąją vertę nustatote naudodami valueatributą:

Naršyklė pasirūpins, kad vartotojui būtų rodomas spalvų rinkiklis.

diapazonas

Šis įvesties elementas rodo slankiklį. Žmonės gali ją naudoti norėdami pereiti nuo pradinės vertės prie pabaigos vertės:

Galite pateikti pasirenkamą veiksmą:

Telefonas

type="tel"Įvesties laukas naudojamas įvesti telefono numeris:

Pagrindinis „ telover over“ pardavimo taškas textyra mobilusis, kur įrenginys gali pasirinkti rodyti skaitinę klaviatūrą.

Nurodykite patternpapildomo patvirtinimo atributą:

URL

type="url"Laukas naudojamas įvesti URL.

Galite patvirtinti naudodami patternatributą:

textareažymė

Šis textareaelementas leidžia vartotojams įvesti kelių eilučių tekstą. Palyginti su input, tam reikia pabaigos žymos:

Matmenis galite nustatyti naudodami CSS, taip pat naudodami rowsir colsatributus:

Kaip ir kitose formos žymose, nameatributas nustato serveriui siunčiamų duomenų pavadinimą:

selectžymė

Ši žyma naudojama kuriant išskleidžiamąjį meniu.

Vartotojas gali pasirinkti vieną iš galimų variantų.

Kiekviena parinktis sukurta naudojant optionžymą. Prie pasirinkto pridedate pavadinimą ir kiekvienos parinkties vertę:

 Red Yellow  

Galite nustatyti, kad parinktis būtų išjungta:

 Red Yellow  

Galite turėti vieną tuščią parinktį:

 None Red Yellow  

Parinktis galima sugrupuoti naudojant optgroupžymą. Kiekvienoje parinkčių grupėje yra labelatributas:

  Red Yellow Blue   Green Pink   

LENTELĖS

Pirmosiomis dienomis interneto lentelės buvo labai svarbi kuriant maketus.

Vėliau juos pakeitė CSS ir jo išdėstymo galimybės, o šiandien mes turime galingus įrankius, tokius kaip CSS Flexbox ir CSS Grid, kad sukurtume maketus. Lentelės dabar naudojamos tik spėlioti ką, statant stalus!

tabležymė

Lentelę apibrėžiate naudodami tabležymą:


    

Lentelės viduje mes apibrėžsime duomenis. Mes samprotaujame eilučių atžvilgiu, o tai reiškia, kad eilutes įtraukiame į lentelę (ne stulpelius). Mes apibrėžsime stulpelius eilutės viduje.

Eilutės

Eilutė pridedama naudojant tržymą, ir tai yra vienintelis dalykas, kurį galime pridėti prie tableelemento:


    

Tai lentelė su 3 eilėmis.

Pirmoji eilutė gali atlikti antraštės vaidmenį.

Stulpelių antraštės

Lentelės antraštėje yra stulpelio pavadinimas, paprastai paryškintu šriftu.

Pagalvokite apie „Excel“ / „Google“ skaičiuoklių dokumentą. Viršutinė A-B-C-D...antraštė.

Antraštę apibrėžiame naudodami thžymą:


    
Column 1 Column 2 Column 3

Lentelės turinys

Lentelės turinys apibrėžiamas naudojant tdžymes kituose trelementuose:


    
Column 1 Column 2 Column 3
Row 1 Column 1 Row 1 Column 2 Row 1 Column 3
Row 2 Column 1 Row 2 Column 2 Row 2 Column 3

Jei nepridedate jokio CSS stiliaus, naršyklės tai pateikia:

Pridedant šį CSS:

th, td { padding: 10px; border: 1px solid #333; } 

stalas atrodo labiau kaip tinkamas stalas:

Apimtos kolonos ir eilės

Eilutė gali nuspręsti apimti 2 ar daugiau stulpelių, naudodama colspanatributą:


    
Column 1 Column 2 Column 3
Row 1 Columns 1-2 Row 1 Column 3
Row 2 Columns 1-3

Arba jis gali apimti 2 ar daugiau eilučių, naudojant rowspanatributą:


    
Column 1 Column 2 Column 3
Rows 1-2 Columns 1-2 Row 1 Column 3
Row 2 Column 3

Eilučių antraštės

Prieš paaiškindamas, kaip galite turėti stulpelių antraštes, naudodamas thžymą pirmoje trlentelės žymoje.

Norėdami pridėti eilutės antraštes, galite pridėti thžymą kaip pirmąjį elementą, trkuris nėra trlentelės pirmasis :


    
Column 2 Column 3
Row 1 Col 2 Col 3
Row 2 Col 2 Col 3

Daugiau žymų lentelei sutvarkyti

Galite pridėti dar 3 žymas į lentelę, kad ji būtų tvarkingesnė.

Tai geriausia, kai naudojami dideli stalai. Taip pat tinkamai apibrėžti antraštę ir poraštę.

Tos žymos yra

  • thead
  • tbody
  • tfoot

Jie suvynioja tržymas, kad aiškiai apibrėžtų skirtingus lentelės skyrius. Štai pavyzdys:


    
Column 2 Column 3
Row 1 Col 2 Col 3
Row 2 Col 2 Col 3
Footer of Col 1 Footer of Col 2

Lentelės antraštė

Lentelėje turėtų būti captionžyma, apibūdinanti jos turinį. Ta žyma turėtų būti dedama iškart po pradine tabležyma:


    
      Dogs age 
     
Dog Age
Roger 7

MULTIMEDIJOS ŽYMĖS: AUDIOIRVIDEO

Šiame skyriuje noriu parodyti jums audioir videožymas.

audiožymė

Ši žyma leidžia įterpti garso turinį į HTML puslapius.

Šis elementas gali transliuoti garsą, galbūt naudodamas mikrofoną getUserMedia(), arba gali groti garso šaltinį, į kurį nurodote naudodamas srcatributą:

Pagal numatytuosius nustatymus naršyklė nerodo jokių šio elemento valdiklių. Tai reiškia, kad garsas bus leidžiamas tik tuo atveju, jei bus nustatytas automatinis atkūrimas (daugiau apie tai vėliau) ir vartotojas nematys, kaip jį sustabdyti, valdyti garsumą ar judėti per takelį.

Norėdami parodyti įmontuotus valdiklius, galite pridėti controlsatributą:

Valdikliai gali turėti pritaikytą odą.

Naudodami typeatributą galite nurodyti garso failo MIME tipą . Jei nenustatyta, naršyklė bandys automatiškai nustatyti:

Garso failas pagal numatytuosius nustatymus neatkuriamas automatiškai. Pridėkite autoplayatributą, kad garsas būtų leidžiamas automatiškai:

Pastaba: mobiliosios naršyklės neleidžia automatiškai paleisti

loopAtributas paleidžiamas garso žaisti 0:00, jei nustatyti; priešingu atveju, jei jo nėra, garsas sustoja failo pabaigoje:

Taip pat galite atkurti garso failą, nutildytą naudojant mutedatributą (nesate tikri, koks tai naudingas):

Naudodami „JavaScript“ galite klausytis įvairių įvykių, vykstančių ant audioelemento, iš kurių pagrindiniai yra šie:

  • play kai failas pradedamas leisti
  • pause kai garso atkūrimas buvo pristabdytas
  • playing kai garsas atnaujinamas po pauzės
  • ended kai buvo pasiektas garso failo galas

videožymė

Ši žyma leidžia įterpti vaizdo įrašų turinį į HTML puslapius.

Šis elementas gali transliuoti vaizdo, naudojant kamerą per getUserMedia()arba WebRTC , arba ji gali vaidinti vaizdo šaltinį, kurį pagalbos naudojant srcatributą:

Pagal numatytuosius nustatymus naršyklėje nerodomi jokie šio elemento valdikliai, tik vaizdo įrašas.

Tai reiškia, kad vaizdo įrašas bus leidžiamas tik tuo atveju, jei bus nustatytas automatinis atkūrimas (apie tai vėliau) ir vartotojas nematys, kaip jį sustabdyti, pristabdyti, valdyti garsumą ar praleisti į tam tikrą vaizdo įrašo vietą.

Norėdami parodyti įmontuotus valdiklius, galite pridėti controlsatributą:

Valdikliai gali turėti pritaikytą odą.

Naudodami typeatributą galite nurodyti vaizdo įrašo failo MIME tipą . Jei nenustatyta, naršyklė bandys automatiškai nustatyti:

Vaizdo failas pagal numatytuosius nustatymus nėra atkuriamas automatiškai. Jei autoplaynorite automatiškai paleisti vaizdo įrašą, pridėkite atributą:

Kai kurioms naršyklėms taip pat reikalingas mutedatributas, kad būtų galima automatiškai paleisti. Vaizdo įrašas automatiškai rodomas tik nutildžius:

loopAtributas paleidžiamas vaizdo žaisti 0:00, jei neįtvirtinti; priešingu atveju, jei jo nėra, vaizdo įrašas sustabdomas failo pabaigoje:

Galite nustatyti, kad vaizdas būtų plakato vaizdas:

Jei jo nebus, naršyklė parodys pirmąjį vaizdo įrašo kadrą, kai tik jis bus pasiekiamas.

Galite nustatyti widthir heightatributus, kad nustatytumėte vietą, kurią užims elementas, kad naršyklė galėtų ją atsiskaityti ir, pakeitus išdėstymą, ji nekeistų. Tam reikalinga skaitinė vertė, išreikšta pikseliais.

Naudodami „JavaScript“ galite klausytis įvairių įvykių, vykstančių ant videoelemento, iš kurių pagrindiniai yra šie:

  • play kai failas pradedamas leisti
  • pause kai vaizdo įrašas buvo pristabdytas
  • playing kai vaizdo įrašas atnaujinamas iš pauzės
  • ended kai buvo pasiekta vaizdo failo pabaiga

IFRAMAI

iframeŽyma leidžia mums įdėti turinį iš kitos kilmės (kitas svetaines) į mūsų tinklalapį.

Techniškai „iframe“ sukuria naują įdėtą naršymo kontekstą. Tai reiškia, kad viskas, kas yra „iframe“, netrukdo pagrindiniam puslapiui ir atvirkščiai. „JavaScript“ ir CSS „neteka“ į / iš „iframe“.

Daugelis svetainių naudoja „iframe“, kad atliktų įvairius dalykus. Jums gali būti žinomos „Codepen“, „Glitch“ ar kitos svetainės, leidžiančios koduoti vienoje puslapio dalyje, o rezultatą matote laukelyje. Tai yra „iframe“.

Kuriate vieną tokiu būdu:

Taip pat galite įkelti absoliutų URL:

Galite nustatyti pločio ir aukščio parametrų rinkinį (arba nustatyti juos naudodami CSS), kitaip „iframe“ naudos numatytuosius nustatymus, langelį 300x150 taškų:

Srcdoc

Šis srcdocatributas leidžia nurodyti rodomą eilutinį HTML. Tai alternatyva src, tačiau naujausia ir nepalaikoma „Edge 18“ ir žemesnėse versijose bei „IE“:

Smėlio dėžė

Šis sandboxatributas leidžia mums apriboti „iframe“ leidžiamas operacijas.

Jei jo nepaisome, viskas leidžiama:

Jei jį nustatysime į „“, nieko nebus leidžiama:

Pridėdami parinktis sandboxatribute galime pasirinkti, ką leisti . Galite leisti kelis, pridedant tarpą tarp jų. Čia pateiktas neišsamus naudojamų parinkčių sąrašas:

  • allow-forms: leisti pateikti formas
  • allow-modalsleisti atidaryti modalų langus, įskaitant skambinimą alert()„JavaScript“
  • allow-orientation-lock leisti užrakinti ekrano orientaciją
  • allow-popupsleisti iššokančiuosius langus, naudojimą window.open()ir target="_blank"nuorodas
  • allow-same-origin traktuokite kraunamą išteklių kaip tos pačios kilmės
  • allow-scripts leidžia įkeltiems „iframe“ paleisti scenarijus (bet nesukuria iššokančiųjų langų).
  • allow-top-navigation suteikia prieigą prie „iframe“ aukščiausio lygio naršymo kontekste

Leisti

Šiuo metu tai yra eksperimentinė ir palaikoma tik „Chromium“ pagrindu sukurtų naršyklių, tai yra resursų bendrinimo tarp pagrindinio lango ir „iframe“ ateitis.

Jis panašus į sandboxatributą, tačiau leidžia mums leisti konkrečias funkcijas, įskaitant:

  • accelerometer suteikia prieigą prie „Sensors API“ akselerometro sąsajos
  • ambient-light-sensor suteikia prieigą prie jutiklių API „AmbientLightSensor“ sąsajos
  • autoplay leidžia automatiškai paleisti vaizdo ir garso failus
  • camera leidžia pasiekti kamerą iš „getUserMedia“ API
  • display-capture leidžia pasiekti ekrano turinį naudojant „getDisplayMedia“ API
  • fullscreen leidžia pasiekti viso ekrano režimą
  • geolocation leidžia pasiekti Geolocation API
  • gyroscope suteikia prieigą prie jutiklių API giroskopo sąsajos
  • magnetometer suteikia prieigą prie jutiklių API magnetometro sąsajos
  • microphone suteikia prieigą prie įrenginio mikrofono naudojant „getUserMedia“ API
  • midi leidžia pasiekti žiniatinklio MIDI API
  • payment suteikia prieigą prie mokėjimo užklausos API
  • speaker leidžia pasiekti garso įrašą per įrenginio garsiakalbius
  • usb suteikia prieigą prie „WebUSB“ API.
  • vibrate suteikia prieigą prie vibracijos API
  • vr suteikia prieigą prie „WebVR“ API

Persiuntėjas

Įkeliant „iframe“, naršyklė jam siunčia svarbią informaciją apie tai, kas jį įkelia Refererantraštėje (atkreipkite dėmesį į singlą r, rašybos klaidą, su kuria turime gyventi).

Netinkama persiuntimo klaida atsirado iš pirminio informatiko Phillipo Hallam-Bakerio pasiūlymo įtraukti lauką į HTTP specifikaciją. Netaisyklinga rašyba buvo užmūryta tuo metu, kai ji buvo įtraukta į „Request for Comments“ standartų dokumentą RFC 1945

Šis referrerpolicyatributas leidžia mums nustatyti persiuntėją siųsti į „iframe“, kai jį įkeliame. Persiuntėjas yra HTTP antraštė, leidžianti puslapiui žinoti, kas ją įkelia. Tai yra leidžiamos vertės:

  • no-referrer-when-downgrade tai yra numatytasis nustatymas ir siuntėjo nesiunčia, kai dabartinis puslapis įkeliamas per HTTPS, o „iframe“ įkeliamas į HTTP protokolą
  • no-referrer nesiunčia persiuntimo antraštės
  • origin siunčiamas persiuntėjas ir jame yra tik kilmė (prievadas, protokolas, domenas), o ne pradžia + kelias, kuris yra numatytasis
  • origin-when-cross-originkraunant iš tos pačios kilmės (prievado, protokolo, domeno) į „iframe“, persiuntėjas siunčiamas visa forma (kilmė + kelias). Kitu atveju siunčiama tik kilmė
  • same-origin persiuntėjas siunčiamas tik įkeliant iš tos pačios kilmės (prievado, protokolo, domeno) į „iframe“
  • strict-originsiunčia kilmę kaip persiuntėją, jei dabartinis puslapis yra įkeliamas per HTTPS, o „iframe“ taip pat įkeliamas į HTTPS protokolą. Nieko nesiunčia, jei „iframe“ yra įkeltas per HTTP
  • strict-origin-when-cross-originsiunčia kilmę + kelią kaip persiuntėjas dirbdamas su ta pačia kilme. Siunčia kilmę kaip persiuntėją, jei dabartinis puslapis yra įkeliamas per HTTPS, o „iframe“ taip pat įkeliamas į HTTPS protokolą. Nieko nesiunčia, jei „iframe“ yra įkeltas per HTTP
  • unsafe-url: siunčia origą + kelią kaip persiuntėją, net kai kraunate išteklius iš HTTP, o dabartinis puslapis įkeliamas per HTTPS

VAIZDAI

Vaizdus galima rodyti naudojant imgžymą.

Ši žyma priima srcatributą, kurį naudojame norėdami nustatyti vaizdo šaltinį:

Galime naudoti platų vaizdų rinkinį. Labiausiai paplitę yra PNG, JPEG, GIF, SVG ir visai neseniai „WebP“.

HTML standartas reikalauja altatributo, kuris apibūdintų vaizdą. Tai naudoja ekrano skaitytuvai ir paieškos sistemų robotai:

Galite nustatyti widthir heightatributus, kad nustatytumėte vietą, kurią užims elementas, kad naršyklė galėtų ją atsiskaityti ir, kai jis bus visiškai įkeltas, jis nekeis išdėstymo. Tam reikalinga skaitinė vertė, išreikšta pikseliais.

figurežymė

figureŽyma dažnai naudojamas kartu su imgžyma.

figureyra semantinė žyma, dažnai naudojama, kai norite rodyti vaizdą su antrašte. Jūs jį naudojate taip:

 A nice dog  

figcaptionŽymė apsiaustas subtitrų tekstą.

Interaktyvūs vaizdai naudojant srcset

Šis srcsetatributas leidžia nustatyti interaktyvius vaizdus, ​​kuriuos naršyklė gali naudoti, atsižvelgdama į pikselių tankį ar lango plotį, pagal jūsų pageidavimus. Tokiu būdu jis gali atsisiųsti išteklius, kurių reikia puslapiui pateikti, be didesnio vaizdo, jei jis yra, pavyzdžiui, mobiliajame įrenginyje.

Štai pavyzdys, kuriame pateikiame 4 papildomus 4 skirtingų dydžių vaizdus:

Į srcsetmes naudojame wpriemonę nurodyti lango plotį.

Kadangi taip darome, turime naudoti ir sizesatributą:

Šiame pavyzdyje atributo (max-width: 500px) 100vw, (max-width: 900px) 50vw, 800pxeilutė sizesapibūdina vaizdo dydį, palyginti su peržiūros sritimi, su keliomis sąlygomis, atskirtomis kabliataškiu.

Laikmenos sąlyga max-width: 500pxnustato vaizdo dydį, atsižvelgiant į peržiūros srities plotį. Trumpai tariant, jei lango dydis yra <500 taškų, jis vaizdą atvaizduoja 100% lango dydžio.

Jei lango dydis yra didesnis, bet < 900px, vaizdas atvaizduojamas 50% lango dydžio.

Ir jei dar didesnis, vaizdas atvaizduojamas 800 taškų.

Matavimo vwvienetas gali būti naujas jums, ir trumpai tariant, galime pasakyti, kad 1 vwyra 1% lango pločio, taigi 100vwir 100% lango pločio.

Naudinga svetainė, kurianti srcsetvis mažesnius vaizdus, ​​yra //responsivebreakpoints.com/.

picturežymė

HTML taip pat suteikia mums picturežymą, kuri atlieka labai panašų darbą srcset, o skirtumai yra labai subtilūs.

Jūs naudojate, picturekai užuot teikę tik mažesnę failo versiją, norite ją visiškai pakeisti. Arba pateikite kitą vaizdo formatą.

Geriausias naudojimo atvejis, kurį radau, yra aptarnaujant „WebP“ vaizdą, kuris vis dar nėra plačiai palaikomas formatas. Į picturežyma galite nurodyti vaizdų sąrašą, ir jie bus naudojami tam, todėl į kitą, pavyzdžiui, naršyklės, kad parama WebP naudosime pirmąjį įvaizdį, ir atsarginis į JPG, jei ne:

sourceŽymė apibrėžia vieną (ar daugiau) formatus vaizdų. imgŽymė yra atsarginis jei naršyklė yra labai senas ir nepalaiko picturetag.

sourceViduje esančioje žymoje picturegalite pridėti mediaatributą, kad nustatytumėte medijos užklausas.

Pavyzdys, kuris seka tam tikrais atvejais, veikia kaip ir anksčiau pateiktas pavyzdys srcset:

Bet tai nėra jo naudojimo atvejis, nes, kaip matote, jis yra daug kalbesnis.

pictureTag neseniai, tačiau dabar remia visų pagrindinių naršyklių, išskyrus Opera Mini ir IE (visas versijas).

PRIEINAMUMAS

Svarbu, kad HTML sukurtume atsižvelgdami į prieinamumą.

Turimas prieinamas HTML reiškia, kad žmonės su negalia gali naudotis žiniatinkliu. Yra visiškai aklų ar silpnaregių vartotojų, žmonių, turinčių klausos sutrikimų ir daugybės kitų neįgaliųjų.

Deja, ši tema neturi reikiamos svarbos ir neatrodo tokia šauni kaip kitos.

Ką daryti, jei žmogus nemato jūsų puslapio, bet vis tiek nori sunaudoti jo turinį? Pirma, kaip jie tai daro? Jie negali naudoti pelės, jie naudojasi ekrano skaitytuvu . To nereikia įsivaizduoti. Galite išbandyti dabar: „Google“ teikia nemokamą „ChromeVox Chrome“ plėtinį. Prieinamumas taip pat turi pasirūpinti, kad įrankiai galėtų lengvai pasirinkti elementus arba naršyti puslapiuose.

Tinklalapiai ir žiniatinklio programos ne visada kuriami pritaikant prieinamumą kaip vieną iš pirmųjų jų tikslų, o galbūt 1 versija išleidžiama neprieinama, tačiau tai įmanoma padaryti tinklalapį pasiekiamą. Anksčiau yra geriau, bet niekada nevėlu.

Tai svarbu ir mano šalyje vyriausybės ar kitų visuomeninių organizacijų sukurtos svetainės turi būti prieinamos.

Ką tai reiškia padaryti HTML prieinamą? Leiskite iliustruoti pagrindinius dalykus, apie kuriuos turite galvoti.

Pastaba: reikia atkreipti dėmesį į keletą kitų dalykų, kurie gali būti įtraukti į CSS temą, pvz., Spalvos, kontrastas ir šriftai. Arba kaip padaryti, kad SVG vaizdai būtų prieinami. Čia apie juos nekalbu.

Naudokite semantinį HTML

Semantinis HTML yra labai svarbus ir tai yra vienas iš pagrindinių dalykų, kuriais turite pasirūpinti. Leiskite man parodyti kelis įprastus scenarijus.

Svarbu naudoti teisingą antraštės žymų struktūrą. Svarbiausia h1, ir jūs naudojate didesnius skaičius mažiau svarbiems, tačiau visos to paties lygio antraštės turėtų turėti tą pačią reikšmę (pagalvokite apie tai kaip apie medžio struktūrą)

h1 h2 h3 h2 h2 h3 h4 

Naudokite strongir emvietoj bir i. Vizualiai jie atrodo vienodi, tačiau pirmieji 2 turi daugiau reikšmės. bir iyra daugiau vaizdinių elementų.

Sąrašai yra svarbūs. Ekrano skaitytuvas gali aptikti sąrašą ir pateikti apžvalgą, tada leisti vartotojui pasirinkti patekti į sąrašą.

Lentelėje turėtų būti captionžyma, apibūdinanti jos turinį:


    
      Dogs age 
     
Dog Age
Roger 7

altVaizdams naudokite atributus

Visuose vaizduose turi būti altžyma, apibūdinanti vaizdo turinį. Tai nėra tik gera praktika, to reikalauja HTML standartas, o jūsų HTML nėra patvirtintas.

Tai taip pat naudinga paieškos sistemoms, jei tai yra paskata jums ją pridėti.

Naudokite roleatributą

Šis roleatributas leidžia priskirti konkrečius vaidmenis įvairiems jūsų puslapio elementams.

Galite priskirti daug skirtingų vaidmenų: papildomą, sąrašą, sąrašo elementą, pagrindinį, naršymą, regioną, skirtuką, įspėjimą, programą, straipsnį, reklamjuostę, mygtuką, langelį, žymimąjį laukelį, „contentinfo“, dialogo langą, dokumentą, informacijos santrauką, paveikslą, formą, tinklelį, tinklelis, antraštė, img, sąrašo laukelis, eilutė, eilučių grupė, paieška, jungiklis, lentelė, skirtukas, teksto laukelis, laikmatis.

Tai labai daug ir, norėdami išsamiai susipažinti su kiekvienu iš jų, pateikiu jums šią MDN nuorodą. Bet jums nereikia priskirti vaidmens kiekvienam puslapio elementui. Ekrano skaitytuvai daugeliu atvejų gali daryti išvadą iš HTML žymos. Pavyzdžiui, jums nereikia pridėti vaidmens žymos prie semantinių žymų, pvz nav. button, form.

Paimkime navžymos pavyzdį. Galite jį naudoti norėdami apibrėžti puslapio naršymą taip:


    
  • Home
  • Blog

Jei būtumėte priversti naudoti divžymą, o ne nav, naudotumėte navigationvaidmenį:


    
  • Home
  • Blog

Taigi čia jūs gavote praktinį pavyzdį: rolenaudojamas reikšmingai vertei priskirti, kai žyma jau nepateikia prasmės.

Naudokite tabindexatributą

Šis tabindexatributas leidžia pakeisti tvarką, kaip paspaudus klavišą Tab pasirenkami „pasirenkami“ elementai. Pagal numatytuosius nustatymus tik nuorodas ir formos elementus galima „pasirinkti“ naršant naudojant klavišą Tab (ir jų nereikia nustatyti tabindex).

Pridėjus tabindex="0"elementą galima pasirinkti:

 ... 

Naudojant tabindex="-1"vietoj pašalina iš šio skirtuko pagrindu navigaciją elementas, ir ji gali būti gana naudinga.

Naudokite ariaatributus

ARIA yra akronimas, kuris reiškia prieinamas turtingas interneto programas ir apibrėžia semantiką, kurią galima pritaikyti elementams.

aria-label

Šis atributas naudojamas pridėti eilutę elementui apibūdinti.

Pavyzdys:

...

Šį atributą naudoju savo tinklaraščio šoninėje juostoje, kur turiu įvesties laukelį paieškai be aiškios etiketės, nes jis turi vietovės atributą.

aria-labelledby

Šis atributas nustato dabartinio elemento ir jį žyminčio elemento koreliaciją.

Jei žinote, kaip inputelementą galima susieti su labelelementu, tai panašu.

Mes perduodame elemento ID, apibūdinantį dabartinį elementą.

Pavyzdys:

The description of the product

...

aria-describedby

Šis atributas leidžia mums susieti elementą su kitu elementu, kuris naudojamas kaip aprašas.

Pavyzdys:

Pay now Clicking the button will send you to our Stripe form! 

Norėdami paslėpti turinį, naudokite paslėptą ariją

Man patinka minimalistinis dizainas mano svetainėse. Pavyzdžiui, mano tinklaraštis dažniausiai yra tik turinys, šoninėje juostoje yra keletas nuorodų. Tačiau kai kurie šoninės juostos dalykai yra tik vaizdiniai elementai, kurie nepadidina puslapio nematančio asmens patirties. Kaip mano logotipo paveikslėlis ar tamsios / ryškios temos parinkiklis.

Pridėjus "atributą, ekrano skaitytojai nurodys ignoruoti tą elementą.

Kur sužinoti daugiau

Tai tik įvadas į temą. Norėdami sužinoti daugiau, rekomenduoju šiuos išteklius:

  • //www.w3.org/TR/WCAG20/
  • //webaim.org
  • //developers.google.com/web/fundamentals/accessibility/

Jūs pasiekėte HTML vadovo pabaigą.

Spustelėkite čia, jei norite gauti šios knygos PDF / ePub / Mobi versiją, kad galėtumėte skaityti neprisijungę !