Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Печать HTML документа

Здравствуйте!
У меня руководство поставило задачу: :mad:

Условие:
Существует некий HTML документ, находящийся на локальном компьютере пользователя.
В этом документе, есть несколько полей (ну например INPUT TYPE=TEXT) и кнопка (BUTTON или INPUT TYPE=SUBMIT). :cool:

Задача:
Пользователь должен ввести в поля некоторые значения и нажать на кнопку.
При нажатии на кнопку, должно появиться диалоговое окно принтера(стандартное windows) и если нажать на "Печать", должен распечататься некоторый документ с теми значениями, который ввел пользователь. :eek:

Подскажите пожалуйста, это возможно осуществить с помощью JavaScript?????:confused:
Если возможно, то подскажите, как это сделать?
Ответ: HTML и CSS в студию
Вопрос: Загрузка html документа

Подскажите пожалуйста! Есть ли какой нибудь плагин который загружает содержимое html документа в указанный div? несколько дней ищу такую возможность и смог найти только пример данной реализации
CODE (javascript):

  1.  
  2. function showContent(link)
  3. {
  4.         $("#sideRight").addClass('sideRight1'); // панель
  5.         var cont = document.getElementById('contentBody');
  6.         var loading = document.getElementById('loading');
  7.  
  8.        
  9.         if(getCookie('panel') == '1') cont.innerHTML = loading.innerHTML; else{
  10.                 date = new Date();
  11.                 date.setHours(date.getHours() + 1);
  12.                 setCookie('panel', '1', date.toUTCString());
  13.                 setTimeout(function()
  14.                 {
  15.                         $("#contentBody").css('display','block');
  16.                         cont.innerHTML = loading.innerHTML
  17.                 }, 1500);
  18.         }
  19.  
  20.         var http = createRequestObject();
  21.         if(http)
  22.         {
  23.                 http.open('get', link);
  24.                 http.onreadystatechange = function()
  25.                 {
  26.                         if(http.readyState == 4)
  27.                         {
  28.                                 setTimeout(function() {cont.innerHTML = http.responseText}, 5000);
  29.                         }
  30.                 }
  31.                 http.send(null);
  32.         }else{
  33.                 document.location = link;
  34.         }
  35. }
  36.  
  37. function createRequestObject()
  38. {
  39.         try { return new XMLHttpRequest() }
  40.         catch(e)
  41.         {
  42.                 try { return new ActiveXObject('Msxml2.XMLHTTP') }
  43.                 catch(e)
  44.                 {
  45.                         try { return new ActiveXObject('Microsoft.XMLHTTP') }
  46.                         catch(e) { return null; }
  47.                 }
  48.         }
  49. }
  50.  


этот пример меня не совсем устраивает. т.к. когда делаю какие та изменения в документе html (который подгружаю) эти изменения не отображаются. Отображаться начинают только после очистки истории.
Также данные которые должны отображаться в панели (div) которая выезжает с правой стороны. Панель не успевает отобразиться до конца, а содержимое html документа уже отображается. Данную проблему решил через setTimeout, но когда кликаю на кнопку чтоб загрузить другой html документ прелоадер начинает отображаться не сразу т.к. указан setTimeout. Здесь решил сделать определение была ли нажата первый раз кнопка или нет, и сделал запись в куки, но понимаю что это какой та получается бред! Подскажите пожалуйста может есть какой та плагин? или может можно решить то что я добавлял самостоятельно не таким бредовым кодом, и решить проблему с кешированием.

(Отредактировано автором: 30 Ноября, 2015 - 13:18:31)

Ответ:
kuller пишет:
а как к этому прикрутить прелоадер?


CODE (javascript):

  1. $(element).click(function(e){
  2.         e.preventDefault();
  3.  
  4.         $('.loader').show(); // показать
  5.  
  6.         $.get('index.php', function(response){
  7.                 $('#contentBody').html(response);
  8.                 $('.loader').hide(); // скрыть
  9.         });
  10. });


-----
Чем больше узнаю, тем больше я не знаю.
Вопрос: Вставить в html документ атрибут по средствам jqury

Добрый день! Мне нужно вставить в html документ атрибут с помощью jqury, но так чтобы после обновления страницы он не исчезал, а оставался в документе. Подскажите как доработать код, пожалуйста!
вот сам код:
Javascript
1
$("#promo_result").attr("class","promo_result_good").html("Тут любое сообщение");
Ответ: Для того, чтобы сохранить какое-то состояние между перезагрузками страницы нужно
- или использовать cookie
- или использовать localStorage

И при загрузке страницы проверять, есть ли определённое значение в cookie или в localStorage.

Можно ещё и sessionStorage использовать.
Разница только в том, свойство sessionStorage хранит данные в течение сеанса (до закрытия браузера), в отличие от данных, находящихся в свойстве localStorage, которые не имеют ограничений по времени хранения и могут быть удалены только с помощью JavaScript.



Сохранение данных:
Javascript
1
sessionStorage.setItem('key', 'value');
Чтение данных:
Javascript
1
sessionStorage.getItem('key');
Удаление данных:
Javascript
1
sessionStorage.removeItem('key');
Полная очистка:
Javascript
1
sessionStorage.clear();
Вопрос: Как к HTML документу, подключить внешний CSS файл

Как к HTML документу, подключить внешний CSS файл?
Ответ: все получилось, спасибо)))
Вопрос: Что такое HTML?

Что такое HTML ?

HyperText Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться различными типами WEB-броузеров.
Когда документ создан с использованием HTML, WEB-броузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки.
Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.

Большинство документов имеют стандартные элементы, такие, как заголовок, параграфы или списки. Используя тэги HTML вы можете обозначать данные элементы, обеспечивая WEB-броузеры минимальной информацией для отображения данных элементов, сохраняя вцелом общую структуру и информационную полноту документов.
Все что необходимо, чтобы прочитать HTML-документ - это WEB-броузер, который интерпретирует тэги HTML и воспроизводит на экране документ в виде, который ему придает автор.

В большинстве случаев автор документа строго определяет внешний вид документа.
В случае HTML читатель (основываясь на возможностях WEB-броузера может, в определенной степени, управлять внешним видом документа (но не его содержимым). HTML позволяет отметить, где в документе должен быть заголовок или абзац при помощи тэга HTML, а затем предоставляет WEB-броузеру интерпретировать эти тэги. Например, один WEB-броузер может распознавать тэг начала абзаца и представлять документ в нужном виде, а другой не имеет такой возможности и представляет документ в одну строку.

Пользователи некоторых WEB-броузеров имеют, также, возможность настраивать размер и вид шрифта, цвет и другие параметры, влияющие на отображение документа.


HTML-тэги могут быть условно разделены на две категории: тэги, определяющие, как будет отображаться WEB-броузером тело документа вцелом и тэги, описывающие общие свойства документа, такие как заголовок или автор документа .
Запомните, что основное преимущество HTML заключается в том, что ваш документ может быть просмотрен на WEB-броузерах различных типов и на различных платформах.

Спецификация HTML 4

Основные теги

<html></html> Указывает программе просмотра страниц что это HTML документ.
<head></head> Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин.
<body></body> Определяет видимую часть документа
Теги оглавления
<title></title> Помещает название документа в оглавление программы просмотра страниц

Атрибуты тела документа

<body bgcolor=?> Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет.
<body text=?> Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет.
<body link=?> Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет.
<body vlink=?> Устанавливает цвет гиперссылок на которых вы уже побывали, используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет.
<body alink=?> Устанавливает цвет гиперссылок при нажатии.

Теги для форматирования текста

<pre></pre> Обрамляет предварительно отформатированный текст.
<h1></h1> Создает САМЫЙ БОЛЬШОЙ заголовок
<h6></h6> Создает самый маленький заголовок
<b></b> Создает жирный текст
<i></i> Создает наклонный текст
<tt></tt> Создает текст - имитирующий стиль печатной машинки.
<cite></cite> Используется для цитат, обычно наклонный текст.
<em></em> Используется для выделения из текста слова (наклонный или жирный текст)
<strong></strong> Используется для выделения наиболее важных частей текста (наклонный или жирный текст)
<font size=?></font> Устанавливает размер текста в пределах от 1 до 7.
<font color=?></font> Устанавливает цвет текста, используя значение цвета в виде RRGGBB.

Гиперссылки

<a href="URL"></a> Создает гиперссылку на другие документы или часть текущего документа.
<a href="mailto:EMAIL">
</a> Создает гиперссылку вызова почтовой программы для написания письма автору документа.
<a name="NAME"></a> Отмечает часть текста как цель для гипперссылок в документе.
<a href="#NAME"></a> Создает гиперссылку на часть текущего документа.

Форматирование

<p> Создает новый параграф
<p align=?> Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center
<br> Вставляет перевод строки.
<blockquote></blockquote> Создает отступы с обеих сторон текста.
<dl></dl> Создает список определений.
<dt> Определяет каждый из терминов списка
<dd> Описывает каждое определение
<ol></ol> Создает нумерованный список
<li> Определяет каждый элемент списка и присваивает номер
<ul></ul> Создает ненумерованный список
<li> Предваряет каждый элемент списка и добавляет кружок или квадратик.
<div align=?> Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей.


Графические элементы

<img src="name"> Добавляет изображение в HTML документ
<img src="name" align=?> Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle
<img src="name" border=?> Устанавливает толщину рамки вокруг изображения
<hr> Добавляет в HTML документ горизонтальную линию.
<hr size=?> Устанавливает высоту(толщину) линии
<hr width=?> Устанавливает ширину линии, можно указать ширину в пикселах или процентах.
<hr noshade> Создает линию без тени.
<hr color=?> Задает линии определенный цвет. Значение RRGGBB.

Таблицы

<table></table> Создает таблицу.
<tr></tr> Определяет строку в таблице.
<td></td> Определяет отдельную ячейку в таблице.
<th></th> Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом)

Атрибуты таблицы

<table border=#> Задает толщину рамки таблицы.
<table cellspacing=#> Задает расстояние между ячейками таблицы.
<table cellpadding=#> Задает расстояние между содержимым ячейки и ее рамкой.
<table width=#> Устанавливает ширину таблицы в пикселах или процентах от ширины документа.
<tr align=?> или <td align=?> Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right.
<tr valign=?> или <td valign=?> Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom.
<td colspan=#> Указывает кол-во столбцов которое объединено в одной ячейке. (по умолчанию=1)
<td rowspan=#> Указывает кол-во строк которое объединено в одной ячейке. (по умолчанию=1)
<td nowrap> Не позволяет программе просмотра делать перевод строки в ячейке таблицы.


Кадры

<frameset></frameset> Предваряет тег <body> в документе, содержащем кадры;
<frameset rows="value,value"> Определяет строки в таблице кадров, высота которых определена кол-вом пикселов или в процентном соотношении к высоте таблицы кадров.
<frameset cols="value,value"> Определяет столбцы в таблице кадров, ширина которых определена кол-вом пикселов или в процентном соотношении к ширине таблицы кадров.
<frame> Определяет единичный кадр или область в таблице кадров.
<noframes></noframes> Определяет, что будет показано в окне браузера если он не поддерживает кадры.

Атрибуты кадров

<frame src="URL"> Определяет какой из HTML документов будет показан в кадре.
<frame name="name"> Указывает Имя кадра или области, что позволяет выводить информацию в этот кадр или область из других кадров.
<frame marginwidth=#> Определяет величину отступов по левому и правому краям кадра; должно быть равно или больше 1.
<frame marginheight=#> Определяет величину отступов по верхнему и нижнему краям кадра; должно быть равно или больше 1.
<frame scrolling=VALUE> Указывает будет ли выводится линейка прокрутки в кадре; значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - auto.
<frame noresize> Препятствует изменению размеров кадра.

Формы

Для форм, выполняющих какие-то функции должны быть запущены соответствующие CGI скрипты на сервере. HTML только создает внешний интерфейс формы.
<form></form> Создает формы
<select multiple name="NAME" size=?></select> Создает меню со скролингом. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки.
<option> Указывает каждый отдельный элемент меню
<select name="NAME"></select> Создает ниспадающее меню
<option> Указывает каждый отдельный элемент меню
<textarea name="NAME" cols=40 rows=8></textarea> Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту.
<input type="checkbox" name="NAME"> Создает checkbox. За тегом следует текст.
<input type="radio" name="NAME" value="x"> Создает radio кнопку. За тегом следует текст.
<input type=text name="foo" size=20> Создает строку для ввода текста. Параметром Size указывается длина в символах.
<input type="submit" value="NAME"> Создает кнопку "Принять"
<input type="image" border=0 name="NAME" src="name.gif"> Создает кнопку "Принять" - для этого используется изображение
<input type="reset"> Создает кнопку "Отмена".


P.S.Всем удачи в использование HTML-тегов!

Если есть замечания по статье,то все пожелания и критику кидайте в личку!
Ответ:
Дополнение


1. Новые атрибуты для тегов.

Атрибуты для тега <input>
Атрибут
Описание
minАтрибут устанавливает нижнее значение для ввода числа или даты в поле формы.
maxАтрибут устанавливает верхнее значение для ввода числа или даты в поле формы.
multipleАтрибут multiple позволяет указывать одновременно несколько файлов в поле для загрузки файлов, а также несколько адресов электронной почты
stepАтрибут устанавливает шаг изменения числа для ползунков и полей ввода чисел.
Атрибуты для тега <datalist>
Атрибут
Описание
list Атрибут указывает на список вариантов, созданный с помощью тега <datalist>, которые можно выбирать при наборе текста.
Атрибуты для тега <input> и <button>
Атрибут
Описание
formactionАтрибут определяет адрес обработчика формы.
formenctypeАтрибут устанавливает способ кодирования данных формы при их отправке на сервер.
formmethodАтрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.
formnovalidateАтрибут отменяет встроенную проверку данных введенных пользователем в форме на корректность перед отправкой формы.
formtargetАтрибут определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы, в виде HTML-документа.
Атрибуты для тегов <menu>
Атрибут
Описание
typeАтрибут используется для задания типа меню.
labelАтрибут устанавливает видимую метку для меню, которая отображается в виде названия при использовании вложенных меню.
Атрибуты для тега <style>
Атрибут
Описание
scopedАтрибут задаёт правила стиля элементу, который является корнем элемента style, и всем его дочерним элементам.
Атрибуты для тега <html>
Атрибут
Описание
manifestАтрибут реализует механизм кэширования, который позволяет создавать оффлайновые приложения.
Атрибуты для тега <link>
Атрибут
Описание
sizesУказывает размер иконок для визуального отображения.
Атрибуты для тега <ol>
Атрибут
Описание
reversedАтрибут меняет нумерацию в списке на обратный порядок.
Атрибуты для тега <iframe>
Атрибут
Описание
sandbox Атрибут позволяет установить ряд ограничений на контент загружаемый во фрейме, к примеру, блокировать формы и скрипты.
seamless Атрибут устанавливает, что содержимое фрейма должно отображаться так, словно оно является частью документа.
srcdoc Позволяет установить содержимое фрейма непосредственно в атрибуте.

2. Глобальные атрибуты

Атрибуты: class, dir, id, lang, style, tabindex и title теперь глобальные и могут применяться ко всем элементам.

Глобальный атрибут
Описание
data-* Пользовательские атрибуты. Автор может определять любой атрибут, указав префикс data- для исключения конфликтов с будущими версиями HTML.
role и aria-*Атрибуты могут использоваться для инструктирования вспомогательной технологии.

HTML5 делает также все атрибуты обработчиков событий HTML4, которые принимают форму onevent-name, глобальными атрибутами и добавляет несколько новых атрибутов обработчика события для новых определённых им событий. Например, элемент play, который используется в API для элементов носителей (video и audio).
Вопрос: Notepad++ открывает html документы в одну строчку. Как испра

Ребзя, помогите! Скачал Notepad++ 6,9 с официального сайта. Попытался открыть html документ, открывает, но в неудобочитаемом виде (нет разделения на строки, всё идет одним блоком, а фон подсвечен розовым). Прилагаю скриншот. Как сделать так, чтобы Notepad++ открывал документы, так как он и должен это делать, в удобочитаемом виде. То что есть сейчас редактировать просто невозможно.
Ответ: heavenlook
а вебпрограмминг тут при чем?  
Вопрос: Вывести с помощью цикла и функции document.write() в HTML документ текст

Вывести с помощью цикла и функции document.write() в HTML документ текст по следующему образцу:
Ответ: Рабочий вариант.

PHPHTML
1
2
3
4
5
6
7
8
<script>
   var i, j;
 
   for (i = 0, j = 8; i < 10; i += 2, j -= 2) {
       document.write('<font size="' + j + '" color="red" face="Arial">JavaScript</font>');
       document.write('<font size="' + i + '" color="green" face="Arial">jQuery</font>');
   }
</script>
dron817, вы смотрели что выводит ваш скрипт?
Вопрос: Сохранить изменения в HTML документе.(Подробнее в описании)

Приветствую. Хожу вокруг да около, не могу понять одну вещь.

Есть кусок кода, добавляющий html-элемент в код, допустим:

$('#content').append('<hr/>');

Этот код, как положено, добавляет линию в документ. Но при обновлении страницы эта линия опять исчезает. Вопрос, как сделать так, чтобы добавленная разметка с помощью .append() сохранялась при перезагрузки страницы? Спасибо!
Ответ:
Сообщение от danchik5563
Каким образом я могу это записать в файл?
Это если Вы делаете редактор по изменению структуры страницы... Тогда понадобится php...
А если Вам просто надо код добавить, то вот пример:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE HTML>
<html>
 <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="js/jquery.js"></script>
    <style>
        p{width:400px; height:400px}
    </style>
 </head>
 <body>  
<p id="content">jQuery - лучшая библиотека для простого использования возможностей Ajax и JavaScript анимации. Когда вы познаете возможности jQuery, вы будете неделю радоваться от того счастья, что столкнулись с данной библиотекой.</p>
<script>$('#content').append('<hr/>');</script>
</body>
</html>
Вопрос: Динамическое формирование HTML-документа

1. Написать сценарий выбора из трех изображений одного, которое вставляется ниже этих трех.
2. Написать сценарий картинки с "эффектом приближения", т.е. увеличения размеров как реакция на попадание курсора мыши в поле рисунка (использовать свойства width и height).
3. Написать сценарий графического горизонтального меню с появляющейся стрелкой над пунктом, у которого находится курсор.

Сделал выбор изображения, но не знаю как сделать эффект приближения...

Вот код:

PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<HTML>
<HEAD>
    <TITLE>Перестановка изображений</TITLE>
    <meta charset="windows-1251">
 <script>
      
        function chan()
        {
            alert(Math.random());
            var arr =[];
 
            var result = document.getElementById('result');
            //каждому изображению присвоил переменную,А потом передал в массив
            for (var i = 0; i < document.getElementsByTagName('img').length - 1; i++) {
                var img = document.getElementsByTagName('img')[i];
 
                arr.push(img.src);
 
            }
            result.src = arr[Math.floor(Math.random()*arr.length)];
            
 
 
        }
     
</script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $('img').width(90).hover(function(){
        $(this).stop().animate({width: 150});
    },
    function(){
        $(this).stop().animate({width: 90});
    });
</script>
 
</HEAD>
<BODY>
<CENTER>
    <H4>Галерея рисунков</H4><br>
    <IMG src="1.jpg" width="90" name="pic1" title="1">
    <IMG src="2.png" width="90" name="pic2" title="2">
    <IMG src="3.jpg" width="90" name="pic3" title="3"> <br>
 
    <input type="button" value="Выбрать  изображние" onClick="chan(this)">
    <br>
    <IMG id="result" src="<!--СЮДА ВСТАВЛЯТЬ РАНДОМНО ИЗОБРАЖЕНИЕ выбранное,как такое реализовать? из массива"--> /<!--width="90" name="pic1" onload="chan(item)">-->
</CENTER>
</BODY>
</HTML>
Ответ: ITALIANO, Уберите это все и вернитесь к тому, что было в первом посте. Там все правильно. Только сам скрипт вы засунули не в то место. Вот и все.
Браузер читает сверху вниз (проще говоря), и на момент 29ой строки он просто еще не увидел ваши картинки. Поэтому ничего и не произошло.
Вот так будет работать:
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<HTML>
<HEAD>
    <TITLE>Перестановка изображений</TITLE>
    <meta charset="windows-1251">
 <script>
      
        function chan()
        {
            alert(Math.random());
            var arr =[];
 
            var result = document.getElementById('result');
            //каждому изображению присвоил переменную,А потом передал в массив
            for (var i = 0; i < document.getElementsByTagName('img').length - 1; i++) {
                var img = document.getElementsByTagName('img')[i];
 
                arr.push(img.src);
 
            }
            result.src = arr[Math.floor(Math.random()*arr.length)];
            
 
 
        }
     
</script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
 
 
</HEAD>
<BODY>
<CENTER>
    <H4>Галерея рисунков</H4><br>
    <IMG src="1.jpg" width="90" name="pic1" title="1">
    <IMG src="2.png" width="90" name="pic2" title="2">
    <IMG src="3.jpg" width="90" name="pic3" title="3"> <br>
 
    <input type="button" value="Выбрать  изображние" onClick="chan(this)">
    <br>
    <IMG id="result" src="<!--СЮДА ВСТАВЛЯТЬ РАНДОМНО ИЗОБРАЖЕНИЕ выбранное,как такое реализовать? из массива"--> /<!--width="90" name="pic1" onload="chan(item)">-->
</CENTER>
<script>
    $('img').width(90).hover(function(){
        $(this).stop().animate({width: 150});
    },
    function(){
        $(this).stop().animate({width: 90});
    });
</script>
</BODY>
</HTML>
Скрипт находится ниже картинок, в конце body, поэтому на момент его выполнения браузер уже "видит" эти картинки.
Вопрос: Что такое HTML?

Что такое HTML ?

HyperText Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться различными типами WEB-броузеров.
Когда документ создан с использованием HTML, WEB-броузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки.
Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.

Большинство документов имеют стандартные элементы, такие, как заголовок, параграфы или списки. Используя тэги HTML вы можете обозначать данные элементы, обеспечивая WEB-броузеры минимальной информацией для отображения данных элементов, сохраняя вцелом общую структуру и информационную полноту документов.
Все что необходимо, чтобы прочитать HTML-документ - это WEB-броузер, который интерпретирует тэги HTML и воспроизводит на экране документ в виде, который ему придает автор.

В большинстве случаев автор документа строго определяет внешний вид документа.
В случае HTML читатель (основываясь на возможностях WEB-броузера может, в определенной степени, управлять внешним видом документа (но не его содержимым). HTML позволяет отметить, где в документе должен быть заголовок или абзац при помощи тэга HTML, а затем предоставляет WEB-броузеру интерпретировать эти тэги. Например, один WEB-броузер может распознавать тэг начала абзаца и представлять документ в нужном виде, а другой не имеет такой возможности и представляет документ в одну строку.

Пользователи некоторых WEB-броузеров имеют, также, возможность настраивать размер и вид шрифта, цвет и другие параметры, влияющие на отображение документа.


HTML-тэги могут быть условно разделены на две категории: тэги, определяющие, как будет отображаться WEB-броузером тело документа вцелом и тэги, описывающие общие свойства документа, такие как заголовок или автор документа .
Запомните, что основное преимущество HTML заключается в том, что ваш документ может быть просмотрен на WEB-броузерах различных типов и на различных платформах.

Спецификация HTML 4

Основные теги

<html></html> Указывает программе просмотра страниц что это HTML документ.
<head></head> Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин.
<body></body> Определяет видимую часть документа
Теги оглавления
<title></title> Помещает название документа в оглавление программы просмотра страниц

Атрибуты тела документа

<body bgcolor=?> Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет.
<body text=?> Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет.
<body link=?> Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет.
<body vlink=?> Устанавливает цвет гиперссылок на которых вы уже побывали, используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет.
<body alink=?> Устанавливает цвет гиперссылок при нажатии.

Теги для форматирования текста

<pre></pre> Обрамляет предварительно отформатированный текст.
<h1></h1> Создает САМЫЙ БОЛЬШОЙ заголовок
<h6></h6> Создает самый маленький заголовок
<b></b> Создает жирный текст
<i></i> Создает наклонный текст
<tt></tt> Создает текст - имитирующий стиль печатной машинки.
<cite></cite> Используется для цитат, обычно наклонный текст.
<em></em> Используется для выделения из текста слова (наклонный или жирный текст)
<strong></strong> Используется для выделения наиболее важных частей текста (наклонный или жирный текст)
<font size=?></font> Устанавливает размер текста в пределах от 1 до 7.
<font color=?></font> Устанавливает цвет текста, используя значение цвета в виде RRGGBB.

Гиперссылки

<a href="URL"></a> Создает гиперссылку на другие документы или часть текущего документа.
<a href="mailto:EMAIL">
</a> Создает гиперссылку вызова почтовой программы для написания письма автору документа.
<a name="NAME"></a> Отмечает часть текста как цель для гипперссылок в документе.
<a href="#NAME"></a> Создает гиперссылку на часть текущего документа.

Форматирование

<p> Создает новый параграф
<p align=?> Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center
<br> Вставляет перевод строки.
<blockquote></blockquote> Создает отступы с обеих сторон текста.
<dl></dl> Создает список определений.
<dt> Определяет каждый из терминов списка
<dd> Описывает каждое определение
<ol></ol> Создает нумерованный список
<li> Определяет каждый элемент списка и присваивает номер
<ul></ul> Создает ненумерованный список
<li> Предваряет каждый элемент списка и добавляет кружок или квадратик.
<div align=?> Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей.


Графические элементы

<img src="name"> Добавляет изображение в HTML документ
<img src="name" align=?> Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle
<img src="name" border=?> Устанавливает толщину рамки вокруг изображения
<hr> Добавляет в HTML документ горизонтальную линию.
<hr size=?> Устанавливает высоту(толщину) линии
<hr width=?> Устанавливает ширину линии, можно указать ширину в пикселах или процентах.
<hr noshade> Создает линию без тени.
<hr color=?> Задает линии определенный цвет. Значение RRGGBB.

Таблицы

<table></table> Создает таблицу.
<tr></tr> Определяет строку в таблице.
<td></td> Определяет отдельную ячейку в таблице.
<th></th> Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом)

Атрибуты таблицы

<table border=#> Задает толщину рамки таблицы.
<table cellspacing=#> Задает расстояние между ячейками таблицы.
<table cellpadding=#> Задает расстояние между содержимым ячейки и ее рамкой.
<table width=#> Устанавливает ширину таблицы в пикселах или процентах от ширины документа.
<tr align=?> или <td align=?> Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right.
<tr valign=?> или <td valign=?> Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom.
<td colspan=#> Указывает кол-во столбцов которое объединено в одной ячейке. (по умолчанию=1)
<td rowspan=#> Указывает кол-во строк которое объединено в одной ячейке. (по умолчанию=1)
<td nowrap> Не позволяет программе просмотра делать перевод строки в ячейке таблицы.


Кадры

<frameset></frameset> Предваряет тег <body> в документе, содержащем кадры;
<frameset rows="value,value"> Определяет строки в таблице кадров, высота которых определена кол-вом пикселов или в процентном соотношении к высоте таблицы кадров.
<frameset cols="value,value"> Определяет столбцы в таблице кадров, ширина которых определена кол-вом пикселов или в процентном соотношении к ширине таблицы кадров.
<frame> Определяет единичный кадр или область в таблице кадров.
<noframes></noframes> Определяет, что будет показано в окне браузера если он не поддерживает кадры.

Атрибуты кадров

<frame src="URL"> Определяет какой из HTML документов будет показан в кадре.
<frame name="name"> Указывает Имя кадра или области, что позволяет выводить информацию в этот кадр или область из других кадров.
<frame marginwidth=#> Определяет величину отступов по левому и правому краям кадра; должно быть равно или больше 1.
<frame marginheight=#> Определяет величину отступов по верхнему и нижнему краям кадра; должно быть равно или больше 1.
<frame scrolling=VALUE> Указывает будет ли выводится линейка прокрутки в кадре; значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - auto.
<frame noresize> Препятствует изменению размеров кадра.

Формы

Для форм, выполняющих какие-то функции должны быть запущены соответствующие CGI скрипты на сервере. HTML только создает внешний интерфейс формы.
<form></form> Создает формы
<select multiple name="NAME" size=?></select> Создает меню со скролингом. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки.
<option> Указывает каждый отдельный элемент меню
<select name="NAME"></select> Создает ниспадающее меню
<option> Указывает каждый отдельный элемент меню
<textarea name="NAME" cols=40 rows=8></textarea> Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту.
<input type="checkbox" name="NAME"> Создает checkbox. За тегом следует текст.
<input type="radio" name="NAME" value="x"> Создает radio кнопку. За тегом следует текст.
<input type=text name="foo" size=20> Создает строку для ввода текста. Параметром Size указывается длина в символах.
<input type="submit" value="NAME"> Создает кнопку "Принять"
<input type="image" border=0 name="NAME" src="name.gif"> Создает кнопку "Принять" - для этого используется изображение
<input type="reset"> Создает кнопку "Отмена".


P.S.Всем удачи в использование HTML-тегов!

Если есть замечания по статье,то все пожелания и критику кидайте в личку!
Ответ:
Спецификация HTML 5
Основные отличия от спецификации HTML 4


1. В отличие от HTML4, у которого 3 доктайпа (strict, transitional, frameset), у HTML5 доктайп один: <!DOCTYPE html>.

2. HTML5 поддерживает MathML и SVG.

3. Новые теги.

Тег
Описание
<section>Тег задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др.
<article>Тег задает содержание сайта вроде новости, статьи, записи блога, форума или др.
<aside>Тег определяет блок сбоку от контента для размещения рубрик, ссылок на архив, меток и другой информации.
<header>Тег задает «шапку» сайта или раздела, в которой обычно располагается заголовок.
<footer>Тег задаёт «подвал» сайта или раздела, в нём может располагаться имя автора, дата документа, контактная и правовая информация.
<nav>Тег задает навигацию по сайту.
<main>Тег предназначен для основного содержимого документа(уже считается устаревшим в W3C).
<hgroup>Тег используется для группирования заголовков веб-страницы или раздела.
<figure>Тег используется для группирования любых элементов, например, изображений и подписей к ним.
<figcaption>Тег содержит описание для тега <figure>.
<video>Тег добавляет, воспроизводит и управляет настройками видеоролика на веб-странице.
<audio>Тег добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице.
<source>Тег вставляет звуковой или видеофайл для тегов <audio> и <video>.
<track>Тег позволяет авторам указать текстовую дорожку для медийных элементов <audio> и <video>.
<picture>Тег HTML5 picture определяет размер окна браузера и выбирает для отображения оптимальное изображение относительно окна просмотра.
<canvas>Тег создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства.
<svg>Тег позволяет вставлять на страницу векторные изображения(SVG).
<math>Тег используется для вставки математических выражений в текущей строке.
<embed>Тег используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает.(для вставки контента только с плагином).
<datalist>Тег создает список вариантов, которые можно выбирать при наборе в текстовом поле.
<keygen>Тег используется для генерации пары ключей — закрытого и открытого.
<output>Тег определяет область в которую выводится информация, преимущественно с помощью скриптов.
<progress>Тег используется для отображения прогресса завершенности задачи.
<meter>Тег используется для вывода значения в некотором известном диапазоне.
<dialog>Тег dialog представляет собой диалоговое окно на веб-странице.
<data>Тег указывает, что вложенный в него текст является данными такими как, например, величины измерения, денежные суммы в разных валютах, рейтинги и т.д.
<time>Тег, содержащийся внутри помечается, как дата, время или принимает оба значения.
<mark>Тег помечает текст как выделенный.
<ruby>Тег предназначен для добавления небольшой аннотации сверху или снизу от заданного текста.
<rt>Тег добавляет аннотацию сверху или снизу от текста, заключенного в контейнер <ruby>.
<rp>Тег используется для вывода текста в браузерах, которые не поддерживают тег <ruby>.
<bdi>Тег указывает фрагмент текста, который должен быть изолирован от изменения направления вывода текста.
<wbr>Тег указывает браузеру место, где допускается делать перенос строки в тексте, если этого требует ширина родительского элемента.
<details>Тег используется для хранения информации, которую можно скрыть или показать по требованию пользователя.
<summary>Тег указывает заголовок для тега <details>, по которому можно щелкать для разворачивания/сворачивания информации
<menu>Тег предназначен для отображения списка пунктов меню.
<menuitem>Тег используется для контекстных меню, панелей инструментов и для включения элементов управления формы. (нужно использовать вместо тега <command>).

4. Новые значения атрибута type для тега <input>.

Значение
Описание
dateЗначение для выбора календарной даты.
datetimeЗначение для указания даты и времени.
datetime-localЗначение для указания местной даты и времени.
timeЗначение для указания времени.
monthЗначение для выбора месяца.
weekЗначение для выбора недели.
colorЗначение для выбора цвета.
emailЗначение для указания e-mail.
telЗначение для указания телефона.
numberЗначение для ввода чисел
rangeЗначение создаёт ползунок для выбора чисел в указанном диапазоне.
searchЗначение используется для создания поля для поиска
urlЗначение для ввода web-адресов

5. Новые атрибуты для тегов.

Атрибуты для тега <input>
Атрибут
Описание
autocompleteАтрибут управляет автозаполнением полей форм.
autofocusАтрибут устанавливает, что элемент получает фокус после загрузки страницы.
placeholderАтрибут выводит текст внутри текстового поля, который исчезает при получении фокуса.
requiredАтрибут устанавливает текстовое поле обязательным для заполнения перед отправкой формы на сервер.
patternАтрибут указывает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы.
Атрибуты для тега <textarea>
Атрибут
Описание
autocompleteАтрибут управляет автозаполнением области ввода текста.
autofocusАтрибут устанавливает, что элемент получает фокус после загрузки страницы.
placeholderАтрибут выводит текст внутри текстовой области, который исчезает при получении фокуса.
requiredАтрибут устанавливает область текста обязательной для заполнения.
Атрибуты для тега <script>
Атрибут
Описание
asyncАтрибут для асинхронного запуска скрипта.
Атрибуты для тега <img>
Атрибут
Описание
srcsetАтрибут позволяет пределать список источников для изображения, которые будут выбраны, исходя из плотности пикселей на дисплее пользователя.
Атрибуты для тегов <a> и <area>
Атрибут
Описание
downloadПри наличии атрибута браузер не переходит по ссылке, а предложит скачать документ, указанный в адресе ссылки
mediaУстанавливает устройство вывода, для которого предназначена таблица стилей
ping Атрибут определяет список URL-адресов, которые будут уведомлены, если пользователь перейдёт по ссылке
Атрибуты для тега <area>
Атрибут
Описание
hreflangАтрибут указывает язык документа, на который ведет ссылка
relАтрибут определяет отношения между текущим документом и документом, на который ведет ссылка, заданная атрибутом href.
Атрибуты для тега <base>
Атрибут
Описание
targetАтрибут позволяет определить окно, в которое будет загружаться веб-страница, открытая по ссылке.
Атрибуты для тега <meta>
Атрибут
Описание
charsetУказывает кодировку документа.
Атрибуты для тега <input>, <output>, <select>, <textarea>, <button> и <fieldset>
Атрибут
Описание
formАтрибут позволяет ассоциировать элементы управления с формой
Атрибуты для тега <fieldset>
Атрибут
Описание
disabled Атрибут отключает все управляющие элементы-потомки, если специфицирован
Атрибуты для тега <form>
Атрибут
Описание
novalidateАтрибут, который может использоваться для отключения проверки отправки формы (то есть форма всегда может быть отправлена)

6. Новые глобальные атрибуты, то есть которые могут использоваться с любым из тегов.

Атрибуты для тегов <a> и <area>
Глобальный атрибут
Описание
contenteditableСообщает, что элемент доступен для редактирования пользователем — можно удалять текст и вводить новый.
spellcheckУказывает браузеру проверять или нет правописание и грамматику в тексте.
contextmenuУстанавливает контекстное меню для элемента.
hiddenСкрывает содержимое элемента от просмотра.
draggableАтрибут определяет, является ли элемент перетаскиваемыми или нет.
dropzone Атрибут указывает принцип внесения перемещаемого элемента в элемент с данным атрибутом.

7. Некоторые теги отмечены как устаревшие, вместо них рекомендуется использовать CSS: <basefont>, <big>, <center>, <font>, <strike>, <s>, <u>, <tt>

8. Исчезновение фреймов (<frame>, <frameset>, <noframes> (кроме <iframe>)) из-за проблем с поисковыми системами и некоторых неудобств при навигации по странице.

9. Исчезновение некоторых тегов, заменённых в обновлённой спецификации на более актуальные.

Вместо <acronym> тег <abbr>
Вместо <applet> тег <object>
Вместо <dir> тег <ul>
Вместо <bgsound> тег <audio>
Вместо <listing> и <xmp> теги <pre> или <code>
Вместо <strike> тег <del>
Вместо <isindex> комбинацию тега <form> и текстового поля.

10. В HTML5 нет презентационных атрибутов, которые имелись в HTML4, так как их функции лучше выполняются через CSS.

Тег
Атрибут, который не поддерживается
<caption>, <iframe>, <img>, <input>, <object>, <legend>, <table>, <hr>, <div>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>align
<body>alink, link, text, vlink, background
<table>, <tr>, <td>, <th>, <body>bgcolor
<table>, <object>border
<table>cellpadding, cellspacing, frame
<col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>char, charoff
<br>clear
<dl>, <menu>, <ol>,<ul>compact
<iframe>frameborder, marginheight, marginwidth, scrolling
<td>, <th>height
<img>, <object>hspace, vspace
<hr>noshade, size
<td>, <th>nowrap
<li>, <ol>, <ul>type
<col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>valign
<hr>, <table>, <td>, <th>, <col>, <colgroup, <pre>width
Важное замечание: отсутствие в HTML5 презентационных атрибутов совсем не означает, что они не работают! Они также будут работать, как и в HTML4, но Ваш код не будет соответствовать спецификации HTML5, а следовательно не будет валиден.

11. Некоторые атрибуты HTML4 больше не разрешаются в HTML5. Если они должны как-то влиять на работу пользовательского агента, по соображениям совместимости, определяется, как они должны работать в соответствующих сценариях.

Тег
Атрибут, который не поддерживается
<link>, <a>rev, charset
<a>shape, coords
<img>, <iframe>longdesc
<link>target
<area>nohref
<head>profile
<html>version
<img>name(используйте вместо него id)
<meta>scheme
<object>archive, classid, codebase, codetype, declare, standby
<param>valuetype, type
<td>, <th>axis, abbr
<td>scope
Важное замечание: отсутствие в HTML5 данных атрибутов совсем не означает, что они не работают! Они также будут работать, как и в HTML4, но Ваш код не будет соответствовать спецификации HTML5, а следовательно не будет валиден.


12. Новые API.

API
Рисование 2D-картинок в реальном времени (Canvas)
Контроль над проигрыванием медиафайлов
Хранение данных в браузере
Редактирование
Drag-and-drop
Работа с сетью
MIME

13. Новые элементы в DOM.

Если есть замечания по статье,то все пожелания и критику кидайте в личку!