【DAY1】
從今天開始Javaweb的學習了，學了Javaweb基礎知識，HTML CSS常見的標簽和樣式
文章目錄
- 【DAY1】
- HTML-CSS
- 1）初識
- 2）入門
- 3）常見標簽和樣式
- 標題
- 標題排版
- 標題樣式
- 正文
- 正文排版
- 正文樣式
- 整體布局
HTML-CSS
1）初識
- web標準也稱網頁標準，由一系列的標準組成
- 三個組成部分
- HTML：負責網頁的結構（頁面元素和內容）
- CSS：負責網頁的表現（頁面元素的外觀、位置等頁面樣式 顏色大小）
- JavaScript：復制網頁的行為
2）入門
HTML：超文本標記語言
- 超文本：超越文本的現在，比普通文本更大，除了文本信息還可定義圖片、音頻等
- 標記語言：由標簽"<標簽名>"構成的語言
- HTML表都是定義好的，
<h1>展示圖片<img>展示圖片<video>展示視頻
- HTML表都是定義好的，
CSS：層疊樣式表，用于控制頁面的樣式
入門
<html><head> <!--頭部--><title>HTML快速入門</title></head><body> <!--內容--><h1>Hello HTML</h1> <!--h1表示一級標題--><img src="img/1.png"></body>
</html><!--在vscode輸入!生成基本框架-->
<!-- 聲明文檔類型為 HTML-->
<!DOCTYPE html>
<html lang="en">
<head><!--字符編碼為UTF-8--><meta charset="UTF-8"><!--設置手機上的屏幕寬度和縮放比例，讓其在手機上也能正常顯示--><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>
ctrl + / 自動生成注釋
HTML的標簽特點
- html標簽不區分大小寫，建議小寫
- html標簽的屬性值使用單引號/雙引號都行
- html語法結構松散
3）常見標簽和樣式
標題
標題排版
-
標題標簽：
<h1> - <h6> -
超鏈接標簽：
<a href="...">...</a>-
href：指定資源訪問的utl
-
target：指定在何處打開資源鏈接
_self：默認值，在當前頁面打開
_blank：在空白頁面打開
-
示例：
【練習1】2025.8.15.1
MDN 2025年8月15日標題樣式
CSS引入方式：
-
行內樣式：
寫在標簽的style屬性中（配合JavaScript使用）
<span style="color: gray;">2025年8月15日</span> -
內部樣式：
寫在style標簽中（可以寫在頁面任何位置，但通常寫在head標簽中）
<style>span{color: gray;} </style> -
外部樣式：
寫在單獨的一個.css文件中（需要通過link標簽在網頁中引用）
<!-- news.css -->span{color: gray;}<!-- 外部樣式 --> <link rel="stylesheet" href="cssnews.css"></link>
示例
【練習1】2025.8.15.1
MDN 2025年8月15日顏色表示形式
備注: 要想拾取某一個網頁中的顏色，我們可以借助于截圖軟件的拾色器插件來完成
CSS選擇器是用來選取需要設置樣式的元素的
優先級：id選擇器>類選擇器>元素選擇器
示例
<!--類選擇器--><style>.cls{color: gray;}</style><span class="cls">2025年8月15日</span>
去除超鏈接中的下劃線
/* 超鏈接去除下劃線 */
a{text-decoration: none;}
正文
正文排版
- 絕對路徑:
- 絕對磁盤路徑:
<img src="C:\Users\Administrator\Desktop\HTML\img\logo.png"> - 絕對網絡路徑:
<img src="``https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png``">
- 絕對磁盤路徑:
- 相對路徑:
? ./ : 當前目錄 , ./ 可以省略的
? …/: 上一級目錄
示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>【練習1】2025.8.15.1</title><style>.cls{color: gray;}/* 超鏈接去除下劃線 */a{text-decoration: none;}</style>
</head>
<body><!-- ----------標題---------- --><h1>【練習1】2025.8.15.1</h1><a href="https://developer.mozilla.org/zh-CN/">MDN</a><span class="cls">2025年8月15日</span><br><!-- ----------正文---------- --><!-- 定義一個視頻 --><!-- video標簽屬性 src:視頻地址controls:顯示視頻控制器autoplay:自動播放width:視頻寬度 建議寬度高度只設置一個 另一個會等比例縮放 height:視頻高度 單位px：像素 %：百分比（占用父元素的百分比）poster:視頻封面--><video src="video/news.mp4" controls autoplay width="80%"></video><!-- 音頻標簽<audio src="audio/news.mp3" controls autoplay></audio> --><!-- 段落標簽 --><p>這是一個段落</p><!-- 段落之間自動換行不需要換行標簽 --><p>這是第二個段落</p><!-- 換行標簽 --><br>123456<!-- 插入一個動圖 --><!-- src：圖片的訪問地址1.絕對路徑1.1 絕對磁盤路徑 C:\Users\Administrator\Desktop\img\1.gif1.2 絕對網絡路徑 http://www.baidu.com/img/1.gif2.相對路徑--><img src="img/1.gif" width="80%"></img></body>
</html>正文樣式
加粗展示：
<!--b標簽-->
<b>...</b><!--strong標簽-->
<strong>...</strong>
設置行高：
p{/* 設置行高 */line-height: 2; /*兩倍行高*/}
設置縮進：
-
使用空格實體字符
這是一行字 -
為所有段落設置首行縮進
p{/* 設置首行縮進 */text-indent: 2em;/*縮進兩個字符*/}
整體布局
/* 讓整體版面居中顯示 */#content-container{width: 70%;/*寬度*/margin-left: auto;margin-right: auto;}
把body內的所有內容括在<div></div>中，并設置id選擇器
<body><div id="content-container"><!-- ----------標題---------- --><h1>【練習1】2025.8.15.1</h1><a href="https://developer.mozilla.org/zh-CN/">MDN</a><span class="cls">2025年8月15日</span><br><!-- ----------正文---------- --><!-- 定義一個視頻 --><!-- video標簽屬性 src:視頻地址controls:顯示視頻控制器autoplay:自動播放width:視頻寬度 建議寬度高度只設置一個 另一個會等比例縮放 height:視頻高度 單位px：像素 %：百分比（占用父元素的百分比）poster:視頻封面--><video src="video/news.mp4" controls autoplay width="100%"></video><!-- 音頻標簽<audio src="audio/news.mp3" controls autoplay></audio> --><!-- 段落標簽 --><p><b> 這是一個段落</b></p><!-- 段落之間自動換行不需要換行標簽 --><p>這是第二個段落</p><!-- 換行標簽 --><br>123456<!-- 插入一個動圖 --><!-- src：圖片的訪問地址1.絕對路徑1.1 絕對磁盤路徑 C:\Users\Administrator\Desktop\img\1.gif1.2 絕對網絡路徑 http://www.baidu.com/img/1.gif2.相對路徑--><img src="img/1.gif" width="100%"></img>
</div></body>
盒子模型：
- 盒子：頁面中所有的元素（標簽），都可以看做是一個 盒子，由盒子將頁面中的元素包含在一個矩形區域內，通過盒子的視角更方便的進行頁面布局。
- 盒子模型組成：內容區域（content）、內邊距區域（padding）、邊框區域（border）、外邊距區域（margin）。
- 布局標簽：實際開發網頁中，會大量頻繁的使用 div 和 span 這兩個沒有語義的布局標簽。
- 標簽：
<div><span> - 特點：
<div>標簽：- 一行只顯示一個（獨占一行）
- 寬度默認是父元素的寬度，高度默認由內容撐開
- 可以設置寬高（width、height）
<span>標簽：- 一行可以顯示多個
- 寬度和高度默認由內容撐開
- 不可以設置寬高（width、height）
div {width: 200px; /* 寬度 */height: 200px; /* 高度 */box-sizing: border-box; /* 指定width height為盒子的高寬 */background-color: aquamarine; /* 背景色 */padding: 20px 20px 20px 20px; /* 內邊距, 上 右 下 左 , 邊距都一行, 可以簡寫: padding: 20px;*/ border: 10px solid red; /* 邊框, 寬度 線條類型 顏色 */margin: 30px 30px 30px 30px; /* 外邊距, 上 右 下 左 , 邊距都一行, 可以簡寫: margin: 30px; */}
備注：
- 上述的padding、margin屬性值，可以是4個值、也可以是兩個值、也可以是一個值，具體的含義如下：
padding: 20px 20px 20px 20px;-------> 表示上、右、下、左都是20px；padding: 20px 10px;----------------------> 表示上下是20px，左右是10px；padding: 20px;-----------------------------> 表示上、右、下、左都是20px；
（筆記內容主要基于黑馬程序員的課程講解，旨在加深理解和便于日后復習）
希望這篇筆記能對大家的學習有所幫助，有啥不對的地方歡迎大佬們在評論區交流
)
——工具欄和選擇網格、滾動列表和分組、窗口、自定義皮膚樣式、自動布局)
![線程P5 | 單例模式[線程安全版]~懶漢 + 餓漢](http://pic.xiahunao.cn/線程P5 | 單例模式[線程安全版]~懶漢 + 餓漢)