HTML學習筆記一20200309

給一個框架
這些會了你就可以搞一下小的頁面模板

1.CSS選擇器定義標籤
inline style內聯樣式

   <h2 style="color: red">CatPhotoApp</h2>

Cascading Style Sheets層疊樣式表

<style>    
  選擇器 {屬性名稱: 屬性值;}    
  h2 {color: red;}    
</style>

2.CSS選擇器使不包含 red-text類的p元素都使用Monospace字體

    p:not(.red-text){
    font-family: Monospace;
}

3.引入外來字體

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

這裏引入的是Google的字體

4.文字降級

h2 {
	font-family: Lobster, Monospace;
}

5.添加圖片

<img src="https://www.your-image-source.com/your-image.jpg" alt="your-image">

PS：alt屬性就是在加載不出來的時候顯示屬性後面的引號內容
像下面這樣

6.調整網頁裏圖片大小

<style>    
  .larger-image {    
    width: 500px;    
  }    
</style>

7.標籤增加邊框

<style>    
  .thin-red-border {    
    border-color: red;    
    border-width: 5px;    
    border-style: solid;    
  }    
</style>

邊框顏色爲紅色、邊框寬度爲5像素(px)、邊框樣式爲實線(solid)
若要增加圓角邊框

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius:10px;
}

或者

.smaller-image {
width: 100px;
border-radius:10px;
}

均可
只需要在img圖片的class類中的css類屬性中加上即可
效果是這樣的

當然，圓角邊框還可以這樣

是這樣寫的，可以很清晰的看到，我們使用了百分比而不是像素值

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}

8.設置鏈接錨元素外部頁面

<p><a href="https://www.baidu.com">baidu.com</a></p>

我在試的時候，發現沒有<p></p>也是可以的
那樣的話就這樣

<a href="https://www.baidu.com">baidu.com</a>

你能看到=後面被引的是目標地址，後面是錨文本，也就是a標籤要顯示的文本
那麼，如果我想把純文本和那個有超鏈接感覺的文本放一塊呢？
這個時候要Nesting（嵌套），把a元素嵌套進p元素裏面

<p>搜索引擎： <a href="https://www.baidu.com">baidu.com</a></p>

效果是這個樣子的

看起來還不錯吧！
讓我再接着寫點，滿十個就結束。

9.爲圖片創建鏈接
還記着上面的小貓嗎？
下面我們爲它創建一個鏈接，創建之前是這個樣子的：

<p>Click here for <a href="#">cat photos</a>.</p>
<img class="smaller-image thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg">

有的同學一看，不對呀，你前面寫的的a標籤後面的鏈接哪裏去了呢？
可以看到，它成這樣子了

<p>Click here for <a href="#">cat photos</a>.</p>

等號後面的鏈接變成了#，#是什麼呢?
是這樣的
有時你想要在你的網站上添加一個 a 元素，但你還不知道將它鏈接到哪裏，這時你可以使用固定連接。
當你使用 jQuery 更改鏈接的行爲時，這也很方便，以後我們會說到。
把 a 元素的 href 屬性的值替換爲一個 # （# 也稱爲哈希符號），可以將其轉換爲一個固定鏈接。
而我們的小貓可以通過嵌套在a元素中使其變爲一個鏈接。
圖片後面記得加alt屬性嗷，這是一個好習慣。
不記得的話看看第五點。

要開會了，今天就只學這麼多了，本來還想寫夠10條來着orz
今天寫了這麼多的結果在這裏

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}

.smaller-image {
width: 100px;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" src="https://www.w3cschool.cn/statics/codecamp/images/relaxing-cat.jpg" alt="A cute orange cat lying on its back"></a>

<p class="red-text">在大家心目中，也許編程是一件非常困難的事情，其實也是一件非常有樂趣的事情，只要掌握好編程入門的方法，就能慢慢進入一個全新的創造世界。</p>
<p class="red-text">可以學習的編程語言有很多，包括Html、css、Javascript、jquery、bootstrap等等前端編程實戰課程</p>