web前端開發核心基礎：Html結構分析,head,body,不同標簽的作用

前端技術協同關系

協作流程：HTML構建頁面框架—>css美化樣式（選擇器+屬性）—>JavaScript實現交互（類似于python的腳本語言）
擴展基礎：在上面三項基礎上學習Vue\React、構建工具WePack和瀏覽器工作原理

Html結構分析：超文本標記語言

html是制作網頁的標記語言
在這里插入圖片描述
這里會有屬性：
例如，html標簽里面的key就是lang，對應的en就是value，類似于一個鍵值對結構，只不過鍵和值之間是用賦值運算符=連接起來的。

head標簽是給瀏覽器進行識別的
body中標簽是給用戶進行查看識別的

html中的注釋格式是

例如：

<!DOCTYPE html> <!-- html5標簽的文檔申明 -->
<html lang="en"> <!-- html標簽的根標簽，language是為了申明語言，en-英語-->
<head> <!-- 頭部標簽:提供關于網頁的信息 --><meta charset="UTF-8"> <!-- 申明字符集編碼格式:如果保存的文件編碼與字符編碼不一致就會亂碼 --><title>讓我們開始吧!</title> <!-- 瀏覽器頭部的名稱標題 -->
</head>
<body>  <!-- 體標簽:申明網頁內容的主體標簽,提供網頁中的具體內容 --><h1>我是第一標題標簽  <!-- 第一級標題標簽 --></h1><a HREF="https://www.baidu.com">百度歡迎您</a> <!-- 這是超鏈接標簽，實現頁面跳轉功能 -->
</body>
</html>

執行后的結果展示
![在這里插入圖片描述](https://i-blog.csdnimg.cn/direct/cd7b00a913d04bd3be56770d2f0c2c8f.png

整體結構拆解如下在這里插入圖片描述

標簽

大部分的標簽都是成對出現的，但是也有部分標簽是獨立標簽，例如img標簽和meta標簽。

h標簽

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>測試h標簽</title>
</head>
<body><h1>我是一級標題</h1><h2>我是二級標題</h2><h3>我是三級標題</h3><h4>我是四級標題</h4><h5>我是五級標題</h5><h6>我是六級標題</h6>
</body>
</html>

執行結果
在這里插入圖片描述

段落標簽

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>測試段落</title>
</head>
<body><p>我是段落的第一段</p><p>我是段落的第二段</p><p>我是段落的第三段，即使段落  中有空格   ，也不會在頁面顯示         出來，這是段落        的屬性</p>
</body>
</html>

在這里插入圖片描述
###換行標簽 br標簽（break）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>測試換行</title>
</head>
<body><p>這是一個段落<br/>注意規范寫法，使用br進行換行</p>
</body>
</html>

執行測試結果如下
在這里插入圖片描述

空格標識&nbsp

nbsp 是 Non-Breaking SPace的縮寫，即“不被折斷的空格”，當兩個單詞使用 ? 連接時，這兩個單詞就不會被分隔為2行
代碼案例如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>測試空格</title>
</head>
<body><p>段落內部文字忽略連續的&nbsp;&nbsp;&nbsp;&nbsp;空格</p>
</body>
</html>

在這里插入圖片描述

預格式

可以按照原先代碼編寫時候預先設置的格式處理好
例如下面這段代碼

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>測試預格式</title>
</head>
<body><pre>這是預留格式的文本，它保留了    空格和換行</pre><pre>sum = 0for i in range(1,10,1):sum += iprint(f'{sum = }')</pre>
</body>
</html>

執行結果
在這里插入圖片描述

行內組合

p標簽和span標簽結合使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>測試行內組合</title><style type="text/css">span {color: darkgreen;font-size: larger;font-weight: bolder;}</style>
</head>
<body><p>2025年 <span>中國AI大模型市場</span>規模預計將突破495億元...</p>
</body>
</html>

執行結果
在這里插入圖片描述

水平線–hr標簽分割線

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>水平線</title>
</head>
<body><p>段落1</p><hr/><p>段落2</p>
</body>
</html>

執行結果
在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/909727.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/909727.shtml
英文地址，請注明出處：http://en.pswp.cn/news/909727.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！