博客推行版本更新,成果積累制度,已經寫過的博客還會再次更新,不斷地琢磨,高質量高數量都是要追求的,工匠精神是學習必不可少的精神。因此,大家有何建議歡迎在評論區踴躍發言,你們的支持是我最大的動力,你們敢投,我就敢肝 ...
HTML基礎標簽
<html>
定義HTML文檔的根元素。
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<!-- 頁面內容 -->
</body>
</html>
解釋:<html>標簽包含了整個HTML文檔的內容,它是所有其他標簽的父元素。
<head>
定義HTML文檔的頭部,包含了一些元數據和引用的外部資源。
<head>
<title>My Webpage</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
解釋:<head>標簽用於定義文檔的頭部,其中可以包含<title>標簽定義頁面標題,<link>標簽引用外部樣式表,<script>標簽引用外部JavaScript文件等。
<body>
定義HTML文檔的主體內容。
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
<img src="image.jpg" alt="Image">
</body>
解釋:<body>標簽用於定義文檔的主體內容,其中可以包含各種其他標簽,如標題標簽<h1>、段落標簽<p>和圖像標簽<img>等。
<h1>到<h6>
定義標題,從大到小依次表示不同級別的標題。
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
解釋:<h1>到<h6>標簽用於定義標題,其中<h1>表示最高級別的標題,<h6>表示最低級別的標題。
<p>
定義段落。
<p>This is a paragraph.</p>
解釋:<p>標簽用於定義段落,其中的文本會自動換行。
<a>
定義超鏈接。
<a href="https://www.example.com">Visit Example</a>
解釋:<a>標簽用於定義超鏈接,其中的href屬性指定鏈接的目標URL。
<img>
定義圖像。
<img src="image.jpg" alt="Image">
解釋:<img>標簽用於定義圖像,其中的src屬性指定圖像的URL,alt屬性用於指定圖像的替代文本。
<ul>和<li>
定義無序列表。
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
解釋:<ul>標簽用於定義無序列表,其中的每個列表項使用<li>標簽表示。
<ol>和<li>
定義有序列表。
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
解釋:<ol>標簽用於定義有序列表,其中的每個列表項使用<li>標簽表示。
<table>、<tr>和<td>
定義表格。
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
解釋:<table>標簽用於定義表格,其中的<tr>標簽定義表格的行,<td>標簽定義表格的單元格。
這些是HTML的一些基礎標簽及其用法的詳細介紹,每個標簽都有不同的功能和用途,可以根據需要選擇使用。以上是一些簡單的示例,你可以根據自己的需求進行修改和擴展。
CSS中的基礎樣式
CSS(層疊樣式表)是一種用於描述網頁上元素樣式的語言。下麵是一些常見的基礎樣式及其代碼示例:
字體樣式
- font-family:設置字體系列。
css
p {
font-family: Arial, sans-serif;
}
這將使 <p> 元素中的文本使用 Arial 字體,如果 Arial 不可用,則使用 sans-serif 字體。
- font-size:設置字體大小。
h1 {
font-size: 24px;
}
這將使 <h1> 元素中的文本大小為 24 像素。
- font-weight:設置字體粗細。
strong {
font-weight: bold;
}
這將使 <strong> 元素中的文本加粗。
文本樣式
- color:設置文本顏色。
p {
color: blue;
}
這將使 <p> 元素中的文本顏色為藍色。
- text-align:設置文本對齊方式。
h1 {
text-align: center;
}
這將使 <h1> 元素中的文本居中對齊。
- text-decoration:設置文本裝飾效果。
a {
text-decoration: underline;
}
這將使 <a> 元素中的文本添加下劃線。
背景樣式
- background-color:設置背景顏色。
body {
background-color: #f2f2f2;
}
這將使頁面的背景顏色為淺灰色。
- background-image:設置背景圖片。
div {
background-image: url("image.jpg");
}
這將使 <div> 元素的背景使用名為 "image.jpg" 的圖片。
- background-size:設置背景圖片大小。
div {
background-size: cover;
}
這將使 <div> 元素的背景圖片自適應填充整個元素。
邊框樣式
- border:設置邊框樣式。
div {
border: 1px solid black;
}
這將使 <div> 元素的邊框為 1 像素寬的黑色實線。
- border-radius:設置邊框圓角。
button {
border-radius: 5px;
}
這將使 <button> 元素的邊框圓角為 5 像素。
- border-color:設置邊框顏色。
input {
border-color: red;
}
這將使 <input> 元素的邊框顏色為紅色。
盒模型樣式
- width:設置元素的寬度。
.container {
width: 300px;
}
這將使類名為 "container" 的元素寬度為 300 像素。
- height:設置元素的高度。
.box {
height: 200px;
}
這將使類名為 "box" 的元素高度為 200 像素。
- padding:設置元素的內邊距。
.content {
padding: 10px;
}
這將使類名為 "content" 的元素內邊距為 10 像素。
- margin:設置元素的外邊距。
.section {
margin: 20px;
}
這將使類名為 "section" 的元素外邊距為 20 像素。
定位樣式
- position:設置元素的定位方式。
.box {
position: relative;
}
這將使類名為 "box" 的元素相對於其正常位置進行定位。
- top、right、bottom、left:設置元素相對於其定位父元素的偏移量。
.box {
position: absolute;
top: 10px;
left: 20px;
}
這將使類名為 "box" 的元素相對於其定位父元素向下偏移 10 像素,向右偏移 20 像素。
顯示樣式
- display:設置元素的顯示方式。
.box {
display: inline-block;
}
這將使類名為 "box" 的元素以內聯塊級元素的方式顯示。
- visibility:設置元素的可見性。
.hidden {
visibility: hidden;
}
這將使類名為 "hidden" 的元素在頁面上不可見,但仍占據空間。
在黑夜裡夢想著光,心中覆蓋悲傷,在悲傷里忍受孤獨,空守一絲溫暖。 我的淚水是無底深海,對你的愛已無言,相信無盡的力量,那是真愛永在。 我的信仰是無底深海,澎湃著心中火焰,燃燒無盡的力量,那是忠誠永在。