моя контактная информация
Почтамезофия@protonmail.com
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Основная идея — семантизация
【面试题】如何理解 HTML 语义化 ?
Тип контента можно определить только по тегам, особенно по заголовкам, абзацам, изображениям и таблицам.
Базовая структура html-файлов
Суффикс файла для html-файлов: .html, например index.html
Введите английский в vscode ! Быстрый ввод
<!-- HTML5的文档类型声明【必要】 -->
<!doctype html>
<!-- 整个页面，语言为英文【必要】 -->
<html lang="en">
<!-- 页面的头部【必要】 -->
<head>
<!-- 页面的元信息-- 文档的字符编码为 UTF-8 -->
<meta charset="UTF-8" />
<!-- 页面的元信息-- 设备上显示页面的区域 viewport 的配置 -- width 为 device-width ，即采用设备宽度；intial-scale 为 1 ，即按原比例显示（无缩放）-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 页面的标题【必要】 -->
<title>Document</title>
<!-- 页面中的样式 -->
<style>
html,
body {
height: 100%;
}
</style>
</head>
<!-- 页面的身体【必要】 -->
<body>
<!-- 页面的内容 -->
<div></div>
<!-- 页面的脚本 —— JS 代码 -->
<script></script>
</body>
</html>
【面试题】为什么<style></style> 标签要写在<head></head> 中 ?
Браузер анализирует HTML-документы сверху вниз. <style></style> На этикетке должно быть написано<head></head> Вы можете сначала загрузить стили, а затем загружать элементы.
Если вы будете <style></style> На этикетке написано<body></body> Ниже сначала загружаются элементы, а затем стили, в результате чего пользователь видит структуру страницы без стилей.
【面试题】为什么<script></script> 标签要写在 <body></body> 内的底部 ?
Браузеры анализируют HTML-документы сверху вниз. <style></style> Если не установлен<body></body> В нижней части страницы сначала будет загружен и проанализирован JS, а затем будут отрисованы элементы, что продлит время рендеринга страницы. Если в JS задействованы операции DOM, это также заблокирует рендеринг страницы. .
Классификация html-тегов
В соответствии со значением стиля отображения метки по умолчанию она делится на две категории:
【面试题】HTML有哪些内联元素和块状元素 ?
Ширина определяется содержанием
display :inline Без замены элемента невозможно установить ширину и высоту.img，span , a , b 等
display :inline-block Можно установить ширину и высотуinput， button 等
Ширина определяется контейнером (ширина заполнит весь контейнер), а ширину и высоту можно установить.
display: blockdiv，h1-h6，p，ul, ol ，form , hr 等
display: tabletable
display: list-itemli
Элементы замены в HTML
Элементы, визуализированное содержимое которых можно заменить путем изменения значения атрибута (в основном атрибута src), называются «элементами замены».
Следующие теги являются заменяющими элементами:
img、video、iframe、canvas、textarea、input、select、object
Характеристики замененных элементов
Заменить размер элемента
Окончательный размер заменяемого элемента определяется комбинацией следующих трех методов, их Приоритет от высокого к низкому С последующим:
Новые теги HTML5
【面试题】HTML5 新增了哪些标签 ? (回答几个常用的即可)
структурные теги
<header>: 定义文档或节的头部。
<nav>: 定义导航链接。
<section>: 定义文档中的独立节。
<article>: 定义文档、页面、应用或网站中独立的内容区域。
<aside>: 定义页面的侧边栏内容。
<footer>: 定义文档或节的页脚。
<main>: 定义文档的主体内容。
мультимедийные теги
<video>: 定义视频或电影。
<audio>: 定义音频内容。
<source>: 为<video>和<audio>元素定义媒体资源。
<track>: 为<video>和<audio>元素定义文本轨道。
<embed>: 定义嵌入的内容，比如插件。
<canvas>: 用于在网页上绘制图形。
тег формы
<datalist>: 定义选项列表，与<input>元素配合使用，以提供“自动完成”功能。
<output>: 定义不同类型的输出，比如脚本的输出。
Другие теги
<time>: 定义日期或时间。
<mark>: 定义高亮显示的文本。
<progress>: 定义任何类型的任务的进度。
<meter>: 定义已知范围或分数值内的标量测量。
<details>: 定义用户可见的或者隐藏的额外的细节。
<summary>: 定义<details>元素的可见标题。
<figure>: 规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>: 定义<figure>元素的标题（caption）。
Практические ключевые моменты часто используемых HTML-тегов
Используемый только внутри тега head, он может определять связь между документом и внешними ресурсами, например, стиль CSS внешней ссылки, небольшой значок перед заголовком страницы внешней ссылки и т. д.
<!-- 外链--样式 -->
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- 外链--页面标题前的小图标 -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
Четыре основные функции тега гиперссылки (переход по странице, прокрутка страницы [привязка], обновление страницы, загрузка файла)
https://blog.csdn.net/weixin_41192489/article/details/140217094
Добавляйте гиперссылки в абзацы
Оберните a с помощью p вместо p с помощью a
<p><a href="">段落</a></p>
Это применимо только к разрывам строк внутри тегов p. Чтобы изменить строки между абзацами или отрегулировать расстояние между элементами, используйте такие стили, как отступы и поля.
<p>广东省<br/>广州市<br/>黄埔大道西601号</p>
Используется для переноса части текста в строку для добавления специальных стилей.
<p><span style="color: red">要点：</span> 不能长时间睡觉。</p>
<p>m<sup>2</sup></p>
<p>m<sub>2</sub></p>
блочные элементы display: block
Он может сохранять все пробельные символы (пробелы, новые строки) и выводить результаты без изменений. Он часто используется для отображения исходного кода компьютера.
<pre>
你好：
我昨天给你打了个电话。
</pre>
встроенные элементы display: inline
Используется для представления компьютерного исходного кода или другого машиночитаемого текстового содержимого. Чтобы сохранить формат отступов кода, он обычно используется вместе с тегом pre.
Текст внутри тега кода будет отображаться шрифтом фиксированной ширины в стиле телетайпа (Courier).
<pre>
<code>
let a = 1;
</code>
</pre>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<ol>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
<ol type="a">
<li>嘿嘿</li>
<li>嘿嘿</li>
<li>呵呵</li>
</ol>
<ol type="1" start="4">
<li>哈哈</li>
<li>哈哈</li>
<li>哈哈</li>
</ol>
li — это тег уровня контейнера, который может содержать что угодно, включая ul.
<ul>
<li>
<b>北京市</b>
<ul>
<li>海淀区</li>
<li>朝阳区</li>
<li>东城区</li>
</ul>
</li>
<li>
<b>广州市</b>
<ul>
<li>天河区</li>
<li>越秀区</li>
</ul>
</li>
</ul>
https://blog.csdn.net/weixin_41192489/article/details/140217983
Тег i изначально использовался для представления курсивного текста с эффектом курсива шрифта по умолчанию, но теперь курсив единообразно реализуется через CSS. Поскольку i — это первая буква значка, теперь для отображения значка принято использовать тег i, поэтому вам нужно добавить стиль font-style:normal, чтобы отменить наклон по умолчанию.
<i style="font-style:normal">☎</i>
display :inline встроенные элементы
Поддерживаемые форматы изображений: jpg (jpeg), gif, png, bmp, другие форматы не поддерживаются, например PSD, AI.
<img src="./ecLogo.jpg" alt="EC编程俱乐部的logo" />
src [обязательно]: адрес изображения
alt [Важно]: если изображение не может быть отображено, поисковые системы будут сканировать этот атрибут вместо содержимого, отображаемого на изображении. alt происходит от слова «альтернативный», что означает замену ресурса. (Некоторые браузеры его не поддерживают)
Чтобы сохранить соотношение сторон изображения, обычно задают только ширину и высоту.
[Практические навыки] Адаптивные изображения
https://blog.csdn.net/weixin_41192489/article/details/126038175
[Практические советы] Отложенная загрузка изображений (рукописные)
https://blog.csdn.net/weixin_41192489/article/details/126263221
display :inline встроенные элементы
<audio controls>
<source src="./test.mp3" type="audio/mp3" />
您的浏览器不支持 audio 标签。
</audio>
Ниже приведен простой музыкальный проигрыватель, реализованный с использованием vue3. Соответствующие атрибуты и методы см. в комментариях.
<script setup>
let bgMusic_ref = ref(null)
function printInfo() {
let musicInfo = {
//currentTime 当前播放进度（单位秒s）
currentTime: bgMusic_ref.value.currentTime,
//duration 音频总时长（单位秒s）
duration: bgMusic_ref.value.duration
}
console.log(musicInfo)
}
function play() {
// 播放音频
bgMusic_ref.value.play()
}
function pause() {
// 暂停播放音频
bgMusic_ref.value.pause()
}
// 重新播放音频（从头开始播放）
function rePlay() {
// 先将当前播放进度重置为 0
bgMusic_ref.value.currentTime = 0
// 再播放音频
bgMusic_ref.value.play()
}
</script>
<template>
<audio ref="bgMusic_ref" controls autoplay>
<source src="./test.mp3" type="audio/mp3" />
您的浏览器不支持 audio 标签。
</audio>
<button @click="play">播放</button>
<button @click="pause">暂停</button>
<button @click="rePlay">重新播放</button>
<button @click="printInfo">打印音频信息</button>
</template>
display :inline встроенные элементы
Поддерживается только три формата: MP4, WebM и Ogg. Другие форматы, такие как flv, mkv и т. д., не поддерживаются.
<video controls>
<source src="./test.mp4" type="video/mp4" />
</video>
src [обязательно]: адрес видео
элементы управления отображением видеоплеера
автовоспроизведение автоматическое воспроизведение
циклическое воспроизведение
preload preload (этот атрибут будет недействителен при настройке автозапуска)
[Практические советы] Загрузка видео на локальный компьютер — блог CSDN
https://blog.csdn.net/weixin_41192489/article/details/140223996
display :inline встроенные элементы
Встраивание веб-страниц в страницы
<iframe src="https://www.w3school.com.cn/index.html"></iframe>
display :inline-block встроенные элементы
<button onclick="alert('你好!')">点击我！</button>
HTML-рендеринг специальных символов
| характер | описывать | код |
|---|---|---|
| космос | неразрывный интервал | |
| < | меньше, чем | < |
| > | больше чем | > |
| © | Авторские права | © |
| & | амперсанд | & |
Дополнительные специальные символы см. в разделе «Краткая информация о написании специальных символов html, js и css в html».
https://www.cnblogs.com/starof/p/4718550.html
Практические примеры распространенных HTML-тегов
vue3 [Практическое] Семантический макет домашней страницы — блог CSDN
https://blog.csdn.net/weixin_41192489/article/details/140215515
CSS [Практический] Макет «Сихэюань» — блог CSDN
https://blog.csdn.net/weixin_41192489/article/details/139243680
Он посвятил себя исследованию технологий более 30 лет и владеет различными языками, такими как Java, Linux, Javascript, php, css и т. д. Он внес большой вклад в область открытого исходного кода. Станция документации для разработчиков, где можно поделиться некоторыми проблемами в разработке технологий для дальнейшего использования. Все ознакомьтесь.
Почтамезофия@protonmail.com