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

DynamicsAgg

于 2024-10-01 23:54:56 发布

阅读量517

点赞数 11

文章标签：前端

本文链接：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>Item 1</li>  <li>Item 2</li></ul>
<ol>  <li>Step 1</li>  <li>Step 2</li></ol>

6. <table> 、 <tr> 、 <td> ：定义表格

<table>  <tr>    <td>Row 1, Cell 1</td>    <td>Row 1, Cell 2</td>  </tr>  <tr>    <td>Row 2, Cell 1</td>    <td>Row 2, Cell 2</td>  </tr></table>

rowspan 属性来实现单元格的跨行合并，使用 colspan 属性来实现单元格的跨列合并

<table border="1">  <tr>    <td>Row 1, Cell 1</td>    <td>Row 1, Cell 2</td>    <td rowspan="2">Row 1, Cell 3 (span 2 rows)</td>  </tr>  <tr>    <td colspan="2">Row 2, Cell 1 and Cell 2 (span 2 columns)</td>  </tr>  <tr>    <td colspan="3">Row 3, Cell 1, Cell 2, and Cell 3 (span 3 columns)</td>  </tr></table>

在上面的代码中：

第一行有三个单元格，第三个单元格使用 rowspan=“2” 属性，使其跨越两行。

第二行有两个单元格，并且第二个单元格使用 colspan=“2” 属性，使其跨越两列。

第三行有一个单元格，并且使用 colspan=“3” 属性，使其跨越三列。

7. <form> ：定义表单

<form action="/submit_form" method="post">  <label for="username">Username:</label>  <input type="text" id="username" name="username">  <input type="submit" value="Submit"></form>

表单的提交方式主要有两种：GET和POST

GET提交方式：

使用GET提交方式，表单数据会附加在URL后面，适合数据量较小的情况。

GET提交方式将表单数据显示在URL中，不适合敏感数据的传输。

代码如下：

<form action="/submit_form" method="get">  <label for="username">Username:</label>  <input type="text" id="username" name="username">  <input type="submit" value="Submit"></form>

POST提交方式：

使用POST提交方式，表单数据会作为HTTP请求的一部分发送，适合传输敏感数据和大量数据。

POST提交方式将表单数据放在请求体中，不会在URL中显示。

代码如下：

<form action="/submit_form" method="post">  <label for="username">Username:</label>  <input type="text" id="username" name="username">  <input type="submit" value="Submit"></form>

8. <input> ：定义输入控件

<input type="text" placeholder="Enter your name"><input type="checkbox" id="checkbox1" name="checkbox1" value="check1"><input type="radio" id="radio1" name="radio" value="option1">

9. <textarea> ：定义多行文本输入框

<textarea rows="4" cols="50">Enter your text here...</textarea>

10. <select> 、 <option> ：定义下拉框和选项

<select>  <option value="option1">Option 1</option>  <option value="option2">Option 2</option></select>

11. <button> ：定义按钮

<button type="button">Click Me</button>

12. <label> ：定义表单标签

<label for="input_field">Enter your name:</label><input type="text" id="input_field">

13. <iframe>：定义内联框架

<iframe src="https://www.example.com" width="600" height="400"></iframe>

14. <style> ：定义内部样式表

<style>  h1 {    color: blue;  }</style>

15. <script> ：定义内部或外部脚本

<script>  alert("Hello, World!");</script>

16. <meta> ：定义文档元数据

<meta charset="UTF-8"><meta name="description" content="This is a website description">

17. <div>

用于划分文档中的区块，常用于布局和样式控制。

代码如下：

<div style="background-color: lightblue; padding: 10px;">  <h2>This is a div element</h2>  <p>This is some text inside the div element.</p></div>

18. <span>

用于行内元素的样式控制，常用于对文本的部分样式设置。

代码如下：

<p>This is a <span style="color: red;">red</span> word.</p>

19. <header>

用于定义文档或区块的页眉。

代码如下：

<header>  <h1>Welcome to our website</h1></header>

20. <footer>

用于定义文档或区块的页脚。

代码如下：

<footer>  <p>&copy; 2022 My Website. All rights reserved.</p></footer>

21. <section>

用于定义文档中的节（section），常用于结构化内容。

代码如下：

<section>  <h2>Section Title</h2>  <p>This is the content of the section.</p></section>

23. <article>

用于定义独立的内容块，如新闻文章、博客帖子等。

代码如下：

<article>  <h2>Article Title</h2>  <p>This is the content of the article.</p></article>

24. 实体特殊符号

< ：小于号（<）

代码如下：

<p>This is an example of the less than symbol: 5 &lt; 10</p>

> ：大于号（>）

代码如下：

<p>This is an example of the greater than symbol: 10 &gt; 5</p>

& ：和号（&）

代码如下：

<p>This is an example of the ampersand symbol: B &amp; W</p>

" ：引号（"）

代码如下：

<p>This is an example of the double quotation mark: "Hello"</p>

代码如下：

<p>This content is protected by &copy; 2022</p>

® ：注册商标符号（®）

代码如下：

<p>This product is a registered trademark &reg;</p>

€ ：欧元符号（€）

代码如下：

<p>The price is 10&euro;</p>

4. 简单html网页例子

这里我们例举一个简单的HTML. 里面包含了HTML常见的标签. 这里同时用了一个Style2.css, 是我们下一篇文章要讲的 CSS[Cascading Style Sheets]-层叠式样表，它用来实现网页的装饰-即展示效果体现：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>烘培工坊</title>    <link rel="stylesheet" href="style2.css">    </head><body><header> <h1>| 烘培工坊</h1>    <nav>        <ul>
            <li><a href="#">最新消息</a></li>            <li><a href="#">关于我们</a></li>            <li><a href="#">产品列表</a></li>            <li><a href="#">会员专区</a></li>        </ul>    </nav></header><main>    <section class="news"><h2 style="color:red">健康的谷物面包出炉了！！！</h2>        <p><strong> 亚麻的香味， 五彩的颜色 </strong></p>        <p><em> <a href="001.html">了解更多</a> </em></p>    </section>
    <section class="slogan">        <blockquote cite="https://www.baidu.com">"精选天然食材，精湛烘培技艺，<br>让幸福在口中蔓延"</blockquote>    </section>
    <section class="shop">        <img class="img" src="image/p2.png" alt="烘培工坊大安店">
        <div class="info"><h2>8月1日大安旗舰店开业</h2>            <p>享受花园庭院的时光，内有座位区相伴<br>                即日起来店消费， 等您一同品味</p>        </div>    </section>
    <section class="product">        <div>            <img src="image/p1.jpg" alt="巴黎001">            <h3>巴黎001</h3>            <p>外皮黄金酥脆， 内置松软</p>        </div>        <div>            <img src="image/p2.png" alt="巴黎002">            <h3>巴黎002</h3>            <p>香气浓郁可口</p>        </div>        <div>            <img src="image/p3.jpg" alt="巴黎003">            <h3>巴黎003</h3>            <p>颜色五彩缤纷</p>        </div>    </section>
</main>
<ol>  <li> https://www.bilibili.com/video/BV1Wr4y1R7Bd/?spm_id_from=333.337.search-card.all.click&vd_source=0a396cb1ae99c62f9cc51b81e5678158 </li>  <li> 这是列表2 </li>  <li> 这是列表3 </li>  <li> 这是列表4 </li></ol><footer>    <p>copyright @ 2023 烘培工坊 All rights reserved</p>    <p>The price is 10&euro;</p></footer></body></html>