Web最最基礎2


  • 網頁元素HTML

    • 列表

(1)無序列表

<ul>
  <li>****</li>
  <li>***</li>
</ul>

更多樣式:<ul type="circle|square">

(2)有序列表

<ol start="100">
  <li>****</li>
  <li>***</li>
</ol>

更多樣式:<ol type="A|a|i|I">

    •  表單元素

(1)文本框

  <input type="text" maxlength="20" placeholder="請輸入用戶名...">

(2)密碼框

  <input type="password" maxlength="16" >

(3)單選按鈕

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

  <input type="radio" name="sex">女</input>

(4)下拉列表

  <select>

    <option>請選擇--</option>

    <option>北京</option>

    <option>廣東</option>

  </select>

(5)復選框

<input type="checkbox" name="jiuye">游戲測試</input>

<input type="checkbox" name="jiuye">銀行測試</input>

(6)多行文本框

<textarea rows="8" cols="30">

包括教育背景、工作經驗、性格特征等

</textarea>

(7)上傳文件

<input type="file">

(8)按鈕

<button>確定提交</button>

<input type="submit" value="注冊">

<input type="reset" value="重置">

  • 二、CSS美化網頁

1、CSS選擇器

(1)Html標簽選擇器:當前網頁中同一種標簽會設置成指定的樣式

(2)class標簽選擇器:當前網頁中相同的class處會設置成指定的樣式

(3)id標簽選擇器:當前網頁中某一處需要設置成唯一的樣式

2、CSS樣式的應用方法

(1)行內:位於<body>中的某個標簽內,只對該標簽生效。

(2)內嵌:位於<head></head>,針對該html文件生效

(3)外部樣式:將樣式代碼單獨存在css文件中,在html文件的head中使用link鏈接法將css文件與網頁文件進行綁定

<link rel="stylesheet" type="text/css" href="gushi.css">

  • 三、框架

1、上下結構:

<html>
<head></head>
    <frameset rows="20%,*" bordercolor="#0000FF" border="5">
        <frame name="top" src=“1.html">
        <frame name="bottom" src=“2.html">
    </frameset>
</html>

2、左右結構

<html>
<head></head>
    <frameset cols="20%,*" bordercolor="#0000FF" border="5">
        <frame name="left" src=“1.html">
        <frame name="right" src=“2.html">
    </frameset>
</html>

3、上中下結構

<html>
<head></head>
    <frameset rows="20%,*,10%" bordercolor="#0000FF" border="5">
        <frame name="top" src=“1.html">
        <frame name="middle" src=“2.html">
        <frame name="bottom" src=“3.html">
    </frameset>
</html>

4、上下結構,下面又分成左中右兩部分

<html>
<head></head>
    <frameset rows="20%,*" bordercolor="#0000FF" border="5">
        <frame name="top" src=“1.html">
        <frameset cols="20%,*,10%" bordercolor="#0000FF" border="5">
            <frame name="left" src=“1.html">
            <frame name="right" src=“1.html"> 
            <frame name="right" src=“1.html"> 
        </frameset>
    </frameset>
</html>

5、上中下結構,中間拆分成左中右三部分

<html>
<head></head>
    <frameset rows="10%,*,10%" bordercolor="#0000FF" border="5">
        <frame name="top" src=“1.html">
        <frameset cols="20%,*,10%" bordercolor="#0000FF" border="5">
            <frame name="left" src=“1.html">
            <frame name="middle" src=“1.html"> 
            <frame name="right" src=“1.html"> 
        </frameset>
        <frame name="bottom" src=“1.html">
    </frameset>
</html>    

 

 

菜鳥教程

W3School

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM