HTML的简单介绍与使用。

最新推荐文章于 2022-12-19 15:16:59 发布

小贤的前端

最新推荐文章于 2022-12-19 15:16:59 发布

阅读量323

点赞数 4

分类专栏： HTML 文章标签： html5 前端

本文链接：https://blog.csdn.net/wen110898/article/details/119333125

版权

前言：

上个文章我们简单的介绍了HTML与CSS，那么本文章我们将简单的使用HTML。这里我选择了VSCode软件进行操作。

1、了解HTML导入的框架含义。

许多小伙伴使用HTML的框架都是直接导入或者复制过去的，却不知道HTML导入的框架是什么意思，今天我们一起学习一下导入的框架是什么含义吧。我将讲解都在代码块里注解了。

<!DOCTYPE html>
<html lang="en">
<!-- 属性lang是单词language的缩写，意思是语言，”en”代表英语，”zh-CN”代表中文 -->
<!-- html根标签，一个页面中有且只有一个根标签，网页中的所有内容都应该写在html根标签中 -->

<head>
  <!-- head标签，该标签中的内容，不会在网页中直接显示，它用来帮助浏览器解析页面的 -->
  <meta charset="UTF-8">
  <!--
		  meta标签用来设置网页的一些元数据，比如网页的字符集，关键字、简介
      meta是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加 一个/ 
  	-->
  <!-- 
      字符编码，浏览器会根据字符编码进行解析
      常见的字符编码有：gb2312、gbk、unicode、utf-8。
  	-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 
      viewport 设备的屏幕
      width=device-width width属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，
      那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
      initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
  -->
  <title>Document</title>
  <!-- 浏览器选项卡上的名字 -->
</head>

<body>
  <!--body标签用来设置网页的主体内容，网页中所有可见的内容，都应该在body中编写 -->
</body>

</html>

2、语法

2.1注释

html中只有一种注释，即  在VSCode中快捷键：CTRL+/

2.2元素

在HTML中，分为单标签元素和双标签元素。

2.2.1单标签元素：

单标签元素，仅有一个标签。

比如：<meta /> 、<img />、<br/>

2.2.2双标签元素：

由开始标签和结束标签组成。

例如：<div></div> 、<p></p>

2.3嵌套

标签可以进行嵌套使用，即可以将一个标签写入到另外一个标签内。

有一些同学很容易出现交叉嵌套的错误，这是非法的。

<p>非法<strong>交叉</p>嵌套</strong>

应该使用镜面嵌套：

<p>段落<strong>加强</strong>标签</p>

2.4块级元素

2.4.1详情看代码块中注解解释。

 <!-- 块级元素基本使用-->
    <!-- 1.独占一行 -->
    <!-- 2.默认宽度100% -->
    <!-- 3.高度由子元素或内容决定 -->
    <!-- 4.可以通过css指定其宽高 -->
    <div style="border: 1px solid red">我是一个无宽高的边框div块级元素哦。</div>

    <div style="border: 1px solid red; height: 100px; width: 200px;">我是一个添加了宽高和边框的div块级元素哦。</div>

    <!-- div标签搭建页面结构 -->
    <!-- 头部区域 -->
    <div class="header">头部区域</div>
    <!-- 内容区域 -->
    <div class="content">内容区域</div>
    <!-- 底部区域 -->
    <div class="footer">底部区域</div>
    <!-- h5新增的语义化表亲啊 搭建页面结构 -->
    <!-- 头部区域 -->
    <header>头部区域</header>
    <!-- 底部区域 -->
    <footer>底部区域</footer>

2.4.2让我们看看效果如何把。

在网页页面中展示我们可以看到，块级元素它是独自占一行的。

2.4.3常见的实体：

元素	作用	已有CSS效果
div	无意义的块元素
h1~h3	标题标题	margin font-size font-weight
p	段落	margin
ul,li	无序列表	margin padding list-style
ol,li	有序列表	margin padding list-style
dl,dt,dd	定义列表	dl -

最低0.47元/天解锁文章

小贤的前端

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML的简单介绍与使用。

前言：上个文章我们简单的介绍了HTML与CSS，那么本文章我们将简单的使用HTML。这里我选择了VSCode软件进行操作。1、了解HTML导入的框架含义。许多小伙伴使用HTML的框架都是直接导入或者复制过去的，却不知道HTML导入的框架是什么意思，今天我们一起学习一下导入的框架是什么含义吧。我将讲解都在代码块里注解了。<!DOCTYPE html><html lang="en"><!-- 属性lang是单词langua...
复制链接

扫一扫