<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title></title>
?? ?</head>
?? ?<body>
?? ??? ?<!--鏈接標簽-->
?? ??? ?<!--核心屬性就是href???? 屬性值可以是一個跳轉的地址-->
?? ??? ?<a href="">GO！百度</a>
?? ??? ?<a href="../0527day01/07.html">跳轉到昨天的07.html</a>
?? ??? ?
?? ??? ?<!--適用于任何帶有路徑的東西-->
?? ??? ?<!--href里面的內容就是路徑-->
?? ??? ?<!--
?? ??? ?絕對路徑：從盤符開始，然后依次的往下查找
?? ??? ??? ?本地：
?? ??? ??? ?C:/Users/Administrator/Desktop/0527day01/07.html
?? ??? ??? ?服務器的：
?? ??? ??? ?www.baidu....
?? ??? ??? ?127.0.0.1
?? ??? ??? ?192.168....
?? ??? ??? ?
?? ??? ??? ?http://www.baidu.com
?? ??? ?相對路徑:? 從當前文件開始，如果下一級目錄就直接寫文件夾名，上一級用../表示
?? ??? ?
?? ??? ?盤符根路徑：?? 直接可以跳轉到當前文件所有的盤符根目錄中?? /
?? ??? ??? ?服務器底下??? 省略
?? ??? ??? ?本地底下
?? ??? ?-->
?? ??? ?
?? ??? ?<!--圖像標簽
?? ??? ??? ?src????? 圖片的路徑，
?? ??? ??? ?alt????? 當圖片顯示不出來的時候才會顯示
?? ??? ??? ??? ?圖片正在下載的時候。。。加載中
?? ??? ??? ??? ?圖片的路徑錯誤的時候
?? ??? ??? ?width
?? ??? ??? ?height
?? ??? ??? ?align
?? ??? ??? ?
?? ??? ??? ?img是我們接觸的第一個行內塊標簽，靠左或者靠右
?? ??? ?-->
?? ??? ?<img src="/koala.jpg" alt="圖片正在加載中" width="200" align="center" />
?? ??? ?<img src="/koala.jpg" alt="" width="200" align="center" />
?? ?</body>
</html>
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title></title>
?? ?</head>
?? ?<body>
?? ??? ?<!--
?? ??? ?前端和后端之間的通信
?? ??? ??? ?1.form提交方式
?? ??? ??? ?2.ajax提交方式
?? ??? ?-->
?? ??? ?<!--核心標簽：只有提交的功能，沒有任何的樣式-->
?? ??? ?<!--form
?? ??? ??? ?屬性：
?? ??? ??? ?action?? 提交的地址，通常為服務端的地址，如果不寫，默認往本頁提交
?? ??? ??? ?method?? 提交的方式。get/post?? 如果不寫，為get提交
?? ??? ??? ??? ??? ?get和post的區別。
?? ??? ?-->
?? ??? ?<form action="" method="">
?? ??? ??? ?<!--
?? ??? ??? ??? ?input、button是一個行內塊標簽
?? ??? ??? ?input是表單的核心標簽，通過修改input標簽中的type屬性來改變展現的樣式-->
?? ??? ??? ?用戶名：<input type="text" name="username"/><br />
?? ??? ??? ?密碼名：<input type="password" name="userpwd"/><br />
?? ??? ??? ?<!--提交-->
?? ??? ??? ?<button>提交1</button>
?? ??? ??? ?<input type="submit" />
?? ??? ??? ?<!--<input type="image" src="koala.jpg" />-->
?? ??? ??? ?
?? ??? ??? ?
?? ??? ??? ?
?? ??? ??? ?<!-- ?后面的內容表示參數。我們最終的目的是要把必須的參數給發送到后端
?? ??? ??? ??? ?想要發送參數，input中必須含有name屬性
?? ??? ??? ??? ?
?? ??? ??? ?-->
?? ??? ?</form>
?? ??? ?<button>提交1</button>
?? ??? ??? ?<input type="submit" />
?? ?</body>
</html>
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title></title>
?? ?</head>
?? ?<body>
?? ??? ?<form action="" method="get">
?? ??? ??? ?用戶名：<input type="text" name="username" value="張三" />
?? ??? ??? ?<br />
?? ??? ??? ?密碼名：<input type="password" name="userpwd" />
?? ??? ??? ?<br />
?? ??? ??? ?<!--一組必須含有相同的name屬性值
?? ??? ??? ??? ?input中的值有一個屬性，value屬性
?? ??? ??? ??? ?checked?? 默認選中，當屬性名等于屬性值的時候，只需要寫屬性名即可
?? ??? ??? ?-->
?? ??? ??? ?男<input type="radio" name="sex" value="1" checked/> 女<input type="radio" name="sex" value="0" />
?? ??? ??? ?<br />
?? ??? ??? ?<!--一組必須含有相同的name屬性值-->
?? ??? ??? ?興趣愛好：
?? ??? ??? ?<input type="checkbox" checked="checked" name="aihao" value="0"/>打醬油
?? ??? ??? ?<input type="checkbox" checked name="aihao" value="1"/>打架
?? ??? ??? ?<input type="checkbox" name="aihao" value="2"/>泡妞
?? ??? ??? ?<input type="checkbox" name="aihao" value="3"/>打游戲
?? ??? ??? ?<input type="checkbox" name="aihao" value="4"/>學習
?? ??? ??? ?<br />
?? ??? ??? ?來自何方：
?? ??? ??? ?<select name="hefang" id="">
?? ??? ??? ??? ?<option value="武漢">武漢</option>?? ?
?? ??? ??? ??? ?<option value="荊州">荊州</option>
?? ??? ??? ??? ?<option value="黃石">黃石</option>
?? ??? ??? ??? ?<option value="襄陽">襄陽</option>
?? ??? ??? ??? ?<option value="十堰">十堰</option>
?? ??? ??? ?</select>
?? ??? ??? ?<br />
?? ??? ??? ?自我描述：
?? ??? ??? ?<textarea name="miaoshu" rows="" cols=""></textarea>
?? ??? ??? ?
?? ??? ??? ?
?? ??? ??? ?<br />
?? ??? ??? ?<input type="submit" />
?? ??? ?</form>
?? ?</body>
</html>
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title></title>
?? ??? ?<link rel="stylesheet" href="" />
?? ??? ?<!--<style>
?? ??? ??? ?div{
?? ??? ??? ??? ?width:200px;
?? ??? ??? ??? ?height:200px;
?? ??? ??? ??? ?background-color:#f00;
?? ??? ??? ?}
?? ??? ?</style>-->
?? ??? ?<link rel="stylesheet" href="04.css" />
?? ?</head>
?? ?<body>
?? ??? ?<!--
?? ??? ??? ?
?? ??? ?開始學習css
?? ??? ?html???? 結構，承載內容
?? ??? ?css????? 樣式。
?? ??? ?層疊樣式表
?? ??? ?JavaScript?? 行為
?? ??? ?
?? ??? ?
?? ??? ?css的使用方式（）
?? ??? ?1.行內樣式（內聯樣式）
?? ??? ?<標簽 style="屬性名1:屬性值1;屬性名2:屬性值2;..."></標簽>
?? ??? ?
?? ??? ?2.頁面嵌入（內部樣式表）
?? ??? ?在head標簽里面增加一個子標簽
?? ??? ?<style>
?? ??? ??? ?選擇器{
?? ??? ??? ??? ?屬性名1:屬性值1;
?? ??? ??? ??? ?屬性名2:屬性值2;
?? ??? ??? ??? ?......
?? ??? ??? ?}
?? ??? ?</style>
?? ??? ?
?? ??? ?
?? ??? ?3.外部文件（外部樣式表）
?? ??? ?在head標簽里面增加一個子標簽
?? ??? ?<link rel="stylesheet" href="css文件的路徑" />
?? ??? ?
?? ??? ?4.外部導入樣式
?? ??? ?主要用在樣式初始化。因為有一些標簽有自己的樣式，我們需要清空，方便自己計算
?? ??? ?
?? ??? ?
?? ??? ?css語法：?? （符號都是英文的）
?? ??? ?選擇器{
?? ??? ??? ?屬性名1:屬性值1;
?? ??? ??? ?屬性名2:屬性值2;
?? ??? ??? ?......
?? ??? ?}
?? ??? ?-->
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?<!--<div style="width: 100px;height: 100px;"></div>-->
?? ??? ?<div></div>
?? ?</body>
</html>
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title></title>
?? ?</head>
?? ?<body>
?? ??? ?<!--
?? ??? ??? ?
?? ??? ?顏色的表示方法
?? ??? ?1.顏色色值的英文單詞?????? red，yellow，green，blue...
?? ??? ?2.16進制表示法
?? ??? ?2???? 010101
?? ??? ?8
?? ??? ?10
?? ??? ?16??? 0123456789abcdef
?? ??? ?基礎三原色 紅綠藍
?? ??? ?每個顏色是由兩個16進制的數來表示的#ff 00 00
?? ??? ?簡寫
?? ??? ?#xxyyzz??? ->?? #xyz
?? ??? ?#ffff00???????? #ff0
?? ??? ?#aabbcc???????? #abc
?? ??? ?#aabcdd??????? 不能簡寫的
?? ??? ?#000000???????? ?
?? ??? ?#ffffff???????? 白色
?? ??? ?#cccccc???????? 黑?? 白?? 灰
?? ??? ?3.rgb表示法
?? ??? ?16*16 = 256
?? ??? ?rgb(0-255,0-255,0-255)
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?-->
?? ??? ?<div style="width: 200px;height: 200px;background-color: rgb(255,255,0)"></div>
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?
?? ?</body>
</html>
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title></title>
?? ??? ?<style type="text/css">
?? ??? ??? ?#div01{
?? ??? ??? ??? ?width: 100px;
?? ??? ??? ??? ?height: 100px;
?? ??? ??? ??? ?background-color: #ff0;
?? ??? ??? ?}
?? ??? ??? ?.d1{
?? ??? ??? ??? ?width: 200px;
?? ??? ??? ??? ?height: 200px;
?? ??? ??? ??? ?background-color: #00f;
?? ??? ??? ?}
?? ??? ??? ?a,input,button{
?? ??? ??? ??? ?width: 200px;
?? ??? ??? ??? ?height: 200px;
?? ??? ??? ??? ?background-color: #00f;
?? ??? ??? ?}
?? ??? ??? ?.grand{
?? ??? ??? ??? ?width: 500px;
?? ??? ??? ??? ?height: 500px;
?? ??? ??? ??? ?background-color: #f00;
?? ??? ??? ?}
?? ??? ??? ?.grand .son{
?? ??? ??? ??? ?width: 300px;
?? ??? ??? ??? ?height: 300px;
?? ??? ??? ??? ?background-color: #000;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?
?? ??? ??? ?*{
?? ??? ??? ??? ?border: 10px solid #f00;
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<!--
?? ??? ??? ?
?? ??? ?css------選擇器
?? ??? ?ID選擇器
?? ??? ??? ?使用id選擇器：在元素上面增加一個id屬性,id屬性的屬性值不用用數字開頭
?? ??? ??? ?一個頁面中只能有一個id屬性值
?? ??? ??? ?css中id選擇的表示方法用???? #? 表示
??? ??? ?class選擇器
??? ??? ??? ?使用class選擇器：在元素上增加一個class屬性，class屬性的屬性值不能用數字開頭
??? ??? ??? ?一個頁面中可以有多個class屬性值
??? ??? ??? ?css中class選擇器的表示方法用???? .?? 表示
?? ??? ?標簽選擇器
?? ??? ??? ?直接寫標簽名
?? ??? ?組合選擇器
?? ??? ??? ?選擇器直接用,分隔開即可
?? ??? ?子代選擇器
?? ??? ??? ?>???? 只針對子代
?? ??? ?后代選擇器
?? ??? ??????? 用空格表示，包含著子代選擇器
?? ??? ?通用選擇器
?? ??? ???? *??? 針對于所有的標簽
?? ??? ?-->
?? ??? ?<div id="div01"></div>
?? ??? ?
?? ??? ?
?? ??? ?<div class="d1"></div>
?? ??? ?
?? ??? ?<p class="d1"></p>
?? ??? ?
?? ??? ?<a href="">內容</a>
?? ??? ?
?? ??? ?<input type="text" />
?? ??? ?<button></button>
?? ??? ?
?? ??? ?<div class="grand">
?? ??? ??? ?grand
?? ??? ??? ?<div class="father">
?? ??? ??? ??? ?father
?? ??? ??? ??? ?<div class="son">
?? ??? ??? ??? ??? ?son
?? ??? ??? ??? ?</div>
?? ??? ??? ?</div>
?? ??? ?</div>
?? ??? ?
?? ??? ?
?? ?</body>
</html>
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title></title>
?? ??? ?<style type="text/css">
?? ??? ??? ?div #div02{??? /*? 1+100=101?? */
?? ??? ??? ??? ?color: #ff0;
?? ??? ??? ??? ?width: 200px;
?? ??? ??? ?}
?? ??? ??? ?#div01>div{?? /*100+1=101*/
?? ??? ??? ??? ?height: 300px;
?? ??? ??? ??? ?color: #f00;
?? ??? ??? ??? ?width: 300px;
?? ??? ??? ??? ?background-color: #00f;
?? ??? ??? ?}
?? ??? ??? ?.div01 .div02{?? /*10+10=20 */
?? ??? ??? ??? ?font-size: 50px;
?? ??? ??? ?}
?? ??? ??? ?#div01>#div02{? /*100+100=200*/
?? ??? ??? ??? ?font-size: 20px;
?? ??? ??? ??? ?background-color: #f00;
?? ??? ??? ??? ?color: #fff;
?? ??? ??? ?}
?? ??? ??? ?div{
?? ??? ??? ??? ?width: 500px!important;
?? ??? ??? ??? ?height: 500px!important;
?? ??? ??? ??? ?color: #f00!important;
?? ??? ??? ??? ?background-color: #ff0!important;
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<div class="div01" id="div01">
?? ??? ??? ?<div class="div02" id="div02" style="width: 10px;height: 10px; ">今天天氣很好</div>
?? ??? ?</div>
?? ??? ?<!--
?? ??? ?選擇器是有權重的???? ?
?? ??? ???? 內聯樣式???????????? 1000
?? ??? ??? ?id????????? 100
?? ??? ??? ?class?????? 10
?? ??? ??? ?元素????????????????? 1
?? ??? ??? ?通用????????????????? 0
?? ??? ?boss??? !important???? 只要出現，就以這個為主?? ??? ?
?? ?
?? ??? ??? ?
?? ??? ??? ?權重越高，沖突部分的樣式就以權重高的為主，并不是說這個選擇器沒有用了，而是里面沖突的樣式
?? ??? ??? ?權重僅僅只能作為參考
?? ??? ??? ?
?? ??? ??? ?權重的計算
?? ??? ??? ?不需要管子代和后代的
?? ??? ??? ?如果權重相同，就近原則。以后定義的為準
?? ??? ??? ?無聊的事：
?? ??? ?-->
?? ??? ?
?? ??? ?
?? ?</body>
</html>
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title></title>
?? ??? ?<style type="text/css">
?? ??? ??? ?div{
?? ??? ??? ??? ?width: 500px;
?? ??? ??? ??? ?height: 500px;
?? ??? ??? ??? ?border: 1px solid #000;
?? ??? ??? ??? ?text-align: right;???? /*文本對其方式*/
?? ??? ??? ??? ?text-decoration: underline;??? /*文本下劃線*/
?? ??? ??? ??? ?color: #f00;???? /*設置字體的顏色*/
?? ??? ??? ??? ?line-height: 166.67px;????? /*文本的行高*/
?? ??? ??? ??? ?/*一行文字所占的高度,讓他上下居中*/
?? ??? ??? ??? ?
?? ??? ??? ??? ?/*font-family: "Microsoft YaHei";*/??? /*設置字體的樣式:宋體，楷體...? 去百度，翻譯中英文 */
?? ??? ??? ??? ?font-family: "宋體";??? /*自己去百度找到宋體對應的英文，節約空間*/
?? ??? ??? ??? ?font-style: italic;???? /*規定字體是否傾斜*/
?? ??? ??? ??? ?font-weight: bold;
?? ??? ??? ??? ?font-size:? 16px ;???? /*設置字體的大小*/
?? ??? ??? ??? ?/*在瀏覽器中,默認的字體大小16px
?? ??? ??? ??? ??? 谷歌瀏覽器中，字體大小最小可以為12px
?? ??? ??? ??? ??? 火狐沒有限制
?? ??? ??? ??? ? * */
?? ??? ??? ?}
?? ??? ??? ?a{
?? ??? ??? ??? ?text-decoration: none;
?? ??? ??? ?}
?? ??? ??? ?h1{
?? ??? ??? ??? ?font-weight: normal;
?? ??? ??? ??? ?font-size: 5px;
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<!--文本類樣式-->
?? ??? ?<div>
?? ??? ??? ?今天天氣不錯！！！今天天氣不錯！！！今天天氣不錯！！！今天天氣不錯！！！今天天氣不錯！！！今天天氣不錯！！！今天天氣不錯！！！今天天氣不錯！！！
?? ??? ?</div>
?? ??? ?<a href="">去百度</a>
?? ??? ?
?? ??? ?
?? ??? ?<h1>這個是h1標題</h1>
?? ?</body>
</html>
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title></title>
?? ??? ?<style type="text/css">
?? ??? ??? ?.div01{
?? ??? ??? ??? ?width: 100px;
?? ??? ??? ??? ?height: 100px;
?? ??? ??? ??? ?background-color: #f00;
?? ??? ??? ?}
?? ??? ??? ?#div01{???? /*100*/
?? ??? ??? ??? ?background-color: #000;
?? ??? ??? ?}
?? ??? ??? ?.div01:hover{??? /*10+10*/
?? ??? ??? ??? ?background-color: #ff0;
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<!--:hover????? 叫偽類選擇器
?? ??? ??? ?當你的鼠標放上去的時候，會變化成的樣子
?? ??? ??? ?權值?? 10
?? ??? ?-->
?? ??? ?
?? ??? ?
?? ??? ?<div class="div01" id="div01">
?? ??? ??? ?
?? ??? ?</div>
?? ?</body>
</html>
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title>列表及樣式</title>
?? ??? ?<style type="text/css">
?? ??? ??? ?ul{
?? ??? ??? ??? ?list-style: none;
?? ??? ??? ??? ?cursor: none;????? /*設置鼠標的樣式*/
?? ??? ??? ??? ?display: block;??? /*元素分為三大類,設置元素的顯示方式
?? ??? ??? ??? ??? ?行內??? inline
?? ??? ??? ??? ??? ?塊級??? block
?? ??? ??? ??? ??? ?行內塊? inline-block
?? ??? ??? ??? ??? ?none??? 無
?? ??? ??? ??? ?* */
?? ??? ??? ?}
?? ??? ??? ?li{
?? ??? ??? ??? ?display: inline;
?? ??? ??? ?}
?? ??? ??? ?input{
?? ??? ??? ??? ?outline: none;
?? ??? ??? ??? ?/*visibility: hidden;*/
?? ??? ??? ??? ?display: none;
?? ??? ??? ??? ?/*這兩個的區別?*/
?? ??? ??? ??? ?
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<!--有序列表和無序列表-->
?? ??? ?<!--實際開發中有序列表基本不用-->
?? ??? ?<!--這三個都是塊級標簽-->
?? ??? ?<ol type="1" start="3">
?? ??? ??? ?<li>英語</li>
?? ??? ??? ?<li>語文</li>
?? ??? ??? ?<li>數學</li>
?? ??? ??? ?<li>政治</li>
?? ??? ??? ?<li>地理</li>
?? ??? ?</ol>
?? ??? ?
?? ??? ?<ul type="square">
?? ??? ??? ?<li>英語</li>
?? ??? ??? ?<li>語文</li>
?? ??? ??? ?<li>數學</li>
?? ??? ??? ?<li>政治</li>
?? ??? ??? ?<li>地理</li>
?? ??? ?</ul>
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?<input type="text" />
?? ??? ?
?? ?</body>
</html>
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title></title>
?? ??? ?<style type="text/css">
?? ??? ??? ?div{
?? ??? ??? ??? ?width: 200px;
?? ??? ??? ??? ?height: 200px;
?? ??? ??? ??? ?border: 1px solid #000;
?? ??? ??? ?}
?? ??? ??? ?.div01{
?? ??? ??? ??? ?background-color: #f00;
?? ??? ??? ??? ?opacity: 0.1;??? /*取值的范圍是0-1之間，可以為0和1*/
?? ??? ??? ??? ?/*表示整個元素*/
?? ??? ??? ?}
?? ??? ??? ?.div02{
?? ??? ??? ??? ?background-color: rgba(255,0,0,0.1);??? /*最后一個參數a表示透明度，取值的范圍是0-1之間，可以為0和1*/
?? ??? ??? ??? ?/*只表示背景顏色*/
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<div class="div01">這個是第一段文本</div>
?? ??? ?<div class="div02">這個是第二段文本</div>
?? ?</body>
</html>
轉載于:https://www.cnblogs.com/meng0731/p/10938624.html
![kali linux超級用戶_如何優雅的在Linux上使用Powershell]](http://pic.xiahunao.cn/kali linux超級用戶_如何優雅的在Linux上使用Powershell])
