Основы создания веб-страницы

Обновление синхронизации сайта:Woohoo. Отличный интерфейс. Talent /#/%E5%89%8D…

Основы создания веб-страницы

Инструкции: Только в качестве учебного пособия

Так что же могут позволить вам освоить основы создания веб-страниц?

В первом разделе осваиваются основы Интернета.

Второй раздел посвящен основам HTML.

В третьем разделе осваиваются основы CSS.

фон веб-разработки

1. концепция компьютерного языка
2. Интерпретировать и компилировать
3. Введение в возвышенное
4. Введение в инструменты разработчика
5. Соглашения об именах

Соглашения об именах

• английское имя
• Числа не могут начаться
• CamelCase

Узнайте базовый контакт на переднем углу с веб-языком, HTML, CSS, JavaScript

Веб-основы

Читайте вслух каждые 15 минут:

1. Internet, Китайский для Интернета, Интернет.
2. Это глобальная сеть подключенных компьютеров, которые общаются друг с другом с помощью общего языка.
3. WWWдаWorld Wide WebАббревиатура китайского названия World Wide Web.
4. WWWдаInternetосновная часть.
5. этоInternetтех, кто поддерживаетWWWобслуживание иHTTPКоллекция серверов для протокола.
6. WWWРазделено на использованиеWebклиент иWebСервер.
7. пользователь может использоватьWebКлиентский доступWebстраница на сервере.
8. Website, китайское название веб-сайта, которое относится кInternetПо определенным правилам используютHTMLКоллекция веб-страниц, созданных инструментами, такими как отображение определенного контента.
9. URL,ДаUniform Resource LocatorАббревиатура китайского названия — Единый указатель ресурсов, широко известный как URL-адрес. Это краткое представление местоположения и метода доступа к ресурсам, которые можно получить из Интернета, а также адреса стандартных ресурсов в Интернете.

URLОбщий формат:

协议://主机地址（ip地址)+目录路径+参数

Общие протоколы:

a. ftp:File Transfer Protocol, протокол передачи файлов, который может бытьFTPДоступ к файлам на сервере. Обычно он используется для префикса адреса хоста «имя пользователя: пароль@».

Пример:

url: ftp://admin:12345@113.129.xxx/html.pdf

b. file: в основном обращается к файлам на локальном компьютере.

c. telent: позволяет пользователю связываться с удаленным устройством посредством процесса согласования.

d. http:Hyper Text Transfer Protocol, протокол передачи гипертекста, представляет собой протокол передачи гипертекста с сервера World Wide Web в локальный браузер.

10. Web Standard(Webстандарт) даWebСтандарты, которых должна придерживаться разработка приложений.
11. Веб-страницы в основном состоят из трех частей: структурных стандартов, стандартов производительности и стандартов поведения.

процесс посещения сайта

urlЕдиный указатель ресурсов

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

Компоненты: протокол, адрес сервера, путь к ресурсу.

12. Web Browser, китайское название — это веб-браузер, представляющий собой программное обеспечение, которое отображает HTML-файлы на веб-сервере или в файловой системе и позволяет пользователям взаимодействовать с этими файлами.
13. Web Server, китайское название веб-сервера,WEBСервер в основном предоставляет услуги онлайн-просмотра информации.

Webсервер может разрешитьHTTPсоглашение, когдаWebСервер получаетHTTPПри запросе он возвращаетHTTPответ, клиент может получить веб-страницу с сервераhtml,включатьcss,js, видео, аудио и т.д.

14. webРазработка в основном делится на две части: front-end и back-end.
15. Внешний интерфейс относится к веб-странице, которая напрямую связывается с пользователем.html,js,cssЖдать.
16. Бэкэнд относится к уровню программы, базы данных и сервера.

webпроцесс разработки системы

Предлагаемый проект, анализ спроса (дизайн, дизайн пользовательского интерфейса, дизайн системы), (разработка, разработка интерфейса, фоновая разработка), тестирование системы, разработка и обслуживание.

Основы HTML

1. История HTML: HTML, XHTML
2. Глобальные атрибуты HTML: глобальные стандартные атрибуты, глобальные атрибуты событий
3. Элементы HTML:

4. Язык разметки — это компьютерное кодирование текста, которое объединяет текст и другую информацию, связанную с текстом, для раскрытия подробностей о структуре документа и обработке данных.
5. HTML, язык гипертекстовой разметки.
6. XHTMLрасширяемый язык гипертекстовой разметки, более чистый, строгий и предписывающийhtmlкод.
7. htmlФайл состоит из двух частей: заголовка файла и тела файла.
8. Классификация этикеток: двойная этикетка, одинарная этикетка.

Двойные теги: он состоит из двух частей: «начальный тег» и «конечный тег», которые должны использоваться парами и должны быть разумно вложены друг в друга.

Одиночный тег: закрыть начальным тегом (заканчиваться концом начального тега).

Глобальные стандартные атрибуты HTML

существуетHTML, указаны восемь глобальных стандартных атрибутов.

1. classИмя класса, используемое для определения элемента.
2. idуникальный для указания элементовid.
3. styleИспользуется для указания встроенных стилей для элементов.
4. titleДополнительная информация для указания элементов.
5. accesskeyИспользуется для указания сочетания клавиш для активации элемента.

служба поддержкиaccesskeyЭлементы атрибута имеют<a>, <area>, <button>, <input>, <label>, <legend>, <textarea>.

6. tabindexиспользуется для указания того, что элемент находится вtabпоследовательность ключей.

служба поддержкиtabindexЭлементы атрибута имеют<a>,<area>,<button>,<input>,<object>,<select>,<textarea>

7. dirИспользуется для указания направления текста содержимого в элементе.

dirСтоимость имущества толькоltrа такжеrtlдва соответственноleft to rightа такжеright to left.

8. langЯзык, используемый для указания содержимого элемента.

Атрибут глобального события HTML

Windowоконное событие

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

Formсобытие формы

1. onblur, срабатывает, когда элемент теряет фокус.
2. onchange, который срабатывает при изменении значения элемента элемента.
3. onfocus, который срабатывает, когда элемент получает фокус.
4. onreset, который срабатывает при нажатии кнопки перезагрузки в форме.
5. onselect, который срабатывает при выборе текста в элементе.
6. onsubmit, который срабатывает при отправке формы.

Keyboardсобытие клавиатуры

1. onkeydown, который срабатывает, когда пользователь нажимает клавишу.
2. onkeypress, который срабатывает, когда кнопка нажимается после того, как пользователь нажимает кнопку.

Это свойство не будет действовать для всех ключей и ключей, которые не действуют, например:alt,ctrl,shift,esc.

3. onkeyup, который срабатывает, когда пользователь отпускает клавишу.

Mouseсобытие мыши

1. onclick, который срабатывает при щелчке мыши по элементу.
2. ondblclickКогда дважды ударили мышь на элемент, триггер.
3. onmousedown, срабатывает при нажатии кнопки мыши на элементе.
4. onmousemove, событие происходит при перемещении указателя мыши.
5. onmouseout, срабатывает, когда указатель мыши выходит за пределы элемента.
6. onmouseover, событие происходит, когда указатель мыши перемещается по указанному элементу.
7. onmouseup, срабатывает, когда кнопка мыши отпускается на элементе.

Средстворетия Media Media

1. onabort, уволен, когда медиаплеер выходит.
2. onwaiting, срабатывает, когда воспроизведение медиафайла остановлено, но он собирается продолжить воспроизведение.

HTML-элемент

HTML-документ содержит теги

1. <!DOCTYPE>, который объявляет тип документа.
2. <html>, настоящий корневой элемент HTML-элемента.
3. <head>,определениеhtmlЗаголовок документа.

head中包含的元素

title，定义HTML文档的标题
base，为页面上的所有链接规定默认地址或者默认目标
link，用于定义文档与外部资源之间的关系
meta，提供关于HTML的元数据
style，用于为HTML文档定义样式信息
script，用于定义客户端脚本

4. body,определениеhtmlТело документа.
5. content-Type, который используется для установки набора символов веб-страницы, который удобен для браузера при анализе и отображении страницы.

Код:

<meta http-equiv="content-Type` content="text/html"; charset=utf-8">

6. cache-control, который сообщает браузеру, как кэшировать ответ и как долго.

параметр:

no-cache，发送请求，与服务器确认该资源是否被更改，如果没有，则使用缓存

no-store，允许缓存，每次都要去服务器上下载完整的响应

public，缓存所有响应

private，只为单个用户缓存

max-age，表示当前请求开始，相应响应在多久内能被缓存和重用，不去服务器重新请求，max-age=60表示响应可以再缓存和重用60秒

<meta http-equiv=cache-control" content="no-cache">

7. expires, который используется для установки времени истечения срока действия веб-страницы и его повторной передачи на сервер после истечения срока действия.
8. refresh, веб-страница автоматически обновится и переключится на заданный URL-адрес в течение установленного времени.
9. Set-Cookie, который используется для установки срока действия веб-страницы.
10. Нет смыслового элемента:<span>,<div>,<span>это встроенный тег, используемый в строке текста,<div>является тегом блочного уровня.

DIV+CSS

divИспользуется для хранения данных, которые необходимо отобразить,cssОн используется для указания того, как отображать стиль данных, чтобы структура и стиль были отделены друг от друга.

Просмотр HTML-кода в стиле div+css: щелкните ссылку ниже, чтобы перейти к просмотру исходного кода:

div-css.html

элемент форматирования

1. обычный текст

• <b>, определяет полужирный текст
• <big>, определить большие символы
• <em>, определяя выделение текста
• <i>, определите курсив
• <small>, определить маленькие символы
• <strong>, определяющий акцент
• <sub>, определите индекс
• <sup>, определите надстрочное слово
• <ins>, определите вставляемое слово
• <del>, определите удаляемое слово

2. компьютерный вывод

• <code>, который определяет компьютерный код
• <kbd>, определите стиль вывода с клавиатуры
• <samp>, определяющий образец компьютерного кода
• <tt>, который определяет стиль ввода пишущей машинки
• <pre>, который определяет предварительно отформатированный текст

3. период, термин

• <abbr>, определите сокращения
• <acronym>, определите аббревиатуры
• <address>, определить адрес
• <bdo>, который определяет направление текста
• <blockquote>определять длинные ссылки
• <q>, определение коротких кавычек
• <cite>, ссылки на определения, цитаты
• <dfn>, определить концепцию, проект

элемент изображения

<img src="图片的url" alt = "图像的替代文本">

элемент гиперссылки

1. <a>помеченtargetсвойство, значение по умолчанию_self.

стоимость	иллюстрировать
_self	Откройте целевую страницу в фрейме или окне, где находится гиперссылка
_blank	Откройте целевую страницу в новом окне браузера
_parent	Загрузите целевую страницу в родительский набор фреймов или родительское окно, содержащее связанный фрейм
_top	Открывает целевую страницу во всем текущем окне браузера, таким образом удаляя все фреймы

2. Текстовая ссылка есть<a></a>Содержимое элементов между тегами является текстовым.
3. Используются анкорные ссылки#+对应的锚点, якоря обычно используют уникальные значения атрибутовidнастраивать.

Ссылка на точку доступа к изображению

Ссылка на точку доступа к изображению, что это такое? Когда вы просматриваете некоторые веб-страницы с покупками, на изображении вы можете ссылаться на разные целевые местоположения в разных местах и ​​​​переходить на разные веб-страницы, щелкая в разных местах.Это также технология, обычно используемая в проектах торговых центров. . . .

Не на этот раз<a>элемент тега, но<area>элемент.

<area>Есть два атрибута элементаshape,cordsАтрибуты.

shapeАтрибуты	иллюстрировать	cordsАтрибуты	иллюстрировать
circle	круглый	x,y,r	(x,y) — координата центра, r — радиус
rect	прямоугольник	x1,y1; x2,y2	(x1,y1) — координата верхнего левого угла, (x2,y2) — координата нижнего правого угла
poly	многоугольник	x1,y1;x2,y2;x3,y3;...	координаты каждой точки

<area>Система координат, начало координат — левый верхний угол изображения, положительное направление оси X — вправо, положительное направление оси Y — вниз.

Рисую карту Казахстан, отражаю<area>Система координат:

использование ссылок на горячие точки изображений,<map>метка определяетimage-map, может содержать более одной горячей зоны<area>, каждая точка доступа имеет отдельную ссылку.

быть<map>присвоенный ярлыкnameАтрибуты.

Буду<img>помеченusemapатрибут с<map>помеченnameсвязан атрибут.

Чтобы доказать то, что я узнал, я пишу html-страницу.

map -> name="image_link"

img -> usemap="#image_link"

Нажмите, чтобы прыгнуть:imgmap.html

ссылка на электронную почту

Ссылка на электронную почту в основном видна на официальной странице, где есть много того, что нужно сделать, чтобы открыть новое электронное письмо.

Нажмите на ссылку ниже, чтобы увидеть эффект:

связаться с нами

Код:

<a href="mailto:xxxxxx@qq.com">联系我们</a>

JavaScript Link.

Нажмите на ссылку JavaScript:

Щелкните всплывающее окно

Код:

<a href="javascript:alert('哈哈，你点击了！');">点击弹窗</a>

пустая ссылка

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

Код для пустой ссылки:

javascript: void(0)

<a href=""></a>

<a href="#"></a>

<a href="javascript:void(0)"></a>

Список элементов

Интегрируйте html-страницу списка, нажмите, чтобы перейти:ul-ol.html

1. неупорядоченный список,<ul>определить неупорядоченный список,<li>Определить элементы списка.

<ul>изtypeСтоимость имущества:discточка,squareблокировать,circleкруглый,noneбез.

2. упорядоченный список,<ol>определить упорядоченный список,<li>Определить элементы списка.

<ol>изtypeЗначения атрибутов: цифры, прописные буквы, прописные римские цифры, строчные буквы, строчные римские цифры.

startАтрибут определяет начальную позицию порядкового номера.

3. Список определений<dl>, определяет, что внутри списка может быть несколько заголовков элементов списка, и каждый заголовок элемента списка использует<dt>Определение метки, в заголовке элемента списка может быть несколько описаний элементов списка, используйте<dd>Определение ярлыка.

лист

Интегрируйте HTML-страницу формы, нажмите, чтобы перейти:table.html

1. <table>определить таблицу
2. <caption>определить заголовок таблицы
3. <tr>определить несколько строк
4. <td>определить несколько ячеек
5. <th>определить заголовок
6. Таблица делится на заголовок, тело, низ:<thead>,<tbody>,<tfoot>три этикетки.

Атрибуты	иллюстрировать
border	Установите ширину границы таблицы
width	Установить ширину таблицы
height	Установить высоту стола
cellpadding	установить отступ
cellspacing	установить поля

7. <td>Два свойства:colspanИспользуется для определения ячеек в строках,rowspanИспользуется для определения ячеек в столбцах
8. <tbody>,<thead>,<tfoot>Теги часто используются для группировки содержимого таблицы.
9. сформировать<form>определение ярлыка,actionАтрибут определяет адрес отправки формы,methodАтрибут определяет способ отправки формы.

Код:

<input type="text">

<input type="password">

<input type="radio">

<input type="checkbox">

<input type="submit">

<input type="reset">

<input type="button">

<input type="image">

<input type="file">

<input type="hidden">

<select>

<option>

size属性用来设置选择栏的高度，multiple属性用来决定是多选列表，还是单选

selected="selected"

управление формой для ввода большего количества текста

<textarea>элемент

<textarea>теги имеютname,cols,rows3 свойства.

1. nameдля отправки параметров
2. valueдля ввода текстового контента
3. colsа такжеrowsКоличество столбцов и строк, ширина и высота соответственно для текстового поля.

Эффект:

Самооценка:

Код:

<form action="web" method="post">
 自我评价：<br/>
 <textarea rows="10" cols="50" name="introduce">
 </textarea>
 <br/>
 <input type="submit" id="" name="">
</form>

frameset

1. <frameset>Определите набор фреймов для организации нескольких окон, каждый фрейм имеет отдельный HTML-документ.
2. <frameset>Не может быть<body>общего пользования, если только<noframe>элемент
3. <frame>используется для определения<frameset>в конкретном окне. пустой элемент<frame/>

frameАтрибуты

Атрибуты	иллюстрировать
src	для отображенияhtmlДокументация
frameborder	Определить внешнюю границу фрейма, значение атрибута равно 0 или 1
scrolling	Определяет, отображать ли полосу прокрутки, есть 3 значения: да, нет, авто
noresize="noresize"	Определите, что размер кадра не может быть изменен, значение по умолчанию регулируется.
marginheightа такжеmarginwidthАтрибуты	Определите верхнее, нижнее, левое и правое поля

4. <noframe>, для отображения текста в браузерах, не поддерживающих наборы фреймов
5. <iframe>,а также<frame>элементы одинаковые,iframeимеютframeсвойства, плюсheightа такжеwidth

Код:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <title>frameset</title>
	</head>
    <frameset cols="25%,50%,25%">
        <frame src="https://blog.csdn.net/qq_36232611" scrolling="no" noresize="noresize"></frame>
        <frame src="https://juejin.cn/user/1451011081249175" ></frame>
        <frame src="https://www.jianshu.com/u/c785ece603d1" ></frame>
    </frameset>
    <noframes>
        <body>您的浏览器无法处理框架，请更换浏览器打开</body>
    </noframes>
</html>

зарезервированные символы

Зарезервированные символы в HTML должны быть заменены объектами символов.

Показать результаты	описывать	имя сущности	номер объекта
	Космос	 	 
<	Знак меньше	&lt;	&#60;
>	знак больше	&gt;	&#62;
&	амперсанд	&amp;	&#38;
"	кавычки	&quot;	&#34;
'	апостроф	&apos;(Не поддерживается IE)	&#39;
￠	цент	&cent;	&#162;
£	фунты стерлингов	&pound;	&#163;
¥	юань (иена)	&yen;	&#165;
€	Евро (евро)	&euro;	&#8364;
§	подраздел	&sect;	&#167;
©	Авторские права	&copy;	&#169;
®	Товарный знак	&reg;	&#174;
™	товарный знак	&trade;	&#8482;
×	Знак умножения	&times;	&#215;
÷	знак деления	&divide;	&#247;

Основы CSS

1. css,АнглийскийCascading Style Sheets, китайское название: каскадные таблицы стилей. Каскадные таблицы стилей.
2. cssЯвляется проявлением языка, дополняет язык веб-страницы.
3. cssДизайн стилей для веб-страниц, включая шрифты, цвета, позиции и т. д.
4. css4 способа использования: импорт внешнего файла стиля, импорт внешнего файла стиля, использование внутреннего определения стиля, использование встроенного определения стиля.

Импорт внешних файлов стилей:

<link type="text/css" rel="stylesheet" href="css样式文件的url"/>

Импорт внешних файлов стилей:

<style type="text/css">
 @import "css样式文件的url";
</style>

Используйте определения внутреннего стиля:

<style type="text/css">
 div {
     background-color: #ffffff;
     width: 300px;
     height: 300px;
 }
</style>

Используйте определения встроенного стиля:

<div style="background-color: #ffffff; width: 100px; height: 100px;">
</div>

Две особенности CSS: каскадные, наследство

Каскадирование: Приоритет применения каскадных стилей:

Встроенные стили -> Внутренние стили -> Внешние стили -> Браузер по умолчанию.

Наследование заключается в том, что свойства CSS могут передаваться от родительских элементов к дочерним элементам.

cssселектор

1. Селекторы элементов — самые простые селекторы.
2. селектор подстановочных знаков, с"*"Представление, справедливое для любого элемента.
3. селектор атрибутов

Формат:

E[attribute]{property1:value1; property2:value2;...}

грамматика	иллюстрировать
E[attribute]	Используется для выбора элементов с указанными атрибутами
E[attribute=value]	Используется для выбора элемента с указанными свойствами и заданными значениями.
E[attribute~=value]	Используется для выбора элемента, значение атрибута которого содержит заданное значение, значение должно быть целым словом, до и после могут быть пробелы
E[attribute|=value]	Используется для выбора элементов со значениями атрибутов, начинающимися с указанного значения, которое должно быть целым словом или сопровождаться дефисом "-"

Производный селектор

1. Производные селекторы определяют стили на основе контекста элемента в его позиции.

2. Существует три типа производных селекторов: селекторы потомков, селекторы дочерних элементов и селекторы соседнего уровня.

3. Селектор потомков — это все элементы, которые являются потомками элемента.

4. Селекторы дочерних элементов — это дочерние элементы первого уровня, которые квалифицируются относительно родительского элемента.

5. Селектор соседнего родственного элемента, целевой элемент является родственным элементом, имеет один и тот же родительский элемент, и два элемента являются смежными.

6. idселектор к конкретномуidHTML-элемент значения определяет стиль.

7. селектор класса для указанияclassЭлемент HTML определяет стиль.

8. Селектор псевдокласса

Селекторы псевдоклассов: селекторы псевдоклассов и селекторы псевдоэлементов

Перед псевдоклассами ставится двоеточие(:)В начале не должно быть пробела между селектором элемента и двоеточием, а также между именами псевдоклассов.

cssНаиболее часто используемые псевдоклассы показаны в следующей таблице:

имя псевдокласса	иллюстрировать
:active	Добавьте стили к активированному элементу
:focus	Добавляйте стили к элементам с фокусом ввода
:hover	Наведите курсор над элементами Добавить стиль
:link	Добавить стиль к непосещенным ссылкам
:visited	Добавляйте стили к посещенным ссылкам
:first-child	Добавьте стили к элементу, который является первым дочерним элементом его родительского элемента.
:lang	к указанномуlangЭлементы атрибута для добавления стилей

Селектор псевдоэлементов

cssНаиболее часто используемые псевдоэлементы показаны в следующей таблице:

имя псевдоэлемента	иллюстрировать
:first-letter	Добавить стиль к первой букве текста
:first-line	Добавьте стили к первой строке текста
:after	добавить содержимое после элемента
:before	добавить содержимое перед элементом

css фон

cssСвойства фона следующие:

Атрибуты	иллюстрировать
background-color	Определите цвет фона
background-image	Определить фоновое изображение
background-repeat	Определяет, повторяется ли фоновое изображение и как
background-attachment	Определяет, прокручивается ли фоновое изображение вместе с содержимым
background-position	Определите горизонтальное и вертикальное положение фонового изображения
background	Различные свойства фона могут быть определены с помощью одного стиля

background

1. background-colorИспользуется для установки цвета фона, начальное значение равноtransparentПрозрачный цвет.
2. Три вида значений цвета, таких как: названия цветов, шестнадцатеричный цвет, функция rgb.
3. background-imageИспользуется для установки фонового изображения элемента, значение по умолчаниюnone.
4. background-repeatУправляет мозаикой изображения.

background-repeatПо умолчаниюrepeat, то есть изображение мозаично по осям x и y, и вы также можете указать мозаичные изображения по оси xrpeat-x, мозаичное вдоль оси Yrepeat-y, или не плиткаno-repeat, наследует настройку свойства родительского элементаinherit.

5. background-attachmentИспользуется для установки того, является ли фоновое изображение фиксированным или прокручивается вместе с остальной частью страницы. Значение по умолчанию:scrollУказывает, что вы можете прокрутить с остальной частью страницы прокручивается. настраиватьfixed, указывающее, что фоновое изображение не будет прокручиваться при прокрутке остальной части страницы, установивinherit, который наследуется от родительского элемента.
6. background-positionДля установки позиции фонового изображения точка.

backgroundмогуbackground-color,background-position,background-attachment,background-repeat,background-imageВсе готово.

Свойства шрифта CSS

cssОбщая таблица атрибутов шрифта:

Атрибуты	иллюстрировать
font-family	Определяет семейство шрифтов текста
font-size	Определить размер шрифта текста
font-variant	Определяет, отображать ли текст шрифтом с маленькими заглавными буквами
font-style	Определяет, будет ли шрифт текста курсивом
font-weight	Определить вес шрифта
font	Различные свойства шрифта могут быть определены в одном стиле

1. font-familyИспользуется для установки шрифта элемента, значение атрибута элемента обычно может устанавливать несколько шрифтов.
2. font-sizeИспользуется для установки размера шрифта.
3. font-styleИспользуется для установки курсивного шрифта, значение по умолчаниюnormal, когда установлено значениеitalic, отображается курсивом, если установлено значениеobliqueОн выглядит как наклонный узор.
4. font-variantИспользуется для установки шрифта для использования строчных букв, по умолчаниюnormal, после установкиsmall-caps, преобразует все строчные буквы в прописные.
5. font-weightиспользуется для установки веса шрифта,normalзначение равно 400,boldравно 700.
6. fontМожет установитьfont-family,font-size,font-style,font-variant,font-weight.

cssЛист свойств текста:

Атрибуты	иллюстрировать
color	цвет текста
direction	Направление текста или направление письма
letter-spacing	интервал между символами
line-height	высота строки текста
text-align	Свойство горизонтального выравнивания текста, установите режим горизонтального текста в элементе, значение равноleft，right，center，inherit.
text-decoration	Добавьте к тексту эффект украшения, значение равноunderline为添加下画线，overline添加上画线，line-through添加删除线，blink添加闪烁的效果,none无如何修饰,inherit.
text-indent	Определяет отступ первой строки текста, значение по умолчанию равно 0
text-shadow	Добавить эффект тени к тексту
text-transform	Toggle текстовый случай
white-space	Устанавливает, как обрабатывать пробелы внутри элемента
word-spacing	Расстояние между определением слова

cssФорма атрибута размера:

Атрибуты	иллюстрировать
width	установить ширину элемента
min-width	Установить минимальную ширину элемента
max-width	Установить максимальную ширину элемента
height	установить высоту элемента
min-height	Установить минимальную высоту элемента
max-height	Установить максимальную высоту элемента

cssЛист свойств списка:

Атрибуты	иллюстрировать
list-style-image	Установите стиль маркера элемента списка на изображение,none/inherit/url
list-style-position	установить положение маркера элемента списка,inside/outside/inherit
list-style-type	Устанавливает тип тега элемента списка
list-style	Различные свойства списка могут быть определены в одном стиле

list-style-type

стоимость	иллюстрировать
disc	заполненный круг
circle	полый круг
square	квадратный
decimal	количество
low-roman	строчные римские цифры
upper-roman	заглавные римские цифры
low-alpha	Строчные буквы
upper-alpha	Заглавная буква
none	Без опознавательных знаков
inherit	Наследовать этот параметр от родительского элемента

cssЛист таблицы свойств:

Атрибуты	иллюстрировать
border-collapse	Установите, следует ли объединять границы таблицы
border-spacing	Устанавливает расстояние между соседними границами клетки
caption-side	Установите положение заголовка таблицы
empty-cells	Установите, отображать ли границы и фон для пустых ячеек в таблице
table-layout	Устанавливает настройку, используемую для ширины столбца ячейки таблицы.

коробочная модель

1. cssБлочная модель, содержащая содержимое элементаcontent, обивкаpadding,Рамкаborder, внешнее расстояниеmargin.

cssСвойство padding, отступ элемента находится между границей и содержимым.

cssСвойства заполнения:

Атрибуты	иллюстрировать
padding-top	верхний отступ элемента
padding-right	правильное заполнение элемента
padding-bottom	нижний отступ элемента
padding-left	левый отступ элемента
padding	Определите все свойства заполнения с помощью одного объявления

Порядок установки: вверх, вправо, вниз и влево.

padding: 10px 10px 10px 10px;

cssСвойства полей:

Атрибуты	иллюстрировать
margin-top	Определяет верхнее поле элемента
margin-right	Определяет правое поле элемента
margin-bottom	Под определением элемента снаружи
margin-left	Определяет левое поле элемента
margin	Определите все свойства маржи с помощью одного объявления

cssАтрибуты границы:

Атрибуты	иллюстрировать
border-top-style	Атрибут стиля верхней границы
border-right-style	свойство стиля для правой границы
border-bottom-style	Атрибут стиля нижней границы
border-left-style	атрибут стиля для левой границы
border-style	Установите свойства стиля 4 границ
border-top-width	Установите свойство ширины верхней границы
border-right-width	Установите свойство ширины правой границы
border-bottom-width	Установите свойство ширины нижней границы
border-left-width	Установите свойство ширины нижней границы
border-width	Установите свойство ширины 4 границ
border-top-color	Установите свойство цвета верхней границы
border-right-color	Установите свойство цвета правой границы
border-bottom-color	Установите свойство цвета нижней границы
border-left-color	Установите свойство цвета левой границы
border-color	Установите цветовые свойства 4 границ
border-top	Все атрибуты, определенные на границе с утверждением
border-right	определить свойства для всех правых границ с одним объявлением
border-bottom	Определите все свойства нижней границы одним объявлением
border-left	Определите все свойства левой границы с помощью одного объявления
border	Определите свойства для всех границ с помощью одного объявления
border-width	Определить ширину 4 границ одновременно
border-color	Определите цвет 4 границ одновременно

стиль границы

1. none, без пограничного эффекта
2. hidden,а такжеnoneтакой же
3. dotted, эффект пунктирной границы
4. dashed, эффект пунктирной границы
5. double, эффект двойной линии границы
6. solid, Сплошные эффекты границы
7. groove, 3D эффект границы канавки
8. ridge, 3D эффект выпуклой границы канавки

cssКонтур — это линия, нарисованная вокруг элемента по периферии края границы, чтобы подчеркнуть элемент.

Атрибуты	иллюстрировать
outline-style	Определение свойств стиля контура
outline-color	Определите свойство цвета контура
outline-width	Определите свойство ширины контура
outline	Определите все свойства контура в одном объявлении

свойства макета

1. Свойства макета — это правила расположения и отображения элементов в документе.
2. 3 режима компоновки: обычный документооборот, плавающий, позиционирование

cssПлавающая включает в себя свойства

Атрибуты	иллюстрировать
float	Установите, нужно ли перемещать поле, и направление плавания
clear	Устанавливает, с какой стороны элемента не могут появляться другие плавающие элементы.
clip	Обрезать абсолютно позиционированные элементы, элемент должен быть абсолютно позиционирован, принцип сверху справа внизу слева
overflow	Установите метод обработки, когда содержимое переполняет поле элемента, значение:visible,auto,hidden,scroll
display	Установите способ отображения элемента, значениеnone,block,inline,inline-block,inherit
visibility	определяет, виден ли элемент,visibilityЕсли установлено значение hidden, пространство, занимаемое элементом, все равно будет сохранено, ноdisplay:noneНе резервировать занятое пространство, значение:visible,hidden

cssЦелевые свойства

Атрибуты	иллюстрировать
position	Тип позиционирования элемента, значениеstatic,absoluteабсолютный,relativeотносительно
top	поле на элементе
right	правое поле элемента
bottom	нижнее поле элемента
left	левое поле элемента
z-index	порядок расположения элементов

z-indexОн используется для установки порядка слоев позиционирования целевого объекта.Чем больше значение, тем выше уровень. Это свойство толькоposition:absoluteдействует когда.

❤️Спасибо всем

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

2. Добавьте WeChat [xiaoda0423], чтобы привлечь вас в группу технического обмена для совместного обучения.