Home-theater-designers
Lai gan mūsdienu vietnes parasti ir veidotas ar lietotājam draudzīgām saskarnēm, ir lietderīgi zināt dažus pamata HTML. Ja zināt šādus 17 HTML piemēru tagus (un dažas papildu iespējas), jūs varēsit izveidot pamata tīmekļa lapu no nulles vai pielāgot tādas lietotnes izveidoto kodu kā WordPress.
Mēs esam nodrošinājuši HTML kodu piemērus ar izvadi lielākajai daļai tagu. Ja vēlaties tos redzēt darbībā, raksta beigās lejupielādējiet HTML faila paraugu. Jūs varat spēlēt ar to teksta redaktorā un ielādēt pārlūkprogrammā, lai redzētu, kādas ir jūsu veiktās izmaiņas.
1.
Šis tags jums būs nepieciešams katra izveidota HTML dokumenta sākumā. Tas nodrošina, ka pārlūkprogramma zina, ka lasa HTML, un ka tā sagaida jaunāko HTML5 versiju.
Lai gan tas faktiski nav HTML tags, tas joprojām ir labi zināms.
2.
Šis ir vēl viens tags, kas pārlūkprogrammai norāda, ka tā lasa HTML. Tags iet tieši aiz taga DOCTYPE, un jūs to aizverat ar tagu tieši faila beigās. Viss pārējais jūsu dokumentā atrodas starp šiem tagiem.
3.
Šis tags sāk jūsu faila galvenes sadaļu. Šeit atrodamā informācija netiek parādīta jūsu tīmekļa vietnē. Tā vietā tajā ir meklētājprogrammu metadati un informācija par jūsu pārlūkprogrammu.
Pamata lapām tagā būs jūsu nosaukums, un tas ir viss. Bet ir dažas citas lietas, kuras varat iekļaut, un kuras mēs tūlīt izskatīsim.
Četri.
Šī atzīme nosaka jūsu lapas nosaukumu. Viss, kas jums jādara, ir ievietot savu nosaukumu tagā un aizvērt to šādi (es esmu iekļāvis arī galvenes tagus, lai parādītu kontekstu):
My Website
Tas ir nosaukums, kas tiks parādīts kā cilnes nosaukums, kad tas tiks atvērts pārlūkprogrammā.
5.
Tāpat kā virsraksta tags, arī metadati tiek ievietoti jūsu lapas galvenes apgabalā. Metadatus galvenokārt izmanto meklētājprogrammas, un tā ir informācija par jūsu lapas saturu. Pastāv vairāki dažādi meta lauki, taču tie ir daži no visbiežāk izmantotajiem:
- apraksts : Jūsu lapas pamatapraksts.
- atslēgvārdus : Jūsu lapai piemērojamo atslēgvārdu izvēle.
- autors : Jūsu lapas autors.
- skatu punkts : Tags, lai nodrošinātu, ka jūsu lapa izskatās labi visās ierīcēs.
Šeit ir piemērs, kas varētu attiekties uz šo lapu:
Taga “viewport” saturam vienmēr jābūt “width = device-width, initial-scale = 1.0”, lai nodrošinātu, ka jūsu lapa tiek labi parādīta mobilajās un galddatoros.
6.
Pēc galvenes sadaļas aizvēršanas jūs nokļūstat pamattekstā. Jūs atverat to ar tagu un aizverat to ar tagu. Tas notiek tieši faila beigās, tieši pirms taga.
Viss jūsu tīmekļa lapas saturs atrodas starp šiem tagiem. Tas ir tik vienkārši, kā izklausās:
Everything you want displayed on your page.
7.
Nedaudz mazāk liela galvene
Apakšvirsraksts
Rezultāts:
Kā redzat, katrā līmenī tie kļūst mazāki.
8.
Rindkopas tags sāk jaunu rindkopu. Tas parasti ievieto divus rindiņu pārtraukumus.
Paskatieties, piemēram, uz pārtraukumu starp iepriekšējo rindu un šo. Tas ir tas, ko a
tag darīs.
Your first paragraph.
Your second paragraph.
Rezultāts:
Jūsu pirmā rindkopa.
Jūsu otrā rindkopa.
Jūs varat arī izmantojiet CSS stilus rindkopas tagos, piemēram, šajā, kas maina teksta lielumu:
This is 50% larger text.
Rezultāts:
9.
Rindas pārtraukuma tags ievieto vienu rindiņas pārtraukumu:
The first line.
The second line (close to the first one).
Rezultāts:
Darbs līdzīgā veidā ir
tagu. Tādējādi jūsu lapā tiek novilkta horizontāla līnija, un tā ir piemērota teksta sadaļu atdalīšanai.
10.
Šī atzīme nosaka svarīgu tekstu. Kopumā tas nozīmē, ka tas būs drosmīgs. Tomēr izgatavošanai ir iespējams izmantot CSS teksts tiek parādīts atšķirīgi.
Sāpes pašas ir sāpju produkts, galvenajam klientam ir ērti, bet es dodu to tik zemu, cik laiks darbam
Tomēr jūs varat droši izmantot treknrakstā.
Very important things you want to say. Rezultāts:
Ļoti svarīgas lietas, ko vēlaties pateikt.
Ja esat pazīstams ar atzīmi treknrakstā, jūs joprojām varat to izmantot. Nav garantijas, ka tas turpinās darboties arī turpmākajās HTML versijās, taču pagaidām tas darbojas.
vienpadsmit.
Patīk un , un ir saistīti. The tags identificē uzsvērto tekstu, kas parasti nozīmē, ka tas tiks slīprakstā. Atkal pastāv iespēja, ka CSS uzsvērta teksta attēlojumu padarīs atšķirīgu.
An emphasized line. Rezultāts:
Uzsvērta līnija.
The tags joprojām darbojas, taču atkal ir iespējams, ka tas tiks pārtraukts turpmākajās HTML versijās.
12.
The vai enkurs, tags ļauj jums izveidot saites. Vienkārša saite izskatās šādi:
Dodieties uz MUO Atribūts “href” identificē saites galamērķi. Daudzos gadījumos šī būs cita vietne. Tas var būt arī fails, piemēram, attēls vai PDF fails.
Citi noderīgi atribūti ir “mērķis” un “nosaukums”. Mērķa atribūtu gandrīz izmanto, lai atvērtu saiti jaunā cilnē vai logā, piemēram:
Go to MUO in a new tab Rezultāts:
Atribūts 'title' izveido rīka padomu. Virziet kursoru virs zemāk esošās saites, lai redzētu, kā tas darbojas:
Hover over this to see the tool tip Rezultāts:
Virziet kursoru virs šī, lai redzētu rīka padomu
13. ![]()
Ja vēlaties savā lapā iegult attēlu, jums jāizmanto attēla tags. Parasti to izmantosit kopā ar atribūtu “src”. Tas norāda attēla avotu, piemēram:
Rezultāts:
kā pārbaudīt ierakstu snapchat, viņiem nezinot
Ir pieejami citi atribūti, piemēram, “augstums”, “platums” un “alt”. Lūk, kā tas varētu izskatīties:
Kā jūs varētu gaidīt, atribūti “augstums” un “platums” nosaka attēla augstumu un platumu. Kopumā ir ieteicams tikai vienu no tiem iestatīt, lai attēls tiktu pareizi mērogots. Ja izmantojat abus, jūs varat iegūt izstieptu vai salocītu attēlu.
Tags “alt” norāda pārlūkam, kāds teksts jāparāda, ja attēlu nevar parādīt, un to ieteicams iekļaut jebkurā attēlā. Ja kādam ir īpaši lēns savienojums vai veca pārlūkprogramma, viņš joprojām var iegūt priekšstatu par to, kam vajadzētu būt jūsu lapā.
14.
Sakārtotais saraksta tags ļauj izveidot sakārtotu sarakstu. Kopumā tas nozīmē, ka jūs saņemsiet numurētu sarakstu. Katram saraksta vienumam ir nepieciešams saraksta vienuma tags (
), tāpēc jūsu saraksts izskatīsies šādi:
- First thing
- Second thing
- Third thing
Rezultāts:
- Pirmā lieta
- Otra lieta
- Trešā lieta
HTML5 varat izmantot
lai mainītu skaitļu secību. Un sākuma vērtību var iestatīt ar atribūtu start. Atribūts “tips” ļauj pārlūkprogrammai norādīt, kāda veida simbolu izmantot saraksta vienumiem. To var iestatīt uz “1”, “A”, “a”, “I” vai “i”, iestatot sarakstu parādīšanai ar norādīto simbolu:
piecpadsmit.
Nesakārtots saraksts ir daudz vienkāršāks par pasūtīto. Tas ir vienkārši saraksts ar aizzīmēm.
- First item
- Second item
- Third item
Rezultāts:
- Pirmais priekšmets
- Otrais postenis
- Trešais postenis
Nesakārtotiem sarakstiem ir arī “type” atribūti, un jūs varat tos iestatīt uz “disks”, “aplis” vai “kvadrāts”.
16.
Lai gan tabulu izmantošana formatēšanai tiek uztverta, ir daudz reižu, kad vēlaties izmantot rindas un slejas, lai segmentētu informāciju savā lapā. Lai tabula sāktu darboties, ir nepieciešami vairāki tagi. Šeit ir HTML koda paraugs:
1st column
2nd column
Row 1, column 1
Row 1, column 2
Row 2, column 1
Row 2, column 2
The
un
tagi norāda tabulas sākumu un beigas. Thetag satur visu tabulas saturu. Katra tabulas rinda ir ievietota a
tagu. Katra šūna katrā rindā ir ietīta abostagu sleju galvenēm vai tagu sleju datiem. Jums ir nepieciešams viens no tiem katrai kolonnai katrā rindā. Rezultāts:
1. aile 2. aile 1. rinda, 1. sleja 1. rinda, 2. sleja 2. rinda, 1. sleja 2. rinda, 2. sleja
17.
Kad citējat citu vietni vai personu un vēlaties citātu nošķirt no pārējā dokumenta, izmantojiet tagu blockquote. Viss, kas jums jādara, ir pievienot citātu bloka citātu tagu atvēršanā un aizvēršanā:
The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.
Rezultāts:
Tīmeklis, kā es to paredzēju, mēs to vēl neesam redzējuši. Nākotne joprojām ir daudz lielāka nekā pagātne.
Precīzs izmantotais formatējums var būt atkarīgs no izmantotās pārlūkprogrammas vai jūsu vietnes CSS. Bet atzīme paliek nemainīga.
HTML koda paraugi
Izmantojot šos 17 HTML piemērus, jums vajadzētu būt iespējai izveidot vienkāršu vietni. Jūs varat tos visus pārbaudīt tiešsaistes teksta redaktorā, lai sajustu, kā tie darbojas.
Lai iegūtu vairāk koduma HTML nodarbību, izmēģiniet dažas kodēšanas mikromācību lietotnes. Tie palīdzēs ātri sasniegt ātrumu.
Kopīgot Kopīgot Čivināt E -pasts Vai vēlaties iemācīties pamata kodēšanu? Brīvajā laikā izmēģiniet 5 kodēšanas lietotnes Vai vēlaties iemācīties pamata kodēšanu, bet jums ir maz laika? Šīs koduma lieluma kodēšanas lietotnes aizņems tikai dažas minūtes no jūsu aizņemtas dienas.
Lasīt Tālāk Saistītās tēmas - Programmēšana
- WordPress
- HTML
- Web izstrāde
- Kodēšanas apmācības
Par autoru Endijs Betss(Publicēts 221 raksts) Endijs ir bijušais drukas žurnālists un žurnālu redaktors, kurš 15 gadus raksta par tehnoloģijām. Šajā laikā viņš ir devis ieguldījumu neskaitāmās publikācijās un sagatavojis teksta teksta rakstīšanas darbus lieliem tehnoloģiju uzņēmumiem. Viņš ir sniedzis arī ekspertu komentārus plašsaziņas līdzekļiem un vadījis paneļus nozares pasākumos.
Vairāk no Endija BetsaAbonējiet mūsu biļetenu
Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!
Noklikšķiniet šeit, lai abonētu