Labdien draugi! Kaut kā savās vairākās stundās par html es runāju un izmantoju tādu jēdzienu kā div izkārtojums.
Jums, iespējams, ir jautājumi, it īpaši, ja esat iesācējs, kas tas ir?
Šodienas rakstā es kliedēšu visas jūsu šaubas un atbildēšu uz jautājumiem par to, kas ir div blokos
Sāksim mācīties.
HTML div bloki un izkārtojumsLai nepārblīvētu un nepiegružotu smadzenes, īsumā pateikšu, ka iepriekš visi tīmekļa dizaineri un izstrādātāji, veidojot lapas un vietnes, izmantoja tabulas izkārtojumu, kur katra šūna attēloja konkrētu elementu. Tas izskatījās apmēram šādi:
Lūk, kāda bija vietnes izveide. Šis ir ļoti primitīvs piemērs, taču jūs varat skaidri iedomāties, kā tajos tālajos laikos tika izveidotas tīmekļa vietnes. Interneta tehnoloģijas nestāv uz vietas un kādā brīdī pie mums nonāca html div izkārtojuma jēdziens. Un tad, kā saka, viss sākās.
Tās nozīme vietņu izstrādē ir patiešām liela. Tagad vietņu izveide un html bloku pārvaldība ir kļuvusi vienkāršāka nekā jebkad agrāk. Vietnes sāka izrādīties skaistas un interesantas. Tagad visa pasaule tikai taisa savu ceļu.
Tādā veidā mēs tagad varam vienkāršotā veidā attēlot div html bloku izmantošanas modeli.
Ērtības slēpjas bloku neatkarībā viens no otra, tos ir viegli pārvaldīt atsevišķi, pārvietot, kā vēlaties, pievienot stilus, jūs varat iestatīt kopīgus stilus, izmantojot CSS noteikumus vairākām Div grupām. Piekrītu, tas ir ērti.
Div tagu izmantošanas piemēriApskatīsim dažus praktiskus piemērus, kā HTML lapā var lietot div tagus. Vienkāršā piemērā mēs lapā izveidosim 4 blokus. Es vienmēr izmantošu Notepad++ šajā un turpmākajos piemēros.
Tāpēc ļaujiet man paskaidrot. Mums ir dizains< ! DOCTYPE html >tas ir piemērots mūsdienu pārlūkprogrammām un atbalsta HTML 5 iezīmēšanu, par to mēs runāsim turpmākajos izdevumos.
Tālāk tiek atvērts liels “vecāku” konteiners< html >. Tas ir savienots pārī un beigās ir jāaizver! Pēc tam tiek atvērta servisa zīme< head >, kas arī ir savienots pārī un satur pakalpojuma informāciju par kodējumu< meta charset >, lapas virsraksta svarīgākais SEO virsraksts, apraksts (te to neiekļāvu, jo nav vajadzības, analizējam tīri tehnisku aspektu), tajos ir arī CSS stili, fonti (Google fontu bibliotēka), JavaScript.
Tālāk nāk tags< body >. Tajā jau tiks saglabāti visi mūsu bloku marķējumi un visi konteineri ar tagiem. Vienkārši atcerieties to kā milzīgu "mucu".
Un visbeidzot, šeit ir mūsu div konteineri.
< div class = "header" > < / div > < div class = "sidebar" > < / div > < div class = "content" > < / div > < div class = "footer" > < / div > |
Svarīgi! Tie ir arī savienoti pārī, un tie ir jāaizver kopā ar citiem tagiem.
Kā redzat, katram div blokam ir klases atribūts, pēc vienādības zīmes varat tos iestatīt neatkarīgi un patvaļīgi. Šīs klases ir īpaši izveidotas CSS. Tas ir, pārlūkprogramma nonāk lapā, ierauga div bloku un apskata, kāda informācija tajā ir, un dodas uz CSS failu un tur meklē vajadzīgo klasi.
Varat iestatīt ne tikai klases atribūtu, bet arī izmantot id (identifikatoru). Jūs varat uzdot jautājumu: "Kāda man ir atšķirība, kuru es izmantoju?" Es atbildēšu, izkārtojumam varat izmantot jebkuru metodi. Tikai ar vienu atšķirību - prioritātes ziņā id ir vairāk privilēģiju nekā klasei.
Es to paskaidrošu tālāk esošajā video apkrāptu lapā.
Katram ir savs vietņu veidošanas stils, es labprātāk izmantoju klasi, jo šis ieraksts CSS tiek parādīts ar punktu. atlasītājs
Jā, starp citu, es gribu teikt, ka galvene, sānjosla, saturs, kājene ir CSS atlasītāji, un tiem jau būs atribūti.
Tātad, mēs turpinām tīrīt nekārtības lietotāju galvās. Mēs esam izveidojuši div blokus ar klasi, tagad pāriesim uz CSS.
Atvērsim mūsu lapas css noteikumus head tagā, tas ir, mēs to formatēsim. Darīsim to šādi:
Ieraksts būs šāds (vienkārši kopējiet un ielīmējiet savā piemērā un skatieties pārlūkprogrammā)
Div tagu izmantošanas piemērs .header ( platums: 600 pikseļi; augstums: 120 pikseļi; apmale: 1 pikseļi, melns 370 pikseļi ; augstums: 300 pikseļi, melna mala: 230 pikseļi;
< ! DOCTYPE HTML > < html > < head > < meta charset = "utf-8" > < title >Div tagu izmantošanas piemērs< / title >
Virsraksts ( platums: 600 pikseļi; augstums: 120 pikseļi; apmale: 1px vienkrāsains melns; Sānjosla ( platums: 200 pikseļi; augstums: 300 pikseļi; apmale: 1px vienkrāsains melns; pludiņš: pa kreisi; Saturs ( platums: 370 pikseļi; augstums: 300 pikseļi; apmale: 1px vienkrāsains melns; piemale-kreisais : 230 pikseļi ; Kājene ( platums: 600 pikseļi; augstums: 130 pikseļi; apmale: 1px vienkrāsains melns;
< / head > < body > |
Jebkura tīmekļa lapa sastāv no elementiem, kas atrodas tajā, un div bloku izkārtojums gandrīz vienmēr ir atbildīgs par to izvietojumu. Protams, ir arī tabulas izkārtojums, izmantojot tagus
| , un pat notiek diskusijas par to, kuru sistēmu labāk izmantot - bloku vai tabulu. Tomēr patiesībā šobrīd jūs neatradīsiet nevienu no modernajām, populārajām un ērtajām vietnēm, kurās tiek izmantots tikai tabulas izkārtojums. IN labākais scenārijs to izmanto tikai tam, kam tas ir paredzēts - tas ir, tabulu veidošanai, bet ne pašas vietnes struktūras veidošanai.
Fakts ir tāds, ka vietnes div izkārtojums ļauj iestatīt daudzus CSS rekvizītus, kas nav pieejami tabulām. Turklāt visvairāk galvenais trūkums Izklājlapu sistēma paredz, ka tabula netiks parādīta ekrānā, kamēr pārlūkprogramma to nav pilnībā ielādējusi. Ja visa vietne ir izveidota tabulā, tad tā parādīsies displejā tikai pēc tam, kad būs pilnībā ielādēts viss lapas html kods. DIV tags un peldēšanas rekvizītsBloku sistēmas pamatā ir tags, kas ir satura konteiners. Tajā var būt arī citi konteineri. DIV taga izmantošana nav grūtāka par . Parasti vietnes standarta struktūra tiek veidota šādi: ir galvenais konteiners (bieži vien tam tiek piešķirta klase, ko sauc par iesaiņojumu, konteineru, galveno utt.). Šajā konteinerā ir izvēlnes, satura daļas un sānjoslas bloki. Pēc noklusējuma katrs jauns bloks tiek ievietots jaunā rindā. Lai novietotu bloku pa kreisi vai pa labi no cita (piemēram, lai novietotu sānjoslu labajā pusē), tiek izmantota float īpašība. Pēc noklusējuma tam ir vērtība “nav”, bet jūs varat arī iestatīt vērtības “pa kreisi” un “pa labi”. Apskatīsim šo īpašumu, izmantojot piemēru ar diviem blokiem. Bloķēt saturu Bloķēt sānjoslu Šis kods sniegs šādu rezultātu: skaidrs īpašumsIr svarīgi ņemt vērā, ka peldošā īpašība attiecas ne tikai uz pašu bloku, kurā tas ir reģistrēts, bet arī uz nākamo elementu, kas sekos šim blokam. Tas ir, ja abiem iepriekš aprakstītajiem blokiem pievienosim vēl vienu bloku, nenorādot tam nekādus rekvizītus, tad tas neatradīsies jaunā rindā, bet sāksies pa labi no otrā bloka. Lai no tā izvairītos, bloka div izkārtojums izmanto skaidru rekvizītu, kas jāiestata blokam, kuru vēlamies novietot jaunā rindā. Visbiežāk tas tiek iestatīts uz “abi”, bet mēs varam arī iestatīt to uz “pa kreisi” vai “pa labi”, ja vēlamies ne tikai novietot bloku jaunā rindā, bet arī iestatīt tā izlīdzināšanu. Pievienosim jaunu elementu iepriekšminētajam piemēram: Satura bloks Sānjoslas bloks Jauns bloks atrodas apakšā Rezultāts:
Papildus bloku atrašanās vietai ir svarīgi iestatīt atkāpes gan starp blokiem, gan to iekšienē. Šim nolūkam tiek izmantotas attiecīgi piemales un polsterējuma īpašības. Atkāpes tiek iestatītas atsevišķi elementa augšējai, labajai, apakšējai un kreisajai daļai. Tos var norādīt vienā rindā, uzskaitot četras vērtības: Piemale: 20 pikseļi 10 pikseļi 0 40 pikseļi Bloks ar šiem parametriem tiks novietots 20 pikseļus zem vecākelementa, desmit pikseļus no labās puses elementa, tā apakšā būs nulles polsterējums un 40 pikseļu polsterējums kreisajā pusē. Ja visi tie paši rādītāji ir norādīti pildījuma rekvizītā, tie būs satura iekšējie pildījumi attiecībā pret tā bloka robežām, kurā tas atrodas. Varat arī iestatīt atsevišķus rekvizītus atsevišķām malām, izmantojot piemale-augšējo, piemale-apakšējo, piemale-kreiso, malu-labo (un līdzīgi polsterēšanai). Šajā gadījumā, ja viena no sejām nav norādīta, tad ievilkums tās pusē būs vienāds ar nulli vai tiks noteikts vispārīgas īpašības css norādīts blokiem lapā. Šeit mēs aplūkosim izplatītākās kļūdas HTML5 iezīmēšanā no semantiskā viedokļa un to, kā no tām izvairīties. Mana super duper lapa Pārraksti šādi: Tas ir vienkārši nepareizi: nav iesaiņojums. Šis elements attiecas uz jūsu satura semantisko bloku, kas tiek izmantots, lai izveidotu “dokumenta kontūru”, un tam ir jābūt nosaukumam. Ja jums ir nepieciešams iesaiņojuma elements, mēģiniet iztikt (Kroc Kamen ir ko piedāvāt). Ja tas neatrisina problēmu, kas saistīta ar papildu iesaiņojumu nepieciešamību, izmantojiet vecos labos "s. HTML5" nav nomira, un tie šajā gadījumā ir ideāli. Ņemot vērā visu iepriekš minēto, būtu labi atzīmēt iepriekš minēto piemēru, izmantojot HTML5 šādi: Ja neesat pārliecināts, kuru elementu izmantot, iesaku izmantot mūsu elementu atlases blokshēmu ( apm. tulkotājs: skatīt pašā ieraksta apakšā). Izmantojiet un tikai tad, kad nepieciešams Nav jēgas rakstīt kodu, ja tas nav nepieciešams, vai ne? Ak, es bieži novēroju, kā un kur tie nav vajadzīgi. Jūs varat lasīt par elementiem sīkāk, bet es īsi izklāstīšu galvenos punktus:
Mans labākais emuāra ieraksts Ja jums ir tikai viens galvenes elements, tas nav nepieciešams. IN šajā gadījumā elements jau garantē, ka virsraksts tiks iekļauts dokumenta kontūrā, un, tā kā tas nesatur vairākus elementus (pēc definīcijas), to var droši noņemt. Pietiek ar to vienkārši:
Mans labākais emuāra ieraksts autors Ričs Klārks Šajā gadījumā vienkārši noņemiet hgroup. autors Ričs Klārks Otrais gadījums ir vēl viens elementa nevajadzīgas izmantošanas piemērs. Ja vienīgais bērns ir "un tas ir , kāpēc tas ir vajadzīgs? Ja jums nav papildu elementu "e" (t.i., māsa saistībā ar), vienkārši noņemiet . Piezīme: ne visas saišu grupas ir jāievieto navigācijas elementā. To vajadzētu izmantot pamata navigācijai. Bieži vien kājenēs ir neliels saraksts ar saitēm uz dažādām vietnes lapām (Sākums, Palīdzība, lietošanas noteikumi, utt). Šajā gadījumā vajadzētu pietikt ar vienu kājeni. Lai gan nekas neliedz jums izmantot navigāciju, tas nav nepieciešams. WHATWG HTML specGalvenā frāze ir "galvenā navigācija". Var ilgi strīdēties par to, kas ir domāts ar galveno, bet man tā ir:
Specifikācijā tas aprakstīts kā “pašpietiekams saturs, iespējams, ar galveni un parasti autonoms plūsmas elements”. Šeit tas ir, viss skaistums - elementu var viegli pārvietot no galvenā satura, piemēram, uz sānjoslu. Iepriekš minētā elementu atlases blokshēma palīdzēs jums tikt galā ar . Ja attēls ir paredzēts tikai prezentācijas nolūkiem un uz to nekur dokumentā nav atsauces, tas noteikti nav . Pretējā gadījumā uzdodiet sev jautājumu: "Vai šis attēls pašreizējā kontekstā ir nepieciešams izpratnei?" Ja nē, tad acīmredzot tā nav (iespējams). Ja tā, pajautājiet sev: "Vai es varu to pārvietot uz lietotni?" Ja atbilde uz abiem jautājumiem ir jā, tas varētu darboties. Jūsu logotips nav Tas pats attiecas uz logotipu. Es bieži redzu šo lietojumprogrammu: Mans uzņēmuma nosaukums
Šeit nav ko piebilst. Tā vienkārši nav taisnība. Jūs varat ilgi strīdēties par to, vai logotipam ir jābūt, bet mēs par to tagad nerunājam. Patiesā kļūda ir pārmērīga . jāizmanto tikai tad, ja uz to atsaucaties dokumentā. Maz ticams, ka jūs kaut kur piesaistīsit savu logotipu. Ar to pietiek: Mans uzņēmuma nosaukums var būt ne tikai attēls Cits izplatīts gadījums Elementa pārpratums ir pieņēmums, ka to var izmantot tikai attēliem. Bet tā nav taisnība. Tas var saturēt video, audio, grafiku (piemēram, SVG formātā), citātu, tabulu, koda bloku, dzejoli vai jebkuru iepriekš minēto kombināciju. Neierobežojiet sevi tikai ar attēliem. Mūsu kā tīmekļa standartu piekritēju uzdevums ir aprakstīt mūsu marķējuma saturu. Pirms neilga laika es rakstīju par elementu sīkāk. Iesaku izlasīt, ja vēlies to labāk izprast vai atsvaidzināt atmiņas. Neizmantojiet nevajadzīgu tipa atribūtu Tas, iespējams, ir visvairāk izplatīta problēma, kas atrodams HTML5 galerijā. Lai gan tā nav kļūda, es domāju, ka vislabāk no tās izvairīties. Tā vietā varat vienkārši uzrakstīt: Cita starpā varat arī samazināt koda daudzumu, kas iztērēts kodējuma norādīšanai. Visas šādas darbības ir aprakstītas Marka Pilgrima nodaļā par semantiku programmā Dive into HTML5.Nepareiza veidlapas atribūtu izmantošana Iespējams, jau zināt, ka HTML5 ievieš daudz jaunu veidlapu atribūtu. Tos apskatīsim tuvākajā laikā, bet tagad īsumā pastāstīšu, ko nevajadzētu darīt Loģiskie atribūti Ir arī multimediju elementiem un dažiem citiem. Mani aprakstītie noteikumi attiecas arī uz viņiem.
nepieciešams Es tos redzu reti, bet obligātajā gadījumā es redzēju šo: Būla vērtību var lietot trīs veidos: (otrais un trešais ir tipisks XHTML)
Saistībā ar mūsu iepriekš minēto piemēru mēs varētu uzrakstīt šo (HTML valodā): Tagi: pievienojiet atzīmes Vēl pirms desmit gadiem RuNet visbiežāk izmantoja tā saukto tabulu izkārtojumu. Sakarā ar to, ka dažu pārlūkprogrammu standarti būtiski atšķīrās savā starpā, bija jāmeklē risinājums, kas ļautu interneta dokumentu pareizi attēlot visās aplikācijās. Taču pagāja laiks, attīstījās standarti, un diezgan stingro un neelastīgo tabulu aizstāja ar labi maināmu un atsaucīgu. Šīs tehnoloģijas priekšgalā ir elementu izmantošanas princips. HTML dokumentus lielākoties sāka veidot, pamatojoties uz atsevišķiem blokiem, kas atšķirībā no tabulas izkārtojuma var būt neatkarīgi viens no otra. ParādīšanāsPieaugošā tīmekļa lapu sarežģītība un datortehnoloģiju attīstība noveda pie tā, ka tīmekļa dokuments tika sadalīts divās daļās – ietvarā (HTML kods) un dizainā (stila lapas). Pateicoties tam, bija iespējams sasniegt vēl nebijušu tīmekļa attīstību, kuras rezultātus tagad varam redzēt lielākajā daļā moderno vietņu. Papildus izstrādes procesa uzlabošanai HTML ļāva definēt savus dizaina noteikumus katram atsevišķam elementam. Tas palīdzēja uzlabot tīmekļa lapas koda lasāmību un samazināt dokumenta ielādes laiku. Tagad meklētājprogrammas daudz ātrāk un labāk apstrādā vietnē pieejamo informāciju. Standarti un testēšanaTags HTML tiek izmantots stingri saskaņā ar W3C (World Wide Web Consortium) standartiem. Lapas kodu pārbauda īpašs rīks – validators, kas parsē (skenē un meklē) visādas lapas kļūdas. Derīga lapa nozīmē, ka visi tagi tika izmantoti pareizi un pilnībā atbilst standartu prasībām.
Tagi ļauj izveidot blokus vai, kā tos sauc arī, konteinerus. Šajā gadījumā atsevišķus elementus var ligzdot vienu otrā, veidojot vajadzīgās konfigurācijas un sarežģītības struktūras. Atzīmes lietošana bez klases vai identifikatora gandrīz nekad nav sastopama. Tas ir saistīts ar elementa "bez sejas". Ja jūs tam nepiešķirat klasi, tad galu galā visiem konteineriem būs identiska konfigurācija. Lai izveidotu patiesi pareizu dokumentu, ir jāizmanto šāda tagu struktūra class = “some_name”. Atsaucoties uz klases nosaukumu, stila lapas var noteikt atsevišķa bloka pozīciju, izmēru, malu un citus parametrus dokumentā. Klašu un identifikatoru izmantošana
HTML bloku var definēt vai nu ar id, vai identifikatoru. Atšķirība starp pirmo un otro ir tāda, ka id dokumenta lapā tiek izmantots tikai vienu reizi. Tas ir, to izmanto, lai identificētu unikālus elementus, kas neatkārtojas nekur citur lapas kodā. Klases atribūts ļauj to pašu piemērot vairākiem elementiem. Šī pieeja ievērojami vienkāršo koda izstrādi un uzturēšanu. Turklāt vienam objektam vienlaikus var būt vairākas klases. Pareizai atpazīšanai tie ir vienkārši atdalīti ar atstarpēm. Protams, dokumenta bloku struktūra nenozīmē tikai tagu izmantošanu. Jebkuras interneta lapas struktūrā vienmēr būs citi elementi. Turklāt pašam bloka elementam var būt pilnīgi atšķirīgs izskats. Tas tiek darīts, izmantojot displeja rekvizītu. Elementam var būt līnijas vai pat tabulas displejs, kas ļauj ievērojami palielināt bloka izmantošanas elastību un izveidot jebkuras konfigurācijas vietni. Tag. HTML rekvizīti
Kā minēts iepriekš, šis tags nemaina lapas fragmenta dizainu, bet tiek izmantots, lai izveidotu semantisko struktūru ar sekojošu dizainu, izmantojot stila lapas. Šim elementam ir jāizmanto noslēdzošais tags. Lai gan daudzas mūsdienu pārlūkprogrammas spēs atpazīt šādu kļūdu, dažos gadījumos neaizslēgts tags var izraisīt dokumenta struktūras sabrukšanu un nepareizu attēlošanu. Tā kā šis elements ir bloka elements, tajā ietvertais saturs sāksies jaunā rindā. Lai mainītu šo darbību, ir jāmaina bloka displeja parametri, izmantojot displeja rekvizītu. Papildus ligzdotu elementu grupēšanai tags ļauj formatēt tajā esošā satura izkārtojumu. Tas tiek darīts, izmantojot līdzināšanas atribūtu, kas ļauj novietot tekstu vai attēlu pa kreisi, pa labi vai centrā no vecākelementa. Bloku pozicionēšana
Izmantojot pozīcijas atribūtu, varat mainīt atlasītā elementa pozicionēšanas metodi. Tātad ir trīs pozicionēšanas veidi:
Lai mainītu pozīciju attiecībā pret izcelsmi, tiek izmantoti augšējie un kreisie atribūti. Vērtības var būt gan pozitīvas, gan negatīvas. Bloka elementa platumu un augstumu nosaka attiecīgi platuma un augstuma atribūts. Ja stila lapās tie nav norādīti, bloks aizņems visu vecākelementa platumu. Ja bloka saturs neietilpst visā “vecāka” platumā, elementa darbību nosaka pārpildes atribūts. Mēs ceram, ka šis raksts palīdzēja izprast jautājumu par to, kas ir HTML. Tie ir universāli tukši konteineri, kas jāaizpilda ar noteiktu saturu, vai ligzdotos elementus var grupēt turpmākai veidošanai, izmantojot CSS, un, ja nepieciešams, dinamiski manipulējiet ar tiem, izmantojot skriptus, piemēram, programmēšanas valodā, piemēram, Javascript. Es vēršu jūsu uzmanību uz to, ka paši elementi neietekmē citus lapas elementus. Tags nosaka jebkuru atsevišķu satura bloku un ir paredzēts tīmekļa lapas sadalīšanai fragmentos. Jūs varat apvienot jebkuru loģiski saistītu elementu kopu vienā blokā. Šis elements ir bloka līmenī, kas nozīmē, ka tā saturs vienmēr sāksies jaunā rindā un elements aizņems visu pieejamo platumu. Ne tik sen šis elements ieņēma absolūto virsotni, kas bija veltīts lapas sadalīšanai loģiskos komponentos, taču līdz ar HTML 5 parādīšanos tika pievienots pietiekami daudz semantisko elementu, kas dažās situācijās ļauj aizstāt tagu ar jēgpilnāku. Atšķirībā no bloka elementa tags ir iekļauts un attiecas uz iekšējiem ( iekļauts) lapas elementi, tas ir, vārdi, frāzes, kas atrodas rindkopā vai nelielā teksta fragmentā, satura rādītājā un tamlīdzīgi. Varat izmantot tagu tādiem uzdevumiem kā:
Mēs apvienojām rindkopas ar div tagu, un mēs pievienojām šo vārdu ar span tagu. Izmantojot iebūvēto stila lapu, mēs iezīmējām vārdu sarkanā krāsā un teksta bloku zaļā krāsā. Ņemiet vērā, ka div tags ir bloka līmenī, kas nozīmē, ka tā saturs vienmēr sāksies jaunā rindiņā, elementam aizņemot visu pieejamo platumu. Šajā blokā ir arī divas rindkopas. Izmantojot iebūvēto stila lapu, mēs norādījām fona krāsu visam blokam - haki un šim vārdam orangeRed (mēs to ievietojām span tagā). Šajā piemērā mēs:
|
