HTML备忘单：如何实现表，链接等-DEV365 开发者社区

HTML代表超级文本标记语言。它是用于创建网页的标准标记语言。它与现代网络开发中的级联样式表（CSS）和JavaScript等技术一起使用。

Web开发人员一直使用HTML，因此熟悉常见操作和元素很重要。今天，我们将提供快速参考以加快您的学习和编码。

我们将结束：

Basic composition of an HTML webpage
Common HTML elements
Text formatting
Links
Media elements
Lists
Tables and Forms
What to learn next

页面的基本组成

html代码描述了网页的结构。它由一系列元素组成，这些元素由起始标签，内容和关闭标签定义。

空元素不需要打开和关闭标签，因为它们之间没有内容可以进入。

出于样式目的，HTML元素可以分为块级和内联级元素。块级元素会导致线断裂发生，它们占用空间并堆叠在页面上。但是，直列级别的元素只有必要的空间。

以下是html代码描述一个非常简单的网页。

<!DOCTYPE html>
<html lang="en">
  <head>
   <!-- This is a comment in HTML -->
   <!-- Elements that contain information about the webpage including the title and links to external resources go here -->
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
  </head>
  <body>
    <!-- Elements that will be displayed go here  -->
  </body>
</html>

<!DOCTYPE html>声明定义了此文档是HTML5文档。根级别有<html>标签，它由两个主要元素组成：<head>和<body>lements。

常见的HTML元素

下面，我们讨论了最常见的HTML元素，用于创建结构和组织文本。

标题

标题标签代表HTML中的所有标题。它具有六个级别，<h1>至<h6>，<h1>表示最重要的字体尺寸和重量。

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

标题标签可提高可访问性，并帮助搜索引擎优化，因为较高标题级别的信息被更优先。

专业提示：每个网页使用一个<h1>标签是最好的做法。

段落

<p>标签创建了一个段落。段落在浏览器中呈现段落时，通常会忽略线路断裂和空格。

<p>Hello, your Educative password has been reset.
       Please log in to resume learning!
</p>

内容部门元素

<div>标签代表HTML文档中的一个分区或部分，它用作容器，可用于分组内容，因此可以轻松地进行样式。

可以在内联或使用CSS引用其类或ID属性的情况下完成此样式。

<div>some content!!!</div>

线路断裂

<br />标签是一个空元素的一个很好的例子，它用于在<p>标签中强制执行断路。它可以写成自闭合标签<br />或仅开放标签<br>。

<p>Hello,<br /> your Educative password has been reset.<br />Please login to resume learning!</p>

文本格式

格式化文本的所有HTML元素都是内联级元素。 html中格式文本中使用的一些标签包括以下内容。

强烈的文字

<strong>This text is bold and important.</strong>

此文本是大胆而重要的

请注意，您也可以在此处使用<b>标签。

强调文字

<em>This text is italicized for emphasis.</em>

此文本是斜体的。

您也可以使用<i>标签。

小文字

<small>These words are smaller than</small> the others.<

这些单词小于其他单词。

大文字

<big> These words are larger than </big> the others.

这些单词比其他单词大。

突出显示文字

<mark> This text is highlighted.</mark>

突出显示了此文本。

罢工文字

<strike>This is an example of strikethrough text</strike>

这是罢工文本的一个例子

带下划线的文字

<u>This sentence is underlined.</u>

这句话是下划线的。

上标和下标文字

An equation with superscript text: X<sup>2</sup>.

带有上文文本的方程式：x ²。

我们还可以使用下标表示化合物：

CO<sub>2</sub>

co <sub> 2

跨度标签

Span tag can be used to <span style="color:red">style</span> section of a text.

跨度标签可用于样式文本的部分。

链接

HTML <a>标签定义了用于导航的超链接。这是一个内联元素。 href属性包含将导航到的URL。

This is <a href="url">a link</a>

链接目标

目标属性用于指定将显示位置文档/URL。一些可能的选项是：

_blank：在新的浏览器窗口或选项卡中打开链接的文档

<a href="https://www.educative.io/blog" target="_blank">link</a>

_self：在同一框架中打开链接

<a href="https://www.educative.io" target="_self">link </a>

_parent:在父框架中打开链接的文档

<a href="https://www.educative.io/learn" target="_parent">link </a>

_top：在窗户的整体上打开文档

<a href="https://www.educative.io/blog" target="_top">link </a>

特殊链接

<a href="mailto:email@example.com">Send email</a>

<a href="tel:0123492">Call 0123492</a>

媒体元素

您可以将媒体元素添加到HTML，例如图像，视频和音频。这是完成的。

视频

下面，我们将视频及其大小添加到我们的网页。您可以提供多种来源和格式。浏览器使用第一个可用的。

<video width="300" height="240" controls>
  <source src="url" type="video/mp4">
  <source src="alternate-url" type="video/ogg">
</video>

声音的

<audio controls>
  <source src="url" type="audio/ogg">
  <source src="alternate-url" type="audio/mpeg">
</audio>

图像

<img src="path/to/image" alt="alternate text" width="480px" height="360px">

列表

我们可以使用HTML创建几种列表。

排序列表

<ol>定义了一个有序列表。它默认编号。可以使用类型属性更改编号格式。

<ol>
  <li>Water </li>
  <li>Tea</li>
  <li>Milk</li>
<ol>

Water

茶

牛奶

无序列表

<ul>定义了一个无序的列表。列表项目将出现。

<ul>
  <li>Rice</li>
  <li>Vegetables</li>
  <li>Butter</li>
</ul>

Rice

蔬菜

黄油

输入并开始属性

type属性都存在于有序和无序列表中，用于更改编号和子弹样式。 start属性指定订购列表中的第一个项目应从。

<!-- Unordered List bullet types -->
<ul type="square">
<ul type="disc">
<ul type="circle">

<!-- Ordered List numbering styles -->
<ol type="1"> <!-- Default-Case Numerals -->
<ol type="A"> <!-- Upper-Case Letters -->
<ol type="a"> <!-- Lower-Case Letters -->
<ol type="I"> <!-- Upper-Case Numerals -->
<ol type="i"> <!-- Lower-Case Numerals -->

<ol type="1" start="3"> <!-- numbering starts from 3 -->
<ol type="A" start="5"> <!-- Letters starts with E -->

表格和表格

故事在HTML中非常常用于组织文本和数字。让我们学习如何创建桌子并添加填充。

基本表结构

<table>
  <tr>
  <!-- <th> represent a table heading, <tr> defines a table row -->
    <th>Name</th>
    <th>Age</th>
    <th>City</th>    
  </tr>
  <tr>
  <!-- <td> element holds table data-->
    <td>Bill Jones</td>
    <td>54</td>
    <td>Nashville</td>
  </tr>
   <tr>
    <td>Sura Keyser</td>
    <td>45</td>
    <td>Berlin</td>
  </tr>
   <tr>
    <td>Sarah Hernandez</td>
    <td>60</td>
    <td>Mexico City</td>
  </tr>
</table>

细胞打印和细胞间隙属性

细胞打印和细胞间隙是用于调整桌子单元格中空白量的<table>属性。

<table cellspacing="5" cellpadding="5">
    <!--cellspacing attribute defines space between table cells-->
    <!-- cellpadding represents the distance between cell borders and the content within a cell -->
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>    
  </tr>
  <tr>
    <td>Bill Jones</td>
    <td>54</td>
    <td>Nashville</td>
  </tr>
   <tr>
    <td>Sura Keyser</td>
    <td>45</td>
    <td>Berlin</td>
  </tr>
   <tr>
    <td>Sarah Hernandez</td>
    <td>60</td>
    <td>Mexico City</td>
  </tr>
</table>

形式

html表单用于收集用户输入。

<form action="path/to/register" method="POST">
     <input type="text">
       <input type="email" placeholder="example@email.com">
       <input type="number">
       <input type="date">
       <input type="checkbox">

       <textarea name="" id="" cols="30" rows="10"></textarea>

       <!--Radio buttons allow selection of only one option -->
       <input type="radio" id="apples" name="favourite-fruit" value="apples">
       <label for="apples">Apples</label><br>

       <input type="radio" id="oranges" name="favourite-fruit" value="oranges">
       <label for="oranges">Oranges</label><br>

       <input type="radio" id="other" name="favourite-fruit" value="other">
       <label for="other">Other</label>

       <button type="submit">Submit Form</button>
</form>

接下来要学什么

无论您是刚开始在网络开发职业中开始还是需要记住HTML语法的帮助，本文档都应该派上用场。要学习的下一个内容是更高级的HTML语法，例如：

链接到网页中间的链接
图像中的可单击区域
滚动
横幅广告

如果您希望在前端开发上逐渐发展并学习高级HTML，请查看教育的学习路径 Become a Front-end Developer 。这是开始作为前端开发人员旅程的理想场所。在不需要的知识的情况下，您将仅在六个策划的模块中掌握HTML，CSS和JavaScript。

快乐学习！

继续阅读有关HTML的教育

开始讨论

还有其他基本的HTML流程我们在这里不包括吗？本文是否有帮助？在下面的评论中让我们知道！