前端从入门到精通 - 前端工程化1-网页结构

最新推荐文章于 2025-01-17 05:39:25 发布

DynamicsAgg

最新推荐文章于 2025-01-17 05:39:25 发布

阅读量995

点赞数 14

文章标签：前端

本文链接：https://blog.csdn.net/DynamicsAgg/article/details/142676338

版权

随着网站开发技术（BS）的发展, 以往很多CS架构都发生了深刻的变化, 目前服务类交付都趋向于BS架构交付实现，哪怕是企业大型实时应用, 也有对应技术通过网站开发技术实现。现在的开发者, 需要了解BS模式。而在BS模式里，首当其冲的就是用户视角的服务器页面，这里是前端工程领域.

本篇是前端系列的第一篇, 介绍网页结构。欢迎读者跟随笔者从网页的基础构架到复杂页面和前端工程实践, 一起深入了解.

什么是网页?
W3C网页结构
基本HTML语法
简单html网页例子

什么是网页?

网页广义上是承载网络内容的所有页面. 在这我们特指特定域名对应的页面, 如c端的www.baidu.com, 比如B端的企业内部主页 (EIP,或者说OA门户, 或者企业门户)。当用户通过域名在浏览器访问的时候，得到对应的服务内容.

2. W3C网页结构

是什么决定了我们看到的网页内容和效果。这里就涉及到网页结构。依据W3C定义，一个网页在用户端浏览器的渲染，涉及到 HTML, CSS和Javascript技术的渲染和体现，其中HTML是骨架, CSS是装饰，Javascript是动作 -- 共同实现了用户侧看到的页面效果.

3. 基本HTML语法

在这三者中， HTML是最基本的要求. HTML是HyperText Markup Language的缩写，意为超文本标记语言. 它是internet内容的核心体现格式技术。页面所需要体现的文本，图像, 媒体等信息内容，通过HTML不同语法体现。这里对最基本的HTML语法，做个基本介绍:

HTML（HyperText Markup Language）是一种用于创建网页的标记语言。它由一系列的标签组成，这些标签描述了网页的结构和内容。通过使用不同的HTML标签，可以定义文本、图像、链接、表格、表单等元素，并将它们组织成一个完整的网页。它是一个树形结构。一个简答的html文件包含的基本内容如下:

<html>    <head>        <title>第一个页面</title>    </head>    <body>       hello world    </body></html>

html 标签是整个 html 文件的根标签(最顶层标签)

head 标签中写页面的属性.

body 标签中写的是页面上显示的内容

title 标签中写的是页面的标题.

下面介绍一下HTML的语法以及常用标签。想要学习前端技术的同学最好都将具体的标签和实际效果都做一遍, 形成自己的认知. 实践方式用VSC (visual Studio code) 建立一个html文件，复制对应代码进入<body></body> 区域就可体验.

一、HTML语法

HTML是由一系列标签（tag）组成的，标签通常是成对出现的，包括开始标签和结束标签，用尖括号包围内容，如 <tag>内容</tag> 。

HTML标签不区分大小写，但建议使用小写字母以保持一致性。

HTML文档以声明开始，然后是标签包裹整个文档内容，其中包括和部分。

二、常用HTML标签

1. <h1> - <h6> : 定义标题

<h1>This is a Heading Level 1</h1><h2>This is a Heading Level 2</h2>

2. <p> : 定义段落

<p>This is a paragraph of text.</p>

3. <a> ：定义超链接

<a href="https://www.example.com">Visit our website</a>

4. <img> ：插入图像

<img src="image.jpg" alt="Image Description">

5. <ul> 、 <ol> 、 <li> ：定义列表

<ul>  <li>It

最低0.47元/天解锁文章