Етикети, определящи параграф, интервал, HTML блок и параграф
Нека разгледаме подробно HTML блокове и абзацикато елементи на уеб страница.
- HTML абзацдефинирани от тагове.
- HTML абзациобикновено съдържат текст, етикети за форматиране, изображения.
- HTML абзацне може да съдържа блокови елементи като заглавки
- , блок
и други параграфи. - HTML блокдефинирани от тагове .
- HTML блокможе да съдържа всякакви елементи на уеб страница, в произволно количество.
- HTML блоковечудесен за уеб страници и лесен за манипулиране.
Помислете за кода по -долу:
Резултат:
Можем да видим това HTML абзациса с отстъп вертикално - това е особеността на етикетите. HTML блокове
Етикетите не могат да съдържат други или
Етикети и по принцип едно и също нещо, но консорциумът W3C препоръча използването на малки букви. V нова версия HTML, както в съвременния XHTML, използването на главни букви при писане на тагове е забранено.
Блокиране
HTML пространство от таблица със специални символи
HTML пространствови позволява да увеличите пространството между думи и знаци.
Що се отнася до интервалите между думите, без значение колко от тях има в Notepad, тоест в изходния код, само една ще бъде показана на уеб страницата. Ако трябва да увеличите разстоянието, използвайте интервала от таблицата със символи. Вие питате: Защо имаме нужда от тези кодирани стойности на обикновени знаци? - Ще отговоря: Те са необходими, за да се покажат например такива скоби< >... С други думи, за да покажа етикетите, в моя редактор пиша: ... Етикети: , както си спомняме, преобразувайте текста в еднопространствен (машинописен).
Начини за показване на HTML абзац
Примери за извеждане на абзаци.
Здравейте! Нека продължим да разглеждаме основите на програмирането на уебсайтове. Трудно е да си представим някой от тях без етикет за абзац в кода си. Днес ще разгледаме как да го напишем правилно и описание на няколко допълнителни действия с текста.
Пример
Нека вземем пример за това как да направите абзац в HTML код.
Едно или повече изречения.
Предпоставкае наличието на отварящ и затварящ етикет. Между другото, всичко може да се направи директно в бележника, точно тогава ще трябва да запишете файла в подходящия формат.
Форматиране
Доста често забелязвам, че хората се интересуват как можете да направите червена линия. Много е просто за конкретен параграф.
Активирането на тези опции ще отстъпи първия ред на 15 пиксела отляво. Ако такива промени трябва да бъдат приложени към всички P тагове, тогава in CSS файл, който се свързва със страниците на сайта, можете да напишете кода, показан по -долу.
Лично аз обикновено не правя червени линии, когато редактирам кода в бележника или друг редактор.
Просто включвам подложка между текстови полета. За да направите това, трябва да напишете в CSS специални параметри.
p (поле на дъното: 25px;)
Ако използвате тази конструкция, след всеки параграф ще има отстъп от 25 пиксела.
Всъщност има много възможности за работа с HTML и различни стилове. Описал съм само няколко от тях, много е трудно да обхванем всичко в една статия.
Искате ли да знаете повече? Може би предишните ми публикации по следните теми ще бъдат полезни:
Тук ще завърша статията и мисля, че сега няма да е трудно да се правят абзаци в HTML и да се стилизират красиво с помощта на специални тагове.
Желая ви голям успех в овладяването на програмирането. Между другото, мислили ли сте някога да печелите пари от информационни некомерсиални сайтове? Просто прекрасна информация, предоставена специално за нейните читатели в.
Онлайн бизнесът и финансите са ключовите теми на този блог. Можете да се запознаете с индивидуалните перспективи в мрежата точно сега от публикуваните материали. Продължавам да подготвям и публикувам ново и най -важното наистина полезно съдържание. Абонирайте се за актуализации на Workip на вашия електронна поща... До следващия път.
- в процеса на създаване на уебсайт трябва да работим много с текстови блокове или текстови фрази. Веднъж трябваше да добавя текстова фраза, така че преди тази текстова фраза имаше някои отстъп текст от html ръбаблока, към който е добавен дадения текст.
Така че, първият метод е най -естественият и прост. За да направите отстъп преди текста, добавете преди текста html кодинтервали - Можете да добавите html интервал код във всеки html редактор.
Ето пример за работещ код за задаване на отстъп за текст, като се използва интервалът:
Html отстъп текст вляво, използвайте кода за интервал
В този пример, преди избрания от нас текст, интервалът е -& nbsp; добавен четири пъти, в резултат на което получаваме отстъпа, от който се нуждаем.
Знаем, че празният код се обработва от всеки браузър. Следователно, като добавите необходимия брой интервали преди текста, можете да получите необходимия отстъп за текста.
Хубавото на този метод е, че той гарантирано ще работи във всеки браузър.
Но имайте този методима значителен недостатък. За да направите вдлъбнатината за текста достатъчно голяма по дължина, в html кода, преди текста ще трябва да добавите голям бройкосмически герои, които може да не изглеждат красиви, тромави и не професионални.
Един от вариантите за решаване на този проблем е следващия начинзадания за отстъп.
HTML вмъкване на текст, метод втори - този метод се основава на свойствата на маркера за цитати. Този маркер задава отстъп от приблизително 40 пиксела отляво и отдясно за текста, поставен в него. Освен това подложката е настроена отгоре и отдолу. Пример за htmlкодът за използване на този метод е даден по -долу:
вляво, използвайте маркера блоков цитат
Както можете да видите, този метод за задаване на отстъп от текст е много лесен за използване, но този метод има и значителен недостатък. Отстъпът, който тагът задава блоков цитат,е фиксирана и винаги равна на една и съща стойност - 40px.
За да поправите ситуацията и при добавяне html отстъпи за текстза да можем да зададем каквато и да е стойност, ще използваме третия метод.
Вдлъбнатина на HTML текст, трети метод.
Тук ще използваме свойството за текстово отстъпване на CSS Cascading Style Sheets.
Ако отворим CSS препратката, на страницата с описание на свойствата на text-indent ще видим, че с помощта на text-indent можем да зададем размера на отстъпа на първия ред или първия параграф на произволен блок от текст.
Обмисляме пример с кратък текстов блок, така че свойствата на текстовия отстъп са подходящи за нашия случай.
По-долу е html кодът, който отстъпва текст с помощта на text-indent. От примера можете да видите, че чрез задаване на различни стойности на аргументи за текст-отстъп, можем да променим размера на текстовия отстъп:
Htmlотстъптекстстилът на CSS работи - текст-отстъп
Според мен този начин на задаване на отстъп за текста е най -оптималният, но въпреки това помислете за друг начин за задаване на отстъп, като използвате изображения.
HTML отстъп на текст, четвъртият метод - тук ще използваме изображение, за да зададем отстъп.
Като работещ пример, нека да разгледаме html кода, който демонстрира как работи този метод:
вляво, използвайте изображението
От дадения пример ясно се вижда, че чрез промяна на ширината на изображението можем да променим позицията на текста, тоест да зададем необходимия отстъп за текста.
Като изображение можете да използвате изображение, чиято ширина и височина са равни на един пиксел. За да не се вижда изображението, което използваме, на страницата, задайте цвета за него точно същият като фона на страницата на сайта.
Според мен горните методи за задаване на текстови отстъпи са напълно достатъчни, за да организирате отстъпа, от който се нуждаете във всяка ситуация, когато добавяте съдържание към страницата на вашите сайтове.
Всеки текст има своя уникална структура: книгите са разделени на части, раздели и глави, вестниците и списанията имат отделни заглавия и подзаглавия, които от своя страна включват текстови фрагменти, които също имат своя собствена структура: абзаци, тирета и т.н.
Текстът, поставен на уеб страници, не прави изключение; той също трябва да има логическа структура, разбираема за всеки потребител. В края на краищата, много зависи от това колко удобен и прост ще бъде възприет текстът на страницата: първо, какво впечатление ще направи посетителят за вашия сайт.
За да създадете структурни единици текст, като абзаци, HTML документите използват етикета
, който разделя текстови фрагменти с вертикален отстъп (преди и след абзаца се добавя празен ред).
Забележка: по подразбиране разстоянието между параграфите е 1em (em е мерна единица, равна на височината на шрифта), тоест разстоянието между абзаците директно зависи от размера на шрифта.
За да промените отстъпите между абзаците, без да променяте размера на шрифта, можете да използвате CSS собственостмарж.
Не забравяйте крайния етикет
Повечето браузъри ще визуализират HTML документа правилно, дори ако забравите за крайния маркер.
Параграф
Още един параграф
Този код ще работи в повечето браузъри, но не разчитайте на него. Забравеният краен маркер може да доведе до неочаквани резултати или грешки.
червена линия
Какво представлява червената линия? По дефиниция това е началният ред на абзац, който преди беше маркиран в червено (оттук и заглавието). Преди изобретяването на типографията книгите са писани на ръка - глава или част от текст, първата дума или буква е написана с червена боя. Така се появи концепцията за „писане от червената линия“ - означава началото на нова мисъл, глава или част.
Въпреки това, при създаването на уеб страници, дизайнът на червената линия се използва рядко, въпреки факта, че ви позволява да възприемате текста визуално с много по -голямо удобство, което е доста важно за традиционния читател - не всеки е удобен да чете електронния версия на текста.
За да добавите червен ред към абзаците си, трябва да използвате свойството CSS с текстово отстъпление, което ви позволява да отстъпите първото изречение:
Опитвам "
В горния пример първият ред на всеки параграф на страницата ще започне с отстъп от 25px. Примерът по -долу демонстрира как можете да зададете червен ред само за конкретен абзац на страница.
Както във всяко истинско изкуство, в добрите текстове няма дреболии, към които някои включват червената линия, считайки, че използването й не е толкова важно. Трябва обаче да се разбере, че всяка запетая носи както естетическо, така и семантично натоварване и не само е почит към правилата на граматиката - това важи и за форматирането.
Опитвам "Забележка: не е необходимо да задавате подложката на 25px, можете да изберете оптимален размерсамите отстъпи, като също с помощта на свойството text -indent е възможно да се направи ред, стърчащ над останалата част от текста, за това трябва да зададете отрицателна стойност за свойството (например: -30px).
Задача
Отстъп от първия ред на всеки параграф.
Решение
Когато трябва да зададете отстъп на абзац, който също се нарича червен ред, най-добре е да използвате свойството за стил текстово отстъпване. Стойността му определя колко да измести текста на първия ред надясно изходна позиция... В този случай ширината на текстовия блок не се променя и остава първоначално зададена. Количеството отстъп може да бъде посочено в пиксели, процент или други налични единици (пример 1).
Пример 1. Отстъпване на първия ред
HTML5 CSS 2.1 IE Cr Op Sa Fx
Вавилонският пандемониум, според библейската традиция, е неуспешният опит на цар Нимрод да построи стълб във Вавилон до небето. Бог, ядосан на хората за безразсъдното им желание, реши да накаже строителите: той смеси езика им, така че те престанаха да разбират взаимно, бяха принудени да спрат строителството и малко по малко се разпръснаха по света. Следователно, както обясняват древните, разликата в езиците произхожда.
В обичайната концепция вавилонският пандемоний означава разстройство, объркване с голяма тълпа от хора.
Резултатът от този пример е показан на фиг. 1.
