HTML/CSS 學習筆記

筆記之旅，即刻開始。

HTML

HTML即爲一種標記語言。下面帶來一個小實例。

<html><!-- html的根標籤,代表html文檔的結束和開始 -->
    <head><!-- html的頭部分 , 設置網頁屬性,可以設置標題 -->
        <title>hello world</title><!-- 標題 -->
    </head>
    <body><!-- html的正文部分,放置想要在頁面上顯示的內容 -->
        hello world!
    </body>
</html>

下面是字體標記，可以指定不同的屬性。

<html>
    <head>
        <title>字體標記</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    </head>
    <body>
        <h1>靜夜思</h1>
        <p>
        <font color="red" size="7" face="黑體" >牀</font>前明月光,<br/>
        疑是地上霜.<br/>
        舉頭望明月,<br/>
        低頭思故鄉.<br/>
        </p>
    <hr>
        <b>哈哈</b><br/>
        2<sup>3</sup><br/>
        2<sub>3</sub><br/>
    </body>
</html>

在HTML中有很多的轉義字符，例如

<html>
    <head>
        <title>轉義字符</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    </head>
    <body>
哈&nbsp;&nbsp;&nbsp;&nbsp;哈<br/>
a&lt;bc&gt;d<br/>
1<23>2
    </body>
</html>

在HTML中有有序列表與無序列表之分。

<html>
    <head>
        <title>清單標記</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    </head>
    <body>
        愛好:
            <ul type="circle" >
                <li>抽菸</li>
                <li>喝酒</li>
                <li>打豆豆</li>
            </ul>
        <hr/>
           愛好:
            <ol type="I" start="10" >
                <li>抽菸</li>
                <li>喝酒</li>
                <li>打豆豆</li>
            </ol>
        <hr>
            <dl>
                <dt>RPG遊戲</dt>
                    <dd>仙劍奇俠傳</dd>
                    <dd>軒轅劍</dd>
                    <dd>劍俠情緣</dd>
                <dt>棋牌遊戲</dt>
                    <dd>鬥地主</dd>
                    <dd>扎金花</dd>
                    <dd>飛行棋</dd>
            </dl>   
    </body>
</html>

下面是在html代碼中插入一張圖片

<html>
    <head>
        <title>圖形標記</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    </head>
    <body>
        <img src="html.bmp" border="1" width="300" height="300" alt="哈哈" title="嘿嘿" />
    </body>
</html>

其中src代表的是圖片的路徑。

下面是在html代碼中插入一個鏈接

<html>
    <head>
        <title>鏈接標記</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    </head>
    <body>
        <a href="02-排版標記.html" target="_blank" >點我</a><br>
        <a href="http://www.baidu.com" target="_blank" >百度</a><br>
        <a href="mailto:[email protected]" target="_blank" >聯繫我們</a><br>
        <a href="thunder://E3F2A7821" target="_blank" >點擊下載</a><br>
        <!-- 
            href屬性構成
                協議名+協議內容
         -->
    </body>
</html>

其中target屬性可以設置新的跳轉界面以怎樣的形式被打開。

_blank – 在新窗口中打開鏈接
_parent – 在父窗體中打開鏈接
_self – 在當前窗體打開鏈接,此爲默認值
_top – 在當前窗體打開鏈接，並替換當前的整個窗體(框架頁)

下面是鏈接標記當作錨點功能的的另一段事例。

<html>
    <head>
        <title>鏈接標記</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    </head>
    <body>
        <!-- A標籤的錨點功能 -->
            <a name="_abc" ></a>
            <img src="html.bmp" border="1" width="300" height="300" alt="哈哈" title="嘿嘿" /><br>
            <img src="html.bmp" border="1" width="300" height="300" alt="哈哈" title="嘿嘿" /><br>
            <img src="html.bmp" border="1" width="300" height="300" alt="哈哈" title="嘿嘿" /><br>
            <img src="html.bmp" border="1" width="300" height="300" alt="哈哈" title="嘿嘿" /><br>
            <img src="html.bmp" border="1" width="300" height="300" alt="哈哈" title="嘿嘿" /><br>
            <a name="_middle" ></a>
            <img src="html.bmp" border="1" width="300" height="300" alt="哈哈" title="嘿嘿" /><br>
            <img src="html.bmp" border="1" width="300" height="300" alt="哈哈" title="嘿嘿" /><br>
            <img src="html.bmp" border="1" width="300" height="300" alt="哈哈" title="嘿嘿" /><br>
            <img src="html.bmp" border="1" width="300" height="300" alt="哈哈" title="嘿嘿" /><br>
            <img src="html.bmp" border="1" width="300" height="300" alt="哈哈" title="嘿嘿" /><br>
        <a href="#_abc" >回到頂部</a><a href="#_middle" >回到中間</a>
    </body>
</html>

其中<a href="#_abc" >即爲跳轉到某個錨點。

下面介紹的是表格標籤，在html代碼中表示表格略微繁瑣。

<html>
    <head>
        <title>表格標記</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    </head>
    <body>
    <!-- cellpadding="20"
         cellspacing="10"
     -->
    <table border="1" width="500" >
        <tr>
            <td align="center" ><b>姓名</b></td>
            <th>年齡</th>
        </tr>
        <tr>
            <td>tom</td>
            <td>18</td>
        </tr>
        <tr>
            <td>jerry</td>
            <td>16</td>
        </tr>
    </table>

</body>
</html>

其中<tr>表示行，而<td>則表示列。<th>表示表頭。
關於表格更多的內容，請訪問W3school中關於表格的內容

下面是表格標記

<html>
<head>
<title>表格標記</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
    <!-- form用於標識表單的範圍 
            action屬性: 決定提交的位置
        input
            type屬性:決定輸入的類型
            name屬性(重點):提交的鍵
            size屬性:文本輸入框的顯示長度       text    password
            maxlength屬性:顯示文本框輸入長度   text    password
            readonly:只讀.不可修改文本內容.會提交    text    password
            disabled:禁用.被禁用的表單項不會被提交. 所有input都可以使用

        select
            multiple: 多選
            size:一次可以選擇的選項數量
            disabled:禁用
        textarea
            disabled:禁用
            readonly:只讀
        form 
            action:表單提交的地址
            method:表單提交的方式.
                get提交:
                    1.將參數鍵值對拼裝在Url地址之後.
                    2.get提交安全性相對較差
                    3.get提交參數長度有限
                post提交:
                    1.參數不在Url上
                    2.post提交安全性相對較好
                    3.post提交理論上參數長度沒有限制
    -->
    <form action="#" method="post" >
        用戶名:<input type="text" name="username" value="jerry"  disabled="disabled"  /><br/>
        密碼:<input type="password" name="password" size="1" /><br/>
        性別:男<input type="radio" name="sex" value="male" disabled />女<input type="radio"  name="sex" value="female" disabled /><br/>
        愛好:抽菸<input type="checkbox" name="habbit" value="smork" />
            喝酒<input type="checkbox" name="habbit" value="drink" />
            燙頭<input type="checkbox" name="habbit" value="tangtou" /><br/>
        學歷:<select name="edu" multiple size="10" disabled  >
                <option value="zk" >專科</option>
                <option value="bk" >本科科</option>
                <option value="ss" >碩士</option>
            </select><br/>
        個人說明:<textarea rows="10" cols="35" name="desc"  >這傢伙很懶!神馬也沒留下!</textarea><br/>
        近照:<input type="file" name="file" /><br/>
        <input type="hidden" name="haha" value="heihei" />
        <input type="submit" value="提交" /><input type="reset" value="重置" />
    </form>
</body>
</html>

meta標籤

<html>
<head>
<title>meta標記</title>
<!-- 3秒後刷新到Baidu網站 -->
<meta http-equiv="Refresh" content="3;url=http://www.baidu.com">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
</body>
</html>

其實代替了一部分響應頭的功能。

框架標記

<html>
    <head>
        <title>框架標記</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    </head>
    <frameset rows="30%,70%" >
        <frame src="b.html"  /> 
        <frameset cols="30%,70%" >
                <frame src="c.html"  /> 
                <frame src="d.html" name="_dd"  /> 
        </frameset>
    </frameset>
</html>

HTML的部分到此結束，如果想獲得更多的關於HTML的內容，請移步到W3School

CSS

CSS的結合方式
1.

<html>
  <head>
    <title>01-結合方式1.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 結合方式1:
        html標籤上加上style屬性. 屬性的值填寫Css代碼.
        所有標籤都有style屬性.
 -->
  </head>

  <body>
   <p style="color:red;" > This is my HTML page. </p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>02-結合方式2.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 結合方式2:
    使用head標籤中的style標籤.設置頁面樣式.style中填寫css代碼
 -->
    <style type="text/css">
        p{
            color:red;
        }
    </style>
  </head>

  <body>
   <p> This is my HTML page. </p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>03-結合方式3.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- 結合方式3:
 -->
   <link rel="stylesheet" type="text/css" href="p.css">
  </head>

  <body>
   <p> This is my HTML page. </p>
  </body>
</html>

其中，<link rel="stylesheet" type="text/css" href="p.css">則表示了指向外部的css文件。

<!DOCTYPE html>
<html>
  <head>
    <title>02-結合方式2.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 語法1:

    選擇器{
        樣式屬性鍵: 樣式屬性值;
        樣式屬性鍵:樣式屬性值1 樣式屬性值2 樣式屬性值3...;
        /* 
        註釋內容!
        */
     語法2:
        style="樣式屬性鍵: 樣式屬性值;"
    }

 -->
    <style type="text/css">
        p{
            color:red;
        }
    </style>
  </head>

  <body>
   <p  > This is my HTML page. </p>
  </body>
</html>

CSS的幾個選擇器
1.

<!-- 
    標籤選擇器:
        標籤名稱{

        }
    }

 -->
    <style type="text/css">
        a{
            color:blue;
        }
    </style>
  </head>

  <body>
   <a> This is my HTML page. </a>
  </body>
</html>

<!-- 
    id選擇器:
        #標籤id{
        }

    注意: 使用id時.要保證id的值在頁面中是唯一的   

 -->
    <style type="text/css">
        #one{
            color:yellow;
        }
    </style>
  </head>

  <body>
   <a id="one" > This is my HTML page. </a><br>
   <a> This is my HTML page. </a>
  </body>
</html>

<!-- 
    class選擇器:
        .class名稱{
        }

    注意: 使用id時.要保證id的值在頁面中是唯一的   

 -->
    <style type="text/css">
        .one{
            color:green;
        }
    </style>
  </head>

  <body>
   <p>This is my HTML page.</p>
   <p class="one" >This is my HTML page.</p>
   <a class="one" > This is my HTML page. </a><br>
   <a> This is my HTML page. </a>
  </body>
</html>


<!-- 
    僞類選擇器:
        選擇標籤的某個狀態.需要配合其他選擇器來使用
        l link  未訪問過
        v visited   訪問過
        h hover 懸浮
        a active    激活,點擊

 -->
    <style type="text/css">
        a:link{
            color:green;
        }
        a:visited{
            color:black;
        }

        a:hover{
            color:white;
        }
        a:active{
            color:pink;
        }
    </style>
  </head>

  <body>
    <a href="01-結合方式1.html" >點我</a>
  </body>
</html>

    <style type="text/css">
        #one,.two,font{
            color:green;
        }
    </style>
  </head>

CSS中的字體屬性

    <style type="text/css">
        /* p{
            font-family: 黑體;
            font-size: 25px;
            font-style:oblique;
             font-weight:900;
             font-variant:small-caps;
        } */
        p{
            font:oblique small-caps 900 25px 黑體;
        }
    </style>
  </head>

  <body>
    <p class="two" >
    hello itcast! itheima!
    牀前明月光,疑是地上霜</p>
  </body>
</html>

CSS中的背景屬性

    <style type="text/css">
        /* 
            background : background-color || background-image || background-repeat || background-attachment || background-position 
body{
            background-image: url("mn.jpg");
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
     */
        body{
            background: url("mn.jpg") no-repeat fixed center;
        }
    </style>

CSS中的行級與塊級標籤

    <!-- 
         塊級標籤  => 佔據的範圍是一行
            div p  ul li ol,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,

        行內標籤 => 佔據的是行中的一部分
             span a font b .......................
     -->

CSS的盒子模型

    /*
    盒子模型的屬性
        一. 邊框系類屬性
        二. 尺寸屬性
        三. 邊距
                *內邊距
                *外邊距


        border-color:邊框顏色
        border-width:邊框寬度
        border-style:邊框樣式

            border-color: red;
            border-width: 1px;
            border-style: solid;

            margin-left:100px;左外邊距
            margin-top:100px;

            padding-left:100px; 左內邊距
            padding-top:100px; 上內邊距

            注意:內邊距會延長所在盒子的長或寬
    */
        div{
            border: 1px solid red;
        }

        #one{
            height: 300px;
            width: 300px;
        }
        #two{
            height: 100px;
            width: 100px;
            margin-left:100px;
            margin-top:100px;
        }
    </style>

  </head>

  <body>
    <div id="one" >
        <div id="two"></div>
    </div>
  </body>
</html>

    /*
    padding : 1個值 上下左右
              2個值    1.上下 2.左右
              3個值    1.上 2.左右 3.下
              4個值     1.上 2.右 3.下 4.左
    */
        div{
            border: 1px solid red;
            height: 300px;
            width: 300px;
        }

        #one{
            padding: 20px 30px 50px 80px;
        }
    </style>

  </head>

  <body>
    <div id="one" >
        <div id="two"></div>
    </div>
  </body>
</html>

Thingvellir

發佈了36 篇原創文章 · 獲贊 2 · 訪問量 2萬+

私信關注

JAVA EE-HTML/CSS

HTML/CSS 學習筆記

HTML

下面是字體標記，可以指定不同的屬性。

在HTML中有很多的轉義字符，例如

在HTML中有有序列表與無序列表之分。

下面是在html代碼中插入一張圖片

下面是在html代碼中插入一個鏈接

下面介紹的是表格標籤，在html代碼中表示表格略微繁瑣。

下面是表格標記

CSS

JAVA EE-JSP

JAVA EE-SESSION&COOKIE

JAVA -註解

JAVA-零碎知識點

JAVA EE-HTML/CSS

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結