Ko div nozīmē html. Izvairīšanās no bieži sastopamām kļūdām HTML5 iezīmēšanā. Piemērs. Skaists rāmis ar div
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. Labākajā gadījumā 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 lielākais tabulu sistēmas trūkums ir tas, 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 kāda no malām nav norādīta, tad atkāpe tās pusē būs nulle vai tiks noteikta pēc vispārīgajām css īpašībām, kas norādītas blokiem lapā. HTML satura nodaļas elements ( ) ir vispārīgs plūsmas satura konteiners. Tam nav nekādas ietekmes uz saturu vai izkārtojumu, kamēr nav izveidots stils, izmantojot CSS. Šī interaktīvā piemēra avots tiek glabāts GitHub repozitorijā. Ja vēlaties piedalīties interaktīvo piemēru projektā, lūdzu, klonējiet https://github.com/mdn/interactive-examples un nosūtiet mums izvilkšanas pieprasījumu. Kā "tīrs" konteiners elements pēc būtības neko neatspoguļo. Tā vietā tas tiek izmantots satura grupēšanai, lai to varētu viegli veidot, izmantojot klasi vai atribūtus, atzīmējot dokumenta sadaļu kā rakstītu citā valodā (izmantojot atribūtu lang) un tā tālāk.
Piezīme. Izlīdzināšanas atribūts ir novecojis; nelieto to vairs. Tā vietā izmantojiet CSS rekvizītus vai metodes, piemēram, CSS Grid vai CSS Flexbox, lai izlīdzinātu un novietotu elementus lapā. Lietošanas piezīmes
Jebkāda veida saturs šeit. Tādas kā ,
Saderības tabula šajā lapā ir ģenerēta no strukturētiem datiem. Ja vēlaties sniegt ieguldījumu datu apkopošanā, lūdzu, skatiet vietni https://github.com/mdn/browser-compat-data un nosūtiet mums izvilkšanas pieprasījumu. Atjauniniet saderības datus vietnē GitHub
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 >, svarīgākā SEO lapas virsraksta virsraksts, apraksts (neiekļāvu šeit, jo nav vajadzības, analizējam tīri tehnisku aspektu), šeit ir iekļauti arī CSS stili, fonti (Google Fonts 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.
Svarīgi! Tie ir arī savienoti pārī, tie ir jāaizver kopā ar citiem tagiem. Kā redzat, katram div blokam ir klases atribūts pēc vienādības zīmes, jūs 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 iztīrīt nekārtību 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 (platums: 600 pikseļi; apmale: 1 px.
Šajā rakstā mēs sapratīsim, kas ir tags, kur tas tiek izmantots, kā izmantot tagu, lai ievietotu attēlus, tekstus un daudz ko citu. Ne mazāk svarīgi ir arī tas, ka tags ļoti bieži tiek izmantots kopā ar CSS stila lapām. Mēs arī nodarbosimies ar dažiem no tiem. Tātad tags ir HTML lapas bloka elements, kas paredzēts, lai kontrolētu izvietojumu un piešķirtu tekstiem, attēliem, saitēm un citiem objektiem plašu rekvizītu klāstu. Pats par sevi (bez atribūtiem un css stiliem) tags nekādā veidā neietekmē html lapu elementus. Neizmantojot stilus, tags ir paredzēts elementu ievietošanai html lapā. Lai to izdarītu, tagam ir jābūt līdzināšanas atribūtam. Bet nepukstīsimies un ķersimies pie prakses. 2. Kā tiek izmantoti tagi, lai ievietotu teksta blokus html lapā?Izmantojot tagu, jūs varat ievietot jebkuru elementu jebkurā lapas daļā. Piemēram, mums ir vārds "TEKSTS". Lai to ievietotu, izmantojiet tagu šādi: Pārlūkprogrammā tas izskatās šādi: 3. Kā ievietot attēlu (attēlu), izmantojot tagu?Izmantojot tagu, varam ātri un ērti ievietot ne tikai tekstu, bet arī attēlus vajadzīgajā vietā html lapā. Tas tiek darīts šādi: Pieņemsim, ka mums ir attēls, ko sauc par flow.jpg, un tas ir ievietots tajā pašā direktorijā (tajā pašā mapē) kā fails, kurā tas ir jāievieto. Tam ir arī 100 pikseļu platums un 72 pikseļu augstums. Šajā gadījumā atzīmes tiek rakstītas šādi: Pārlūkprogrammā tas izskatās šādi:
Izmantojot tagus, html lapā var ievietot ne tikai vienkāršu tekstu vai attēlus, bet arī saites. Tas tiek darīts šādi: Pieņemsim, ka mums ir jāinstalē saite kaut kur html lapā, kas ved uz vietni http://site. Kā jums jau vajadzētu zināt no pagātnes, saite uz pašu vietni ir rakstīta šādi: nodarbības
Nu, mēs izdomājām, kā teksti, attēli un saites tiek ievietotas html vietņu lapās, izmantojot tagus. Šeit nav nekā sarežģīta. 5. Kā izcelt jebkuru objektu html lapā, izmantojot tagu un css stilus, vai kā izveidot rāmi ap objektu, izmantojot tagu un css stilus?Šo tēmu ir nedaudz grūtāk saprast, jo mums būs jāpievieno css stili. Tātad parasti stiliem tiek izveidots atsevišķs teksta fails ar css paplašinājumu, kas ir savienots ar lapu tās galvenē, tas ir, . Mēs to nedarīsim, bet ierakstīsim visus nepieciešamos stilus tieši tagā. Lai tagā iestatītu CSS stilus, izmantojiet style="styles jāraksta, atdalot tos ar semikolu".
7. polsterējums-top: 30px;
- augšējā mala 20 pikseļi 8. polsterējums-kreisais:15px; - aizpildiet bloku ar zaļu krāsu (varat arī iestatīt krāsas heksadecimālā veidā) Pēc faila saglabāšanas pārlūkprogrammā redzēsim sekojošo:Šeit mēs varam nedaudz saīsināt stila kodu. Piemēram, varat saīsināt ārējās atkāpes kodu šādi:
- zilās krāsas norādīšana (stilos krāsu var norādīt gan heksadecimālajā sistēmā krāsu norādīšanai, gan parastos angļu valodas vārdos, piemēram, sarkans, zils, dzeltens)
3. fonta izmērs: 12 pikseļi; Protams, ja jums ir milzīgs satura apjoms, stilu izmantošana tieši tagā nav ērta, jo to rediģēšana un pievienošana aizņem daudz laika. Un, kā jau rakstīju šajā rakstā, apstrādes vienkāršošanai visi stili tiek ievietoti atsevišķā failā ar css paplašinājumu, kas ir iekļauts lapas html tagā. Bet mēs to neapsvērsim, jo šī tēma ir pavisam cita programmēšanas valoda, kas saistīta ar vietņu dizainu. Ja vēlaties izprast css, html un vispār uzzināt, kā izveidot vietnes, izmantojot video nodarbības, apmeklējiet manu vietni. Un, ja plānojat iemācīties izveidot profesionālus tiešsaistes veikalus, izmantojot Magento dzinēju, tad to visvieglāk izdarīt ar mana autora video kursa palīdzību. Elements ir bloka elements, un tas ir paredzēts, lai izceltu dokumenta fragmentu, lai mainītu satura izskatu. Parasti bloka izskats tiek kontrolēts, izmantojot stilus. Lai stils netiktu aprakstīts tagā katru reizi, varat atdalīt stilu ārējā stila lapā un pievienot tagam klases vai id parametru ar atlasītāja nosaukumu. Tāpat kā ar citiem bloka elementiem, taga saturs vienmēr sākas jaunā rindā. Pēc tā tiek pievienots arī rindiņas pārtraukums.... SintakseParameters align Norāda taga satura izlīdzināšanu. virsraksts Saturam pievieno rīka padomu. Noslēdzošais tags
.block2 (
Nav atļauts XHTML 1.1 Apraksts... Argumentu centrs Izlīdzina tekstu centrā. Teksts tiek novietots horizontāli pārlūkprogrammas logā vai konteinerā, kur atrodas teksta bloks. Šķiet, ka teksta rindas ir savērtas uz neredzamas ass, kas iet uz leju tīmekļa lapas centrā. Šī izlīdzināšanas metode tiek aktīvi izmantota virsrakstos un dažādos parakstos, piemēram, parakstos, tā piešķir teksta dizainam oficiālu un stabilu izskatu.Visos citos gadījumos izlīdzināšana centrā tiek izmantota reti, jo ir neērti lasīt lielu daudzumu šāda teksta.
#layer1 ( Apraksts... fons: #fc0;polsterējums: 5 pikseļi; #layer2 (fons: #fff;
polsterējums: 10 pikseļi; TITLE parametrs
Pievieno konteineram paskaidrojošu tekstu rīka padoma veidā, kas tiek parādīts, kad peles kursors virza virs satura.
Argumenti Jebkura teksta virkne. Virkne jāiekļauj dubultpēdiņās vai vienpēdiņās.
Jums var arī patikt |
