Tagi, kas nosaka rindkopu, atstarpi, HTML bloku un rindkopu
Apsvērsim sīkāk HTML bloki un rindkopas kā tīmekļa lapas elementi.
- HTML rindkopa ko nosaka tagi.
- HTML rindkopas parasti satur tekstu, formatēšanas tagus, attēlus.
- HTML rindkopa nevar saturēt bloka elementus, piemēram, galvenes
- , bloķēt
un citas rindkopas. - HTML bloks ko nosaka tagi .
- HTML bloks var saturēt jebkurus tīmekļa lapas elementus jebkurā daudzumā.
- HTML bloki lieliski piemērots tīmekļa lapām un viegli manipulējams.
Apsveriet tālāk norādīto kodu:
Rezultāts:
Mēs to varam redzēt HTML rindkopas ir ievilktas vertikāli - tā ir tagu īpatnība. HTML bloki
Atzīmes nedrīkst saturēt citus vai
Tagi un principā tas pats, bet W3C konsorcijs ieteica lietot mazos burtus. V jauna versija HTML, tāpat kā mūsdienu XHTML, lielo burtu lietošana, rakstot tagus, ir aizliegta.
Bloķēt
HTML telpa no īpašo rakstzīmju tabulas
HTML telpaļauj palielināt atstarpi starp vārdiem un rakstzīmēm.
Runājot par atstarpēm starp vārdiem, neatkarīgi no tā, cik daudz to ir Notepad, tas ir, pirmkodā, tīmekļa lapā tiks parādīts tikai viens. Ja jums ir jāpalielina attālums, izmantojiet atstarpes simbolu no simbolu tabulas. Jūs jautājat: kāpēc mums ir vajadzīgas šīs parasto rakstzīmju kodētās vērtības? - Es atbildēšu: Tie ir nepieciešami, lai parādītu, piemēram, šādas iekavas< >... Citiem vārdiem sakot, lai parādītu tagus, savā redaktorā es rakstu: ... Tagi , kā mēs atceramies, pārveidojiet tekstu monospace (mašīnrakstā).
Veidi, kā parādīt HTML rindkopu
Rindkopas izvades piemēri.
Sveiki! Turpināsim apskatīt vietņu programmēšanas pamatus. Ir grūti iedomāties kādu no tiem bez rindkopas taga kodā. Šodien mēs apsvērsim, kā to pareizi uzrakstīt, un vairāku papildu darbību aprakstu ar tekstu.
Piemērs
Ņemsim piemēru, kā izveidot rindkopu HTML kodā.
Viens vai vairāki teikumi.
Priekšnoteikums ir sākuma un beigu taga klātbūtne. Starp citu, visu var izdarīt tieši piezīmjdatorā, tikai tad fails būs jāsaglabā atbilstošā formātā.
Formatēšana
Diezgan bieži novēroju, ka cilvēki interesējas, kā uztaisīt sarkano līniju. To ir ļoti viegli izdarīt konkrētai rindkopai.
Iespējojot šīs opcijas, pirmajā rindā tiks parādīta atkāpe 15 pikseļus no kreisās puses. Ja šādas izmaiņas ir jāpiemēro visiem P tagiem, tad in CSS fails, kas savienojas ar vietnes lapām, varat ierakstīt tālāk norādīto kodu.
Personīgi es parasti neveidoju sarkanas līnijas, rediģējot kodu piezīmjdatorā vai citā redaktorā.
Es vienkārši iekļauju polsterējumu starp teksta blokiem. Lai to izdarītu, jums jāraksta CSS īpaši parametri.
p (marža-apakšā: 25 pikseļi;)
Ja izmantojat šo konstrukciju, tad pēc katras rindkopas būs 25 pikseļu atkāpe.
Faktiski ir daudz iespēju darbam ar HTML un dažādiem stiliem. Esmu aprakstījis tikai dažus no tiem, ir ļoti grūti aptvert visu vienā rakstā.
Vai vēlaties uzzināt vairāk? Varbūt noderēs mani iepriekšējie ieraksti par šādām tēmām:
Šeit es pabeigšu rakstu un, manuprāt, tagad nebūs grūti izveidot rindkopas HTML un skaisti noformēt tās ar īpašu tagu palīdzību.
Es novēlu jums lielus panākumus programmēšanas apguvē. Starp citu, vai esat kādreiz domājis par naudas pelnīšanu informatīvās nekomerciālās vietnēs? Vienkārši brīnišķīga informācija, kas īpaši sniegta tās lasītājiem.
Tiešsaistes bizness un finanses ir šī emuāra galvenās tēmas. No publicētajiem materiāliem varat iepazīties ar atsevišķiem potenciālajiem klientiem tīklā. Es turpinu gatavot un publicēt jaunu, un galvenais, patiešām noderīgu saturu. Abonējiet Workip atjauninājumus savā e-pasts... Līdz nākamajai reizei.
- mājas lapas izveides procesā daudz jāstrādā ar teksta blokiem, jeb teksta frāzēm. Reiz man vajadzēja pievienot teksta frāzi, lai pirms šīs teksta frāzes būtu kāda teksta atkāpe no html malas bloks, kuram tika pievienots dotais teksts.
Tātad pirmā metode ir visdabiskākā un vienkāršākā. Lai atkāpi pirms teksta, pievienojiet pirms teksta html kods atstarpes — varat pievienot html atstarpes kodu jebkurā html redaktorā.
Šeit ir darba koda piemērs teksta atkāpes iestatīšanai, izmantojot atstarpes kodu:
HTML teksta atkāpe pa kreisi, izmantojiet atstarpes kodu
Šajā piemērā pirms mūsu atlasītā teksta atstarpes kods ir -& nbsp; pievieno četras reizes, kā rezultātā mēs iegūstam vajadzīgo atkāpi.
Mēs zinām, ka atstarpes kodu apstrādā jebkura pārlūkprogramma. Līdz ar to, pirms teksta pievienojot nepieciešamo atstarpju skaitu, var iegūt tekstam nepieciešamo atkāpi.
Šīs metodes priekšrocība ir tā, ka tā darbosies jebkurā pārlūkprogrammā.
Bet ir šī metode ir būtisks trūkums. Lai tekstam būtu pietiekami liela atkāpe, html kodā pirms teksta būs jāpievieno liels skaits atstarpes rakstzīmes, kas var neizskatīties skaisti, apgrūtinoši un neprofesionāli.
Viena no šīs problēmas risināšanas iespējām ir nākamais ceļš iestatīt atkāpi.
HTML teksta atkāpe, otrā metode — šīs metodes pamatā ir blockquote taga īpašības. Šis tags tajā ievietotajam tekstam iestata aptuveni 40 pikseļu atkāpi pa kreisi un pa labi. Turklāt polsterējums ir iestatīts augšpusē un apakšā. Html piemērsŠīs metodes izmantošanas kods ir norādīts zemāk:
kreisajā pusē izmantojiet tagu citāts
Kā redzat, šī teksta atkāpes iestatīšanas metode ir ļoti viegli lietojama, taču šai metodei ir arī būtisks trūkums. Atkāpe, ko iestata tags citāts, ir fiksēts un vienmēr ir vienāda vērtība - 40 pikseļi.
Lai labotu situāciju, un pievienojot html atkāpe un priekš tekstu var iestatīt jebkuru vērtību, mēs izmantosim trešo metodi.
HTML teksta atkāpe, trešā metode.
Šeit mēs izmantosim CSS kaskādes stila lapu teksta atkāpes rekvizītu.
Ja atveram CSS atsauci, lapā ar text-indent īpašību aprakstu redzēsim, ka ar text-indent palīdzību varam iestatīt jebkuras rindas pirmās rindas vai pirmās rindkopas atkāpes apjomu. teksta bloks.
Mēs apsveram piemēru ar īsu teksta bloku, tāpēc teksta atkāpes rekvizīti mūsu gadījumā ir piemēroti.
Zemāk ir html kods, kas iedala teksta atkāpi, izmantojot teksta atkāpi. No piemēra var redzēt, ka, iestatot dažādas argumentu vērtības teksta atkāpei, mēs varam mainīt teksta atkāpes apjomu:
HTMLievilkumstekstu, strādā CSS stils - teksta atkāpe
Manuprāt, šāds teksta atkāpes iestatīšanas veids ir visoptimālākais, taču tomēr apsveriet citu atkāpes iestatīšanas veidu, izmantojot attēlus.
HTML teksta atkāpe, ceturtā metode - šeit mēs izmantosim attēlu, lai iestatītu atkāpi.
Kā darba piemēru apskatīsim html kodu, kas parāda, kā šī metode darbojas:
kreisajā pusē izmantojiet attēlu
No dotā piemēra ir skaidri redzams, ka mainot attēla platumu, mēs varam mainīt teksta pozīciju, tas ir, iestatīt tekstam nepieciešamo atkāpi.
Kā attēlu varat izmantot attēlu, kura platums un augstums ir vienāds ar vienu pikseļu. Lai lapā nebūtu redzams mūsu izmantotais attēls, iestatiet tam tieši tādu pašu krāsu kā vietnes lapas fonam.
Manuprāt, iepriekšminētās teksta atkāpju iestatīšanas metodes ir pilnīgi pietiekamas, lai sakārtotu nepieciešamo atkāpi jebkurā situācijā, pievienojot saturu jūsu vietņu lapai.
Jebkuram tekstam ir sava unikālā struktūra: grāmatas ir sadalītas daļās, sadaļās un nodaļās, laikrakstiem un žurnāliem ir atsevišķi virsraksti un apakšvirsraksti, kas savukārt ietver teksta fragmentus, kuriem arī ir sava struktūra: rindkopas, atkāpes utt.
Tīmekļa lapās ievietotais teksts nav izņēmums, tam ir jābūt arī loģiskai struktūrai, kas ir saprotama ikvienam lietotājam. Galu galā daudz kas ir atkarīgs no tā, cik ērti un vienkārši tiks uztverts lapas teksts: pirmkārt, kāds iespaids apmeklētājam būs par jūsu vietni.
Lai izveidotu teksta struktūrvienības, piemēram, rindkopas, HTML dokumentos tiek izmantots tags
, kas atdala teksta fragmentus ar vertikālu atkāpi (pirms un pēc rindkopas tiek pievienota tukša rindiņa).
Piezīme: pēc noklusējuma atstarpe starp rindkopām ir 1em (em ir mērvienība, kas vienāda ar fonta augstumu), tas ir, atstarpes starp rindkopām ir tieši atkarīgas no fonta lieluma.
Lai mainītu atkāpes starp rindkopām, nemainot fonta lielumu, varat izmantot CSS īpašums starpība.
Neaizmirstiet beigu tagu
Lielākā daļa pārlūkprogrammu HTML dokumentus atveidos pareizi, pat ja aizmirstat par beigu tagu.
Paragrāfs
Vēl viena rindkopa
Šis kods darbosies lielākajā daļā pārlūkprogrammu, taču nepaļaujieties uz to. Aizmirsts beigu tags var radīt negaidītus rezultātus vai kļūdas.
sarkanā līnija
Kas ir sarkanā līnija? Pēc definīcijas šī ir rindkopas sākuma rindiņa, kas iepriekš tika iezīmēta sarkanā krāsā (tātad nosaukums). Pirms tipogrāfijas izgudrošanas grāmatas tika rakstītas ar roku - nodaļa vai teksta daļa, pirmais vārds vai burts tika rakstīts ar sarkanu krāsu. Tā radās jēdziens "rakstīt no sarkanās līnijas" – tas nozīmē jaunas domas, nodaļas vai daļas sākumu.
Tomēr, veidojot mājas lapas, sarkanās līnijas dizains tiek izmantots reti, neskatoties uz to, ka tas ļauj vizuāli uztvert tekstu daudz ērtāk, kas ir diezgan svarīgi tradicionālajam lasītājam - ne visiem ir ērti lasīt elektronisko. teksta versija.
Lai rindkopām pievienotu sarkanu līniju, ir jāizmanto teksta atkāpes CSS rekvizīts, kas ļauj izveidot atkāpi pirmajam teikumam:
Izmēģiniet "
Iepriekš minētajā piemērā katras lapas rindkopas pirmā rindiņa sāksies ar 25 pikseļu atkāpi. Tālāk esošajā piemērā ir parādīts, kā var iestatīt sarkanu līniju tikai konkrētai lapas rindkopai.
Kā jau jebkurā īstā mākslā, arī labos tekstos nav sīkumu, pie kuriem daži iekļauj sarkano līniju, uzskatot, ka tās izmantošana nav tik svarīga. Tomēr ir jāsaprot, ka jebkurš komats nes gan estētisku, gan semantisku slodzi, un tas ir ne tikai cieņa pret gramatikas likumiem - tas attiecas arī uz formatēšanu.
Izmēģiniet "Piezīme: nav nepieciešams iestatīt polsterējumu uz 25 pikseļiem, jūs varat izvēlēties optimālais izmērs pašas atkāpes, arī ar rekvizīta text-indent palīdzību var izveidot rindiņu, kas izvirzīta virs pārējā teksta, šim rekvizītam jāiestata negatīva vērtība (piemēram: -30px).
Uzdevums
Katras rindkopas pirmās rindas atkāpe.
Risinājums
Ja nepieciešams iestatīt rindkopas atkāpi, ko sauc arī par sarkano līniju, vislabāk ir izmantot teksta atkāpes stila rekvizītu. Tās vērtība nosaka, cik daudz pārvietot pirmās rindas tekstu pa labi no sākuma pozīcija... Šajā gadījumā teksta bloka platums nemainās un paliek sākotnēji iestatīts. Atkāpes lielumu var norādīt pikseļos, procentos vai citās pieejamās vienībās (1. piemērs).
1. piemērs. Pirmās rindas atkāpe
HTML5 CSS 2.1 IE Cr Op Sa Fx
Saskaņā ar Bībeles tradīciju Babilonijas juceklis ir neveiksmīgs ķēniņa Nimroda mēģinājums uzcelt Babilonā stabu līdz debesīm. Dievs, dusmīgs uz cilvēkiem par viņu neapdomīgo vēlmi, nolēma sodīt celtniekus: sajauca viņu valodu tā, ka viņi pārstāja saprast viens otru, bija spiesti pārtraukt celtniecību un pamazām izkaisīti pa pasauli. Tādējādi, kā skaidroja senie cilvēki, radās valodu atšķirības.
Parastā izpratnē Babilonijas pandemonijs nozīmē nekārtības, apjukumu lielā cilvēku pūlī.
Šī piemēra rezultāts ir parādīts attēlā. viens.
