前端基礎 - HTML&CSS

時間 2019-11-29

標籤前端基礎 html&css html css 欄目 CSS 简体版

原文原文鏈接

前端的東西學了有一陣子了，感受都是比較零碎的東西，屬於一學就會，一放下就忘的類型。因此就回看了視頻作了筆記，對零碎的點作了梳理，方便往後本身須要的時候回看。javascript

1. HTML - headcss

標籤大多成對出現（主動標籤），<html></html> 標籤只容許出現一對。不成對出現的標籤成爲自閉合標籤，如 <input> <img>
標籤中能夠定義屬性
<head></head> 標籤中 80% 的信息不能被看到。（title 看獲得）
<style></style> 標籤用來寫 css 樣式。
<script></script> 能在 head 中寫 javascript 代碼。
<link> 引入 css 的標籤

2. HTML - bodyhtml

<p></p> ➡️ 段落
<h1></h1> ➡️ 標題，1表明一級標題，數字支持 1-6
<span></span> 行內標籤，span 是白板標籤，能被 css 隨意修飾。與行內標籤對應的是塊級標籤
<br> ➡️ 換行
<div></div> 塊級標籤

經常使用屬性：<input value="默認值" placeholder="提示文案" type="text">
另外，type 分爲：checkbox (checked="checked"), text, password, button, radio (單選框)
radio 的使用：兩個 input 的 name 相同時，radio 選擇互斥
重要的屬性：name="username", name 用來與後段交互，對應後端的 key（username 只是舉例）
經過 value 屬性拿到輸入值
button 和 submit，button 無任何效果，submit 與 form 表單聯用

<label> 與 <input> 關聯使用（經過 id）

1 <label for="user"></label> 
2 <input id="user">

<form>

1 <form action="https://www.baidu.com" method="get">
2     <input name="username">
3     <input name="password">
4 </form>

- 以上操做會把 username 和 password 看成參數放在 URL
&lt ➡️ 左尖括號
&gt ➡️ 右尖括號
&nbsp ➡️ 空格

<textarea></textarea> ➡️ 多行文本

<textarea> 多行文本默認信息 </textarea>

<select></select> ➡️ 下拉框，搭配如下內容一塊兒用：

1 <select name="city">
2     <option value="1">濟南</option>
3     <option value="2">青島</option>
4 </select>

1 <select name="city">
2     <optgroup label="山東省"> 
3         <option>濟南</option> 
4         <option>青島</option> 
5     </optgroup>
6 </select>

<a></a> ➡️ 超連接標籤

<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="#demo">鉚點，跳轉到 id=「demo」 的標籤處 </a>

<img> ➡️ 圖片

<img src="圖片出處" title="鼠標懸浮文字" alt="加載失敗時顯示的文字">

<table> ➡️ 表格

 1 <table>
 2     <thead> /*表頭*/
 3         <th>id</th>
 4         <th>請求方式</th>
 5     </thead>
 6     <tbody> /*表體*/
 7         <tr> /*行*/
 8             <td> 1 </td>
 9             <td> get </td>
10         </tr>
11     </tbody>
12 </table>

需合併單元格的時候，橫向合併只需在相應標籤中添加 colspan="2" 的屬性，2 爲單元格的個數；

豎向合併時，rowspan=「2」，相應被合併的單元格就沒必要添加對應內容了

ul li

 1 <ul>  //無序列表
 2     <li> 獅子座♌️ </li>
 3     <li> 白羊座♈️ </li>
 4 </ul>
 5 
 6 <ol>  //有序列表
 7     <li> 獅子座♌️ </li>
 8     <li> 白羊座♈️ </li>
 9 </ol>
10 
11 <dl>  //縮進格式
12     <dt> 獅子座♌️ </dt>
13     <dd> 白羊座♈️ </dd>
14 </dl>

3. CSS前端

css 選擇器

<body>
    <div id="id1"></div>
    <div class="class1"></div>
    <div>
        <span></span>
    </div>
    <div id="id2">
        <span>今天</span>
    </div>
    <div id="id3" class="..." april="april"></div>
</body>

id 選擇器

#id1{
    width: 100px;
    background: blue;
}

class 選擇器

.class1{
    width: 100%;
    height: 100px;
}

標籤選擇器

div{
    width: 100%;
    height: 100px;
}

- 層級選擇器（還能夠使用 id 層級選擇器、class 層級選擇器，將 div 改成"#id1" 或 ".class1"）
  - ```
  div span{
      width: 100%;
      height: 100px;
  }
```
- 屬性選擇器
  - ```
  div[april="april"]{
      width: 100%;
      height: 100px;
  }
```
- css 的樣式，能夠寫在三個地方：div 的 style 屬性中、<style></style> 標籤中、文件引用。順序爲：離哪一個近優先用哪一個。

字體：

.c1{
    font-size: larger;
    font-weight: bolder;
}

邊框：
- border: 1px red solid;
居中：
- text-align: center; //水平居中
- line-height: 100px; //這裏的100px爲邊框的高度
float

float：left/right（能夠實現塊級標籤在一行內展現）

塊級標籤和行內標籤的轉換、display 屬性

display: inline; //塊轉行
display: block; //行轉塊

display: inline-bllock; //既是行內也是塊，由於行內標籤不支持使用寬高屬性
display: none; //隱藏屬性

外邊距、內邊距

margin-top: 10px;    //外邊框的意思顯而易見，很少作解釋。margin: 10px 表示四周的邊距，支持各個方向的邊距

padding-top: 10px;    //內邊距是指，以邊框爲準，向自身內側擴充

分層（position）

position: fixed; 關於絕對定位的思考：div 是塊級標籤，若是不加 position 屬性，兩個 div 不會重疊，加了絕對定位，就會重合，爲了防止遮擋內容，給下面的 div 增長外邊框

<style>
    .c1{
        height: 48px;
        width: 100%;
        color: blue;
    }
    .temp{
        color: red;
        margin-top: 48px;
    }
    .c2{
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
    }
</style>

<body>
    <div class="c1 c2"></div>
    <div class="temp"></div>
</body>

相對定位（外層：position: relative; 內層：position: absolute;）

 1 <style>
 2     .c1{  
 3         postion: relative;
 4         border: 1px red solid;
 5         height: 500px;
 6         width: 500px;
 7     }
 8     .c2{
 9         height: 80px;
10         width: 80px;
11         color: blue;
12         position: absolute;
13     }
14 </style>
15 <body>
16     <div class="c1"> //外邊框，如下四個方塊
17         <div class="c2"></div> //默認在左上
18         <div class="c2" style="right:0;top:0; color:green"></div>
19         <div class="c2" style="right:0;bottom:0; color:red"></div>
20         <div class="c2" style="left:0;bottom:0; color:yellow"></div>
21     </div>
22 </body>

分層時的展現優先級（z-index，優先展現 z-index 值大的）

鼠標懸浮屬性（鼠標懸浮時顯示小👋）

<input type="button" value="Login" style="cursor:pointer">

圖片填充（不作任何處理時，邊框和圖片默認從左上排列）

<style>
    .c1{
        height: 100px;
        width: 100px;
        border: 1px red solid;
        overflow: auto; //自適應，超出邊框大小時有 scoll
        // overfllow: scoll; (無論是否超出邊框都展現 scoll）
        // overflow: hidden; （裁剪）
    }
    .c2: hover{
        background-color:blue;    //鼠標懸浮變色
    }
</style>
<body>
    <div class="c1">
        <img src="...">
    </div>   
    <div class="c2">    //懸浮變色
    </div>
</body>

鼠標懸浮變色（如上）

背景圖

 1 <style>
 2     .c3{
 3         width: 100px;
 4         height: 100px;
 5         background-img: url("...");
 6         background-repeat: repeat-x; //橫向堆疊
 7         // repeat-y (豎向堆疊)
 8         // repeat:none(不堆疊)
 9     }
10 </style>
11 <body>
12     <div class="c3"></div>
13 </body>

background-repeat: repeat; //平鋪java

背景圖的位置展現

 1 <style>
 2     .c1{
 3         width:100px;
 4         height: 100px;
 5         background-img: url("...");
 6         background-position: 0 0;    // 0 0 分別表明 xy 軸
 7     }
 8 </style>
 9 <body>
10     <div class="c1"></div>
11 </body>