html css簡單講解
阿新 • • 發佈：2020-12-12
技術標籤：java 相關htmlcssweb網頁設計java
網頁，是網站中的一個頁面，通常網頁是構成網站的基本元素，是承載各種網站應用的平臺。通俗的說，網站就是由網頁組成的。通常我們看到的網頁都是以htm或html字尾結尾的檔案，俗稱 HTML 檔案。
HTML 全稱，Hyper Text Markup Language（超文字標記語言）。
<!DOCTYPE html>
<html> <!-- 根標籤 -->
<head> <!-- 網頁頭標籤 -->
<meta charset="utf-8" 圖形標籤、連結標籤用法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 超連結 -->
<a href="../img/004.png">跳轉到內部頁面</a>
<!-- 用法2：加target屬性 _blank: 在新視窗跳轉 預設 _self:在自身視窗跳轉 -->
<a href="http://www.baidu.com" target="_self">跳轉到百度</a><br />
<!-- 用法3 跳到 name="kk" 的 a標籤 -->
<a href="#kk">跳到錨點</a>
<br>
哈哈哈
<!-- 圖形標籤 align：與圖片對齊顯示方式 alt：圖片未載入時的提示-->
<img src="/Users/mac/Desktop/熊本熊/53395f8e99ce089d7ee52e2f341046b2.jpg" width="300px" height="400px" align="center" alt="圖片未載入時的提示">
<br>
哈哈哈
<img src="/Users/mac/Desktop/熊本熊/53395f8e99ce089d7ee52e2f341046b2.jpg" width="300px" height="400px" align="center">
<br>
哈哈哈
<img src="/Users/mac/Desktop/熊本熊/53395f8e99ce089d7ee52e2f341046b2.jpg" width="300px" height="400px" align="center">
<br>
哈哈哈
<img src="/Users/mac/Desktop/熊本熊/53395f8e99ce089d7ee52e2f341046b2.jpg" width="300px" height="400px" align="center">
<br>
哈哈哈
<img src="/Users/mac/Desktop/熊本熊/53395f8e99ce089d7ee52e2f341046b2.jpg" width="300px" height="400px" align="center">
<br>
哈哈哈
<img src="/Users/mac/Desktop/熊本熊/53395f8e99ce089d7ee52e2f341046b2.jpg" width="300px" height="400px" align="center">
<br>
<a name="kk">
哈哈哈
<img src="/Users/mac/Desktop/熊本熊/53395f8e99ce089d7ee52e2f341046b2.jpg" width="300px" height="400px" align="center">
</a>
<br>
哈哈哈
<img src="/Users/mac/Desktop/熊本熊/53395f8e99ce089d7ee52e2f341046b2.jpg" width="300px" height="400px" align="center">
<br>
哈哈哈
<img src="/Users/mac/Desktop/熊本熊/53395f8e99ce089d7ee52e2f341046b2.jpg" width="300px" height="400px" align="center">
<br>
</body>
</html>
表格標籤。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- table: 子標籤：tr 行 th 列加粗 td 列無加粗
屬性：border：邊框 cellspacing:單元格間距 ：單元格與單元格間距
cellpadding:內間距：單元格域內容的間距
rowspan: 跨行
colspan: 跨列
-->
<table border="2" cellspacing="0" cellpadding="5px">
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th>操作</th>
</tr>
<tr>
<td>zs</td>
<td colspan="2">30</td>
<td rowspan="2">刪除</td>
</tr>
<tr>
<td>ls</td>
<td>24</td>
<td>女</td>
</tr>
</table>
</body>
</html>
HTML表單標籤。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 塊級標籤(元素)：帶回車換行的標籤：div、p、br、h1~h6...
行級標籤(元素): 不帶換行的標籤：span、a、img、格式化標籤、font...input
-->
<!-- 表單： form標籤
action: submit 觸發，可以是前端跳轉路徑，也可以是後臺伺服器路徑
method:請求方式：get 和post
enctype:表示是表單提交的型別
預設值：application/x-www-form-urlencoded 普通表單
multipart/form-data 多部分表單(一般用於檔案上傳)
-->
<form action="index.html" >
文字輸入框:<input type="text" /><br />
密碼框:<input type="password" /><br />
單選框：<input type="radio" /><br />
複選框：<input type="checkbox" /><br />
郵箱控制元件：<input type="email" /><br />
數字控制元件：<input type="number" /><br />
日期控制元件：<input type="date" /><br />
日期和時間：<input type="datetime" /><br />
上傳控制元件：<input type="file" /><br />
隱藏控制元件： <input type="hidden" /><br />
範圍控制元件： <input type="range" /><br />
取色控制元件：<input type="color" /><br />
<input type="submit" value="提交按鈕" /><br />
<input type="button" value="普通按鈕" /><br />
<input type="reset" value="重置按鈕" /><br />
<input type="image" src="../img/004.png" width="80px" height="40px" value="圖片按鈕" />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2>使用者註冊</h2>
<form>
使用者名稱:<input type="text" /><br />
密碼：<input type="password" /><br />
<!-- 兩個單選控制元件需要在一個組裡，才能進行單選，用name分組 -->
性別:<input type="radio" name="sex" />男<input type="radio" name="sex" />女<br />
愛好：<input type="checkbox" />吃 <input type="checkbox" />喝<input type="checkbox" />玩<br />
<!-- multiple="multiple": 顯示多列的列表資訊 -->
省份：<select>
<option>湖南</option>
<option>湖北</option>
<!--selected="selected":預設選擇的屬性 -->
<option selected="selected">廣東</option>
<option>廣西</option>
</select><br>
基本資訊：<textarea rows="10" cols="30">我的介紹..</textarea><br />
<input type="submit" value="註冊" />
</form>
</body>
</html>
frameset 框架標籤。
例子，左邊點選連結按鈕，右邊顯示。
<!-- head.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body bgcolor="green">
</body>
</html>
<!-- left_action.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body bgcolor="orange">
<!-- 自定義 target， 鏈到 frame 標籤的 name 屬性上-->
<a href="https://www.baidu.com" target="content">百度</a><br>
<a href="https://www.sina.com.cn" target="content">新浪</a>
</body>
</html>
<!-- right_content.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body bgcolor="white">
</body>
</html>
<!-- test.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!-- rows劃分成行
cols劃分列
注意： frameset與body不能共存
frame子標籤：用於關聯不同頁面 src屬性：用於指定頁面路路徑；noresize:固定大小
-->
<frameset rows="%20, *">
<frame src="head.html"></frame>
<frameset cols="15%, *">
<frame src="left_action.html"></frame>
<frame src="right_content.html" name="content"></frame>
</frameset>
</frameset>
</html>
CSS ，全稱 Cascading Style Sheets 層疊樣式表，定義如何顯示HTML元素。修飾美化html網頁。外部樣式表可以提高程式碼複用性從而提高工作效率。html內容與樣式表現分離，便於後期維護。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 優先順序：內聯 > (內部==外部,看順序) -->
<!-- 3.外部樣式 -->
<link rel="stylesheet" type="text/css" href="../css/red.css"/>
<!-- 2.內部樣式 -->
<style>
h1{
color: green;
font-size: 100px;
font-family: "微軟雅黑";
font-style: italic;
}
/* 4.匯入樣式，不常用 */
@import url("../css/red.css");
</style>
</head>
<body>
<!--1. 內聯樣式 -->
<h1 style="color: blue;">內容標題1</h1>
</body>
</html>
CSS 選擇器。
基本選擇器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 選擇器的優先順序： id>class>標籤 */
/* 1.標籤選擇器 */
h1{
color: red;
}
/* 2.類選擇器 */
.myClass{
color: green;
font-size: 100px;
}
/* 3.id選擇器*/
#myId{
color: blue;
font-style: italic;
}
</style>
</head>
<body>
<h1 class="myClass" id="myId">內容標題</h1>
</body>
</html>
屬性選擇器。根據元素的屬性及屬性值來選擇元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 選擇器[屬性=值][屬性] */
h1[name="zs"][title]{
color: red;
}
</style>
</head>
<body>
<h1 name="zs" title="tt">標題1</h1>
<h1 name="zs">標題2</h1>
</body>
</html>
偽元素選擇器。主要針對 a 標籤。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* 靜止狀態 */
a:link{
color: red;
}
/*懸浮狀態：滑鼠放進來 */
a:hover{
color: green;
}
/*觸發狀態 */
a:active{
color: yellow;
}
/*完成狀態 */
a:visited{
color: black;
}
</style>
</head>
<body>
<a href="#"><h1>偽元素選擇器</h1></a>
</body>
</html>
層級選擇器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 後代選擇器：所有後代指定標籤都起作用*/
ul a{
color: red;
}
/* 子代選擇器：只兒子標籤起作用 */
ul>a{
color: orange;
}
/* 相鄰兄弟選擇器 標籤+標籤{}: 相鄰的兄弟起作用 */
/* 第二行 li 變藍色 */
#aa+li{
color: blue;
}
/* 第二、三行 li 變藍色 */
li+li{
color: blue;
}
</style>
</head>
<body>
<ul>
<li id="aa"><a>aaaaa</a></li>
<li><a>bbbbb</a></li>
<li><a>ccccc</a></li>
<a>ddddd</a>
</ul>
</body>
</html>