小燕子乾隆双龙戏珠,又爽又色又高潮的国产精品,亚洲成色a片77777在线麻豆

一、前端介紹

HTML：用來勾勒出頁面的結構和顯示的內容
CSS：用來美化頁面的
JavaScript：給頁面添加動態的效果和內容
jQuery：用來簡化JavaScript代碼的框架

二、 HTML

2.1 介紹

Hyper Text Mark Language：超文本標記語言
什么是超文本：不僅僅包含文本，還包括文本的字體效果，多媒體相關（音頻、視頻）
學習html主要學習的就是有哪些標簽，標簽內部有哪些屬性,標簽和標簽間的嵌套關系
XML中的標簽可以自定義，HTML中的標簽是提前定義好的

2.2 創建html文件

html是一種文本文件，新建文本文件改成html類型即可
或者在IDE中，新建html文件

2.3 HTML頁面結構

<!-- 文檔聲明，告訴瀏覽器使用哪個版本的標準解析此頁面 此寫法是最高版本h5的寫法-->
<!DOCTYPE html>
<html><!-- 除了聲明所有的標簽都在html標簽內部 -->
    <head><!-- 頭：里面的內容是給瀏覽器看的 -->
        <meta charset="UTF-8"><!-- 告訴瀏覽器頁面的字符集 -->
        <title>第一個頁面</title><!-- 頁面標題 顯示在瀏覽器的選項卡中 -->
    </head>
    <body><!-- 體：里面的內容是給用戶看的 -->
        內容
    </body>
</html>

2.4 文本標簽

h1-h6 內容標題標簽，內容獨占一行屬性：align=left/right/center
p 段落標簽內容獨占一行
hr 水平分割線

2.5 列表標簽

2.5.1 無序列表

<ul>  <!--unordered無序 list列表-->
    <li></li> <!--list列表 item項-->
    <li></li>
    <li></li>
</ul>

2.5.2 有序列表

<ol type="1" reversed="reversed" start="10"> 
    <li>打開冰箱門</li>
    <li>把大象裝進冰箱</li>
    <li>關上冰箱門</li>
</ol>

2.5.3 定義列表

    <dl><!--defined定義 list列表  -->
        <dt>涼菜</dt><!--defined  title標題  -->
        <dd>大拌菜</dd><!--defined  data數據  -->
        <dd>花毛一體</dd>
        <dd>拍黃瓜</dd>
        <dt>炒菜</dt>
        <dd>宮保雞丁</dd>
        <dd>木須肉</dd>
        <dd>小炒肉</dd> 
    </dl>

2.5.4 嵌套列表

    <ol><!--有序列表和無序列表可以任意無限嵌套-->
        <li>ol1</li>
        <li>ol2
            <ul>
                <li>第二層1</li>
                <li>第二層2</li>
                    <ol>
                        <li>第三層1</li>
                        <li>第三層2</li>
                        <li>第三層3</li>
                    </ol>
                <li>第二層3</li>
            </ul>
        </li>
        <li>ol3</li>
    </ol>

2.5.5 列表嵌套練習：

樣例

image.png

代碼

  <ol>
      <li>java基礎
          <ul>
              <li>變量</li>
              <li>數據類型</li>
              <li>運算符</li>
              <li>流程控制
                  <ul>
                      <li>if</li>
                      <li>switch</li>
                      <li>while</li>
                      <li>for</li>
                  </ul>
              </li>
          </ul>
      </li>
      <li>java面向對象</li>
      <li>javaAPI</li>
  </ol>

2.6 元素(標簽)的分類

塊級元素：獨占一行
- h1-h6
- p
- hr
行內元素：和其它行內元素共占一行
- 斜體：em i
- 加粗：strong b
- 下劃線： u
- 刪除線： del s
行內元素的多個空格折疊問題，當多個空格存才時只能顯示一個

2.7 常見特殊字符

1. 空格  `&nbsp`
2. <  `&lt`
3. >  `&gt`

2.8 分區標簽

分區標簽自身沒有顯示效果，可以充當容器的作用，用于包含多個功能相關元素，可以進行元素的整體控制。
div：塊級分區元素，獨占一行
span：行內分區元素，和其它行內元素共占一行

開發頁面時通常會分為三大區

  <body>
      <div>頭部</div>
      <div>體部</div>
      <div>腳部</div>
  </body>

H5標準中新增的分區標簽作用和div一樣但是更直觀

  <body>
      <header>頭部</header>
      <nav>導航</nav>
      <article>文章，正文</article>
      <footer>腳部</footer>
  </body>

2.9 圖片 img

2.9.1 格式

<img src="圖片路徑">

2.9.2 路徑分為兩種：

相對路徑：訪問站內資源使用相對路徑（相對于當前html頁面文件路徑，資源所在地方）
- 圖片和頁面同一目錄，直接寫圖片名稱
- 圖片在頁面的上級目錄, ../圖片名
- 圖片在頁面的下級目錄, 文件夾名/圖片名
絕對路徑：訪問其它網站的資源使用絕對路徑，以http開頭，存在風險，如果目標圖片路徑發生改變則不能顯示

2.9.3 常用屬性：

alt: 當圖片不能正常顯示的時候顯示此內容
title：當鼠標在圖片上懸停的時候顯示此內容
width/height: 設置圖片的寬度和高度，可以設置像素px或百分比%，如果只設置寬度則高度等比例縮放
支持的圖片格式： jpg/jpeg不支持透明色 png支持透明色 GIF動圖

2.9.4 圖片地圖

<img src="../imgs/b.jpg" width="1000px" usemap="#mymap">
<map name="mymap" id="mymap">
    <area shape="circle" coords="345,250,50" href="../imgs/k.jpg">
    <area shape="circle" coords="460,390,50" href="day01.zip"> 
</map>

shape 形狀
coords 坐標
href: 值為路徑，可以寫相對路徑和絕對路徑，路徑可以指向頁面，圖片，如果指向的文件瀏覽器不能打開則會下載文件

2.10 超鏈接 a

格式: <a href="" target="_blank">顯示內容</a>
href: 值為路徑，相對路徑和絕對路徑，路徑可以指向頁面或文件（瀏覽器支持的格式直接瀏覽，不支持的格式下載）
target="_blank"，跳轉頁面時開啟一個新的窗口顯示此頁面，如果不加則從當前窗口跳轉
a標簽和img標簽嵌套實現圖片添加點擊事件
錨點用法：href內填寫#id，則可以點擊跳轉到頁面中id為id的元素地方

2.11 表格標簽 table tr td

table屬性：
- border邊框粗細
- cellspacing單元格與外邊框的間距
- cellpadding單元格與內容的間距
- bgColor背景顏色
- width 寬度
- align 對齊方式
td屬性：
- colspan 跨列
- rowspan 跨行
表格分組標簽：
- thead 頭分組
- tbody 體分組
- tfoot 腳分組
th：表頭和td的區別就是th里面的內容會字體加粗
caption：表格的標題居中顯示在table的正上方

2.12 表單form相關

2.12.1 表單的作用：獲取用戶輸入的各種信息

<form action="" method="">
    各種表單控件……
</form>

action:提交的地址,后臺處理模塊地址、名
method:提交方式，有get和post兩種
- get方式，數據直接顯示在url上進行提交，速度快，安全性低；
- post方式提交后臺異步提交，數據不顯示，速度略慢，相對get更安全

2.12.2 常見表單相關的控件：

文本框

image.png
```
  <input type="text" size="30" name="user" maxlength="5" placeholder="哈" value="這是文本框"/> 
```
- type：類型是文本框
- size：長度
- name：提交數據時的鍵（key），用戶輸入的內容為值
- maxlength:最大字符長度
- value:設置默認值
- readonly:只讀
- placeholder：占位文本-->
密碼框

image.png

    <input type="password" value="這是密碼框" name="password" placeholder="密碼" maxlength="6"/>

單選

image.png

    <input type="radio" name="group1"> 
    <input type="radio" name="group1">
- 單選中name相同的為一組，可以實現選中一個后同組中其他單選被棄選 
- checked表示已經被選上

多選（復選框）

image.png

    <input type="checkbox" name="hobby" value="ldm" id="ldm">
    <input type="checkbox" name="hobby" value="wzry" id="wzry" checked>
    <input type="checkbox" name="hobby" value="gdx" id="gdx" checked>
- name相同為一組，可以實現對于一個需要多個數據的業務一次提交一組數據
- checked表示已經被選上

下拉選

image.png

    <select name="city">
        <option>請選擇</option>
        <option value="bj">北京</option>
        <option value="sh" selected>上海</option>
        <option value="gz">廣州</option>
    </select>
- 用于規定數據選擇范圍，只能從中選一個，selected表示已經被選上

日期選擇器

image.png

    <input type="date" name="birthday">

文件選擇器

image.png

    <input type="file" name="pic">

文本域

image.png

    <textarea rows="3" cols="20" name="intro">這家伙很懶。。。</textarea>
- rows和cols表示幾行幾列

按鈕

image.png

    <input type="reset" value="重置按鈕"> //點擊會將表單內容清除
    <input type="button" value="自定義按鈕"> 
    <input type="submit" value="提交按鈕">//點擊會提交表單

隱藏域：用于不需要用戶沒必要知道、看到、操作，僅僅用來存放數據提交等情況
```
  <input type="hidden" name="userid" value="198"> 
```
標簽label：給一些選項加上文字標簽，更直觀
- image.png

        <input type="checkbox" name="hobby" value="wzry" id="wzry" checked/>
        <label for="wzry">王者榮耀</label> 
- for對應誰的id就給誰加上標簽

2.12.3 代碼舉例：

樣例：

image.png

代碼

  <form action="http://doc.tedu.cn" method="get">
      <!--文本框-->
      <input type="text" size="30" name="user" maxlength="5" value="啦啦" placeholder="哈"/><br>
      <!-- 密碼框 -->
      <input type="password" name="password" placeholder="密碼" maxlength="6"/><br>
      <!-- 單選 -->
      性別: <input type="radio" name="gender" value="nan"/>男 
          <input type="radio" name="gender" value="nv" checked/>女<br>
      <!-- 多選 -->
      興趣: <input type="checkbox" name="hobby" value="dlq" id="dlq"/>
              <label for="dlq">打籃球</label> 
              <input type="checkbox" name="hobby" value="ldm" id="ldm"/>
              <label for="ldm">擼代碼</label>
              <input type="checkbox" name="hobby" value="wzry" id="wzry" checked/>
              <label for="wzry">王者榮耀</label> 
              <input type="checkbox" name="hobby" value="gdx" id="gdx" checked/>
              <label for="gdx">搞對象</label> <br>
      <!-- 下拉選 -->
      城市：<select name="city">
                  <option>請選擇</option>
                  <option value="bj">北京</option>
                  <option value="sh" selected>上海</option>
                  <option value="gz">廣州</option>
          </select><br>
      <!-- 時間選擇器 -->
      生日：<input type="date" name="birthday"><br>
      <!-- 文件選擇器 -->
      靚照：<input type="file" name="pic"><br>
      <!-- 文本域 -->
      <textarea rows="3" cols="20" name="intro">這家伙很懶。。。</textarea><br>
      <!-- 隱藏域 -->
      <input type="hidden" name="userid" value="198"> 
      <hr>
      <!-- 重置按鈕 -->
      <input type="reset" value="重制"> 
      <!-- 自定義按鈕 -->
      <input type="button" value="自定義按鈕"> 
      <!-- 提交按鈕 -->
      <br><input type="submit" value="提交">

三、 CSS層疊樣式表單

3.1 介紹

用來控制網頁元素的各種樣式，顏色、對齊、大小、寬高、布局等等
網頁的3個層：
- 內容層： HTML承載頁面的內容
- 表示層： CSS 的作用就是給網頁做化妝的，實現顯示效果
- 行為層： JS 為網頁添加程序行為

3.2 第一個CSS

<style type="text/css">
    /*** 第一個CSS 把所有p標簽內容變為紅色***/
    p{color: red}
</style>

3.3 CSS 注釋

css 中只能使用 /* */ 注釋，不能使用 // 也不能使用 ``
如果使用錯誤的注釋，會造成CSS效果顯示失敗。

3.4 CSS的3種使用方式

內聯式CSS：
- 直接寫在元素的style屬性中的css樣式
- 具有最高的優先級別
- 只作用在當前元素上，不能復用的樣式
```
  <p style="color:red">哈哈哈</p>
```

網頁內嵌式：

使用 <style>元素嵌入到頁面中的CSS樣式

作用在當前頁面中的元素，可以在當前頁面范圍內復用

      <style type="text/css">
          /*** 把所有p標簽內容變為紅色***/
          p{color: red}
      </style>
      
      <p>哈哈哈</p>

外聯式
- 樣式保存在.css文件中
- 使用 <link> 元素引用到當前頁面中的樣式
- 可以作用在所有引用了CSS文件的網頁，可以在這些網頁復用
```
  <link href="css/bootstrap.min.css" rel="stylesheet">
```
- 大型網站一般都使用外部式CSS

3.5 CSS 樣式的優先級

當內聯樣式，內部樣式，外部樣式，等多個樣式作用在同一個元素時候，元素最終優先采用的樣式。稱為樣式的優先級。
瀏覽器（用戶代理）默認樣式優先級最低。
內部樣式，外部樣式，哪個距離元素近，哪個優先
內聯樣式優先級最高
內聯 > 內嵌 > 外聯 > 瀏覽器

3.6 CSS 繼承特性

元素有父子嵌套關系時候，外層設置的可繼承CSS屬性，可以被子元素繼承。

常見的可繼承屬性：顏色，字體等

  <div style="color:red">
      哈哈哈
      <p>呵呵呵</p>
  </div>
  <!--這里‘哈哈哈’和‘呵呵呵’都會變成紅色，p繼承了父元素的css屬性-->

3.7 CSS 語法

3.7.1 選擇器

元素選擇器：使用元素名選擇全部的同類元素

  /*將所有p標簽內容顏色變紅*/
  p {color: red}

id 選擇器：使用#id選擇頁面中唯一的一個元素
```
  /*將id為menu的元素內容顏色變紅*/
  #menu {color: red}
```
- 網頁中的ID屬性應該唯一

類選擇器：使用.class 選擇一組具有相同class屬性的元素
```
  /*將所有class含error的元素內容變紅*/
  .error {color: red}
```
- 一個元素上可以使用多個class，綁定多個類選擇器樣式

派生選擇器：利用元素的層級關系選擇元素，綁定樣式

子孫后代選擇

  /* 選擇 div 中全部的子孫p元素內容顏色變成紅色 */
  div p {color: red;}

子選擇

  /* 選擇div下一層的p元素（不包括p中再下一級的其他p元素）顏色變為紅色 */
  div>p {color: #ddd}

選擇器組：為了給一組元素設置一致樣式，可以使用組選擇器

  h1, h2, h3, h4, h5 {boder-bottom: 1px solid #ddd;}

  /*相當于*/

  h1{boder-bottom: 1px solid #ddd;}
  h2{boder-bottom: 1px solid #ddd;}
  h3{boder-bottom: 1px solid #ddd;}
  h4{boder-bottom: 1px solid #ddd;}
  h5{boder-bottom: 1px solid #ddd;}

偽類選擇器：用于設置元素的不同顯示狀態時候的效果
- 鼠標懸停：hover 用于設置鼠標停留在元素上面時候的顯示效果。
```
  hover{
      color:red;
  }
```

復合使用選擇器：id，類，元素，偽類等選擇器可以組合使用

  p.error{樣式}  /*選擇p元素，其class屬性包含 error/*
  p.error:hover{樣式} /*選擇p元素，其class屬性包含 error 并且設置鼠標懸停在上方的效果/*

3.7.2 CSS 常用屬性

關于值的單位，常用屬性值：
- px 像素
- em 字體大小
- % 百分比
- 顏色字面量 red blue 等
- 16進制RGB顏色如： #48547d

文本相關屬性

文字的縮進

  text-indent: 2em; /* 文本縮進2個字符 */

設置字體大小
```
  font-size: 12px;
```
行高
```
  line-height: 1.6em;
```
設置文字顏色
```
  color: #48547d;
```

塊元素中的文本居中

  text-align: center; /* 塊元素中的文本居中 */

3.8 盒子模型（塊狀block、行內-塊狀inline-block元素全部起效）

3.8.1 一個元素從外到內應該具有外邊距、邊框、內邊距、寬高

寬高：元素的寬高
外邊距：距相鄰元素或上級元素的距離
邊框：元素的邊框
內邊距：內容距元素邊框的距離

image.png

3.8.2 粘連問題

當元素的上邊緣和上級元素的上邊緣重疊時，此時給元素添加上外邊距會導致上級元素聯動的效果，給上級元素添加 overflow:hidden 解決。
- 案例1，沒帶overflow:hidden
  
  image.png

        <div style="width:300px;height:200px;background-color:#ff9900;overflow:hidden">
            <div style="width:250px;height:150px;background-color:#dd5555;margin:25px">
            </div>
        </div>

案例2，加上overflow:hidden

image.png

        <div style="width:300px;height:200px;background-color:#ff9900;overflow:hidden">
            <div style="width:250px;height:150px;background-color:#dd5555;margin:25px">
            </div>
        </div>

3.8.3 利用盒子模型，移動元素

給上級元素添加內邊距，移動內容；影響：【會影響上級元素的寬高】
給元素自身添加外邊距，推薦使用這種方式，不會影響寬高

3.8.4 寫法

margin和padding

一步到位法：遵守順序：上右下左

  margin：5px 10px 15px 20px
  /* 代表上右下左外邊距分別為5px 10px 15px 20px */
  
  /* 上下一致，左右一致時能簡寫為 */
  margin：5px 10px
  
  /* 上下左右一致時能簡寫為 */
  margin：5px

單獨設置法：

  margin-left:5px
  /* 代表左外邊距分別為5px */
  /* 其他方向類比即可 */

boeder,由于需要設置樣式、顏色、粗細，所以略有不同

一步到位法：樣式、顏色、粗細可寫可不寫

  border：solid 1px red
  /* 代表邊框為：實線，1像素粗細，紅色 */

單獨設置法：

  border-left：solid 1px red
  /* 代表只設置左邊框為：實線，1像素粗細，紅色 */
  /* 其他方向類比即可 */

補充：塊狀、行內-塊狀元素的垂直對齊方式

可以使用控制行高和高度一致的方式（前提，高已經確定）
可以控制子元素的上下外邊距相同（前提，高已經確定）

3.9 行內元素inline 關于盒子模型的問題

設置寬高：沒有效果，行內元素的寬高只受內容影響
設置外邊距：上下沒有效果，左右起效
設置邊框：四個邊框都會有效果但是左右邊框占顯示范圍，上下邊框不占顯示范圍
設置內邊距：四個方向都生效，但是左右內邊距會占顯示范圍，上下不占顯示范圍

補充：行內元素的垂直對齊方式

vertical-align:top/middle/bottom/baseline（默認）

3.10 相鄰兩個元素，左右外邊距是相加，上下外邊距取最大值

3.11 定位position

1、文檔流定位(靜態定位)：

static，默認定位方式，如果是塊級元素從上到下，如果行內元素就是從左向右。

2、相對定位：

relative，不會脫離文檔流，上下左右的值相對于元素的初始位置

3、絕對定位：

absolute，脫離文檔流，上下左右的值相對于窗口或祖先元素中做過非static定位的元素(一般使用relative，因為其它會導致脫離文檔流，影響其它元素的顯示效果)

4、固定定位：

fixed，脫離文檔流，上下左右的值相對于窗口。

3.12 浮動

浮動定位：float:left/right，脫離文檔流，元素可以在當前所在行內左側或右側浮動，當撞到父元素的邊框或者另一個浮動的元素時停止
如果一行裝不下會自動換行，換行時可能出現被卡住的現象
當所有子元素全部浮動，自動識別的高度為0，通過overflow:hidden解決此問題
clear:both/left/right，兩側/左側/右側不允許有浮動元素（自身元素不會頂上去）
應用場景：當縱向排列的元素需要改成橫線排列的時候使用浮動定位。

3.13 背景設置

設置盒子模型的 border以內部分的背景繪制效果。

方式

設置背景色 background-color:red
設置背景圖片 background-image:url(...)

設置圖片的重復方式

 background-repeat:no-repeat不重復
 background-repeat:repeat-x x方向重復
 background-repeat:repeat-y y方向重復

設置圖片的偏移位置

 background-position: 5px 5px
 background-position-x/y

3.14 元素的顯示方式

有3種：
- 塊： div, h1 ~ h6, p 等
  - 獨立占有行，可以設置寬高
- 行內：span b i u label 等
  - 不獨立占有行，和其它文本混合在一行，不能設置寬高！
- 行內塊
  - 不獨立占有行，和其它文本混合在一行，能夠設置寬高！
利用CSS可以更改元素的顯示方式，從行內元素顯示方式更改為塊（行內塊）元素，為了設置元素的寬高，進行布局占位。
```
  display：block/inline/inline-block 進行切換
```

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

# HTML+CSS # —— 常用知識整理

一、 前端介紹