HTML 入门

01.html的历史

1982年，Tim Berners-Lee 建立 HTML

1993年6月，HTML 由 IETF 工作小組发布草案

1994年10月，W3C 成立， 网络应用发展的标准规范交由 W3C 协会制定及推广

1995年11月，HTML 2.0，2000年6月被宣布已经过时

1996年1月 ，HTML 3.2 由 W3C 推荐为标准规范

1997年11月，HTML 4.0

1999年12月，HTML 4.01 以 XML 语法重新构建，较为严格，W3C推荐标准

2000年1月，XHTML 1.0，W3C推荐标准

2001年5月，XHTML 1.1，W3C推荐标准

2004年，WHATWG小组成立，由各大浏览器开发商组成，重拾HTML 4规格，开发 HTML 5规格

2006年，W3C认输，承认 XHTML 2.0不会成功

2007年，W3C重新成立 HTML工作小组，参考 WHATWG 的规格发展期HTML规格

2009年，XHTML 2.0被放弃，全面投入 HTML 5 规格的发展

2011年6月，Google宣布全面采用 HTML 5 技术

2012年， HTML 5被选为候选标准

2014年10月28日，HTML 5.0，W3C正式发布HTML 5.0推荐标准

02.html概念

  • HTML是==超文本标记语言==（Hypertext Markup Language）
  • 超文本指用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本，也指页面内可以包含图片、链接，甚至音乐、程序等非文字元素
  • 标记语言是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码
  • 超文本标记语言就是描述文本、图形和包含其他信息的文件组织和链接在一起的方式的一种语言。

03.我的第一个html

  1. 在桌面新建一个txt文件

  2. 输入内容

    <html>
    <head>
        <title>01.我的第一个网页</title>
    </head>
    <body>
        今天天气真的好！！！！
    </body>
</html>Copy to clipboardErrorCopied

     

  3. 更改后缀名为 html

  4. 用浏览器打开

  5. 书写第一个网页成功

04.什么是标签

  • HTML 标记标签通常被称为 HTML 标签 (HTML tag)

  • HTML 标签是由尖括号包围的关键词，比如 <html>

  • HTML 标签通常是成对出现的，比如 <body> 和 </body>，标签中的第一个标签是开始标签，第二个标签是结束标签（闭合标签）

  • 也有单标签，比如<br>、<input type=’text’ value=’’>等

  • 浏览器不会显示HTML标签，而是使用标签来解释页面的内容

05.注释

复制代码
<!DOCTYPE html>
<!--
html注释就是html中 对某一块内容的解释，但是不会被浏览器编译
注释的快捷键  ctrl+/  或者 ctrl+shift+/
如果多行注释，可以全部选中然后按快捷键ctrl+shift+/
-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>Copy to clipboardErrorCopied
复制代码

 

06.html结构及具体作用

复制代码
<!DOcTyPE html>
<!--
    DOCTYPE（document type）： 文档类型
    1.版本声明。
    2.给浏览器声明，告诉浏览器应该按照html5的规范来解析当前的文档。
    3.如果不书写，那么按照什么规范解析，就看浏览器心情
    4.必须定义在 HTML 文档的第一行，在 HTML 标签之前
    5.<!DOCTYPE html> 不是html标签，他只是一条浏览器的指令，在所有版本中，这条指令对大小写都不敏感
-->
<html lang="en">
<!--
    1.HTML 标记标签通常被称为 HTML 标签 (HTML tag)
    2.这个标签告诉浏览器这个是HTML 文档的开始，最后一个标签是</html>，这个标签告诉浏览器这个是终止。
    3.html标签是网页结构的最外层 里边包含两个标签  body 和 head 
    4.lang是语言  en是英语  告诉浏览器本网页是英文网页  ch是中文
    5.lang是html的属性   en是lang属性的值
-->
<head>
    <!--
        1.head代表网页的头部，不会显示网页中
        2.只要包含网页的元信息，标题，引入外部文件等等
    -->
    <meta charset="UTF-8">
    <!--
        meta标签是控制网页的元信息
        元信息就是信息的信息（关于当前网页的信息）
        charset代表字符编码，utf-8是万国码
        补充：
            gb2312 简单中文  包括6763个汉字
            BIG5   繁体中文 港澳台等用
            GBK包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312

        UTF-8则包含全世界所有国家需要用到的字符，以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了
    -->
    <meta name=“keywords” content=“”>
    <!--设置网页关键字，为搜索引擎提供的关键字列表，各关键词间用英文逗号“,”隔开-->
    <meta name=“description” content=“”>
    <!--设置网页描述,用来告诉搜索引擎你的网站主要内容-->
    <title>html的编码结构</title>
    <!--title是网页的标题,显示在浏览器标签页的标题中-->
</head>
<body>
    <!--在html中，所有我们能够看到的内容全部书写在body中-->
</body>
</html>Copy to clipboardErrorCopied
复制代码

 

07.其他版本声明(已经弃用)

08.HTML标签及标签的分类

  • html标签又叫做html元素，它分为块级元素和内联元素（也可以叫做行内元素），都是html规范中的概念。
  • html标签还被分为 不可替换元素和替换元素
  • html还被分为 空元素（void） 和 非空元素

09.html标签的关系

标签的相互关系就分为两种：

  1. 嵌套关系

    复制代码
    <!--
    div元素是p元素的父元素
    p元素是div元素的子元素
    div元素是span元素的祖宗元素
    span是div的后代与元素
-->
<div>
    <p> 
        <span></span >
    </p>  
</div>Copy to clipboardErrorCopied
    复制代码

     

  2. 并列关系(兄弟关系)

    <!--
    head是body的上一个兄弟元素
    body是head的下一个兄弟元素
-->
<head></head>
<body></body>Copy to clipboardErrorCopied

     

如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位（为了多个代码统一管理，我们可以设置一个tab代表多少空格元素）。如果是并列关系，最好上下对齐。

posted @   z_bky  阅读(29)  评论(0)  编辑  收藏  举报
相关博文：
·  web基础概念
·  HTML5新标签
·  初入前端-HTML
·  HTML历史
·  第一篇 html - 基础 - 【 发展史 + 概述 】
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
AI IDE Trae