HTML. Общий синтаксис, обзор тегов

1.

Знакомство с HTML
Общий синтаксис, обзор
тегов
Першин Александр Александрович

2.

HTML-теги
<имя_тега> — тег.
Примеры тегов:
<html> <body> <section> <article> <div>
<h1> <nav> <ul> <ol> <li> <p> <a>
<strong> <em> <time> <mark>
<img> <video> <audio>
<form> <input> <button> <label>
2

3.

Парные теги
<h1>Три главных слова</h1>
открывающий тег
<p>
Инкапсуляция, наследование, полиморфизм!
</p>
закрывающий
тег
3

4.

Одиночные теги
<hr> <!-- разделитель -->
<br> <!-- перенос строки -->
<input type="text"> <!-- поле ввода -->
<img src="logo.png"> <!-- изображение -->
4

5.

Вложенные теги
Можно
<p>И текст абзаца с <em>выделением</em></p>
Нельзя <!-- неправильно закрыты -->
<strong><em>жирный</strong> курсив</em>
5

6.

Вложенные теги
Можно
<ul>
<li>элемент списка</li>
<li>элемент списка</li>
</ul>
Нельзя <!-- по правилам использования тега -->
<ul>
<p>название списка</p>
<li>элемент списка</li>
</ul>
6

7.

Атрибуты тегов
Атрибутов может быть несколько.
Некоторым тегам необходимы атрибуты.
<img src="image.jpg">
<input type="text" name="email">
<p class="important">...</p>
<input type="submit" class="btn">
<div class="logo">...</div>
7

8.

Простейшая страница
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Заголовок окна</title>
</head>
<body>
<!-- Содержимое -->
</body>
</html>
8

9.

Страница сложнее, типы тегов
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Заголовок окна</title>
Есть всегда
Служебные: для
браузера и
поисковиков
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>A+</h1>
<p>Обучаем настоящих профессионалов в
области IT.</p>
<script src="scripts.js"></script>
Подключают
внешние
ресурсы
Разметка
содержания
</body>
</html>
9

10.

Теги содержания
<!-- Тысячи их -->
<h1> <h2> <h3> <h4> <h5> <h6>
<nav> <p> <ul> <ol> <li> <dl> <dt> <dd>
<strong> <em> <b> <i> <cite> <del> <ins>
<a> <img> <video> <audio>
<form> <input> <textarea> <select> <button>
<table> <tr> <td> <article> <main>
<!-- Рабочие лошадки -->
<div> <section> <span>
10

11.

Рабочие лошадки разметки
<div>
<section>
<span>
и атрибут
class
11

12.

Рабочие лошадки разметки
12

13.

Валидность кода
Markup Validation Service
http://validator.w3.org
Валидация зависит от того, какой указан тип документа
<!DOCTYPE>.
13
English     Русский Правила