HTML详解1

HTML简介

HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。

HTML 结构

认识 HTML 标签

HTML 代码是由 “标签” 构成的.

形如:

<body>hello</body>
  • 标签名 (body) 放到 < > 中
  • 大部分标签成对出现. eg:<body> 为开始标签, </body> 为结束标签.
  • 少数标签只有开始标签, 称为 “单标签”.
  • 开始标签和结束标签之间, 写的是标签的内容. (hello)
  • 开始标签中可能会带有 “属性”. id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码).eg:<body id="myId">hello </body>

HTML 文件基本结构

<html>
    <head>
        <title>这是第一个HTML页面</title>
    </head>
    <body>
       hello world
    </body>
</html>
  • html 标签是整个 html 文件的根标签(最顶层标签)
  • head 标签中写页面的属性.
  • body 标签中写的是页面上显示的内容
  • title 标签中写的是页面的标题.

展示效果:
在这里插入图片描述

标签层次结构

父子关系
兄弟关系

<html>
    <head>
        <title>这是第一个HTML页面</title>
        <body>
            hello html
        </body>
    </head>
</html>

上述代码的关系如下:

head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
title 是 head 的子标签.
head 是 title 的父标签.
head 和 body 之间是兄弟关系.

  • 可以使用 chrome 的开发者工具查看页面的结构.
  • F12 或者右键审查元素, 开启开发者工具, 切换到 Elements 标签, 就可以看到页面结构细节.

在这里插入图片描述

标签之间的结构关系, 构成了一个 DOM 树

DOM 是 Document Object Mode (文档对象模型) 的缩写.
在这里插入图片描述

快速生成代码框架

在VS Code中创建文件 xxx.html , 直接输入 ! , 按 tab 键, 此时能自动生成代码的主体框架.
在这里插入图片描述
主体框架如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

主体框架的细节解释: (了解即可, 不必深究)

  • 称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件.
  • <html lang="en"> 其中 lang 属性表示当前页面是一个 “英语页面”. 这里暂时不用管. (有些浏览器会根据此处的声明提示是否进行自动翻译).
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">

name=“viewport” 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域.
content=“width=device-width, initial-scale=1.0” 在设置可视区和设备宽度等宽,
并设置初始缩放为不缩放. (这个属性对于移动端开发更重要一些).

  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

伦敦看日出

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值