Web開發——HTMLCSS

1、概述

Web開發分前端開發和后端開發，前端開發負責展示數據，后端開發負責處理數據。
HTML&CSS是瀏覽器數據展示相關的內容。

1）網頁的組成部分
文字、圖片、音頻、視頻、超鏈接、表格等等
2）網頁背后的本質
程序員寫的前端代碼
3）前端代碼如何轉換成用戶眼中的網頁
通過瀏覽器轉化（解析和渲染）成用戶看到的網頁，瀏覽器中對代碼進行解析和渲染的部分，稱為瀏覽器內核。瀏覽器多種多樣，相同的網頁如何讓瀏覽器展示一致的觀感，這依賴于Web標準：

HTML：負責網頁的結構（頁面元素和內容）
CSS：負責網頁的表現（頁面元素的外觀、位置等頁面樣式，如：顏色、大小等）
JavaScript：負責網頁的行為（交互效果）

2 HTML & CSS

2.1 HTML和CSS概述

HTML：HyperText Markup Language，超文本標記語言

超文本：超越了文本的限制，比普通文本更強大。除了文字信息，還可以定義圖片、音頻、
視頻等內容。
標記語言：由標簽構成的語言，HTML標簽都是預定義好的。HTML代碼直接在瀏覽器中運行，HTML標簽由瀏覽器解析。
CSS：Cascading Style Sheet，層疊樣式表，用于控制頁面的樣式（表現）。
以下就是html代碼以及css樣式搭配之后的顯示效果

2.2 快速入門

在這里插入圖片描述
創建hello.html文件，并寫入以下html代碼

<html><head><title>HTML 快速入門</title></head><body><h1>Hello HTML</h1><img src="1.jpg"/></body>
</html>

head用于定義瀏覽器頭部，body用于定義主題部分
title標簽用于定義標題，h1是1號標題，img用于引入一張圖片，采用相對地址
瀏覽器展示效果如下：
在這里插入圖片描述
HTML中標簽的特點：

不區分大小寫
標簽中的屬性值，采用單引號和雙引號都可以
語法松散（即使不寫閉合也能運行），建議語義嚴謹

2.3 CSS引入方式

在這里插入圖片描述

2.4 顏色表示

在這里插入圖片描述

2.5 CSS選擇器

選擇器是選取需設置樣式的元素（標簽）
語法如下：

選擇器名 {css樣式名：css樣式值;css樣式名：css樣式值;
}

2.5.1 元素（標簽）選擇器

元素名稱 {css樣式名:css樣式值；
}

示例：

div{color: red;
}

2.5.2 id選擇器

#id屬性值 {css樣式名:css樣式值；
}

示例：

#did {color: blue;
}

2.5.3 類選擇器

.class屬性值 {css樣式名:css樣式值；
}

示例：

.cls{color: green;
}

2.6 盒子模型

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型</title><style>div {width: 200px;height: 200px;box-sizing: border-box; /* 指定width height為盒子的高寬 */background-color: aquamarine; /* 背景色 */padding: 20px; /* 內邊距, 上 右 下 左 */border: 10px solid red; /* 邊框, 寬度 線條類型 顏色 */margin: 30px; /* 外邊距, 上 右 下 左 */}</style>
</head><body><div>A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div></body>
</html>

根據padding、border和margin來設置盒子相關屬性

2.7 新浪新聞頁面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦點訪談：中國底氣 新思想夯實大國糧倉</title><style>h1 {color: #4D4F53;}#time {color: #968D92;font-size: 13px; /* 設置字體大小 */}a {color: black;text-decoration: none; /* 設置文本為一個標準的文本 */}/* 元素選擇器 */p {text-indent: 35px; /* 設置首行縮進 */line-height: 40px; /* 設置行高 */}/* id選擇器 */#plast {text-align: right; /* 對齊方式 */}#center {width: 65%;/* margin: 0% 17.5% 0% 17.5% ; */ /* 外邊距, 上 右 下 左 */margin: 0 auto;}</style>
</head>
<body><div id="center"><!-- 標題 --><img src="img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪政務</a>  > 正文<h1>焦點訪談：中國底氣 新思想夯實大國糧倉</h1><hr><span id="time">2023年03月02日 21:50</span><span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央視網</a></span><hr><!-- 正文 --><!-- 視頻 --><video src="video/1.mp4" controls width="950px"></video><!-- 音頻 --><!-- <audio src="audio/1.mp3" controls></audio> --><p><strong>央視網消息</strong> （焦點訪談）：*******************************************************</p><p>人勤春來早，春耕農事忙。立春之后，由南到北，我國春耕春管工作陸續展開，春天的田野處處生機盎然。</p><img src="img/1.jpg"><p>今年，我國啟動了新一輪千億斤糧食產能提升行動，這是一個新的起點。2015年以來，我國糧食產量連續8年穩定在1.3萬億斤以上，人均糧食占有量始終穩穩高于國際公認的400公斤糧食安全線。從十年前的約12200億斤到2022年的約13700億斤，糧食產量提高了1500億斤。</p><img src="img/2.jpg"><p>****************************************************************************</p><p id="plast">責任編輯：王樹淼 SN242</p>  </div>
</body>
</html>

2.8 表格標簽

<table> : 用于定義整個表格, 可以包裹多個，常用屬性如下：
- border：規定表格邊框的寬度
- width：規定表格的寬度
- cellspacing: 規定單元之間的空間
<tr> : 表格的行，可以包裹多個
<td> : 表格單元格(普通)，可以包裹內容 , 如果是表頭單元格，可以替換為

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-表格</title><style>td {text-align: center; /* 單元格內容居中展示 */}</style>
</head>
<body><table border="1px" cellspacing="0"  width="600px"><tr><th>序號</th><th>品牌Logo</th><th>品牌名稱</th><th>企業名稱</th></tr><tr><td>1</td><td> <img src="img/huawei.jpg" width="100px"> </td><td>華為</td><td>華為技術有限公司</td></tr><tr><td>2</td><td> <img src="img/alibaba.jpg"  width="100px"> </td><td>阿里</td><td>阿里巴巴集團控股有限公司</td></tr></table></body>
</html>

展示效果如下
在這里插入圖片描述

2.9 表單標簽

2.9.1 表單

表單場景: 表單就是在網頁中負責數據采集功能的，如：注冊、登錄的表單。
表單標簽:
表單屬性:
- action: 規定表單提交時，向何處發送表單數據，表單提交的URL。
- method: 規定用于發送表單數據的方式，常見為： GET、POST。
  - GET：表單數據是拼接在url后面的，如： xxxxxxxxxxx?
    username=Tom&age=12，url中能攜帶的表單數據大小是有限制的。
  - POST：表單數據是在請求體（消息體）中攜帶的，大小沒有限制。
表單項標簽: 不同類型的input元素、下拉列表、文本域等。
- input: 定義表單項，通過type屬性控制輸入形式
- select: 定義下拉列表
- textarea: 定義文本域

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-表單</title>
</head>
<body><!-- form表單屬性: action: 表單提交的url, 往何處提交數據 . 如果不指定, 默認提交到當前頁面method: 表單的提交方式 .get: 在url后面拼接表單數據, 比如: ?username=Tom&age=12 , url長度有限制 . 默認值post: 在消息體(請求體)中傳遞的, 參數大小無限制的.-->   <form action="" method="get">用戶名: <input type="text" name="username">年齡: <input type="text" name="age"><input type="submit" value="提交"></form></body>
</html>

頁面展示效果
在這里插入圖片描述
get方式提交

參數直接拼接在url后面
post方式提交

并未直接拼接在后面

用戶名: <input type="text" name="username">

表單項必須指定name屬性才能夠提交到服務端，否則無法提交該表單。

2.9.2 表單項

在這里插入圖片描述
示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-表單項標簽</title>
</head>
<body><!-- value: 表單項提交的值 -->
<form action="" method="post">姓名: <input type="text" name="name"> <br><br>密碼: <input type="password" name="password"> <br><br> 性別: <input type="radio" name="gender" value="1"> 男<label><input type="radio" name="gender" value="2"> 女 </label> <br><br>愛好: <label><input type="checkbox" name="hobby" value="java"> java </label><label><input type="checkbox" name="hobby" value="game"> game </label><label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>圖像: <input type="file" name="image">  <br><br>生日: <input type="date" name="birthday"> <br><br>時間: <input type="time" name="time"> <br><br>日期時間: <input type="datetime-local" name="datetime"> <br><br>郵箱: <input type="email" name="email"> <br><br>年齡: <input type="number" name="age"> <br><br>學歷: <select name="degree"><option value="">----------- 請選擇 -----------</option><option value="1">大專</option><option value="2">本科</option><option value="3">碩士</option><option value="4">博士</option></select>  <br><br>描述: <textarea name="description" cols="30" rows="10"></textarea>  <br><br><input type="hidden" name="id" value="1"><!-- 表單常見按鈕 --><input type="button" value="按鈕"><input type="reset" value="重置"> <input type="submit" value="提交">   <br>
</form></body>
</html>