Html пропуск строки: Тег | htmlbook.ru – Лучший способ пропустить строку в html?

Лучший способ пропустить строку в html?

Я читал и посещал множество веб-сайтов, но ни один из них не дал мне простого решения. Я хочу знать, как лучше всего добавить / пропустить строку в html? В основном я использую два тега <br /> , но я знаю, что есть более простое решение этой проблемы. Есть ли способ пропустить строку, используя css, вместо того, чтобы делать это:

<p>Hello. <br /><br />This is a test</p> 
html css html5 css3 frontend

Поделиться Источник Lebone     23 декабря 2015 в 08:09

7 Ответов



13

Вы можете просто использовать 2 отдельных абзаца ( <p> ) тегов. Например:

<p>Hello.</p>
<p>This is a test</p> 

Вот демо-версия .

Поделиться nicost     23 декабря 2015 в 08:15



2

Я думаю, что использование тега br-это всегда плохая идея. Попробуйте использовать абзацы, css отступов, css полей, hr. старайтесь избегать br, потому что это не семантично и использовать правильный тег на вашем сайте "helps the search" движков к "understand your site"

Поделиться Szántó Zoltán     23 декабря 2015 в 08:20



1

Вы можете окружить 'Hello' div и добавить css maring-bottom, например:

<p>
    <div>Hello.</div>
    This is a test
</p>

Поделиться ItayB     23 декабря 2015 в 08:14



1

Семантически это зависит от вашей цели. Делайте то, что лучше всего в данной ситуации. Примеры.

  1. Если вам буквально нужно пропустить строку, то есть в вашем тексте есть пустая строка, на которой ничего нет, то обязательно используйте два элемента <br> .

    This is one line of text<br>
    This is also one line of text<br>
    The next line happens to be empty<br>
    <br>
    And here is another line, not empty<br>
    

    И так далее.

  2. Однако если вы хотите создать некоторое пустое пространство между двумя блоками прозы, то эти два блока должны быть абзацами, как упоминалось в других ответах.

  3. И если первая часть-это связка отдельных строк, а вторая часть-это прозаическое произведение, то только вторая часть должна быть абзацем. Нет необходимости также заключать первую часть в теги <p> . Пример:

    Add the water to the recipe<br>
    Add the salt<br>
    
    <p>Note: stir thoroughly!</p>
    
  4. Если вы действительно хотите разделить две строки текста, чтобы показать, что они не принадлежат друг другу, вы можете использовать <hr> . Сделайте его невидимым, если хотите.

    This is some text
    <hr>
    This is some unrelated text
    
  5. Если следующая строка является введением к более поздней половине текста, измените ее на <h5> (то есть заголовок на любом уровне, который вам здесь требуется).

    The last line of the previous section
    <h5>Introduction</h5>
    The fist line of the next section
    

    Это работает, потому что заголовки также имеют встроенные поля.

  6. Наконец, если у вас есть существующий фрагмент html с двумя блоками текста уже в двух элементах HTML, вам не обязательно менять markup; все, что вам нужно сделать, это установить верхние и Нижние поля для этих элементов в CSS.
    Предположим, что они находятся в <section> s:

    <style>
      section {margin:1em 0}
    </style>
    ...
    ... The last line of the previous section</section>
    <section>The fist line of the next section ...
    

Поделиться Mr Lister     29 декабря 2015 в 08:46



0

<p>Hello. <br /> &nbsp; <br> This is a test</p>

Поделиться Fabio Ros     23 декабря 2015 в 09:10



0

Использование элементов уровня блока могло бы помочь. например, p - это элемент уровня блока, который дает разрыв линии.

таким образом, вы можете иметь текст в двух абзацах. и установите для абзаца значение поля/отступа

использование <br> -плохой подход.

Поделиться Rovi     23 декабря 2015 в 09:20



0

Попробуйте использовать его там, где вам нужно пустое место:

    &nbsp;

Если вам нужно несколько пустых мест, то повторите код последовательно следующим образом:

    &nbsp;
    &nbsp;

и т.д.

Поделиться Steven Alves     21 сентября 2016 в 02:36



Пропустить строку html в Twig

Я не использовал Twig раньше, и теперь встает проблема остроумия, что мне нужно пропустить полную строку в twig, как это есть Мой html является <h5 class=title>{{ 'publish' | translate...


Есть ли лучший способ открыть файл, пропуская строку?

Я хочу открыть файл и пропустить первую строку. Это то, что я придумал: h :: IO Handle h = do h' <- openFile foo.dat ReadMode _ <- hGetLine h' return h' Есть ли лучший способ сделать это?


Apache Camel-пропустить нижний колонтитул / последнюю строку

Я использую apache camel в контексте маршрутизации для интеграции некоторых файлов CSV. Если я хочу пропустить первую строку csv, я могу легко сделать это в unmarshal: <unmarshal> <csv...


Лучший способ пропустить заголовок при чтении из текстового файла в Perl?

Я беру несколько колонок из файла с табуляцией в Perl. Первая строка файла полностью отличается от других строк, поэтому я хотел бы пропустить эту строку как можно быстрее и эффективнее. Это то, что...


Python: есть ли лучший способ пропустить тестовый модуль?

Я читал, как пропустить весь модуль Python unittest во время выполнения? и это не кажется очень аккуратным способом В Java все, что вам нужно сказать, это @Ignore в тестовом классе, и весь тестовый...


Пропустить текущую строку в отладчике

Есть ли способ пропустить текущую строку в отладчике Visual Studio с помощью сочетаний клавиш? Единственный способ, которым я смог это сделать, - использовать желтый курсор слева или set next...


Лучший способ создать строку C

В настоящее время я использую char *thisvar = stringcontenthere; чтобы объявить строку в C. Это лучший способ объявить строку в C? А как насчет генерации C-String из C++ - Strings?


Пропустить строку GridBagLayout

Я использую GridBagLayout на JFrame, и я хотел бы иметь возможность пропустить строку или две, но эти строки отображаются как пустые, а затем имеют кнопку после этих строк. Я не могу найти в...


Элегантный способ пропустить первую строку при использовании модуля python fileinput?

Есть ли элегантный способ пропустить первую строку файла при использовании модуля python fileinput? У меня есть файл данных с красиво оформленными данными, но первая строка-заголовок. Используя...


Пропустить каждую N-ю строку результата в PostgreSQL

Я ищу способ пропустить строки в PostgreSQL. Два способа, которыми я мог бы это сделать, используют: SELECT * FROM table WHERE id % 5 = 0 Однако мне пришлось бы извлекать последовательные строки,...


Лучший способ пропустить строку в HTML?

Семантически, это зависит от вашей цели. Делай все возможное в этой ситуации. Некоторые примеры.

  • Если вам буквально нужно пропустить строку, то есть иметь пустую строку без текста в ней, то непременно используйте два элемента <br> .

    This is one line of text<br>
    This is also one line of text<br>
    The next line happens to be empty<br>
    <br>
    And here is another line, not empty<br>

    И так далее.

  • Однако, если вы хотите создать некоторое пустое пространство между двумя блоками прозы, то эти два блока должны быть абзацами, как упомянуто в других ответах.

  • И если первая часть представляет собой набор отдельных строк, а вторая часть является частью прозы, то только вторая часть должна быть абзацем. Не нужно также заключать первую часть в теги <p> . Пример:

    Add the water to the recipe<br>
    Add the salt<br>
    
    <p>Note: stir thoroughly!</p>
  • Если вы намерены разделить две строки текста, чтобы показать, что они не принадлежат друг другу, вы можете использовать <hr> . Сделайте это невидимым, если хотите.

    This is some text
    <hr>
    This is some unrelated text
  • Если следующая строка представляет собой введение в более позднюю половину текста, измените ее на <h5> (то есть заголовок на любом уровне, который вам здесь требуется).

    The last line of the previous section
    <h5>Introduction</h5>
    The fist line of the next section

    Это работает, потому что заголовки также имеют встроенные поля.

  • И наконец, если у вас есть существующий фрагмент HTML с двумя блоками текста уже в двух элементах HTML, вам не обязательно менять разметку; все, что вам нужно сделать, это установить верхние и нижние поля для этих элементов в CSS.
    Предположим, они находятся в <section> :

    <style>
      section {margin:1em 0}
    </style>
    ...
    ... The last line of the previous section</section>
    <section>The fist line of the next section ...
  • html - Пропуск строк в таблице HTML

    Я пытаюсь создать HTML-таблицу с желаемым результатом

    |----HTML PAGE----------------------|
    |                                   |
    |  ---Table-------------------------|
    |  |   T     | Text      | Text     |
    |  |   E     |----------------------|
    |  |   X     | Image     | Image    |
    |  |   T     |----------------------|
    |  |         | Text      | Text     |
    |  |         |-----------------------
    |  |         | Image     | Image    |
    |  |---------|-----------------------
    

    Но моя таблица не пропуская строки , когда я пытался добавить <td>до колонки текста. Как пропустить столбец без добавления строки или как мне сделать мой стол отображаться только на правой стороне страницы?

    <div>
        <table border=1 width=100%>
            <tbody>
                <tr>
                    <td>Description</td>
                <tr>
                    <th>MATH</th>
                    <th>SCIENC</th>
                </tr>
                <tr>
                    <td>
                        <form action=/ method=post>
                            <input type=imagesrc=<%=request.getContextPath()%>/css/categories/math.jpg>
                        </form>
                    </td>
                    <td>
                        <form action=/ method=post>
                            <input type=image src=<%=request.getContextPath()%>/css/categories/science.jpg>
                        </form>
                    </td>
                    </tr>
                <tr>
                    <th>PHYSIC</th>
                    <th>ART</th>
                </tr>
                <tr>
                    <td>
                        <form action=/ method=post>
                            <input type=imagesrc=<%=request.getContextPath()%>/css/categories/physic.jpg>
                        </form>
                    </td>
                    <td>
                        <form action=/ method=post>
                            <input type=image src  <%=request.getContextPath()%>/css/categories/art.jpg>
                        </form>
                    </td>
                </tr>
                </td>
                </tr>
                </tbody>
            </table>
        </div>
    

    Пропуск строк в таблице HTML (html)

    0 logger [2015-03-28 20:57:00]

    Я пытаюсь создать таблицы HTML с желаемым результатом

    |----HTML PAGE----------------------|
    |                                   |
    |  ---Table-------------------------|
    |  |   T     | Text      | Text     |
    |  |   E     |----------------------|
    |  |   X     | Image     | Image    |
    |  |   T     |----------------------|
    |  |         | Text      | Text     |
    |  |         |-----------------------
    |  |         | Image     | Image    |
    |  |---------|-----------------------
    

    Но моя таблица не пропускает строки, когда я пытался добавить <td> перед текстовым столбцом. Как пропустить столбец без добавления строк или как заставить таблицу показывать только в правой части страницы?

    <div>
        <table border="1">
            <tbody>
                <tr>
                    <td>Description</td>
                <tr>
                    <th>MATH</th>
                    <th>SCIENC</th>
                </tr>
                <tr>
                    <td>
                        <form action="/" method="post">
                            <input type="image"src="<%=request.getContextPath()%>/css/categories/math.jpg">
                        </form>
                    </td>
                    <td>
                        <form action="/" method="post">
                            <input type="image" src="<%=request.getContextPath()%>/css/categories/science.jpg">
                        </form>
                    </td>
                    </tr>
                <tr>
                    <th>PHYSIC</th>
                    <th>ART</th>
                </tr>
                <tr>
                    <td>
                        <form action="/" method="post">
                            <input type="image"src="<%=request.getContextPath()%>/css/categories/physic.jpg">
                        </form>
                    </td>
                    <td>
                        <form action="/" method="post">
                            <input type="image" src  <%=request.getContextPath()%>/css/categories/art.jpg">
                        </form>
                    </td>
                </tr>
                </td>
                </tr>
                </tbody>
            </table>
        </div>
    

    html

    Как сделать пробел в HTML — виды и спецзнаки

    Публикация статей на сайт ответственная задача, требующая написания хорошего текста, базовое знание HTML и специальных символов. Что касается последнего, то необходимость вызвана банальным размещением отступов. Как поставить неразрывный пробел или табуляцию через код, читайте далее в статье.

    Использование одиночного символа

    Визуальное отображение  »Визуальное отображение  »

    Для установления одиночного пробела воспользуйтесь следующими вариантами спецсимволов (без кавычек):

    1. Стандартный «&nbsp;» известен многим продвинутым пользователям. Неразрывный пропуск часто используется при добавлении новой строчки. Нужно учитывать, что спецсимвол не создаёт разрыва между абзацами.
    2. Аналогичным элементом считается «&#160;», применяется таким же образом и предоставляет схожий эффект.
    3. Специализированный символ «&ensp;» позволяет создать двойной пробел, соотносящийся с табуляцией. Удобство заключается в меньшем засорении статьи или документа для достижения желаемого эффекта.
    4. Редкий код «&emsp;» создаёт сразу четыре в ряд. Рассматривается только в особых случаях, так как не все браузеры правильно отражают.

    Создать табуляцию возможно при совмещении нескольких соответствующих элементов. К примеру, добавить в ряд пару «&nbsp;», все зависит только от вашего усердия и потребности в пробелах.

    Используем CSS: сокращаем код каскадными таблицами

    CSS в действииCSS в действии

    Вставка неразрывного пробела необходимая опция при написании статей. Но выставление табуляции к красной строке создаёт лишнюю нагрузку на текст, вводит в сомнение поисковые системы. Чтобы избежать различных санкций в отношении вашего сайта, рекомендуем воспользоваться корректировкой каскадных таблиц.

    Редактирование CSS необходимо выполнить для HTML тегов h2, h3, h4, p, pre. С помощью переменной х.indent выставляем нужные параметры отступа и применяем style к соответствующему элементу. Более широкие промежутки установлены у тега pre. Внутри можно выставить нужное количество пробелов, которые сохранят структуру после публикации.

    Рекомендуем быть аккуратными в использовании пропусков в HTML разметке. Лишние пробелы являются причиной снижения позиций в поисковой выдачи, неудобного чтения на портативных устройствах. Также забудьте кнопку Tab для создания пробелов в HTML, эти промежутки не учитываются.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *