HTML前端开发课程心得

最新推荐文章于 2024-09-29 23:41:25 发布

Noze781

最新推荐文章于 2024-09-29 23:41:25 发布

阅读量850

点赞数 17

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_74210121/article/details/142449653

版权

一、什么是HTML

HTML（HyperText Markup Language），即超文本标记语言，是用于创建网页的标准标记语言。它不是一种编程语言，而是一种标记语言（Markup Language），用于告诉浏览器如何显示页面上的内容，如文本、图片、链接、表格、列表等。HTML 通过一系列的元素（Elements）来构建网页，这些元素通过标签（Tags）来定义，标签告诉浏览器如何解释和显示页面内容。

二、HTML的基本结构

HTML（HyperText Markup Language）的基本结构主要由以下几个部分组成：

文档类型声明（Doctype）：
这是HTML文档的第一行，它告诉浏览器这个文档使用哪个HTML版本来进行解析。在HTML5中，文档类型声明非常简单，就是<!DOCTYPE html>。这个声明不是HTML标签，但它对确保浏览器以标准模式渲染页面非常重要。
HTML元素：
这个元素是HTML文档的根元素，它包含了整个页面的内容。所有的其他HTML元素都应该被包含在这个元素内部。
<head>元素：
<head>元素包含了文档的元数据（metadata），这些元数据不会直接显示在网页上，但会被浏览器和搜索引擎等解析和使用。<head>元素内部可以包含以下类型的元素：
- <title>：定义了文档的标题，这个标题会显示在浏览器的标题栏或页面的标签上。
- <meta>：提供了关于HTML文档的元数据，如字符集定义（<meta charset="utf-8">）、页面描述、关键词、作者信息等。
- <link>：主要用于链接外部资源，如CSS样式表。
- <script>：用于嵌入或引用JavaScript代码。
<body>元素：
<body>元素包含了网页的可见内容，如文本、图片、视频、音频、表格、列表、链接和表单等。用户打开网页时，看到的就是<body>元素内的内容。

综上所述，HTML文档的基本结构可以概括为：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>页面标题</title>  
    <!-- 其他元数据 -->  
</head>  
<body>  
    <!-- 网页的可见内容 -->  
</body>  
</html>

这个结构是构建任何HTML页面的基础，通过在这个基础上添加不同的HTML元素和属性，可以创建出丰富多样的网页内容。

三、HTML标签

HTML（HyperText Markup Language）标签是用于描述网页内容和结构的标记语言。HTML标签种类繁多，但可以分为几大类，包括基础结构标签、文本格式化标签、链接与图片标签、列表标签、表格标签、表单标签以及语义化标签等。以下是一些常用的HTML标签及其简要说明：

HTML通过标签来定义文档的结构和内容。标签分为块级元素和内联元素：

块级元素：如<div>、<p>、<h1>-<h6>、<ol>、<ul>等，它们通常会占据整行，并可以设置宽度和高度。
内联元素（或称为行内元素）：如<span>、<a>、<img>、<br>等，它们不会以新行开始，并且通常只占据必要的宽度。

四、HTML的布局

HTML的布局是指网页上元素的组织和排列方式。随着Web技术的发展，HTML布局方式也在不断演进。以下是一些常见的HTML布局方式：

流动布局（Flow Layout）：
- 这是HTML网页的默认布局方式。
- 块状元素（如<div>、<p>）会在所处的包含元素内自上而下按顺序垂直延伸分布。
- 内联元素（如<span>、<a>）会在所处的包含元素内从左到右水平分布显示。
浮动布局（Float Layout）：
- 通过设置元素的float属性（如float: left;或float: right;）来实现元素的并排显示。
- 常用于实现多栏布局或图文混排效果。
定位布局（Positioning Layout）：
- 包括绝对定位（position: absolute;）、相对定位（position: relative;）和固定定位（position: fixed;）。
- 绝对定位将元素从文档流中拖出，并相对于其最近的已定位祖先元素进行定位。
- 相对定位是相对于元素在文档流中的原始位置进行偏移。
- 固定定位则是相对于浏览器窗口进行定位，元素会脱离文档流并固定在视口内的某个位置。
弹性布局（Flexbox Layout）：
- 是一种一维布局方式，提供了对子元素的空间分布控制和对齐能力。
- 通过设置容器的display属性为flex或inline-flex来启用弹性布局。
- 弹性布局允许容器内的子元素在主轴（main axis）和交叉轴（cross axis）上灵活地对齐和分布空间。
网格布局（Grid Layout）：
- 是一种二维布局方式，将容器划分为行和列的网格系统。
- 通过设置容器的display属性为grid或inline-grid来启用网格布局。
- 网格布局提供了对容器内元素在行和列上的精确控制，适用于复杂的页面布局设计。

这些布局方式各有特点，可以根据不同的需求和场景灵活选择使用。在实际开发中，通常会结合使用多种布局方式来实现最佳的页面效果。

五、HTML的运用

现在我将展示本人所写的HTML项目实例

部分代码截图

部分效果截图

部分代码截图二：

部分效果截图二：

六、总结

HTML作为Web开发的基石，其重要性不言而喻。通过学习HTML，可以掌握网页的基本结构和内容表示方法，为进一步学习CSS、JavaScript等前端技术打下坚实的基础。同时，随着Web技术的不断发展，HTML也在不断演进和完善，新的特性和标准不断涌现。因此，保持对HTML新技术和新标准的关注和学习，对于提升前端开发能力和水平具有重要意义。