Почему мой атрибут шрифта вызывает ошибку, которая удаляет части моего кода и применяется к непреднамеренным частям? - PullRequest
Новая
       25

Почему мой атрибут шрифта вызывает ошибку, которая удаляет части моего кода и применяется к непреднамеренным частям?

2 голосов
/ 07 февраля 2020

РЕШЕНО: ответ на самом деле в комментарии Mio Mio. Я совершенно новичок в области кодирования / программирования и вообще не имею никакого опыта в математике, вычислительной технике и науках. Я столкнулся с небольшим препятствием в своем онлайн-обучении, и я уверен, что кому-то здесь понадобится 5 секунд, чтобы увидеть проблему.

Итак, весь мой код прошел нормально: 

<doctype! html>
<html>
<head>
<h1>Blah</h1>

<h3>blah, blah, blah</h3>

<button>blah</button> <button>blah</button> 

<hr>

<h2>Review of blah</h2>

<img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="picture of elephant" width="270" height="300">

<p>blah blah blah.</p>

<hr>

Затем я заменил заголовок h1 на 

<h1 style="font-size:60px;">Blah</h1>

И он удалил все до 1-го абзаца и превратил весь текст из первого абзаца в шрифт размера 60 тега hr (с тегом hr или без него, результат та же).

У меня есть NF C, почему это произошло, потому что при попытке его в редакторе использовать как: 

<!DOCTYPE html>
<html>
<head>

<h2>The style Attribute</h2>
<p>The style attribute is used to specify the styling of an element, like color:</p>

<h1 style="font-size:60px;">This is a heading.</h1>

<p>what am I doing right here</p>

</head>
</html>

, он работает как положено.

Насколько мой догадки go, я закрыл тег h1, поэтому атрибут style не должен применяться ни к чему, кроме заголовка h1.

Мы ценим любую помощь в объяснении, почему это произошло, и как избежать этого в будущем. Заранее спасибо!

РЕДАКТИРОВАТЬ: Проблема, кажется, когда я копирую и вставляю это в редактор w3 из блокнота. стиль = "Размер шрифта: 60px;» Я попытался набрать вручную, а затем снова ввести вручную в блокнот и скопировать его, что не приводит к вышеупомянутой ошибке. Я не вижу различий, поэтому не уверен, почему он даже регистрирует их как разные.

РЕДАКТИРОВАТЬ: Это были кавычки, для любопытных! См. Ранее редактировать фактический текст, который вызвал проблему.

Ответы [ 2 ]

1 голос
/ 07 февраля 2020

Я не смог воспроизвести эффекты, которые вы описываете (возможно, это различие в браузерах - я опробовал Firefox и Chrome), но я думаю, что хорошим первым шагом было бы убедиться, что ваш HTML правильно:

  • Тип документа должен быть <!DOCTYPE html>, а не <doctype! html>
  • Содержимое элемента <head> должно быть таким, как заголовок страницы, CSS и файлы сценариев для включения и тому подобное. Вы поместили все тело своей страницы в <head>, что неверно.
  • Вместо этого поместите содержимое своей страницы в элемент <body>.
  • Все HTML элементы должны быть закрыты. Например, <h1> должен иметь соответствующий </h1>. Для пустых элементов, таких как <br>, вы должны либо сделать <br></br> или <br/>.

Я переписал ваш проблемный пример c здесь: 

<!DOCTYPE html>
<html>
<head>
<title>My first HTML page</title>
</head>
<body>
<h1>Blah</h1>

<h3>blah, blah, blah</h3>

<button>blah</button> <button>blah</button> 

<hr>

<h2>Review of blah</h2>

<img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="picture of elephant" width="270" height="300" />

<p>blah blah blah.</p>

<hr/>
</body>
</html>

Браузеры пытаются выяснить «что вы имели в виду», если код HTML не на 100% корректен, но соблюдение стандартов поможет вам убедиться, что страница отображается правильно и одинаково во всех браузерах.

Если вы не уверены, что может вызывать проблемы в вашем коде, вы также можете попробовать запустить его через W3 C HTML validator: https://validator.w3.org/. Он довольно строг (и может быть труден для понимания новичком), но хорошо выделяет конкретные проблемы с вашим кодом.

1 голос
/ 07 февраля 2020

Подставляя, как вы сказали, для меня это выглядит нормально, как в следующей ссылке. https://jsfiddle.net/81qzL4ft/

Возможно, проблема в том, где вы работаете, попробуйте использовать последнюю версию Google chrome. 

<doctype! html>
<html>
<head>
<h1 style="font-size:60px;">Blah</h1>

<h3>blah, blah, blah</h3>

<button>blah</button> <button>blah</button> 

<hr>

<h2>Review of blah</h2>

<img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="picture of elephant" width="270" height="300">

<p>blah blah blah.</p>

<hr>
...