ð¡白痴的HTML指南
#html #前端 #codenewbie

内容表

什么是超文本标记语言

html是用于创建网页的标准标记语言。 HTML使用标签来定义我们网页的结构和内容。

开发人员使用一组标准元素，这些元素由我们使用的浏览器识别来标记其文档。

知道，最新版本的HTML不会被开发人员安装或升级，而是由我们用来访问各种网站的浏览器实现的。

基本元素语法

如何创建元素：

  • 开放标签告诉浏览器如何解释以下内容。
  • 所需的内容在中间嵌套。
  • 关闭标签指示该特定解释应在哪里停止。

请注意 在使用角度括号和向前斜线的位置。

<p>I'm a paragraph element.</p>

注意：
并非所有元素都有开口和关闭标签，这些元素是所谓的 void元素，当我们遇到一些最常用的void元素时，它们将在后面进行查看。

元素的类型

块级元素
  • 这些元素占据了整个内容，即使它不一定填充该行上的所有可用空间。
内联级元素
  • 这些元素不会占据整个内容，并与网页上的其他内容一起愉快地共存。

元素属性

属性是 name/value 对，它们放置在元素的开头标签内，以控制行为，外观等等。

所有HTML元素都有一组可以应用于它们的全局或“唯一”属性。

<a href="#">Link to nowhere</a>

href属性及其#值指定浏览器该特定锚元素应链接到无处。如前所述，强烈建议那里有很多属性，并且对它们进行一些研究。

注意：

  • 使用MDN's HTML reference您可以查看您要使用的任何元素或属性是否被标记为： dobected ，实验或 non-standard 因为这样的标志可能会导致网页上的意外结果。

样板 /骨骼

锅炉是任何项目的“起点”，锅板包含标记，这些标记必须在您的HTML文件中始终存在，但也可以自定义以满足项目特定的需求。

HTML样板解释了：

  • <!DOCTYPE html>表示文档正在使用的html的版本。
  • <html>是网页的根元素。
  • <head>元素包含所有元数据以及浏览器和搜索引擎有关网页的信息。
  • <body>元素包含我们文档的所有内容。 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Website Title</title>
  </head>

  <body>

  </body>
</html>

容器和HTML5语义

HTML具有一组元素，这些元素纯用于包含其他元素和“组”相关内容在一起。这些元素通常倾向于块级元素，但并非总是如此。

建议您研究语义元素与其他容器元素之间的主要区别。

<Div>元素

  • divs是块级容器元素。

<Span>元素

  • 跨度为内联级容器元素通常包裹在文本周围，以将其单一单件单件单件单套起来。
    • 。

语义元素

随着HTML5的引入，网络获得了语义。是的，这些元素在功能上的作用与我们的 div 和 span 元素相同，但是它们清楚地描述了它们对开发人员和浏览器的含义，使每个人都更容易使用它。<<<<<<<<<<<<<<< /p>

一些新元素：

  • <header>
  • <footer>
  • <article>

等等。

注意：

  • 参考MDN Semantics in HTML，以了解有关每个语义容器旨在指示和最有用的更多内容的更多信息。

常用元素

评论

在HTML中评论是一种将注释添加到标记中的方式，而浏览器将不会显示。您可以使用它来解释您的代码或为同行开发人员留下注释。

<!-- This is a comment in HTML -->

标题

<h1>至<h6>元素代表六个级别标题的级别，而<h1>的重要性最高，而<h6>是最低的重要性。默认情况下，这些标题元素都是块级。

<h1>Level 1 heading</h1>
<h2>Level 2 heading</h2>
<h3>Level 3 heading</h3>
<h4>Level 4 heading</h4>
<h5>Level 5 heading</h5>
<h6>Level 6 heading</h6>

MDN Heading Elements

注意：

  • 建议仅在“概述”文档时只有一个<h1>，并且不要跳过任何标题。

段落

<p>元素通过在单独声明的独立文本之间进行清晰的划分来代表段落。

<p>I'm the first paragraph.</p>

<p>I'm the second paragraph.</p>

MDN Paragraph Elements

段落元素也是块级。

列表

列表是通过首先声明<ol>或<ul>的容器元素而创建的，该元素将容纳我们所有列表项目（<li>），以及浏览器是否应订购我们的列表。

。

MDN List Items

无序列表

无序列表通常由子弹点表示。

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

MDN Unordered Lists

排序列表

订购的列表通常由数字表示，但是可以通过更改<ol>的属性来更改不同的编号类型。

<ol type="i">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

<!-- ordered list with lowercase roman numerals -->

MDN Ordered Lists

锚

锚定标签及其 href 属性将超链接创建到网页，文件，电子邮件地址，位置等等。

可以通过URL访问的任何东西都是锚标签的公平游戏。该元素具有多种属性，可以改变其工作方式，并且在使用此元素时，您会引用文档的强烈建议。

<a href="https://www.google.co.za/">Link to Google</a>
<a href="mailto:nowhere@google.com">Send email to nowhere</a>
<a href="tel:0824990533">Call my number</a>

MDN Anchor Elements

图片

图像是我们将正式处理的第一个元素，被认为是 void元素。除了较小的语法更改外，元素和实现的使用通常保持不变。

图像元素允许您在网站上嵌入图像。受支持的文件类型很大，但建议您确保支持您的文件类型。

图像可以起源于本地存储或Web服务器。

<img src="image filepath/link" alt="image alternative text">

alt=""属性提供了有关图像的详细说明，但是如果您的图像纯粹是装饰性的，建议不要输入alt文本。

MDN Image Element

奇数元素

水平规则

<hr>元素用于表示段落级别之间的主题断裂。不建议使用此元素简单地在浏览器上绘制一条水平线。

MDN Horizontal Rule ELement

断裂元素

<br>元素在文本中产生故意的线路。

不建议使用<br>元素在段落之间创建边距。

<p>
  Mozilla<br>
  331 E. Evelyn Avenue<br>
  Mountain View, CA<br>
  94041<br>
  USA<br>
</p>

MDN Break Element

实体代码

用于“键入”保留字符或难以在HTML中输入字符的代码。它们以数字或命名实体代码的形式出现。

Entity Code Library

表

表是由行和列组成的结构化数据集。实际的<table>元素本身是我们将在其中使用它来构建内容和数据的元素的容器。

最基本的表元素：

  • <tr>或表行定义了表格中的整个奇异行。
  • <td>或表数据定义了一个内容的单个单元格。
  • <th>或表标题表示整列的标题。 
<table>
  <tr>
    <th>Name</th>
    <th>Surname</th>
  </tr>

  <tr>
    <td>Theo</td>
    <td>Snyman</td>
  </tr>
</table>

语义表元素：

  • <thead>指示所有表标题部分。
  • <tbody>代表我们的主表数据。
  • <tfoot>表示总结表内容的行。

这些元素将我们的表格分为逻辑部分，这些部分清楚地表明了它们是什么及其在那里的目的。

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Theo</td>
      <td>Snyman</td>
    </tr>
  </tbody>
</table>

<td>标签也可以在单个数据所需的单元单元格的方面更改。这可以通过应用 colspan 或 rowspan 属性。

MDN HTML Tables

形式

与<table>元素类似，<form>元素还充当一个容器，仅包含我们将放置在其内部的表单控制。

MDN HTML Forms

  • action <form>元素的属性指定应发送形式数据的位置。
  • 方法 <form>元素的属性指定应使用哪种http方法，这可以是 get> get 或 post 。
    • 。

注意：

  • 我们不会详细介绍<form>元素的属性，因为这需要在白痴指南的范围之外进行知识。

要知道的重要属性：

  • name 属性将名称分配给输入，并且此名称将与已提交的用户数据一起发送到最终目标。没有名称的元素不会将其数据发送到任何地方。
  • id 属性用于唯一识别单个HTML元素。 HTML文档中的ID不能超过1个元素。
  • 占位符属性仅适用于某些类型的<input>元素，它用于显示预期如何在该输入中输入数据的提示。 
<form>
  <label for="fName">First Name:</label>
  <input type="text" id="fName" name="fName" placeholder="John">
</form>

代码块解释了：

  • <input>元素是 void 用于创建各种不同形式控件的元素。我们通过更改输入元素的 type 属性来选择不同的控件。
  • <label>元素代表其链接到的特定输入的标题。这些链接是通过匹配标签的 的属性与 input的 id 属性的形成。属性。

注意：

  • 可以应用大量的控件和属性来形成控件，但作为开发人员的工作是研究并找到解决我们试图解决的问题的解决方案。您可以花费数小时涵盖可以应用的不同形式控件和属性和验证属性，但是只有在您实际使用它们时，这些概念才会粘贴。

结论

HTML是一种强大的标记语言，可用于创建各种网页。通过了解HTML的基础知识，您可以立即开始创建自己的网页。但是，重要的是要记住，HTML不断发展，因此重要的是要了解最新更改很重要。最好的方法是定期研究和尝试新功能。