业精于勤
而荒于嬉

HTML 基本语法和基本结构

一、HTML 基本语法

1.1 HTML 文件都由不同的标签构成的。

  <!DOCTYPE HTML>
    <HTML lang="en">
    <head>
      <title>HTML基本语法</title>
    </head>
    <body>
      <p>这是一段话</p>
      <h1>我是一个大标题</h1>
      <a href="https://www.baidu.com">百度</a>
    </body>
    </HTML>

1.2 标签分为双标签和单标签。

  <!-- img标签为单标签,没有尾标签和内容 -->
  <img src='https://ithuangnet.oss-cn-beijing.aliyuncs.com/ithuangnet/Logo_20190306.png' alt='logo'>

  <!-- p标签为双标签,有尾标签和内容 -->
  <p>这是一段话</p>

1.3 双标签都是成对出现的。

  <!-- p标签为双标签,有尾标签, 尾标签多一个/ -->
  <p>这是一段话</p>

1.4 双标签具有内容和属性。

  <!-- a标签为双标签, href为标签属性, 百度为标签的内容 -->
  <a href='https://www.baidu.com'>百度</a>

1.5 单标签只有属性,没有内容。

  <!-- img标签为单标签, src和alt都为属性,单标签没有内容 -->
  <img src='https://ithuangnet.oss-cn-beijing.aliyuncs.com/ithuangnet/Logo_20190306.png' alt='logo'>

1.6 标签有且仅有嵌套和并列关系。

<!DOCTYPE HTML>
  <!-- head标签和body标签为并列关系, head和HTML、body和HTML均为嵌套关系 -->
  <HTML lang="en">
    <head>
      <title>HTML基本语法</title>
    </head>
    <body>
    </body>
  </HTML>

二、HTML 基本结构

  1. HTML文件必须按照规定结构来编写;
  2. <!DOCTYPE HTML> 代表 HTML5 标准网页声明,<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <HTML>标签之前。;
  3. HTML 标签代表网页根标签,中间的部分是文档的头部主题。;
  4. head 代表头部标签,一般用来放描述文档的各种属性和信息;
  5. meta 标签用来设置当前文件的编码集;
  6. title 标签用来设置网页的标题;
  7. body 用来放网页的主体内容,<body> 标签出现在 </head> 标签之后,且必须在闭标签 </HTML> 之前闭合。

代码展示:

<!DOCTYPE HTML> <!-- HTML5标准网页声明,放在HTML文件的最顶部 -->
<HTML> <!-- HTML为根标签,代表整个网页 -->
  <head> <!-- head为头部标签,一般用来描述文档的各种属性和信息, 包括标题等-->
    <meta charset="UTF-8"> <!-- 设置字符集为utf-8 -->
    <title>my HTML</title> <!-- 设置浏览器的标题 -->
  </head>
  <!-- 网页所有的内容都写在body标签内 -->
  <body> 
    我的第一个HTML网页
  </body>
</HTML>

赞(0)
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《HTML 基本语法和基本结构》
文章链接:https://ithuang.net/html-syntax-structure.html
本站资源仅供个人学习交流,本人版权所有。欢迎转载,转载请注明作者及来源链接,谢谢。