【HTML专栏1】语法规范、基础结构标签

本文属于HTML/CSS专栏文章,适合WEB前端开发入门学习,详细介绍HTML/CSS如果使用,如果对你有所帮助请一键三连支持,对博主系列文章感兴趣点击下方专栏了解详细。


  • 博客主页:Duck Bro 博客主页
  • 系列专栏:HTML/CSS专栏
  • 关注博主,后期持续更新系列文章
  • 如果有错误感谢大家批评指出,一定及时修改
  • 感谢大家点赞收藏⭐评论✍

【HTML专栏1】语法规范、基础结构标签

本文关键字:语法规范、基本结构标签

文章目录

  • 【HTML专栏1】语法规范、基础结构标签
    • 一、HTML语法规范
      • 1. 基本语法概述
      • 2. 标签结构关系
    • 二、基础结构标签
      • 1. 第一个HTML网页
      • 2. 结构标签(骨架标签)
      • 3. 基本结构组成(总结)


一、HTML语法规范

1. 基本语法概述

HTML是一种标记语言,用于定义网页结构和内容。以下是HTML的基本语法:

  1. HTML文档以声明开头,告诉浏览器使用哪个HTML版本。

  2. HTML文档由标签包围,所有的元素都在这个标签之间。

  3. 一个HTML元素通常由一个起始标签、内容和一个结束标签组成。起始标签和结束标签通常成对出现,内容则位于它们之间。

  4. HTML元素可以有属性,这些属性提供了元素更多的信息,包括样式、链接和其他特性。

  5. HTML元素可以嵌套,即一个元素可以包含另一个元素。

  6. HTML标记对大小写不敏感,但建议使用小写标记。

  7. 有些特殊的标签必须是单个标签(极少情况),例如
    ,称为单标签。

示例:

DOCTYPE html>
<html>
<head>
	<title>My Titletitle>
head>
<body>
	<h1>My Headingh1>
	<p>My paragraph.p>
body>
html>

在这个例子中,声明了HTML版本,开始了文档,包含页面的标题信息和其他元数据,则包含页面的主要内容。

是两个基本的HTML元素,分别用于定义标题和段落。

2. 标签结构关系

双标签关系可以分为两类:包含关系并列关系

包含关系:

</code>被包含在<code><head></code>标签中,称为包含关系</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>My Title<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/40f2f3c6d54f4867a9a94c57d0c6e0ff.webp" target="_blank"><img src="http://img.e-com-net.com/image/info8/40f2f3c6d54f4867a9a94c57d0c6e0ff.webp" alt="【HTML专栏1】语法规范、基础结构标签_第1张图片" width="550" height="310" style="border:1px solid black;"></a></p> <p><strong>并列关系:</strong><br> <code><head></code>和<code><body></code>并列,称为并列关系</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/d6009fc7d7494183b9d2ad7916368bc3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d6009fc7d7494183b9d2ad7916368bc3.jpg" alt="【HTML专栏1】语法规范、基础结构标签_第2张图片" width="522" height="367" style="border:1px solid black;"></a></p> <hr> <h2>二、基础结构标签</h2> <h3>1. 第一个HTML网页</h3> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>第一个HTML网页<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <h3>2. 结构标签(骨架标签)</h3> <table> <thead> <tr> <th>标签名</th> <th align="left">定义</th> <th align="left">说明</th> </tr> </thead> <tbody> <tr> <td><code><html></code> <code></html></code></td> <td align="left">HTML标签</td> <td align="left">页面中最大的标签,我们 称为 根标签</td> </tr> <tr> <td><code><head></code> <code></head></code></td> <td align="left">文档的头部</td> <td align="left">注意在head标签中我们必须要设置的标签是title</td> </tr> <tr> <td><code><title></code> <code> 文档的标题 让页面拥有一个属于自己的网页标题 文档的主体 元素包含文档的所有内容,页面内容 基本都是放到body里面的

HTML 文档的的后缀名必须是 .html.htm ,浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。

3. 基本结构组成(总结)

【HTML专栏1】语法规范、基础结构标签_第3张图片
【HTML专栏1】语法规范、基础结构标签_第4张图片


在这里插入图片描述

你可能感兴趣的:(Web,前端开发,html,前端,vscode)