全栈：前端第一天

天郁青

于 2024-09-03 15:24:57 发布

阅读量424

点赞数 12

分类专栏：全栈文章标签：前端

本文链接：https://blog.csdn.net/Jourkern/article/details/141847663

版权

全栈专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、前端的第一课

认识什么是HTML:

作为互联网开发的两个重要分支之一，前端与后端的开发一直都是缺一不可

相较于后端的数据开发和数据网络，前端设计的主要项目在于页面开发，UI交互界面的设计开发等，简单直白的就是人与界面的交互设计。

二、前端开发的结构

前端开发的结构总共有三层：

1.结构层：（文字图片，音视频，表格等）这部分可以概括为HTML的主体代码。

2.表现层：（定义结构层的内容如何显示）该部分为CSS定位

3.行为层：（用户与应用中元素的交互）该部分为JavaScript。

所以学习前端的具体流程就是学习搭建HTML主体来显示内容，通过css定位等来增加表现样式，通过JavaScript来进行动效的进行和交互的完成。

即学习 HTML代码，CSS定位， JS 就是前端学习的重中之重！

三、现在重新来声明什么是HTML

HTML是一种标记语言，并不是一种编程语言

HTML的中文解析为 超文本（HyperText）标记（Markup）语言（Language）是一种用于创建网页的标准标记语言，运行在浏览器上，一般以.html作为后缀拓展名。（早年的前端代码或许是以.htm结尾的，这是因为计算机的位数不同和当时技术落后的原因。）

那么何为HTML标记语言

HTML标记语言实际上是一套标记标签，或者可以称为HTML标签。其有一个特点就是常常成对出现在代码格式中。（<html> </html>）

以标签分类：<html>是开始标签，也称开放标签 </html> 是结束标签，也称闭合标签

而HTML网页包含了HTML标签以及文本内容 <开始标签> 文本内容 </结束标签>

<h1>这是一个标题标签内的文本内容<h1>

四、HTML的开始

首先认识HTML最基础的框架

<!DOCTYPE html>
<!-- 这是声明网页的编码格式为html  -->

<html>
    <!-- 这是网页的根标签 -->

    <head>
        <!-- 这是头部标签 -->
    </head>

    <body>
    <!-- 这是主体标签     -->
    </body>
    
</html>

作为html的主体框架，其开头需要先定义声明该文档的编码格式,

拆解为 < ! （表示强调）DOC（文档）TYPE（类型） html（声明html格式）

<head>是网页的头部标签，包含了各种给浏览器看的元数据

<body>是网页的主体标签，包含了内容，文字，图片，音视频等等

初识标签

<title> 网页标签，作为显示网页上方小窗口标签

<head>
    <!-- 这是头部标签 -->
    <title>这是title标签</title>
</head>

<h> 标题标签，作为网页标题，有h1-h6，大小随等级逐级减小

<body>
    <!-- 这是主体标签     -->
    <h1>这是各级标题标签</h1>
    <h2>这是各级标题标签</h2>
    <h3>这是各级标题标签</h3>
    <h4>这是各级标题标签</h4>
    <h5>这是各级标题标签</h5>
    <h6>这是各级标题标签</h6>
    <h7>这是各级标题标签</h7>
</body>

从图片中可以看到从h1-h6都是遵循规律逐级变小，而h7的格式却不同。

h1-h6 和h7的区别

可以看到h1的标签自带各种样式，这种格式包括了h1-h6都自带有样式。

而从这里看到h7标签并不自带有各种样式，可以个人定义样式。

<p> 段落标签，作为段落文本使用

    <p>这是一个段落标签的演示</p>

段落标签并没有特殊的格式，可以在开始标签内定义属性值

一些属性标签

    <b>字体加粗</b><br>
    <i>字体倾斜</i><br>
    <u>下划线</u><br>
    <strong>表示语气上的加重，形式上的加粗，用于网页阅读</strong><br>
    <em>表示语气上的加重，形式上的倾斜，用于网页阅读</em><br>
    <ins>下划线，插入文本</ins><br>
    <s>表现为横线文本，英文全称为strike</s><br>
    <small>字体缩小</small><br>
    <span>上标<sup>上标</sup></span>
    <span>下标<sub>下标</sub></span>