Учебники

HTML — блоки

Декабрь 15, 2018

Все элементы HTML можно разделить на две категории (а) элементы блочного уровня (б) встроенные элементы.

Блочные элементы

Элементы блока появляются на экране так, как будто они имеют разрыв строки до и после них. Например, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr Элементы />, <blockquote> и <address> являются элементами уровня блока. Все они начинают свою собственную новую линию, и все, что следует за ними, появляется в своей новой новой строке.

Встроенные элементы

С другой стороны, встроенные элементы могут появляться в предложениях и не должны появляться в новой строке. <B>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, < Элементы code>, <cite>, <dfn>, <kbd> и <var> являются встроенными элементами.

Группировка элементов HTML

Есть два важных тега, которые мы очень часто используем для группировки различных других тегов HTML (i) тег <div> и (ii) тег <span>

Тег <div>

Это очень важный тег уровня блока, который играет большую роль в группировании различных других тегов HTML и применении CSS к группе элементов. Даже сейчас тег <div> можно использовать для создания макета веб-страницы, где мы определяем различные части (слева, справа, сверху и т. Д.) Страницы с помощью тега <div>. Этот тег не предоставляет никаких визуальных изменений в блоке, но он имеет большее значение, когда он используется с CSS.

пример

Ниже приведен простой пример тега <div>. Мы изучим Cascading Style Sheet (CSS) в отдельной главе, но мы использовали ее здесь, чтобы показать использование тега <div> —

Live Demo

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML div Tag</title>
   </head>
	
   <body>
      <!-- First group of tags -->
      <div style = "color:red">
         <h4>This is first group</h4>
         <p>Following is a list of vegetables</p>
         
         <ul>
            <li>Beetroot</li>
            <li>Ginger</li>
            <li>Potato</li>
            <li>Radish</li>
         </ul>
      </div>

      <!-- Second group of tags -->
      <div style = "color:green">
         <h4>This is second group</h4>
         <p>Following is a list of fruits</p>
         
         <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Mango</li>
            <li>Strawberry</li>
         </ul>
      </div>
   </body>
   
</html>

Это даст следующий результат —

Тег <span>

HTML <span> является встроенным элементом, и его можно использовать для группировки встроенных элементов в документе HTML. Этот тег также не предоставляет никаких визуальных изменений в блоке, но имеет большее значение, когда он используется с CSS.

Разница между тегом <span> и тегом <div> заключается в том, что тег <span> используется со встроенными элементами, тогда как тег <div> используется с элементами уровня блока.

пример

Ниже приведен простой пример тега <span>. Мы изучим Cascading Style Sheet (CSS) в отдельной главе, но мы использовали ее здесь, чтобы показать использование тега <span> —

Live Demo 

<!DOCTYPE html>
<html>

   <head>
      <title>HTML span Tag</title>
   </head>
	
   <body>
      <p>This is <span style = "color:red">red</span> and this is
         <span style = "color:green">green</span></p>
   </body>
	
</html>

Это даст следующий результат —

46
Share: