想学web前端啊？初学者必看，HTML入门指南

痛定思痛。 2022-11-21 15:08 155阅读 0赞

什么是HTML？

HTML是Web上用于开发网页的最广泛使用的语言之一。

HTML代表ħ yper Ť分机中号arkup大号anguage。它用于使用标记语言设计网页。HTML是超文本和标记语言的组合。超文本定义了网页之间的链接。标记语言用于定义标记内的文本文档，标记定义网页的结构。

HTML是一种标记语言，即，它是计算机彼此通信，控制如何处理和呈现文本的一种方式。网站将在具有不同浏览器的各种系统上打开，并且标记语言可通过其各种标签来确保该网站在所有系统中的外观相同。

HTML的历史

HTML是一种标记语言，浏览器使用它来操纵文本，图像和其他内容，以所需的格式显示它。HTML由Tim Berners-Lee于1991年创建。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center]  
HTML结构

HTML标签有两种主要类型：块级标签和内联标签。

块级元素会占用全部可用空间，并且始终在文档中开始新行。  
标题和段落是块级元素的示例。  
内联元素仅占用所需的空间，并且不会从页面上的新行开始。它们通常用于格式化块级元素的内部内容。  
图像和链接是内联元素的示例。  
你需要为你的HTML文档的三个块级标签，和。

该标签是包含所有代码的最高级别的元素。  
该标签持有元信息，如页面的标题，字符集，元数据等所有可以在元素中使用的HTML元素是：

HTML文档以.html或.htm扩展名结尾。您可以使用任何网络浏览器查看它。浏览器读取HTML文件并呈现内容以供用户查看。

每个HTML页面都包含一组标记或元素，这些标记或元素被称为网页的构建块。他们创建了一个层次结构，将内容结构化为部分，段落，标题和其他内容块。

HTML基础

要使用HTML构建网页，您需要了解HTML的一些基本知识，例如：

> 在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】 每天更新最新技术文章干货。

元素与标签

HTML使用预定义的标记和元素，这些标记和元素向浏览器告知内容显示属性。如果未关闭标签，则浏览器将应用该效果直至页面结束。

元素具有开始标签，一些内容和结束标签。

在这种情况下，我们使用p个开始和结束标记创建一个段落元素。

<p>A paragraph of text</p>

属性

元素的开始标记可以包含我们可以附加的特殊信息片段，称为属性。

属性具有以下key="value"语法：

我们可以有多个：

本类和ID属性是两个，你会发现最常用的。

标题

HTML标题是使用

# to #

###### 标记定义的。 ######

# 定义最重要的标题，而 #

###### 定义最不重要的标题：、 ######

<h1>First Heading</h1>
    <h2>Second Headng</h2>
    <h3>Third Heading</h3>
    <h4>Fourth Heading</h4>
    <h5>Fifth Heading</h5>
    <h6>Sixth Heading</h6>

段落

HTML段落使用

标签定义。您可以使用此标记添加任意数量的段落。

<p>First Paragraph</p>

链接

HTML链接是超链接。您可以单击链接，然后重定向到另一个文档或网页。链接使用标签定义：

<a href="https://jatinrao.dev/">Jatin's Blog</a>

图片

需要图像以简单的方式在网页上美化或描绘复杂的概念。HTML图像使用标签定义。

提供源文件（src），替代文本（alt），宽度和高度作为属性：

清单

HTML提供了三种指定信息列表的方式。所有列表必须包含一个或多个列表元素。

*  ：无序列表使用普通项目符号对项目进行排序。
    
    1.  ：订购列表使用不同的数字方案来列出您的商品。
        
        ：定义列表以与字典中相同的方式排列项目。

无序列表

此列表是使用HTML

*  标记创建的：

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    </ul>

订购清单

该列表是使用

1.  标签创建的：

<ol>
    <li>Coffee</li>
    <li>Juice</li>
    <li>Tea</li>
    </ol>

定义清单

定义列表是呈现词汇表，术语列表或其他名称/值列表的理想方法。它是通过创建

， 并且

标签：

<dl>
    <dt><b>HTML</b></dt>
    <dd>This stands for Hyper Text Markup Language</dd>
    <dt><b>HTTP</b></dt>
    <dd>This stands for Hyper Text Transfer Protocol</dd>
    </dl>

桌子

HTML表是用

标记定义的。

行用标签定义。  
标头用标签定义  
表单元格用标签定义。

<table>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Jatin</td>
            <td>15</td>
        </tr>
        <tr>
            <td>James</td>
            <td>25</td>
        </tr>
    </table>

空格

在HTML中，即使您在一行中添加了多个空格，浏览器的CSS引擎也会将其折叠。

与此相同：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/d1e25c8f5e0b4256b3f74e5cbeabbcea.png