Сводка знаний по этапам html и css.
1. Знать HTML.
А. Что это?
html — это язык гипертекстовой разметки. Проще говоря, это язык разметки, созданный для веб-страниц, который работает в браузерах.
б. версия?
Теперь это HTML5.
2. Создайте html.
А. Имя файла должно заканчиваться на html.
б) клавиша !+tab, чтобы вывести структуру html по умолчанию.
3. Простое описание структуры.
А. <head>Содержание, такое как название главной страницы
Б. <body>Содержание основной части страницы написано в этой части.
4. Набор символов HTML.
А. Значение или функция:
отображать символы со специальным значением на веб-страницах.
Отображает символы, которых нет на клавиатуре.
б. Правила или написание:
начинайте с &, заканчивайте на (например, пробел )
5. Блочные элементы HTML-тегов.
А. Особенности:
Всегда начинайте с новой строки, то есть эксклюзивной строки.
Высоту, ширину, внутренние и внешние поля можно контролировать.
Ширина не задана, по умолчанию ширина равна 100% (относительно родителя).
B. Функция:
в основном используется для создания структуры веб-сайта, макета страницы и содержания.
C. Общие теги элементов блочного уровня:
div：基本用来搭建网页架构。
p：段落标签，用来写一段段的文本内容、
h1~h6:标题标签，用来写标题。h1到h6 会越来越小，只有6个，没有h7及其它。
列表：
ol（有序列表，前面带数字 还可以设置type='a',前面变成字母）
结构： ol li （li是列表中具体的那有列，有几列就几个li）
ul（无须列表，前面是小黑点）
结构： ul li （li是列表中具体的那有列，有几列就几个li）
hr:水平线（单标记标签）
noscript：当浏览器禁用JavaScript时，会显示该标签内的内容。
table：表格
结构 table tr td（tr是行，td是该行里的一列，可以有多个行，每个行里也可以有多个列。）
form：表单
pre：定义预格式文本 结构：pre code（一般是和code结合使用，
6. Встроенные элементы html-тегов.
А. Особенности:
Отображается на одной строке с другими элементами, не ограничиваясь одной строкой.
высота, высота строки и верхнее и нижнее поля не контролируются.
Ширина — это ширина его текста, которую нельзя контролировать.
B. Функция:
усиление отображения содержимого и деталей управления.
C. Общие теги элементов встроенного уровня:
span：文档中的节
a：超链接（跳转页面，href设置跳转的具体地址 target设置是 在当前页面 （默认）还是新页面打开（_blank））
code: 代码文本
em ：文本倾斜 更加语义强调
i：文本倾斜 一般用来做自定义图标
strong：加粗 更强调语义
b：加粗
lable：定义input标注
7. Встроенные блочные элементы html-тегов.
А. Особенности:
Отображается на одной строке с другими элементами, не ограничиваясь одной строкой.
высота, высота строки и верхние и нижние поля контролируются.
Ширина — это ширина его текста, которую можно контролировать.
B. Функция:
усиление отображения содержимого и деталей управления.
C. Общие теги элементов встроенного уровня:
input：定义输入控件（结合from使用）
type属性控制不同的控件，
默认是text控件文本框，
password（密码框） email（邮箱框） checkbox（复选框）
radio （单选框） rest（重置所有 input内容）
ssubmit（提交按钮） button（普通按钮） file（上传）。
textarea：文本域
select：定义选择列表（结合option使用） 结构 select option（具体的选择项，可以多个）
img：图片标签（src属性指定图片路径）
8. Спецификация предприятия HTML-тегов.
a.块级元素与块级元素平级，行内与行内元素平级。
b.块元素可以包含行内元素或者某些块元素，但行内元素不能包含块元素，它只能包含其它的行内元素。
c.(h1~h6,p,dt) 只能包含行内元素，不能再包含块元素。
d. li 标签可以包含 div 标签，因为li 和div标签都是装载内容的容器。
e.更多参考文档
9. Что такое CSS?
Каскадные таблицы стилей
10. Какова функция?
ретушь, украшение веб-страницы
11. Метод импорта CSS.
a.行内样式：
<div style='color:red;'></div>
b.嵌入式：
在head里面写 <style type="text/css"> div:{ color:red; } </style>
c:链接式：
在head里面写 <link rel="stylesheet" type="text/css" href="./css/index.css">
d:导入式：
@import url（ 'style.css’） 注意放在最上面一行。
可以导入其它的css文件，比如在a.css文件里导入b.css文件，但是注意路径问题，是从当前操做的css文件出发去寻找要导入的css文件。
12. Базовый селектор.
a: * 通配选择器 选择页面中所以的元素。
通常都是清除元素默认的内外边距 * { margin：0；padding：0；}
b： element (元素标签) 会选择页面中所有的。
p { color：red；}
c：#id （id选择器) 选择元素id属性值为#后面值的所有元素，但一个id名页面中唯一。
#nav { color：red；}
d：.class (class选择器) 选择元素class属性值为.后面值的所有元素，但一个class名页面中不唯一。
.nav { color:red;}
13. Селектор отношений.
a: div p { } 包含选择器 元素与元素之间空格隔开，代表的意思是 div里面的所有p元素
b：div>p { } 子选择器 父元素与子元素用> 隔开，代表是选择父元素下面的子元素p，不会选择孙子辈
c：div+p { } 相邻选择器 兄弟节点之间用+隔开，代表选择div后的下一个p元素 有一个特殊方法，比如先选中所有p元素 然后再试使用该方法选中第一个p，可以使选中除第一个外后的所有p元素 （p+p）
d：div~p { } 兄弟选择器 兄弟节点之间用~隔开，代表选择div后的所有兄弟辈的p元素
14. Селекторы псевдоклассов и селекторы элементов.
伪类选择器：
a： E：hover 设置鼠标悬停在E元素上的样式。
b：更多见表。
元素选择器：
a： E[attr] 选取具有attr属性的E元素。
b：更多见表。
15. Вес селектора CSS.
А. Порядок:
!important > встроенный > идентификатор > класс > метка > *
б) Как рассчитать:
!important: infinity Inline
: 1000
id: 100
класс | атрибут | псевдокласс: 10
label: 10
*: 0
Примечание: сумма разрешений 11 классов не будет больше разрешений одного id и не может пересекать уровни.
16. Размеры.
ширина: ширина
высота: высота
Значение по умолчанию для обоих — авто.
Разница между авто и процентом (%):
авто: элемент будет растянут на всю ширину родительского элемента, но поля + отступы + границы будут вычтены.
%: заставит элемент иметь ту же ширину, что и родительский элемент, и добавит (margin+padding+border) к ширине.
17. Юниты.
Абсолютные единицы: не меняются из-за изменения размеров других элементов.
Относительная единица: не существует фиксированного значения измерения, но есть относительное значение, определяемое размером других элементов.
пикс: пиксель.
vw:% — ширина в процентах относительно области просмотра браузера.
vh:% — это высота в процентах относительно области просмотра браузера.
%: относительно ширины или размера шрифта родительского элемента.
18. Преобразование между элементами.
display: block; Преобразование элемента в блочный элемент.
display: inline; Преобразование элемента во встроенный элемент.
display: встроенный блок; преобразование элемента во встроенный блочный элемент.
19. Стиль текста css.
a: 字体样式： font-family
b: 字体大小： font-size 注意不同浏览器默认大小不一样。
c：字体加粗： font-weight 可以用单词或者100~900
d：文字颜色： color 使用16进制时可以简写形式
e:首行文本缩进： text-indent
f：文本水平对齐方式： text-align （左 left，右 right，中 center）
g：设置文本装饰： text-decoration （none：定义标准文本，line-through：删除线，derline：下划线）
h：显示光标类型： cursor (pointer:小手)
i：列表样式： list-style （none：去掉小点）
j：单行文本溢出显示 : overflow:hidden;(溢出隐藏) white-space：nowrap；（单行文本不换行） text-overflow：ellipsis；（规定当文本溢出元素时发生的事情，前面一个是显示省略号）
k：多行文本溢出显示:
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:4; ===>在第几行显示省略号
overflow：hidden；
20. Стиль бордюра.
a: граница: 1px сплошная #f00;
Первая цифра: представляет размер границы,
вторая цифра: стиль линии, представляющей границу (сплошная: сплошная линия, пунктирная: пунктирная линия) и
третья цифра: представляет размер границы цвет границы.
b: Вы также можете разобрать и установить четыре стороны отдельно,
верхняя граница: xx, правая граница: xx,
нижняя граница: xx, граница слева: xx, нижняя граница: xx.
c: Цвет может быть установлен отдельно border-color: xx xx xx xx; (вверху справа внизу слева) Обратите внимание, что если цвет не установлен, по умолчанию используется цвет (прозрачный: прозрачный цвет, может использоваться как треугольник)
21. Стиль фонового изображения.
a: цвет фона: background: xx;
b: фоновое изображение: background-image обычно: background: url (xx);
c: указывает, как повторять фоновое изображение: background-repeat: repeat-x: повторение горизонтальной плитки-y : Вертикальная мозаика без повтора: Без мозаики
d: Начальная позиция элемента фонового изображения: background-position: xy; (Два значения относятся к x и y соответственно, и одно значение означает, что x — текущее значение, а y — центр.)
e: размер фонового изображения: background-size: ключевое слово (содержит: уменьшение, обложка: увеличение), процент (два значения, соответствующие x, y), число
22. Коробчатая модель.
a：组成部分: content(width|height) + padding + border + margin
b:内边距： padding ==》值：百分比，数值，没有负值
padding-left
padding-right
padding-bottom
padding-top
padding:10px(上) 20px(右) 30px(下) 40px(左)
padding:50px (上、右、下、左)
padding:20px(上、下) 30px(右、左)
padding:10px(上) 20px(右左) 30px(下)
***百分比只和父元素width计算
c：外边距：margin : 外边距 ===>值：百分比、数值、负值
margin-left
margin-right
margin-bottom
margin-top
margin:10px(上) 20px(右) 30px(下) 40px(左)
margin:50px (上、右、下、左)
margin:20px(上、下) 30px(右、左)
margin:10px(上) 20px(右左) 30px(下)
***百分比只和父元素width计算
-----auto的问题：适应剩余空间-----
auto不生效：没有剩余空间占有了
d：俩种盒模型:
w3c标准：width = 宽度
ie标准 ：width = content + padding + border
e:切换盒模型的标准：
w3c：box-sizing:conten-box
ie ：box-sizing:border-box
23. Плавающий и Очистить плавающий.
浮动 ： float
a：值 left、right
b：特性: 1、包裹（收缩、隔绝）2、破坏 : 会让父元素的高度塌陷,不是bug，【是标准】
c:清除浮动:
不用: 多加一个块元素，加入样式clear:both
用 : 给父元素加入伪类after，样式
.g-container:after{
content: "";
clear: both;
display: block;
}
24. переполнение и BFC.
overflow：当内容溢出时的表现
a：值 hidden（溢出隐藏） scroll （溢出隐藏但是有滚动条）
overflow-x：scroll （只有x轴滚动条）overflow-y：scroll （只有y轴滚动条）
BFC： 块级格式化上下文。 BFC就是一个css的一个布局概念，是一个独立 的区域，是一个环境。
浮动前面是利用 ::after 以及clear：both ，现在还可以给父元素添加 overflow： hidden 清除浮动,其实就是激活了BFC
a.原则：如果一个元素具有BFC，那么内部元素在怎么弄，都不会影响到外面的元素。
b.激活BFC的条件（满足之一就可以）：
1：根元素，即html元素
2：float的值不为none
3：overflow的值不为visible
4：display的值为inline-block、inline-flex、flex、flow-root、table-caption、table-cell。
5：position的值为absolute或者fixed
c.作用：
1：可以阻止元素被浮动的元素覆盖（可做两栏布局自适应）
2: 可以包含浮动的元素—清除浮动
3：解决同一个BFC区域的垂直方向margin塌陷的问题（属于同一个BFC的两个相邻的box的margin会重叠，以大的为主。要想解决这个问题，可以将两个盒子分为不同的BFC中。）
25. Относительное положение позиционирования: относительное
А. Значение: левое, правое, верхнее, нижнее получают положительные числа, отрицательные числа, проценты
Примечание: когда четыре вышеуказанных появляются одновременно, левое убивает правое, верхнее убивает нижнее
Б. Стандарт позиционирования: позиционируйте себя
в. Сохраняйте собственное исходное пространство, не отрываясь от потока документов, видимость: скрыта, а также сохраняйте исходное положение после скрытия
26. Абсолютное положение позиционирования: абсолютное
А. Значения: слева, справа, сверху, снизу получают положительные числа, отрицательные числа и проценты
Примечание: Когда четыре вышеуказанных значения появляются одновременно, появляется эффект растяжения.
б) Критерии позиционирования: если все родительские элементы не являются относительными, позиция будет начинаться с верхнего левого угла браузера, а если она есть у родительского элемента, расчет начнется с верхнего левого угла родительского элемента.
в) не сохраняет исходное пространство, отрывается от потока документов, существуют независимые объекты,
27. Позиционирование без зависимостей.
Пусть абсолютное использование не требует относительного
или левого, используйте маржу для позиции и используйте положительные и отрицательные значения для изменения позиции.
28. Фиксированное позиционирование и z-индекс.
Фиксированная позиция позиционирования: фиксированная
А. Значения: слева, справа, сверху, снизу получают положительные числа, отрицательные числа, проценты
б. Критерии позиционирования: Позиционируется в окне браузера, используется для навигационной рекламы в правой части.
C. Иерархические отношения: z-индекс может использоваться только при использовании позиции
Значение: чем больше значение, тем выше значение.
29. Тень коробки: тень коробки
А. Значение:
1> Положение по горизонтали (обязательное значение)
2> Положение по вертикали (обязательное значение, не нужно писать 0 пикселей)
3> Размытие теней (чем больше значение, тем больше размытие пикселей)
4> Размер (реже используется)
5> цвет тени
30. Вставьте элемент псевдокласса.
1》перед вставкой в подэлемент перед содержимым должно быть написано значение содержимого вставленного элемента "" ничего не значит,
2》после вставки содержимого в конце дочернего элемента должно быть написано значение содержимого вставленного элемента "" ничего не значит,
31. Веб-иконка и суждение т.е.
1》Веб-иконка
<link rel='icon' href='favicon.ico'>
title可能会出现乱码：解决办法
<meta charset='utf-8'>
2 "html судить о версии IE
非IE：<!--[if !IE]> 除了IE外都会执行 <!if[endif]-->
<!--[if lt IE 6]> <!if[endif]-->
<!--[if lte IE 9]> <!if[endif]-->
<!--[if gte IE 9]> <!if[endif]-->
!:非IE
lte : 小于或等于
lt : 小于
gte : 大于或等于
gt:大于