一個初學者的辛酸路程-前端知識

時間 2019-11-12

標籤一個初學者辛酸路程前端知識欄目職業生涯简体版

原文原文鏈接

1、主要內容

一、HTML （20個標籤）

二、CSS （顏色和位置）

三、JS

2、HTML

head標籤

一、doctype 對應關係

<!DOCTYPE html>

二、html 標籤，標籤內部能夠寫屬性

```
<html lang="en">
```

三、註釋：

<!-- 相似html這種格式，標籤，叫作html標籤 -->

例如：

寫一個a標籤，點擊跳轉到指定的URL

須要在body裏面寫：

<body>
    <a href="http://www.cn.bing.com";>必應</a>
</body>

四、標籤分類

head下面的東西

自閉和標籤：沒有一個主動的結尾，例如：

```
<meta charset="UTF-8">
```

其餘都是主動閉合

刷新

<meta http-equiv="refresh" content="3" >

多少s跳轉到網站

<meta http-equiv="refresh" content="3;Url=http://www.cn.bing.com" >

關鍵字

<meta name="keywords" content="星際2，測試"

描述

<meta name="description" content="汽車之家提供權威報價">

IE主動兼容高版本

<meta http-equiv="x-ua-compatible" content="IE=IE9;IE=IE8;">

搞個圖標

<link rel="shortcut icon" href="image/favicon.ico">

小結：

head標籤中：

<meta> 編碼，跳轉，刷新，關鍵字，描述，IE兼容

title 標籤：IE上顯示名稱，能夠爲任意自定義

link 搞圖標

style

script

body標籤

空格

<a href="http://www.cn.bing.com">必&nbsp;應</a>

大於號和小於號

<a href="http://www.cn.bing.com">必&gt;&lt;應</a>

p標籤和br

<p>段落段落段落段落段落<br />段落段落段落段落段落段落段落</p>
<p>段落</p>
<p>段落</p>

實現效果：

h加大加粗，塊級標籤，佔用一整行

<h1>發財</h1>
<h2>發財</h2>
<h6>發財</h6>

span標籤，行內標籤，只佔本身

<span>hello</span>
<span>hello</span>
<span>hello</span>

div 標籤，白板，塊級標籤

```
<div>1</div>
<div>2</div>
<div>3</div>
```

定位到右下角：

<div id="i1" style="position: fixed;bottom: 0;right: 0;">我要找它</div>

小結：

body標籤中：

全部標籤分爲2類：塊級標籤（即便內容少也佔一整行），行內標籤（本身有多少佔用多少）

塊級標籤：div（白板），H系列（加大加粗），p標籤（段落和段落之間有間距）

行內標籤： span（白板）

標籤之間能夠嵌套

標籤存在的意義，CSS操做，JS操做

chorme審查元素的使用

body內標籤之input系列

登陸頁面

input 系列：

input type=‘text’ name屬性 value=「test」默認值

input type='password' name 屬性 value=「1234」默認值

input type='submit' value=「提交」提交按鈕，表單

input type='radio' 單選框 value,name 屬性（name相同則互斥） checked=checked默認選中

input type='checkbox' 複選框 value，name屬性（批量獲取數據） checked=checked默認選中

input type='file' 依賴form表單的一個屬性enctype="multipart/form-data"

input type=reset" 重置

<textarea>默認值放中間</textarea> - name 屬性

select標籤 name，內部option value ，提交到後臺，size，multiple

img - src alt title

<form action="http://www.baidu.com">
    <input type="text" name="user" />
    <input type="password" name="pwd" />
    <input type="button" value="登陸1"/>
    <input type="submit" value="登陸2"/>
</form>

分析：

向後臺發數據： form標籤

發給誰： form標籤內的action

按鈕： input標籤裏的type="submit"

提交默認：默認是GET 或者在form標籤寫上method="GET"或method="POST"

提交到別人的服務端，直接跳轉

<form action="https://www.cn.bing.com" >
    <input type="text" name="query" />
    <input type="submit" value="搜索" />
 
</form>

選擇性別而後提交到後臺

<form>
    <div>
        <p>請選擇性別：</p>
        男：<input type="radio" name="gender" value="1" />
        女：<input type="radio" name="gender" value="2" />
        中：<input type="radio" name="gender" value="3" />
        <input type="submit" value="提交" />
    </div>
</form>

終極版本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form enctype="multipart/form-data ">
        <div>
            <p>請選擇性別：</p>
            男：<input type="radio" name="gender" value="1" checked="checked" />
            女：<input type="radio" name="gender" value="2" checked="checked" />
            中：<input type="radio" name="gender" value="3" />
 
            <p>愛好</p>
            籃球：<input type="checkbox" name="favor" value="1" checked="checked" />
            足球：<input type="checkbox" name="favor" value="2" />
            檯球：<input type="checkbox" name="favor" value="3" />
            網球：<input type="checkbox" name="favor" value="4" />
 
            <p>技能</p>
            幹活：<input type="checkbox" name="skill" value="1"/>
            搞事情：<input type="checkbox" name="skill" value="2" />
 
            <p>上傳文件</p>
            <input type="file" name="fname" />
            <input type="reset" value="重置" />
        </div>
        <input type="submit" value="提交" />
    </form>
</body>
</html>

效果圖：

文本框

```
<textarea name="meno" >sdfdd</textarea>
```

下拉框，默認是上海,selected=selected，下拉框有10個 size=10

<select name="city" size="10">
    <option value="1">北京</option>
    <option value="2" selected="selected" >上海</option>
    <option value="3">仙桃</option>
</select>

下拉框多選：在select標籤里加入multiple

<select name="city" size="10" multiple="multiple">
    <option value="1">北京</option>
    <option value="2" selected="selected">上海</option>
    <option value="3">仙桃</option>
</select>

a 標籤

跳轉

<a href="http://www.cn.bing.com" target="_blank">必應</a>

錨（小說的例子，就是點一個跳轉到相應地方）

href=#某個ID" 標籤的ID不容許重複

<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<div id="i1" style="height: 600px;">第一章內容</div>
<div id="i2" style="height: 600px;">第二章內容</div>

引入圖片

<a href="http://www.cn.bing.com">
   <img src="1.jp" title="大美女" style="height: 200px;width: 200px;" alt="美女">
</a>

列表

實現代碼以下：

<ul>
    <li>adf</li>
    <li>adf</li>
    <li>adf</li>
</ul>
 
<ol>
    <li>df</li>
    <li>df</li>
    <li>df</li>
</ol>
 
<dl>
    <dt>123</dt>
    <dd>ttt</dd>
    <dd>ttt</dd>
    <dd>ttt</dd>
</dl>

表格

下面寫到不是很規範

<table border="1">
    <tr>
        <td>主機名</td>
        <td>端口</td>
        <td>操做</td>
    </tr>
    <tr>
        <td>1.1.1.1</td>
        <td>80</td>
        <td>
            <a href="s2.html">查看詳細</a>
            <a href="#">修改</a>
        </td>
    </tr>
</table>

實現效果以下：

點擊查看詳細能夠跳轉到我指定的頁面，點擊修改不跳轉

這會生成就全了：

<table border="1">
    <thead>
        <tr>
            <th>表頭1</th>
            <th>表頭2</th>
            <th>表頭3</th>
            <th>表頭4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

效果以下：

合併單元格，橫向和縱向合併

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

點用戶名出現光標編輯

顯示以下：

代碼以下：

<body>
    <label for="username">用戶名：</label>
    <input id="username" type="text" name="user" />
</body>

實現下面邊框功能

代碼以下：

<fieldset>
    <legend>登陸</legend>
    <label for="username" >用戶名：</label>
    <input id="username" type="text" name="user" />
    <br/>
    <label for="pwd" >密碼</label>
    <input id="pwd" type="password" name="pwd" />
</fieldset>

CSS

咱們能夠在標籤上設置style屬性

```
<divstyle="height: 48px;">1</div>
```

效果以下：

這是一種方法，另外，咱們我能夠在head標籤寫style

ID選擇器

例如：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
           
            height:48px;
        }
    </style>
</head>

而後呢，引用直接寫id=1便可

```
<body>
    <div id="i1">1</div>
```

還有一種class選擇器

```
.c1{
   
    height: 10px;
}
```

引用

```
<span class="c1">dfdf2</span>
```

找到全部的div而後給予上色

標籤選擇器

把全部div設置成此樣式

    div{
           
            color: white;
        }
    </style>
</head>
<body>
    <div class="c1">1</div>
    <span class="c1">dfdf2</span>
    <div class="c1">3</div>
</body>

效果以下：

指定span標籤下面的應用樣式

層級選擇器

```
span div{
   
    color: white;
}
```

body裏面寫的：

<span class="c1">dfdf2
    <div class="c2">sdafs</div>
</span>

效果就是隻給span標籤裏面的div生效

還有就是在.c1 下面加div

```
.c1 div{
    
    color: white;
}
```

效果跟上面是同樣的

層級用空格關聯，下面的組合用逗號來關聯

.i1,.i2,.i3{
   
    color: white;
}
下面的body
<div class="i1">1</div>
<div class="i2">21</div>
<div class="i3">13</div>

這個就是組合選擇器，若是下面是id那麼上面就應該是#i1，#i2，#i3

屬性選擇器：

對選擇到的標籤再經過屬性在進行一次篩選

.c1[n="jixuege"]{width:100px;
   height:200px;}
   
   body裏面的寫法
<input class="c1" type="text" n="jixuege">
<input class="c1" type="password" >

實現效果：

上面就是一大堆的選擇器，class選擇是最多的。

優先級

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
           
            color: white;
 
        }
        .c2{
            /**/
            /*color: white;*/
            font-size: 58px;
            color: black;
        }
    </style>
</head>
<body>
    <div class="c1 c2" style="color: pink;" >fsdfsadf</div>
</body>

優先級順序爲：標籤上的style優先，其餘按照編寫的順序，越往下越優先，就近原則

把css樣式寫到文件裏

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link   rel="stylesheet" href="css/commons.css"
</head>
<body>
    <!--<div class="c1 c2" style="color: pink;" >fsdfsadf</div>-->
    <div class="c1 c2"  >fsdfsadf</div>
</body>

CSS樣式，本質就是把文件拿到而後給你填過來

.c1{
   
    color: white;
 
}
.c2{
    font-size: 58px;
    color: black;
}

邊框

寬度，樣式，顏色

border solid red

<div style="border: 1px solid red;" >
        sdfsdf
</div>

高度和寬度的練習：

<div style="height: 48px;width: 80%; border: 1px solid red;" >
        sdfsdf
</div>

效果

字體大小：font-size: 36px;

字體顏色： color

高度： height

寬度： width 像素和百分比均可以

水平方向居中：text-align: center;

文字放在中間：line-height: 48px; 水平和垂直都居中，要給height值相同

加粗：font-weight: bold;

重點來了，float，飄

需求：

把整個屏幕分紅二塊，如何實現？

float 讓標籤浪起來，塊級標籤也能夠堆疊

<div style="width: 20%;float: left;">1</div>
<div style="width: 60%;">1</div>

實現效果：

但凡遇到左邊一個右邊一個，固定一個都要用到float

其實就是div嵌套div，而後裏面來回float ，而後須要用<div style="clear: both;"></div>來壓他們。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 38px;
           
            line-height:38px;
        }
    </style>
</head>
<body style="margin: 0;">
    <div class="pg-header">
        <div style="float: left;" >收藏本站</div>
        <div style="float: right;" >
            <a>登陸</a>
            <a>註冊</a>
            <a>個人訂單</a>
            <a>VIP會員俱樂部</a>
            <a>客戶服務</a>
            <a>關注</a>
            <a>手機版</a>
        </div>
    </div>
    <div style="width: 300px;border: 1px solid red;">
          <div style="width: 96px;height: 30px;border: 1px solid greenyellow;float: left;"></div>
          <div style="width: 96px;height: 30px;border: 1px solid greenyellow;float: left;"></div>
          <div style="width: 96px;height: 30px;border: 1px solid greenyellow;float: left;"></div>
          <div style="width: 96px;height: 30px;border: 1px solid greenyellow;float: left;"></div>
          <div style="width: 96px;height: 30px;border: 1px solid greenyellow;float: left;"></div>
            <div style="clear: both;"></div>
    </div>
</body>
</html>

實現效果

塊級轉換爲內聯標籤，經過display：inline 和block inline-block

<div style="display: inline;">asd</div>
<span style="display: block;">asd</span>

行內標籤：沒法設置高度，寬度，

塊級標籤：設置高度，寬度

<span style="display: inline-block; height: 50px;">alex</span>

display：none 讓塊消失，用法，視頻網站的開燈關燈

邊距padding margin(0,auto)

內邊距padding和外邊距margin

應用：

默認狀況 html兩邊有邊距，想去掉

<body style="margin: 0" >

相關標籤/搜索

每日一句

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