目錄
1、HTML 簡介
（1）在 HTML 中引入外部 CSS
（2）在 HTML 中引入外部 JavaScript
2、CSS 簡介
（1）CSS 的基本語法
（2）三種使用 CSS 的方法
2.1 - 外部 CSS 的使用
2.2 - 內(nèi)部 CSS 的使用
2.3 - 行內(nèi) CSS 的使用
1、HTML 簡介
????????HTML 指的是超文本標記語言 (Hyper?Text?Markup?Language)，標記語言?(markup language) 不是一種編程語言，而是一套標記標簽?(markup tag)，標記標簽來描述網(wǎng)頁
????????HTML -> 定義網(wǎng)頁元素的一些標簽，標簽手冊點擊這里：W3C_HTML5。
? ? ? ? 一些常用的 HTML 實例，點擊這里：W3C_HTML實例。
// 頁面布局，表單提交等標簽內(nèi)容
//一個前端頁面的組成：html(標簽) + css(樣式) + js(動態(tài)頁面) + 圖片等
（1）在 HTML 中引入外部 CSS
????????當樣式需要被應(yīng)用到很多頁面的時候，可以使用外部樣式表，通過更改一個文件來改變整個站點的外觀。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>（2）在 HTML 中引入外部 JavaScript
????????JavaScript 使 HTML 頁面更具動態(tài)性和交互性。
????????HTML <script> 標簽用于定義客戶端腳本（JavaScript）。<script> 元素即可包含腳本語句，也可通過 src 屬性指向外部腳本文件。
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>2、CSS 簡介
????????CSS 是一種描述 HTML 文檔樣式的語言，CSS 描述應(yīng)該如何顯示 HTML 元素。
????????CSS?指的是層疊樣式表 (Cascading?Style?Sheets)，描述了如何在屏幕、紙張或其他媒體上顯示 HTML 元素，外部樣式表存儲在?CSS 文件中。// 頁面渲染的樣式
????????CSS 用于定義網(wǎng)頁的樣式，包括針對不同設(shè)備和屏幕尺寸的設(shè)計和布局。下邊為 CSS 使用樣例示例：
<!DOCTYPE html>
<html>
<head>
<style> <!--CSS樣式，也可以單獨保存在一個文件中-->
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>我的第一個 CSS 實例</h1>
<p>這是一個段落。</p>
</body>
</html>????????有關(guān) CSS 樣式設(shè)計的參考手冊，請點擊這里：W3C_CSS。
（1）CSS 的基本語法
????????CSS 規(guī)則集（rule-set）由選擇器和聲明塊組成：
- 選擇器指向需要設(shè)置樣式的 HTML 元素。
- 聲明塊包含一條或多條用分號分隔的聲明。
- 每條聲明都包含一個 CSS 屬性名稱和一個值，以冒號分隔。
- 多條 CSS 聲明用分號分隔，聲明塊用花括號括起來。
????????例如，所有 <p> 元素都將居中對齊，并帶有紅色文本顏色：
p {
color: red;
text-align: center;
}
解釋：
// p 是 CSS 中的選擇器（它指向要設(shè)置樣式的 HTML 元素：<p>）。
// color 是屬性，red 是屬性值
// text-align 是屬性，center 是屬性值（2）三種使用 CSS 的方法
2.1 - 外部 CSS 的使用
????????通過使用外部樣式表，只需修改一個文件即可改變整個網(wǎng)站的外觀，每張 HTML 頁面必須在 head 部分的 <link> 元素內(nèi)包含對外部樣式表文件的引用。
????????例如，外部樣式在 HTML 頁面 <head> 部分內(nèi)的 <link> 元素中進行定義：
<!DOCTYPE html>
<html>
<head> <!--使用link標簽進行引入*.css文件-->
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>????????外部樣式表可以在任何文本編輯器中編寫，并且必須以 .css 擴展名保存。外部 .css 文件不應(yīng)包含任何 HTML 標簽。"mystyle.css" 是這樣的：
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}2.2 - 內(nèi)部 CSS 的使用
????????如果一張 HTML 頁面擁有唯一的樣式，那么可以使用內(nèi)部樣式表。內(nèi)部樣式在 head 部分的 <style> 元素中進行定義。
????????例如，內(nèi)部樣式在 HTML 頁面的 <head> 部分內(nèi)的 <style> 元素中進行定義：
<!DOCTYPE html>
<html>
<head>
<style> <!--內(nèi)部css樣式-->
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>2.3 - 行內(nèi) CSS 的使用
????????行內(nèi)樣式（也稱內(nèi)聯(lián)樣式）可用于為單個元素應(yīng)用唯一的樣式。如需使用行內(nèi)樣式，請將 style 屬性添加到相關(guān)元素。style 屬性可包含任何 CSS 屬性。
????????例如，行內(nèi)樣式在相關(guān)元素的 "style" 屬性中定義：
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>????????前端基礎(chǔ)的 HTML 和 CSS 樣式就介紹到這里，涉及的知識都是一些網(wǎng)頁的標簽元素以及樣式設(shè)計，本身跟編程關(guān)系不大，重點在于一些常用標簽的熟悉以及對于標簽的使用，查看W3C的相關(guān)手冊即可。文章來源：http://www.zghlxwxcb.cn/news/detail-578363.html
????????至此，全文結(jié)束。文章來源地址http://www.zghlxwxcb.cn/news/detail-578363.html
到了這里，關(guān)于前端基礎(chǔ)：HTML和CSS簡介的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[HTML]Web前端開發(fā)技術(shù)26（HTML5、CSS3、JavaScript ）JavaScript基礎(chǔ)——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/828994-1.png)
![[HTML]Web前端開發(fā)技術(shù)5.2（HTML5、CSS3、JavaScript ）CSS基礎(chǔ)，decoration，selector，properties，Cascading——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/751717-1.png)
![[HTML]Web前端開發(fā)技術(shù)5.1（HTML5、CSS3、JavaScript ）CSS基礎(chǔ)，selector，properties，font，Cascading，@import——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/752162-1.png)
![[HTML]Web前端開發(fā)技術(shù)7（HTML5、CSS3、JavaScript ）CSS的定位機制——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/755631-1.png)
