前言:
上个文章我们简单的介绍了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 l |