(02) ② Подробное объяснение элементов и атрибутов HTML | HTML

HTML
(02) ② Подробное объяснение элементов и атрибутов HTML | HTML 
原创：itsOli  @前端一万小时

本文首发于公众号「前端一万小时」

本文版权归作者所有，未经授权，请勿转载！

本文节选自“语雀”私有付费专栏「前端一万小时 | 从零基础到轻松就业」

❗️❗️❗️
Следующая ссылка является последней главой об ошибках в этой статье -"② Подробное объяснение HTML-элементов и атрибутов"


1. meta 有哪些常见的值？
2. meta viewport 是做什么用的，怎么写？
3. 列出常见的标签，并简单介绍这些标签用在什么场景？
4. 如何在 HTML 页面上展示 <div></div> 这几个字符？
5. 你是如何理解 HTML 语义化的？
6. 前端需要注意哪些 SEO?
7. 你对网页标准和 W3C 重要性的理解?

8. 关于语义化，以下说法错误的是？（不定项）
  ✅ 在做页面做整体布局的时候，table 标签用起来很方便可以作为布局的一种推荐方案。
  ❌ 语义化的本质是可读性，让代码适合自己阅读、适合队友阅读、适合机器阅读。
  ✅ 对于 h1-h6、p、span 这些标签，用 div 替换也没关系，修改它的 display 属性即可。
  ❌ 使用语义化标签能让代码更简洁，所以能用尽量用。

🙋Вышеупомянутый вопрос интервью «Справочный ответ Подробное объяснение», пожалуйстакликните сюдаУзнайте, как его получить!


Предисловие:Предыдущий"(01) ① Основы HTML | HTML"В этой статье у нас есть предварительное понимание HTML.На основе полного мастерства мы коснемся большого количества часто используемых «элементов тегов» и их «атрибутов» в этой статье.

Очков знаний будет много, но читайте внимательно, и выигрыш будет велик.


1 Цель, которую нужно достичь после изучения этого

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

подведите итоги заранее

Когда мы выбираем лейбл, мы идем к егоОсновная функцияЧтобы соответствовать, попробуйте использовать смысловые теги для построения всего фрейма страницы:

  • Если это заголовок, используйте<h>;

  • Если это абзац, используйте<p>;

  • Если вы не знаете, кто он такой, если эта штука уместится в строке, используйте<div>; если линии нет, а есть небольшая позиция, используйте<span>;

  • Если это кликабельно, используйте<a>Связь;

  • Если это похоже на бок о бок или даже немного, используйте «список»;

  • Если вы видите таблицу, используйте<table>;

  • Если вы видите поле ввода, используйте<input>.


2 Подробно опишите каждый элемент и атрибут

2.1 Метаданные<meta>

2.1.1 Укажите кодировку документа

<meta charset="UTF-8">

2.1.2 Адаптация к мобильным страницам (понять и помнить)

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Примечания:

  • width=device-widthширина = ширина устройства
  • user-scalable=noпользовательское масштабирование = не разрешено
  • initial-scale=1.0начальная шкала = 1
  • maximum-scale=1.0максимальный масштаб = 1
  • minimum-scale=1.0Минимальный масштаб = 1

2.1.3 Установить реферер (адрес текущей страницы, на которой находится картинка)

<meta name="referer" content="never">

2.1.4 Добавить страницу Описание (т. Е. Наш сайт, представленный при поиске)

<meta name="description" content="优雅高效的在线文档编辑与协同工具，让每个企业轻松拥有文档中心，阿里巴巴集团内部">

2.2 <head>Вы также можете поместить элемент head: CSS и JS.

<link rel="stylesheet" href="--.css">
<script src="--.js"></script>

  • Примечание. Как упоминалось в предыдущей статье, элемент head<head>Все элементы ярлыка внутри не будут отображаться пользователю, но он будет нести что-то связанное с описанием страницы — стили CSS, мета, заголовок и т.д.

  • Примечание: у нас есть здесь<link>теги, чтобы импортировать стили CSS, принадлежащие нашим наиболее часто используемым внешним таблицам стилей.

Одна вещь, которую мы должны прояснить: HTML устанавливает «структуру» контента, CSS обеспечивает «стиль» и «представление». 

2.3 Список

  • ✅ Задача: Напишите HTML следующего изображения (выдержка из этой статьи).

🔗 Эффекты и ссылки на исходный код

<!DOCTYPE html>
<html >
<head>
 <meta charset="utf-8">
 <title>前端一万小时</title>
</head>
<body>
 <h1>1 学完这篇要达到的目标</h1>
  <p>随便打开一个页面，鼠标指到任意位置都知道该用什么标签就 OK。<br>
    提前给出总结（我们在选用标签时……
  </p>
 <ul> <!-- ❗️注释 1 -->
  <li>如果是标题，就用 &lt;h&gt;;</li> <!-- ❗️注释 2 -->
  <li>如果是一段话，就用 &lt;p&gt;;</li> <!-- ❗️注释 3 -->
  <li>如果是可点击的就用一个 &lt;a&gt; 链接；</li>
  <li>如果像那种并列一排排的，甚至还有一点一点，就用“列表”；</li>
  <li>……</li>
 </ul>
</body>
</html>

  • Примечание 1:<ul>Ненумерованный список — сокращение от Ненумерованный список; и<ol>Упорядоченный список — сокращение от Упорядоченный список. Единственная разница между ними состоит в том, что упорядоченный список начинается с 123..., а неупорядоченный список начинается с маленькой черной точки. Остальные форматы одинаковы и не повторяются;

  • Заметка 2:<ul>или<ol>Непосредственно вложенные теги<li>теги, никакие другие теги не могут быть вложены между ними. Если он должен быть вложен, он должен быть вложен в<li>на этикетке;

  • Заметка 3:&lt; &gt;Этот искаженный символ на первый взгляд является «сущностью» в нашем HTML.

lt — сокращение от «меньше, чем»; gt — сокращение от «больше, чем». Затем добавьте&Персонажи - Сущности начинаются с&начинается с;конец.

мы хотим показать<h>Такой текст, мы не можем набрать его прямо в HTML<или>Дождитесь появления этого символа, иначе он будет напрямую распознан браузером как элемент, так что с ним придется иметь дело специально.

💡Для получения дополнительных сведений см.:Справочное руководство по сплошным символам

2.4 Пользовательский список

То есть одно название и одно введение в документе, и одно название и одно введение...:

  • ✅ Задача: Напишите HTML следующего изображения.

🔗 Эффекты и ссылки на исходный код

<!DOCTYPE html>
<html >                                           
<head>                                           
  <meta charset="utf-8">                         
  <title>前端一万小时</title>             
</head>                                          
<body>
  <h1>1 细说各元素，各属性</h1>
  <p>1. 元数据 &lt;meta&gt;：</p>
  <dl>
    <dt>-- 指定文档编码：</dt>
      <dd>&lt;meta charset="UTF-8"&gt; </dd>
    <dt>-- 适配移动端页面：</dt>
      <dd>&lt;meta name="viewport" content="widt……&gt;</dd>
    <dt>-- 定制页面图标（即页面标签前边的小图标）：</dt>
      <dd>&lt;link rel="shortcut icon" href="favicon.ico……&gt;<br>
        注释：href="favicon.ico" 这里边放这个图标的图形文件地址。
    </dd> 
  </dl>     
</body>                                           
</html>

2.5 Метки гиперссылок

🔗 Эффекты и ссылки на исходный код(❗️Пожалуйста, сначала откройте его, чтобы увидеть эффект~)

2.5.1 Простые ссылки

<a href="这里写链接地址" title="前端一万小时">知乎：itsOli</a>

<!-- 注释：这里的 title 属性，作用是：当我们把鼠标停在 itsOli 上时，会弹出一个文本框：
前端一万小时。 -->

2.5.2 Внешние ссылки

установить цель на_blank, нажмите на эту ссылку, браузер откроет новое окно, чтобы открыть веб-страницу:

<a href="这里写链接地址" title="前端一万小时" target="_blank">知乎：itsOli</a>

<!-- 注释：当然这里的 target 属性还可以设置成其他值。-->

2.5.3 Вернуться к верхней ссылке страницы

<a href="#">返回页面顶部</a>

<!-- 注释：这里的 # 后边是可以加东西的，可以是文档中某个元素的 ID，也可以是某个标题等等（但前
提是这些东西要唯一，不然没办法定位到具体位置）。 -->

 

2.5.4 Ссылка на изображение

С картинкой в ​​качестве кликабельной ссылки на объект.

2.5.5 Ссылка для скачивания

<a href="https://……这里放下载的链接" download>下载</a>

<!-- 注释：当我们点击“下载”二字时，就会自动下载这个链接的东西。 -->

     

2.5.6 Телефонная линия

<a href="tel:+86177******">打电话给 Oli</a>

<!-- 注释：当用户是手机浏览页面时，点击“打电话给 Oli”，手机就会自动拨号到这个号码。 -->

2.5.7 Ссылка по электронной почте

<a href="mailto:olizhao@qq.com">发邮件给 Oli</a>

<!-- 注释：当点击“发邮件给 Oli ”时，则自动打开邮箱跳转到写信页面； -->


<a href="mailto:olizhao@qq.com" cc="seema.qdywxs@gmail.com">发邮件给 Oli 并抄送给 Seema</a>

<!-- 注释：当点击“发邮件给 Oli 并抄送给 Seema”，则自动打开邮箱跳转到写信页面并填好抄送人。 -->

2.6 Формы

  • ✅ Задача: Написать таблицу примера «entity» выше в HTML.

🔗 Эффекты и ссылки на исходный код

<!DOCTYPE html>
<html >                                           
<head>                                           
  <meta charset="utf-8">                         
  <title>Oli-Zhao的前端一万小时</title> 
  <style type="text/css">               /* 注释 1 */
    table {
      border-collapse: collapse;        /* 注释 2 */
    }
    th, td {
      border: 1px solid green;          /* 注释 3 */
    } 
  </style>          
</head>                                          
<body>                                                              
  <table>                              <!-- 注释 4 -->
    <thead>                            <!-- 注释 5 -->
      <tr>                             <!-- 注释 6 -->
        <th>显示结果</th>                          
        <th>描述</th>
        <th>实体名称</th>
        <th>实体编号</th>
      </tr>
    </thead>
    <tbody>
      <tr> 
        <td></td>                                 
        <td>空格</td>
        <td>&amp;nbsp;</td>
        <td>&amp;#160;</td>
      </tr>
      <tr>
        <td><</td>
        <td>小于号</td>
        <td>&amp;lt;</td>
        <td>&amp;#60;</td>
      </tr>
      <tr>
        <td>></td>
        <td>大于号</td>
        <td>&amp;gt;</td>
        <td>&amp;#62;</td>
      </tr>
      <tr>
        <td colspan="4">……</td>        <!-- 注释 7 -->
      </tr>
    </tbody>
  </table>   
</body>                                           
</html>

   

  • Примечание 1:
<style type="text/css">               /* 注释 1 */
  table {
    border-collapse: collapse;        /* 注释 2 */
  }
  th, td {
    border: 1px solid green;          /* 注释 3 */
  } 
</style>      

Наши ссылки на CSS могут быть добавлены в заголовок<style>Элементы стиля для достижения, обратите внимание на формат.

здесьtype=text/css Это мы<style>Атрибуты элементов. На практике вам не нужно писать этот атрибут для этого элемента, все браузеры могут знать, что вы ссылаетесь на CSS, используя этот элемент. Атрибуты используются для предоставления дополнительной информации об элементе.

  • Заметка 2:
<style type="text/css">               /* 注释 1 */
  table {
    border-collapse: collapse;        /* 注释 2 */
  }
  th, td {
    border: 1px solid green;          /* 注释 3 */
  } 
</style>      

Свойство border-collapse устанавливает, будут ли границы таблицы свернуты в одну границу. Он имеет следующие значения:

  • отдельное значение по умолчанию: граница будет разделена, свойства border-spacing и empty-cells не будут игнорироваться;
  • свернуть: если возможно, границы будут объединены в одну границу. Свойства border-spacing и empty-cells игнорируются;
  • inherit: указывает, что значение свойства border-collapse должно быть унаследовано от родительского элемента.

  • Заметка 3:
<style type="text/css">               /* 注释 1 */
  table {
    border-collapse: collapse;        /* 注释 2 */
  }
  th, td {
    border: 1px solid green;          /* 注释 3 */
  } 
</style>      

вот настройка<th>,<td>Стиль элемента "бордюр, бордюр - бордюр".

  • Сплошная линия;
  • пунктир: тире;
  • пунктирный: точка

  • Примечание 4:
    <table>                              <!-- 注释 4 -->
      <thead>                            <!-- 注释 5 -->
        <tr>                             <!-- 注释 6 -->
          <th>显示结果</th>                          
          <th>描述</th>
          <th>实体名称</th>
          <th>实体编号</th>
        </tr>
      </thead>

Форма начинается.

  • Примечание 5: Начинается заголовок таблицы (он будет выделен жирным шрифтом при отображении страницы).

  • Примечание 6:

    • tr = строка таблицы строка таблицы, нижняя часть может быть встроена только<td>или<th>элемент;
    • td = ячейка данных таблицы представляет столбец в строке;
    • th = элемент в заголовке для той же функции, что и td.

  • Примечание 7:

<tr>
  <td colspan="4">……</td>        <!-- 注释 7 -->
</tr>

Свойство colspan указывает количество столбцов, которые может охватывать ячейка. Здесь мы позволяем ему занимать 4 столбца (обратите внимание на эффект страницы), а соответствующее количество охватываемых строк является атрибутом rowspan. - Эти два свойства используются в<td>,<th>в элементе.

2.7 Настройте значок страницы (то есть маленький значок перед меткой страницы)

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 
<!-- 注释：href="favicon.ico" 这里边放这个图标的图形文件地址。 -->


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

С наилучшими пожеланиями, qdywxs ♥ вас!

Категории