HTML的基礎知識 列表及表單的寫法

一、有序列表、無序列表、自定義列表如何使用?

寫個簡單的例子。三者在語義上有什麼區別?在哪些情況下使用哪種(重要)?如何套用?

1、簡單例子如下:

 

2、語義區別及使用情況如下:

有序列表表示列表項間有先後順序;

無效列表則表示各項間無先後順序,其可隨意調換位置(以後使用最多);

自定義列表則表示dt(列頭)對dd(列表內容)概括或具有父子屬性關係等;

3、套用時應從大類寫起,大類寫完後再逐步補充子項目;套用代碼如下:

 

如何去除列表前面的點或者數字?修改列表(項目標籤)開頭顯示形狀
在 style 中加入list-style: none 即可;或者試者變化 list-style: 參數可變
代碼實例:

 

三、id和class有什麼區別?什麼時候用class什麼時候用id?

區別:
1、一個id選擇器 在 一個HTML頁 中同樣id的命名 只能出現一次,不能重複使用,class可被 [多次使用];

2、id選擇器可被javascript中的GetElementByID函數所調用,而class不支持javascript ;

3 、ID樣式優先級高於class;
一般編寫情況下優先使用class(可被使用多次),
但遇到javascript時一般則採用id

四、塊元素、線性元素是什麼?有什麼區別?分別對應哪些常用標籤?

塊級元素(block element)又名塊元素,和其對應的是線性元素(inline element又稱內聯元素),都是html規範中的概念。
大多數HTML 元素被定義為塊元素或線性元素。塊元素在瀏覽器顯示時,通常會以新行來開始(和結束)。而線性元素只佔據它對應標籤的邊框所包含的空間,且可並排顯示;塊元素需佔滿一行,其為垂直顯示;

塊元素常見標籤:p、h1...h6、div、table、ul、li、dl、dt、form
行內元素常見標籤:a、img、input、button、textarea
其他具體可參見 (https://www.w3school.com.cn/cssref/index.asp

五、
CSS代碼中
display: block、
display: inline、
display: inline-block、
display: none 分別有什麼作用?

display:block: 此元素將顯示為塊元素,此元素前後 會帶有自動換行;

display:inline :此元素將顯示為線性(內聯)元素,此元素前後不帶換行;

display:inline-block :此元素對象將顯示為線性元素特性,其對象內容具有塊元素特性;
(其為CSS2.1 新增的值,IE(低版本IE)本來是不支持inline-block的,所以在IE中對內聯元素使用display:inline-block,理論上IE是不識別的,但使用display:inline-block在IE下會觸發layout,從而使內聯元素擁有了display:inline-block屬性的象徵)

display: none :此元素將不顯示其塊元素及線性元素性質 使指定的區塊消失(隱藏起來)

以下編寫代碼實例:

 

六、區塊命名應用下面的代碼,注意class和id的使用及命名方式

 

以上代碼將頁面總體分為三個部分:頭部、內容部、底部。這三個部分採用不同的id獨立命名,而其內部則採用class的方式命名,以便統一管理樣式。

七、如何理解HTML CSS語義化? 在平時編寫程序的過程中要注意哪些細節

編寫代碼時應規範嚴謹,使用合適的標籤及恰當的命名要從通用的搜索引擎、瀏覽器及維護代碼等相關人員,均能夠很好的理解程序碼中的相應的含義,有時即使樣式毀損或去掉樣式,也能夠以一種文檔格式顯示網頁內容。
平時寫程序碼時,比如圖片記得使用alt標籤,命名class或id時採用相關且恰當的字母或單詞以便於識別等等;跟語義化不相關的網頁設計應注意的可見細節

八、form表單 作用是甚?有哪些常用的input標籤,用途分別有什麼?
其作用為將用戶輸入表單的信息提交至後台;
常見的input標籤有如下示例:

<input name="username" type="text" placeholder="名稱" > <!--輸入資料用-->
<input name="password" type="password" placeholder="密碼" maxlength=20 >  <!--輸入密碼用-->
<input name="like" type="checkbox" checked > <!--複製用-->
<input name="gender" type="radio"  value="male" checked > <!--多項單選-->
<input name="url_delete" type="hidden"  value="https://www.as-creative.com.tw/"> <!--暂存資料或做安全校驗用-->
<input name="upfile" type="file" > <!--上傳文件用-->
<input name="submit" type="submit" value="上傳" > <!--上傳表單資料用-->
<input name="chongzhi" type="reset" value="重置"> <!--重置之前所填的表單資料-->
<input name="image" type="image" src="https://www.cathay-young.com.tw/contents/frontend/assets/images/button/blue.png" alt="submit"> <!--自定義的按钮圖片-->

備註:使用<input type="image"/>時,一定要和src屬性及alt屬性結合使用。

九、post 和get 方式的區別?

1、post傳遞資料時不會在url顯示出來,而get則會顯示,因此使用get時不應該使傳遞敏感的資料比如密碼等;
2、post傳遞的資料大小根據服務器而定,但get最多只能夠傳輸1k資料;
3、post對資料類型無限制,包括二進制;get只允許ASCII字符;
4、post不能夠被緩存,get能夠被緩存;
5、post在網頁後退或刷新時會重新提交資料而get無影響;
6、post編碼類型可為application/x-www-form-urlencoded或multipart/form-data。為二進制資料使用多重編碼。而get編碼類型只有application/x-www-form-urlencoded;

可參考:http://www.w3school.com.cn/tags/html_ref_httpmethods.asp

十、在input裡,name 有什麼作用?

作用是對提交到後台的數據進行標識,或在客戶端通過javascript引用表單數值。

十一、傳送 三者有什麼區別?

  只提交"傳送"(就IE瀏覽器而言,其他瀏覽器則傳送value值);

【button間 除了可放置文本以外還可放置多媒體內容,但其唯一禁止使用的元素是圖像映射】

傳送 只是一個連結,點擊後其只是刷新而已,其不會傳遞數據; 其會將表單內容傳遞至後台
其實還有   雖然也可生成"傳送"按鈕,但點擊後無反應(不提交數據),需綁定js;

十二、radio 如何分組?

當其屬性相同時應分為一組(使用同一個name即可),比如水果類 蘋果、梨子、香蕉可分為一組;

十三、placeholder 屬性有什麼作用?

可提示使用者輸入對應資料,但當正在輸入時則會消失;

Comments are closed.