今天我学会了：ðhtml基本面
#html #初学者 #web #learning

嘿，那里的学习者！今天，当我深入研究网络开发世界时，今天是令人兴奋的一天，并开始使用HTML（Hypertext Markup语言）的旅程。看到这种简单而基本的语言如何形成我们在互联网上遇到的几乎所有网页的骨骼，真是太酷了。在这里，我将分享一些我能够在https://www.codecademy.com/courses/learn-html-fundamentals上走开的基本HTML知识

什么是HTML？

html 是一种标记语言，用于创建网页的结构和内容。它代表“超文本标记语言”，是万维网的基础。 HTML由元素组成，由 tags表示 。这些标签定义了网页的形式和实质，例如标题，段落，链接，图像等。

基本的HTML结构

HTML被组织成家谱结构。 HTML元素可以有父母，祖父母，兄弟姐妹，孩子，孙子等。要组成HTML页面，我们从基本结构开始：

html 

<!DOCTYPE html>
<html>
<head>
  <title>New HTML Page</title>
</head>
<body>
  <p>only content inside</p>
</body>
  • ,DOCTYPE html>：此声明让浏览器知道该文档是HTML5文档。
  • <html>：HTML页面的根元素，包含所有其他元素。
  • <head>：本节包含有关HTML文档的元信息，例如标题，CSS样式等。
  • <title：此标签设置了出现在浏览器标题bar aka Tab中的网页标题。
  • <Body>：网页的内容放置在此元素中 上面的示例包括身体元素中的文本内容，但我们可以使用各种元素来构建不同的内容！

创建内容

HTML允许我们以各种方式构造内容。这是一些基本要素：

  • 标题：为了创建不同级别的标题，我们使用的标签从<h1>到<h6>。 H1是H6最大或“主要标题”，是最小或“ sub标题”。请参阅示例： 
<h1>Welcome to My Website</h1>
  • 段落：<p>标签中包含的文本内容以创建段落。 
<p>This a paragraph of text</P>
  • 强调元素：<em>元素强调文本和浏览器通常会默认情况下斜体化强调的文本。 
<p>This <em>word</em> will be emphasized in italics.</P>
  • 链接：使用锚标记<a>创建超链接：例如： 
<a href="https://www.example.com">Visit Example Website</a>
  • 图像和视频：显示图像或视频分别使用<img>或/和<video>标签以及src属性。链接视频时，请确保添加控制属性，以允许媒体控制器播放或暂停包含的媒体。前任： 
<img src="image.jpg" alt= description of image">

<videos src="test-video.mp4" controls> video not supported </video>
  • 订购的列表：<ol>排序列表元素按顺序创建<li>的列表。默认情况下，每个列表项目出现编号。 
<ol>
  <li>Pre-heat oven to 325 F👩‍🍳</li>
  <li>Drop cookie dough🍪</li>
  <li>Bake for 15 minutes⏰/li>
</ol>
  • 无序列表：<ul>无序列表元素用于以无特定顺序创建项目列表。每个单独的列表项目默认情况下将具有子弹点。检查供应列表以制作spitballs！ 
<ul>
  <li>straw</li>
  <li>paper</li>
  <li>spit</li>
  <li>air</li>
</ul>
  • 划分：<div>元素用作将HTML文档划分为部分的容器，并且是划分的简短。 <div>元素可以包含流量内容，例如标题，段落，链接，图像等。 
<div>
  <h1>Heading of this section</h1>
  <p>some text for this section</p>
</div>

<div>
  <h1>Second section of grouped elements</h1>
  <p>Here's some text</p> 
</div>

理解属性

HTML元素可以彼此嵌套以创建复杂的结构。只需记住以相反的顺序关闭标签，以维护HTML的适当层次结构。

验证和浏览器兼容性

HTML的一个基本方面是验证。始终仔细检查以确保您的代码有效，这意味着它遵循HTML标准的规则和语法。在线验证器，例如https://www.freeformatter.com/html-validator.html

另外，请记住浏览器兼容性。尽管现代浏览器通常擅长处理HTML，但一些较旧的浏览器可能无法支持所有最新功能。始终在不同的浏览器上测试您的页面，以确保一致的用户体验。

结论

今天是进入HTML基础知识的绝佳旅程。我已经学会了如何创建网页的基本结构，添加内容以及创建链接和图像。可能性似乎无穷无尽，我渴望在继续进行网络开发冒险时探索更多的HTML元素和属性。请继续关注我的直到博客系列的更多更新！愉快的编码！