HTML day02
前端班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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： A-Graph Games_2019牛客
- 下一篇： annotation的理解