初学HTML

最新推荐文章于 2024-10-03 22:12:17 发布

前进的大白

最新推荐文章于 2024-10-03 22:12:17 发布

阅读量80

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/weixin_49408400/article/details/119760251

版权

本文介绍了HTML作为前端开发基石的重要性，如何选择合适的编译工具，以及HTML的基础结构，包括doctype声明、lang属性、头部元素和body元素。重点讲解了标签的分类、属性使用和块级与行内元素的区别，提供了实例演示。

摘要由CSDN通过智能技术生成

1.0 简述HTML

HTML是超文本标记语言，并不是编程语言（这个要区分开），它是“前端”的三要素之一，主要的功能就是搭建网页结构，告诉浏览器你是如何构造页面的。

2.0 编译工具

-记事本：我们可以用记事本来编写HTML，只需要把记事本的后缀名改成“.html” 即可，不过记事本只能满足我们最基本的编译需要，没有代码提示，界面也不友好，不推荐使用。

-Sublime：轻量型编译工具，运行速度快，有代码高亮，但是因为是轻量型所以需要安转相应的插件。（可以使用）

-Idea ：集成开发工具，功能多且强大，但是运行速度较慢，初步学习的话不需要这么强大的工具。

-VSCode ：具有Sublime和ldea和特点，且插件丰富，推荐使用。（VSCode插件推荐：HTML CSS Support - Html提示Css自动补全；HTML Preview - 提供预览HTML文档的功能，HTML Snippets - 完整的HTML标签，包括HTML5片段；Live Server - 启动一个开发本地服务器，为静态和动态页面提供实时重载功能；open in browser - 可以在默认浏览器或应用程序中打开当前文件。）

3.0 HTML基础结构

<!-- 文档头信息 告诉浏览器解析的标准 -->
<!-- 不写文档头信息 浏览器会以默认的方式解析 可能达不到预期标准 -->
<!DOCTYPE html>
<!-- html是跟标签 一个网页中有且只有一个 网页中的所有内容都写在这里面 -->
<!-- lang表示语言 “en”代表英语 -->
<html lang="en">
<!-- head标签的内容不会显示在页面上 它是帮忙解析数据的 -->
<head>
  <!-- meta是元数据 用来设置一些基础数据 charset="UTF-8"是编码方式 -->
  <meta charset="UTF-8">
  <!-- viewport 设备的屏幕 width=device-width width属性控制设备的宽度。
    initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。 -->
    <!-- 这两行一般动 -->
  <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>
  
</body>
</html>

4.0 语法

上面都是在学习HTML前的准备，初步理解HTML知道HTML是干什么的，运用工具，了解HTML的基本结构，而语法才是真正HTML编写的开始。

4.1 标签

学习html，重要的是学会运用标签和掌握标签的属性，HTML中大致有可以分为两种标签：单标签和双标签，单标签如： <meta charset="UTF-8">，双标签：<body>内容</body>,不同标签的写法不同用法不同。

注意：双标签可以进行嵌套如<div> <h1></h1> </div>。但是不要写成这样：<div> <h1> </div></h1>这样的写法是错误的。

4.2 属性

HTML标签都拥有自己的属性，属性应该出现在元素的开始标签内部，属性名和属性值通过"="分割，属性与属性之间通过空格分割，属性名不区分大小写，属性值区分大小写并且属性值可以使用双引号引起来。（类似：宽：width，高：height，字体颜色：color等）

4.3 块级与行内

我们学习标签元素前要掌握两个概念：块级元素与行内元素

块级元素: 1.独占屏幕一行，宽度默认为页面的100% 也就是说块级元素是纵向排列的

2.可以设置宽高，高度也可以由内容撑起

3.块级元素可以嵌套块级元素和行内元素

行内元素：1.与其他行内元素共享一行，宽高由自身的内容决定，无法设置(一些特殊的行内标签可以设置)，就是说行内元素横向排列，类似写一行文字

2行内元素不要嵌套块级元素。

常用的块级元素：

元素	作用	已有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 - margin dd - margin
html	跟标签（有且只有一个）
body		margin
header	H5新增的语义化标签`<br>`(样式与div类似)	`<div class="header"></div>`
footer		`<div class="footer"></div>`
nav		`<div class="nav"></div>`
article		`<div class="article"></div>`
section		`<div class="section"></div>`
aside		`<div class="aside"></div>`
address		`<div class="address"></div>`

常用的行内标签：

标签用法演示：

<!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>
  <!-- 字体颜色:color，背景颜色：background-color -->
  <!-- style=""内联样式写标签的属性 -->
  <div style="width: 200px;height: 200px;color: red;background-color: blue;">
    我是一个块级元素
  </div>
  <span style="color: blue;">我是第一个行内元素</span>
  <span style="color: red;">我是第二个行内元素</span>
</body>
</html>

终结：HTML是前端三要素之一，用来搭建网页的总体结构，一般配合css来使用。学习HTML主要是分清块级与行内元素，充分掌握各自特点；熟练应用各种标签；熟练运用各种标签的属性。HTML是超文本标记语言，他的运行依靠浏览器，我们很容易看到成果，所以学习HTML最重要的还是多动手，这样我们才能记牢标签，充分掌握各个标签属性和标签的用法。