前端班day02課堂內容記錄

主要內容：HTML a標簽，表單及css基本內容

①關于a標簽

<a href="? ?">? </a>

href：核心屬性

href里面的內容（屬性值）是可以跳轉的地址（路徑）。

②關于路徑

絕對路徑：從盤符開始，然后依次向下查找。

?1>本地的 例：C:/Users/Administrator/...

?2>服務器的 例：www...;127.0.0.1...;192.168...

相對路徑：從當前文件開始，如果下一級目錄就直接寫文件夾，上一級用../表示

盤符根路徑：直接可以跳轉到當前文件所在的盤符根路徑中。

1>服務器下 跳轉到服務器所在根目錄中

2>本地下 跳轉到本地所在根目錄中

③關于圖像標簽

<img src=" " alt=" "/>

img：行內快標簽，只能靠左或靠右

src：里面內容是圖片的路徑

alt：當你的圖片顯示不出來時才會顯示（1.圖片正在加載中 2.圖片路徑錯誤）

屬性：width，height,align(right,left)

④關于表單

前端和后端之間的通信

1.form提交方式

2.ajax提交方式

<form action="? "></form>

form：核心標簽，只有提交的功能，沒有任何樣式。

屬性：1.action：提交的地址。通常為服務端地址，如果不寫，默認往本頁提交

? ? ? ? ? ?2.method：提交的方式。get/post...如果不寫，為get提交

用戶名?<input type="text" name="uersname"/>

密碼? ? ?<input type="password" name="userpud"/>

? ? ? ? ? ? input：表單的核心?

? ? ? ? ? ? type：通過修改type屬性來改變展現的方式

提交方式：1.<button>提交</buttton>?

? ? ? ? ? ? ? ? ? 2.<input type="submit"/>

在路徑地址中，“？”后面的內容表示參數，最終目的是要把必須的參數發送到后端。想要發送參數，input中必須含有name屬性。

性別單選框：

? ? ? ? ?男<input type="radio" name="sex" value="1" checked/>

? ? ? ? ?女<input type="radio" name="sex" value="0" />

愛好多選框：

? ? ? ? <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"/>打游戲

家鄉選框：

? ? ? ? <select name="hefang" id=" ">
? ? ? ? ? ? <option value="武漢">武漢</option>
? ? ? ? ? ? <option value="荊州">荊州</option>
? ? ? ? ? ? <option value="黃石">黃石</option>
? ? ? ? ? ? <option value="襄陽">襄陽</option>
? ? ? ? ? ? <option value="十堰">十堰</option>
? ? ? ? </select>

一組必須含有相同的name屬性值

checked：默認選中，當屬性名等于屬性值時，只需寫屬性名

value：可自己設置優化，用數字代表選項，目的是減小存儲。

? ? ? ??

⑤關于css使用方式

1.行內樣式（內聯樣式）

2.頁面嵌入（內部樣式表）

3.外部文件（外部樣式表）

4.外部導入樣式：樣式初始化

⑥關于顏色表示方法

1.顏色色值的英文單詞

2.16進制表示法

3.RGB表示法

⑦關于css選擇器

1.ID選擇器

? ? ?使用id選擇器：在元素上面增加一個id屬性,id屬性的屬性值不要用數字開頭

? ? ? 一個頁面中只能有一個id屬性值

? ? ? css中id選擇的表示方法用 # 表示

2.class選擇器

? ? ?使用class選擇器：在元素上增加一個class屬性，class屬性的屬性值不能用數字開頭

? ? ?一個頁面中可以有多個class屬性值

? ? ?css中class選擇器的表示方法用 . 表示

3.標簽選擇器

? ? ?直接寫標簽名

4.組合選擇器

? ? ?選擇器直接用,分隔開即可

5.子代選擇器

? ? ??>? ? ?只針對子代

6.后代選擇器

? ? ??用空格表示，包含著子代選擇器

7.通用選擇器

? ? ??? *? ? 針對于所有的標簽

⑧關于權重

? ? 選擇器是有權重的

? ? 內聯樣式? ? ? ? ? ? ? ? ? ? ? ? ? 1000
? ? id? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 100
? ? class? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?10
? ? 元素? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1
? ? 通用? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 0
?!important? ? ? ? ? ? ? ? ? ? 只要出現，就以這個為主

權重越高，沖突部分的樣式就以權重高的為主，但并不是說這個選擇器沒有用了
權重僅僅只能作為參考
權重的計算，不需要管子代和后代的
如果權重相同，就近原則。以后定義的為準

⑨關于文件夾樣式

text-align: right; /*文本對其方式*/
text-decoration: underline; /*文本下劃線*/
color: #f00; /*設置字體的顏色*/
line-height: 166.67px; /*文本的行高。一行文字所占的高度,讓他上下居中*/

font-family: "宋體"; /*自己去百度找到宋體對應的英文，節約空間*/
font-style: italic; /*規定字體是否傾斜*/
font-weight: bold; 加粗
font-size: 16px ; /*設置字體的大小*/

注意：在瀏覽器中,默認的字體大小16px

? ? ? ? ? ?谷歌瀏覽器中，字體大小最小可以為12px

? ? ? ? ? ?火狐沒有限制

⑩關于列表及樣式

1.有序列表（實際開發中有序列表基本不用）

<ol type="1" start="3">
<li>英語</li>
<li>語文</li>
<li>數學</li>
<li>政治</li>
<li>地理</li>
</ol>

2.無序列表

<ul type="square">
<li>英語</li>
<li>語文</li>
<li>數學</li>
<li>政治</li>
<li>地理</li>
</ul>

.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*/
/*只表示背景顏色*/

提問：outline:none;與display:none;區別？

轉載于:https://www.cnblogs.com/xiexie-blog/p/10939038.html

總結

以上是生活随笔為你收集整理的HTML day02的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。