HTML基础【1】：认识 HTML

时间：2023-02-02 22:38:44

什么是HTML

​ HTML其实是 HyperText Markup Language 的缩写，超文本标记语言

HTML的作用

  • 1、首先利用记事本保存了一个标题和两段描述, 然后修改纯文本文件的扩展名为 .html，然后再利用浏览器打开

    郑伊健

郑伊健，1967年10月4日出生于中国香港，籍贯广东恩平，香港影视演员、流行男歌手。1988年参加新秀歌唱大赛加入无线电视，因拍摄“阳光柠檬茶”广告而入行，拜罗文为师。[1] 

1991年加盟BMG唱片公司以歌手身份出道。1995年开始，凭借在《古惑仔》系列电影中饰演陈浩南一角走红。1996年凭借《古惑仔》主题曲《友情岁月》获得十大中文金曲奖。1996年至1997年连续两次获得”*十大偶像”奖。

  • 2、打开之后发现显示的格式不对，不对的原因是因为在纯文本文件中所有文字都是同级别的，浏览器不知道哪些文字代表什么意思。也就是浏览器不知道哪些文字是标题，哪些文字是段落，所以导致了显示的格式不正确

  • 3、正是因为如此，所以 HTML 应用而生。HTML 就只有一个作用，它是专门用来描述文本的语义的。也就是说我们可以利用 HTML 来告诉浏览器哪些是标题，哪些是段落。

    • 这些用于描述其它文本语义的文本，我们称之为标签。并且这些用于描述文本语义的标签将来在浏览器中是不会被显示出来的

    • 所以正是因为 HTML 的这些标签是专门用来描述其它文本语义的，并且在浏览器中不会被显示出来，所以我们称这些文本为"超文本"，而这些文本又叫做标签，所以 HTML 被称之为"超文本标记语言"

      <h1>郑伊健</h1>

<p>郑伊健，1967年10月4日出生于中国香港，籍贯广东恩平，香港影视演员、流行男歌手。1988年参加新秀歌唱大赛加入无线电视，因拍摄“阳光柠檬茶”广告而入行，拜罗文为师。 </p>

<p>1991年加盟BMG唱片公司以歌手身份出道。1995年开始，凭借在《古惑仔》系列电影中饰演陈浩南一角走红。1996年凭借《古惑仔》主题曲《友情岁月》获得十大中文金曲奖。1996年至1997年连续两次获得”*十大偶像”奖。</p>

  • 注意事项

    • 虽然我们利用 H1 标签描述一段文本之后，这段文本在浏览器中显示出来会被放大和加粗，看上去我们是利用 HTML 的标签修改了被描述的那段文本的样式。但是一定要记住，HTML只有一个作用，它是专门用来给文本添加语义的，而不是用来修改文本的样式的

  • H1标签它的作用是什么?

    • 错误：H1 标签可以用来修改文字的大小，并且还可以将文字加粗
    • 正确：H1 标签的作用是用来告诉浏览器，哪些文字是标题。也就是 H1 标签是专门用于给指定的文字添加标题语义的

HTML发展史

HTML基础【1】：认识 HTML

IETF简介

  • IETF是英文 Internet Engineering Task Force 的缩写，翻译过来就是”互联网工程任务组“
  • IETF 负责定义并管理因特网技术的所有方面。包括用于数据传输的 IP 协议、让域名与 IP 地址匹配的域名系统（DNS）、用于发送邮件的简单邮件传输协议（SMTP）等

W3C简介

  • W3C 是英文 World Wide Web Consortium 的缩写，翻译过来就是 W3C 理事会或万维网联盟，W3C 是全球互联网最具权威的技术标准化组织
  • W3C于 1994 年 10 月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者 Tim Berners-Lee
  • W3C 负责 web 方面标准的制定，像 HTML、XHTML、CSS、XML 的标准就是由 W3C 来定制的

网页固定格式

  • 1、编写网页和写信一样都有一套规范和要求，这套规范和要求中规定了写信的固定格式
  • 2、写信基本结构
敬爱的湫兮:

      您好!

      正文正文正文正文正文正文正文正文正文正文正文正文

正文正文正文正文正文正文正文正文正文正文正文正文

      此致

敬礼!

                                                             你的朋友 伊健

                                                             2066年6月6日

  • 3、编写网页的步骤：

    3.1、新建一个文本文档

    3.2、利用记事本打开

    3.3、编写THML代码

    3.4、保存并且修改纯文本文档的扩展名为.html

    3.5、利用浏览器打开编写好的文件

  • 4、网页基本结构：

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

    </body>

</html>
  • 5、通过观察我们发现，HTML基本结构中所有的标签都是成对出现的，这些成对出现的标签中有一个带 / 有一个不带 / ，那么这些不带 / 的标签我们称之为开始标签，这些带 / 的我们称之为结束标签

html标签

  • 作用：
    • 用于告诉浏览器这是一个网页，也就是说告诉浏览器我是一个 HTML 文档
    • 例如：
      • 指定网站的标题 / 指定网站的小图片
      • 添加网站的 SEO 相关的信息（指定网站的关键字 / 指定网站的描述信息）
      • 外挂一些外部的 css / js 文件
      • 添加一些浏览器适配相关的内容
  • 注意点：
    • 一般情况下，写在 head 标签内部的内容都不会显示给用户查看，也就是说一般情况下写在 head 标签内部的内容我们都看不到

title标签

  • 作用：
    • 专门用于指定网站的标题，并且这个指定的标题将来还会作为用户保存网站的默认标题
  • 注意点：
    • title 标签必须写在 head 标签里面

body标签

  • 作用：
    • 专门用于定义 HTML 文档中需要显示给用户查看的内容（文字 / 图片 / 音频 / 视频）
  • 注意点：
    • 虽然说有时候你可能将内容写到了别的地方在网页中也能看到，但是千万不要这么做，一定要将需要显示的内容写在 body 中
    • 一对 html 标签中（一个 html 开始标签和一个 html 结束标签）只能有一对 body 标签

meta标签

  • 1、为什么会有乱码现象？
    • 因为在编写网页的时候没有指定字符集
  • 2、如何解决乱码现象？
    • 在 head 标签中添加<meta charset="utf-8" />，指定字符集

HTML标签

HTML标签分类

  • 单标签

    • 只有开始标签没有结束标签，也就是由一个 <> 组成的
    <meta charset="UTF-8" />

  • 双标签

    • 有开始标签和结束标签，也就是由一个 <> 和一个 </> 组成的
    <html>
    
</html>

HTML标签关系分类

  • 并列关系（兄弟 / 平级）
<head></head>

<body></body>
  • 嵌套关系（父子 / 上下级）
<head>

    <meta charset="UTF-8" />

    <title>百度一下，你就知道</title>

</head>

文档声明

  • 什么是文档声明？
    • 由于 HTML 有很多个版本的规范，每个版本的规范之间又有一定的差异。所以为了让浏览器能够正确的编译、解析、渲染我们的网页，我们需要在 HTML 文件的第一行告诉浏览器，当前这个网页是用哪一个版本的HTML规范来编写的。 浏览器只要知道了是用哪一个版本的规范来编写之后，它就能够正确的编译、解析、渲染网页
  • 文档声明格式：
<!DOCTYPE html>
  • 注意事项
    • <!DOCTYPE>声明必须是 HTML 文档的第一行，位于 标签之前
    • <!DOCTYPE> 声明不是 HTML 标签
    • <!DOCTYPE> 声明没有结束标签
    • <!DOCTYPE> 声明对大小写不敏感
    • 这个声明浏览器会看，但是并不是完全依赖于这个声明，浏览器有一套自己的默认的处理机制
      • 不写也能运行
      • H5网页里面用H4也能运行

相关文章