前端-html/css

時間 2019-11-17

標籤前端 html css 欄目 HTML 简体版

原文原文鏈接

1 HTML（超文本標記語言）css

簡而概之，HTML使用標籤描述網頁。html

開發者：學習HTMLl規則，寫HTML文件，從數據庫讀取數據，替換HTML指定位置（Web框架）。數據庫

本地測試方法：- 找到文件路徑，直接經過瀏覽器打開瀏覽器

- 經過Pycharm直接瀏覽器打開微信

HTML文件：框架

- <!DOCTYPE html> html的標準格式（即對映關係）工具

- 標籤（tag）/ 屬性（以名稱/值對的形式）學習

- 註釋 eg.測試

- html標籤：HTML文件只有一個字體

- head標籤： - 編碼

<meta charset="UTF-8">

- 跳轉和刷新

<meta http-equiv="Refresh" content="30" />
<meta http-equiv="Refresh" content="5;url=http://www.baidu.com" />

- 關鍵詞

<meta name="keyword" content="關鍵詞" />

- 網頁描述

<meta name="description" content="描述" />

- IE兼容

<meta http-equiv="X-UA-Compatible" content="IE=IE8;IE=IE7" >

- title標籤

<title>測試工具平臺</title>

- link標籤：設置圖標

    <link rel="shortcut icon" href="icon.jpg">

- style標籤

- script標籤

- body標籤： - 符號：eg.&nbsp（空格） ; &gt（>）

- 段落：<p>段落之間有間距</p>

- 換行：</br>

- H標籤：h1~h6，標題字體從大到小

- span標籤：白板，能夠嵌套使用

- div標籤：白板，能夠嵌套使用

- input標籤：type/name/value/checked/自定義屬性

    <input type="text" name="user" value="請輸入用戶名">
    <input type="password" name="pwd">
    <input type="submit" name="確認登陸">
    <input type="button" value="只是按鈕">
    <p></p>
    <input type="radio" name="gender"> 女
    <input type="radio" name="gender"> 男
    <p></p>
    <input type="checkbox" name="favor"checked="checked"> 繪畫
    <input type="checkbox" name="favor"> 唱歌
    <p></p>
    <!-- 依賴form表單屬性 enctype:"multipart/form-data"-->
    <input type="file">
    <p></p>
    <input type="reset" name="重置">

- form標籤：提交表單，action/method/enctype/自定義屬性

<form action="http://www.baidu.com" method="get">
    <input type="text" name="user" value="請輸入用戶名">
    <input type="password" name="pwd">
    <input type="submit" name="確認登陸">
    <input type="button" value="只是按鈕">
</form>

- textarea標籤：多行輸入

<textarea></textarea>

- select標籤：下拉框

<select name="city">
    <optgroup label="深圳市"></optgroup>          <!-- 不可選項 -->
    <option selected="selected">南山區</option>   <!-- 默認值 -->
    <option>福田區</option>
    <option>羅湖區</option>
</select>

- a標籤：超連接，不能提交數據到後臺

<a href="http://www.baidu.com" target="_blank">百度一下，你就知道</a>
<h1 id="h">百度一下，你就知道</h1>
<a href="#h"></a>

- image標籤：src/style/alt/title/自定義屬性

<img src="微信截圖.png" style="height:100px;width:100px" alt="錯誤圖片描述" title="懸浮描述"/>

- 列表：ul/ol/dr

<ul>
    <li>第一條新聞</li>
    <li>第二條新聞</li>
</ul>

<ol>
    <li>第一</li>
    <li>第二</li>
</ol>

<dr>
    <dt>1</dt><di>2</di>
</dr>

- table標籤：表格；tr表明行；thead表明表頭；th表明表頭中的列；tbody表明表體；td表明表體中的列

   <table border="1">
       <thead>
           <tr>
               <th>項目名稱</th>
               <th>項目職責</th>
               <th>項目概述</th>
               <th>項目貢獻</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td>1</td>
               <td>2</td>
               <td>3</td>
               <td>4</td>
           </tr>
       </tbody>
   </table>

- table標籤：合併單元格

 <tbody>
           <tr>
               <td rowspan="2">1</td>
               <td>2</td>
               <td colspan="2">3</td>
           </tr>
            <tr>
               <td>2</td>
               <td>3</td>
               <td>4</td>
           </tr>
       </tbody>

- label標籤：文本標籤；根據Id獲取光標

<label>內容</label>
<label for="f1">獲取光標</label>

- fieldset標籤

<fieldset>
    <legend>外框</legend>內容
</fieldset>

- 標籤的分類：- 自閉合標籤：<meta> <link> <br> <input> <img>

- 主動閉合標籤：<title> <p> <H> <div> <span> <form> <style> <script> <textarea> <select> <a> <列表> <label> <fieldset>

- 塊級標籤：<H> <p> <div>

- 行內（內聯）標籤：<span>

2 CSS（層疊樣式表）

- 註釋：/* */

- 直接選擇器（每一個標籤均可以寫style屬性）

<div style="background-color:#dddddd;height:40px">top
</div>

- Id選擇器

<h1 id="h">百度一下，你就知道</h1>
<style>
    #h{
    background-color:red;
    }
</style>

- class選擇器

<h1 class="h">百度一下，你就知道</h1>
<style>
    .h{
    background-color:green;
    width:40px;
    }
</style>

- 標籤選擇器

<style>
    span{
    background-color:#dddddd
    }
</style>
<span>bottom</span>

- 層級（空格）選擇器

<style>
    span div{
    background-color:#dddddd
    }
</style>
<span>bottom
    <div>
    這裏
    </div>
</span>

- 組合（逗號）選擇器

<style>
    span,div{
    background-color:#dddddd
    }
</style>
<span>bottom
    <div>
    這裏
    </div>
</span>

- 屬性選擇器

<div name="text">top
</div>
<div>next</div>
<style>
    div[name="text"]{
    background-color:#dddddd
    }
</style>

- css三種存在方式：- 直接在標籤中描述

- head標籤中描述

- 以文件形式引入

<link rel="stylesheet" href="commons.css">

- css優先級：便籤中style優先；編寫順序優先

- 設置style樣式：- 邊框：border-left/border-right等

<div style="border:2px solid black">hello world!</div>

- 高度、寬度、水平居中、垂直居中、字體加粗、字體大小

<div style="height:40px;width:80%;text-align:center;line-height:40px;font-weight:bold;font-size:20px">hello world!</div>

- float：標籤堆疊

<div style="height:40px;width:20%;text-align:center;line-height:40px;font-weight:bold;font-size:20px;float:left">hello world!</div>
<div style="width:80%,float:left">你好，世界！</div>

<div style="clear:both; /*限制子浮框*/"></div>

- display：改變標籤類型；行內標籤不能設置高度

<div style="display:inline">行內標籤</div>
<div style="display:block">塊級標籤</div>
<div style="display:inline-block">默認本身有多少佔多少，但能夠設置高度</div>
<div style="display:none">隱藏標籤</div>

- margin/padding：外邊距/內邊距

<body style="margin:0 auto;" /*置頂且居中*/>

<div style="margin-top:0">上外邊距</div>
<div style="padding-top:0">上內邊距</div>

- position：固定位置/絕對位置

<div style="position:fixed;bottom:50px;right:50px;">返回頂部</div>

<div style="position:relative;border:2px solid red;margin:0 auto;height:200px;width:100px">
    <div style="position:absolute;bottom:10px;left:10px">在哪裏</div>
</div>

- position：遮蓋；opacity：透明度；z-index：值大在上層

<div style="position:fixed;
              opacity:0.8;
              z-index:10;
              background-color:black;
              top:0;
              bottom:0;
              left:0;
              right:0;">
</div>

- overflow：

<div style="height:200px;width:400px;overflow:hidden /*圖片超出範圍則隱藏*/">
  <img src="微信截圖.png" >
</div>
<div style="height:200px;width:400px;overflow:auto /*圖片超出出現滾動條*/">
  <img src="微信截圖.png" >
</div >

- hover：鼠標移動應用頭部定義的樣式

    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
        position:fixed;
        left:0;
        right:0;
        top:0;
        height:50px;
        background-color:#dddddd;
        }
        .pg-body{
        margin-top:51px;
        }
        .m{
        width:980px;
        margin:0 auto;
        line-height:50px;
        }
        .menu{
        display:inline-block;
        padding: 0 10px;
        }
        /*當鼠標移動到當前標籤上時，一下css屬性才生效*/
        .menu:hover{
        background-color:black;
        }
</style>
</head>
<body>
    <div class="pg-header">
        <div class="m">
            <a class="menu">菜單</a>
        </div>
    </div>
    <div class="pg-body">
    </div>
</body>

- backgroup：repeat：no-repeat/repeat-x/repeat-y；positon/position-x/position-y

    <li>background-color</li>
        <div style="background-color:white;height:100px"></div>
    <li>background-image</li>
        <div style="background-image:url('picture.jpg');height:200px"></div>
    <li>background-repeat</li>
        <div style="background-image:url('picture.jpg');background-repeat:no-repeat;height:300px"></div>
    <li>background-position</li>
        <div style="background-image:url('picture.jpg');background-position:400px 400px;height:200px;width:200px;"></div>

- 注意點：- 默認img標籤有1px的標籤，所以須要去掉img標籤

    <style>
        img{
        border:0;
        }
    </style>

- 窗口自適應：最外層設置絕對寬度，裏層設置百分比

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。