Интерфейс каждый день просит всесторонне улучшить техническое познание <Итоги первой недели>

опрос

) принимает следующую форму: 

<!DOCTYPE html>

Стандартные аспекты

  1. Синтаксический анализ документов HTML5 больше не основан на стандарте SGML (стандартный обобщенный язык разметки), а сформировал свой собственный набор стандартов.

Маркировка

  1. Добавлены семантические теги, в том числе
<header>、<footer>、<section>、<article>、<nav>、<hgroup>、<aside>、<figure>
  1. Отмените некоторые теги украшения веб-страницы, чтобы сделать разделение стиля и структуры более тщательным, в том числе
<big>、<u>、<font>、<basefont>、<center>、<s>、<tt>
  1. добавлением<audio>、<video>Два тега для реализации поддержки использования аудио и видео в мультимедиа.

Атрибуты

  1. Добавлены некоторые атрибуты формы, в основном усовершенствование атрибута ввода.
<!-- 此类型要求输入格式正确的email地址 -->
<input type=email >
<!-- 要求输入格式正确的URL地址  -->
<input type=url >
<!-- 要求输入格式数字，默认会有上下两个按钮 -->
<input type=number >
<!-- 时间系列，但目前只有 Opera和Chrome支持 -->
<input type=date >
<input type=time >
<input type=datetime >
<input type=datetime-local >
<input type=month >
<input type=week >
<!-- 默认占位文字 -->
<input type=text placeholder="your message" >
<!-- 默认聚焦属性 -->
<input type=text autofacus="true" >
  1. Другие теги добавили некоторые атрибуты,
<!-- meta标签增加charset属性 -->
<meta charset="utf-8">
<!-- script标签增加async属性 -->
<script async></script>
  1. Сделать некоторые имена свойств по умолчанию логическими.
<!-- 只写属性名默认为true -->
<input type="checkbox"  checked/>
<!-- 属性名="属性名"也为true -->
<input type="checkbox"  checked="checked"/>

место хранения

  1. Добавлено WebStorage, включая localStorage и sessionStorage.

  2. Представлены IndexedDB и Web SQL, позволяющие создавать таблицы базы данных и хранить данные на стороне браузера. Разница между ними заключается в том, что IndexedDB больше похожа на базу данных NoSQL, а WebSQL больше похожа на реляционную базу данных. W3C больше не поддерживает WebSQL.

  3. Представлен кеш приложения, который может кэшировать Интернет и использовать его без сети.Создавая файл манифеста кеша и создавая кеш приложения, он обеспечивает базовую техническую поддержку для PWA (Progressive Web App).

Резюме: Чтобы понять разницу между HTML5 и HTML4, необходимо понять эти основные понятия. Возможно, сейчас они все еще грубы, но позже я буду просить о деталях шаг за шагом и постепенно углублять, чтобы добиться эффекта знания того, что такое правда и что правда.

002: Что такое атрибуты метатегов?

Описание: часто используется для определения описаний страниц, ключевых слов, даты последнего изменения и других метаданных. Эти метаданные будут обслуживать браузеры (как макетировать или перезагружать страницы), поисковые системы и другие веб-сервисы.

свойство charset

<!-- 定义网页文档的字符集 -->
<meta charset="utf-8" />

имя + атрибут содержимого

<!-- 网页作者 -->
<meta name="author" content="开源技术团队"/>
<!-- 网页地址 -->
<meta name="website" content="https://sanyuan0704.github.io/frontend_daily_question/"/>
<!-- 网页版权信息 -->
 <meta name="copyright" content="2018-2019 demo.com"/>
<!-- 网页关键字, 用于SEO -->
<meta name="keywords" content="meta,html"/>
<!-- 网页描述 -->
<meta name="description" content="网页描述"/>
<!-- 搜索引擎索引方式，一般为all，不用深究 -->
<meta name="robots" content="all" />
<!-- 移动端常用视口设置 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- 
  viewport参数详解：
  width：宽度（数值 / device-width）（默认为980 像素）
  height：高度（数值 / device-height）
  initial-scale：初始的缩放比例 （范围从>0 到10）
  minimum-scale：允许用户缩放到的最小比例
  maximum-scale：允许用户缩放到的最大比例
  user-scalable：用户是否可以手动缩 (no,yes)
 -->

http-эквивалентное свойство

<!-- expires指定网页的过期时间。一旦网页过期，必须从服务器上下载。 -->
<meta http-equiv="expires" content="Fri, 12 Jan 2020 18:18:18 GMT"/>
<!-- 等待一定的时间刷新或跳转到其他url。下面1表示1秒 -->
<meta http-equiv="refresh" content="1; url=https://www.baidu.com"/>
<!-- 禁止浏览器从本地缓存中读取网页，即浏览器一旦离开网页在无法连接网络的情况下就无法访问到页面。 -->
<meta http-equiv="pragma" content="no-cache"/>
<!-- 也是设置cookie的一种方式，并且可以指定过期时间 -->
<meta http-equiv="set-cookie" content="name=value expires=Fri, 12 Jan 2001 18:18:18 GMT,path=/"/>
<!-- 使用浏览器版本 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 针对WebApp全屏模式，隐藏状态栏/设置状态栏颜色，content的值为default | black | black-translucent -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

003: В чем разница между src и href?

определение

href — это сокращение от Hypertext Reference, что означает гипертекстовую ссылку и указывает на расположение сетевых ресурсов.

Общие сценарии:

<a href="http://www.baidu.com"></a> 
<link type="text/css" rel="stylesheet" href="common.css">

src — это сокращение от source, цель — загрузить файл на html-страницу.

Общие сценарии:

<img src="img/girl.jpg"> 
<iframe src="top.html"> 
<script src="show.js">

Результат действия

  1. href используется для установления связи между текущим документом и ссылочным ресурсом.
  2. SRC используется для замены текущего контента

Метод парсинга браузера

  1. Когда браузер встречает href, он загружает ресурс параллельно и не останавливает обработку текущего документа. (Именно поэтому рекомендуется использовать метод ссылки для загрузки CSS вместо метода @import)
  2. Когда браузер разрешает src, загрузка и обработка других ресурсов будут приостановлены до тех пор, пока ресурс не будет загружен или выполнен. (Именно поэтому тег скрипта помещается внизу, а не в заголовке)

004: В чем разница между отсрочкой и асинхронностью в тегах скрипта?

По умолчанию загрузка и выполнение скриптов будут синхронизированы в порядке документов. Когда сценарий загружен и выполнен, синтаксический анализ документа будет заблокирован, и документ можно будет продолжить синтаксический анализ после загрузки и выполнения сценария.

Ниже приведена разница между асинхронным и отсроченным выполнением:

  • При наличии в скрипте атрибута defer процесс загрузки скрипта и загрузки документа происходят асинхронно, и скрипт начинает выполняться после разбора документа (происходит событие DOMContentLoaded).

  • Когда сценарий имеет атрибут async, процесс загрузки сценария и загрузки документа также происходит асинхронно. Но после загрузки скрипта парсинг HTML будет остановлен, скрипт будет выполнен, а парсинг HTML продолжится после парсинга скрипта.

  • Когда сценарий имеет атрибуты async и defer, эффект выполнения такой же, как и у async.

005: Сколько существует вариантов центрирования элемента по горизонтали и вертикали?

Центрировано по горизонтали

  • для行内元素: text-align: center;

  • Для блочных элементов с определенной шириной:

  1. реализация ширины и поля. поле: 0 авто;

  2. Абсолютное позиционирование и левое поле: -width/2, при условии, что родительский элемент position: relative

  • Для блочных элементов неизвестной ширины

  1. Метка таблицы взаимодействует с левым и правым полем auto для достижения горизонтального центрирования. Используйте тег таблицы (или напрямую установите для элемента уровня блока значение display:table), а затем добавьте к тегу левое и правое поля в значение auto.

  2. inline-block реализует метод горизонтального центрирования. display: inline-block; (или display: inline) и text-align: center; добиться горизонтального центрирования.

  3. Абсолютное позиционирование + преобразование, translateX может перемещать 50% собственного элемента.

  4. flex layout использует justify-content:center

Центрировать по вертикали

  1. использоватьline-heightРеализовать центрирование, этот метод подходит для простых текстовых классов.

  2. Установив родительский контейнер相对定位, дочерние настройки绝对定位, этикетка реализует адаптивное центрирование через поля

  3. Гибкая компоновкаflex: Родитель устанавливает display: flex; дочерний элемент устанавливает для поля значение auto для достижения адаптивного центрирования.

  4. Установка относительного позиционирования родителя, абсолютное позиционирование дочернего элемента и смещениеtransformвыполнить

  5. tableМакет, родитель преобразуется в табличную форму, а затем задается дочернийvertical-alignвыполнить. (Следует отметить, что предварительным условием для вертикального выравнивания: среднее использование — это встроенный элемент и элемент, отображаемое значение которого — table-cell).

006: Преимущества плавающих макетов? Каковы недостатки? Какие есть способы очистить поплавки?

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

преимущество

Преимущество этого заключается в том, что текст может быть хорошо обернут вокруг изображения, когда изображение и текст смешиваются. Кроме того, когда элемент плавает, он имеет некоторые свойства элементов уровня блока, такие как установка ширины и высоты, но все же имеет некоторые отличия от встроенного блока.Первый из них касается горизонтальной сортировки, плавание может устанавливать Направление и встроенный Направление -block исправлено; также существует проблема, заключающаяся в том, что иногда возникает пустой пробел при использовании встроенного блока

недостаток

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

Как очистить поплавок

  1. Добавьте дополнительные теги
<div class="parent">
    //添加额外标签并且添加clear属性
    <div style="clear:both"></div>
    //也可以加一个br标签
</div>
  1. Добавьте атрибут переполнения к родителю или установите высоту
<div class="parent" style="overflow:hidden">//auto 也可以
    //将父元素的overflow设置为hidden
    <div class="f"></div>
</div>
  1. Создайте селекторы псевдокласса для очистки поплавков (рекомендуется)
//在css中添加:after伪元素
.parent:after{
    /* 设置添加子元素的内容是空 */
      content: '';  
      /* 设置添加子元素为块级元素 */
      display: block;
      /* 设置添加的子元素的高度0 */
      height: 0;
      /* 设置添加子元素看不见 */
      visibility: hidden;
      /* 设置clear：both */
      clear: both;
}
<div class="parent">
    <div class="f"></div>
</div>

Первая неделя контента закончилась, я надеюсь вдохновить вас, увидимся на следующей неделе!

Категории