HTML快速入门--初识HTML

双黄蛋
191 阅读4分钟

HTML快速入门--初识HTML

什么是HTML？

我们学习HTML之前先要知道什么是HTML。他的全称是 Hyper Text Markup Language 超文本标记语言（超出正常文本范围的带标记的文本语言）。要怎么理解这句话？我们先划个重点，这里设计到两个关键词，超文本和标记语言。我一个一个来看看。

超文本：在互联网上传输的信息不可能只是文本这么简单，那超出文本范围的信息有哪些？这些信息应该如何描述？比如：”hello world” 这个就属于正常文本范围了，那么我要描述一个超链接和一张图片呢？这些就是超文本，在html里他是用<a herf="www.baidu.com">百度</a>和<img src="http://www.图片的地址.com"/>来描述一个超链接和图片的。随着以后深入的了解，我们对这个概念也会越来越熟悉，这里先做个简单的了解。

标记语言：这个词里有语言，就说明html有他自己的语法结构，需要按照一定的规则对我们想要表达的信息组织。然后是标记，比如上面的这个标签就是专门用来做超链接的，各个标签都有他自己的功能。

HTML的特点

让我们来看一段文件名为demo-01.html里的代码。

<!doctyp html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>初认HTML</title>
  </head>
  <body>
    hello
  </body>
  <script>
    <!--可执行脚本-->
  </script>
</html>

我们打开这个文件后会发现系统自动选择了浏览器把它打开，可以看见如下内容。

Snipaste_2022-06-12_16-49-38

从上面的内容我们来总结一下他的特点：

  1. 文件名是.html（.htm也可以）结尾的
  2. 该文件由浏览器识别
  3. 里面带有简括号的标记来标识每个元素
  4. 里面有嵌套的关系
  5. 里面可以通过标签插入可执行脚本，也就是我们 以后会学到的javascript

HTML的基础语法

现在我们要正式开始HTML的学习了，首先我们要认识一些基础的概念（标记、嵌套、属性和值），这些内容先是所有标签都有的共性，所以总结到一起，有一个统一的认识。

标记

标记，又称为“元素”或标签，主要表示一些功能。像我们之前学过的<a></a>标签专门用来表示超链接，<img/>专门用来表示图片。标记在使用时，必须用<>括起来，标记分为两种：

1. 双标记（封闭类型）

双标记必须成对出现，有开始就要结束，格式如：

语法：
  <标记>...</标记>
示例：
  <div>块级元素</div>
  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>

标记中间可以放文本内容或者嵌套其它标记。

2. 单标记（封闭类型）

单标记只有一个，他的格式如下：

语法： 
  <标记>或<标记/>
示例：
  <br>或<br/>
  <hr>或<hr/>
  <img>或<img/>

百看不如一练，我们来做个小练习：

  1. 敲一遍demo-01.html的代码

3. 嵌套

嵌套是非常重要的一个概念，在写HTML的时候经常用到，虽然重要，但是他没什么难的，就是在一对标记中出现另一对标记，从而形成功能的层叠，它和套娃非常像。格式如下：

语法：
  <标记1>
    <标记2>
      <标记>
    </标记2>
  </标记1>
示例：
  <html>
    <head>
      <meta>
      <title> </title>  
    </head>
    <body>
    </body>
  </html>

4. 属性和值

在写HTML的时候，我还允许通过属性和值对标记进行修饰，这样便可以附加一些信息在标签上，在写程序的时候可以用的上，关于标签我们要知道一下四点知识。

  1. 属性必须声明在开始标记中
语法:
  <标记 属性名称=“值”> </标记>
  示例：
  <a id="aTag"></a>
  1. 多个属性之间用空格隔开
语法：
  <标记 属性1=“值” 属性2=“值”> </标记>
示例：
  <img id="myImg" title="图片标签"/>
  1. 标准属性

所有标签都支持的属性

id:定义元素在页面中唯一的标识

title:鼠标悬停在元素上是所提示的文本

style:css中，定义行内样式

class:CSS中，引用类选择器

  1. 注释

注释是写在代码里，程序员可以看见，但是变成程序后看不见的内容。可以用来说明这段程序的用途，或者将暂时不用的代码先关掉。

语法：
<!-- 注释内容 -->

注意： 1.注释不能嵌套注释 2.注释也不能出现在标记中

HTML的文档结构

好了，有了上面内容的知识，我们现在来分析一下demo-01.html的构成

<!doctyp html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>初认HTML</title>
  </head>
  <body>
    hello
  </body>
  <script>
    <!--可执行脚本-->
  </script>
</html>
  1. doctyp 文档类型的声明，用来告诉浏览器当前网页的版本类型
  2. html：表示网页的开始和结束，在html中包含头和主体
  3. head：网页的头部，定义全局信息，是其它元素的容器
说明：
  <title></title>:网页标题
  <meta/>:定义全局信息
示例：
<head>
  <meta charset="utf-8">
  <meta name="description" content="描述内容">
  <meta name="kewords" content="关键字内容">
  <style></style>:定义网页内部样式
  <script></script>:定义或引用js文件
  <link>：引入外部css文件
  <meta charset="utf-8">
  <meta name="description" content="描述内容">
  <meta name="kewords" content="关键字内容">
  <style></style>:定义网页内部样式
  <script></script>:定义或引用js文件,也可以放在body里或html里
  <link>：引入外部css文件
</head>
  1. body:网页主体，展示内容

以上的内容只是用来说明html的文档结构，里面具体的内容可以不用太清楚，后继我们会在用的过程中进行学习。好了，这章节的内容学习就到这里了，我们在来做一个作业，就是把demo-01.html自己默写一遍。然后感兴趣的话可以去预习一下常用的标签。

avatar
文章
阅读
粉丝