html :超文本標記語言
html三大內容
- 標簽: 承載內容
- 層疊樣式表:渲染頁面
- JavaScript:交互式行為
HTML中的注釋:在代碼外的注釋
代碼內的注釋:/* */或者//
html分為<head> </head>,<body></body>
<meta charset="utf-8"> - 網頁編碼格式
<title>標題內容</title>
css - 指的是 cascading style sheet (層疊樣式表,渲染頁面)
<style type="text/css">
h1~h6 :一級標題到六級標題
h1{
color:red; - 設置一級標題的字體顏色
font-size:80px或者2cm; - 設置字體大小(可以用cm也可以用px像素)
font-family:宋體; -設置字體風格,必須要寫自己電腦上有的字體,不然沒有效果
}
p{
設置p標簽(<p>段落</p>)的風格
font-size:40px;
}
p:first-letter{
color:yellow;
font-size:80px;
設置標簽<p>段落</p>的第一個字的風格
}
<p class="a">段落</p>
.a{
設置標簽p段落中的一行字體風格
color:green;
font-size:40px;
}
<a href="網站地址">xx</a> -設置xx的超鏈接(可以設置鏈接到別的網站,也可以鏈接到自己的網頁上)
a{
設置鏈接的風格
color:red; -設置鏈接的顏色
text-decoration:none; -設置鏈接下面的下劃線為無
}
a:hover{設置鏈接點擊后的風格
color:gerrn; - 鏈接點擊后的顏色
}
鏈接:
1.頁面鏈接:
<a href="網頁地址" target="_blank">鏈接名字</a> - a 是 anchor 頁面鏈接 ,可以鏈接到別的網站上,也可以鏈接自己寫的頁面,其中target="_blank"是在另一個空白頁面上打開 ,不寫或者寫slef是在當前頁面打開
2.錨點鏈接:
<a name="錨點名"></a>
去錨點:<a href="#錨點名">去錨點名</a>
3.功能鏈接:
打開其他應用等
<a href="應用名例如郵件客戶端">做什么事情(有什么功能)</a>
打開qq:
<a target="_blank" ><img border="0" src="imgs/python-logo.png" alt="你好大撒奧多" title="你好大撒奧多"/></a>
放圖片:
<img title="圖片標題(把鼠標放到圖片上可以顯示出來)" src="圖片地址(可以是網上的圖片地址也可以是自己電腦上的圖片地址,自己電腦上的寫相對路徑)" alt="替換字(當圖片加載不出來或者自己地址寫錯的時候導致沒有圖片的時候用替換字替換圖片 - 提示圖片內容)">
<hr> -分割線
三種列表:
-
有序列表:
<ol>
<li>有序列表第一列</li>
<li>有序列表第二列</li>
...
</ol> -
無序列表:
<ul>
<li>無序列表第一列</li>
<li>無序列表第二列</li>
...
</ul> -
定義列表:
<dl>
<dt>定義列表第一列</dt>
<dt>定義列表第二列</dt>
...
</dl>
列表可以嵌套
<script type="text/JavaScript"> - js語法
function 函數名(){
for (var i=1;i<=3;i+=1) - for循環(huán)重復三次
window.alert('
作者:李白'); - 顯示
}
</script>
要寫個按鍵來使用
<button onclick="函數名()">按鍵名</button>
<script type="text/javascript">
function shutDown(){
if (window.confirm('確定關閉嗎?')){
window.close()
}
}
</script>
<button onclick="shutDown()">關閉</button>
實體替換符
上標(sup)/下標(sub)
H2O
楊廣劍1
刪除線:<del>內容</del>
加粗:<strong>內容</strong>
傾斜<em>內容</em>
填入:<ins>內容</ins>
<hr> <!-- 分割線 -->
<p class="a">床 前<del><strong><em>明月</strong></em></del>光<sup>1</sup></p>
<p>疑是<ins>1</ins>地上霜©</p>
<p>舉頭™望[明]月</p>
<p>低<頭>思故®鄉(xiāng)</p>
<p>H<sub>2</sub>O</p>
<p>這個文本包含了<sup>上標</sup>標志</p>
實體字符:
查看菜鳥教程上實體字符的使用(有類似加音標,加<>,注冊上標,版權等)
