Web前端之HTML+CSS的知識總結

Tom學Java發表於2020-10-23
Web前端HTMLCSS

Html和CSS的關係

學習web前端開發基礎技術需要掌握：HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術都是用來實現什麼的：

  1. HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓使用者瀏覽的資訊，可以包含文字、圖片、視訊等。

  2. CSS樣式是表現。就像網頁的外衣。比如，標題字型、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。

  3. JavaScript是用來實現網頁上的特效效果。如：滑鼠滑過彈出下拉選單。或滑鼠滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這麼理解，有動畫的，有互動的一般都是用JavaScript來實現的。

HTML篇

認識html

  • html不是一種程式語言，是一種標記語言。
  • 標記語言是由一套標識標籤組成的
  • html使用標籤來描述網頁

html結構

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

不成對出現的標籤
<br> <hr> <meta> <img> <input..> <option> <link>

html基本標籤講解

<html> <head> <body> 標籤
<h1>—<h6> 僅僅用於標題文字，不要為了產生粗體文字使用它們
<p> 段落標籤
<strong> <b> 標籤 讓文字產生加粗效果

  • <strong>用於強調文字，強度更深，表示重要文字—>用於SEO優化
  • <b>只是視覺加粗效果—>單純為了產生加粗

<em> <i> 標籤

  • em用於強調文字
  • i只是視覺斜體效果
  • <strong>比<em>強調更強

特殊符號：
&nbsp; —->空格
&gt; —>大於號
&lt；—>小於號
&quot；—>引號
&copy;–>版權號

HTML基本標籤

span 標籤
            對被用來組合文件中的行內元素
          注意：span沒有固定的格式表現，當對它應用樣式時，才會產生視覺上的變化
<pre> 標籤
            文字的格式按原始碼的排版來顯示，我們稱之為預處理格式
<a>標籤—>他有一個必不可少的屬性 href
        target屬性：
        _self(在原來頁面開啟)
        _blank（新視窗開啟）
        _top（開啟時忽略所有的框架）
        _parent（在父視窗中開啟）

建立錨點和錨連結
        錨點也是一種超連結，是頁面內進行跳轉的超連結
                第一步：建立錨點 <a name="錨點名稱"></a>
               第二步：使用建立好的錨點名稱 <a href="#錨點名稱">內容</a>

marquee標籤
        可以建立一個內容滾動效果

<marquee direction="down" loop="4" οnmοuseοver=this.stop() οnmοuseοut=this.start()></marquee>

direction表示滾動方向，取值有（left,right,up,down,預設left）
loop表示滾動迴圈的次數，預設為無限迴圈

 οnmοuseοver=this.stop()  οnmοuseοver=this.start()  scrollamout="1"(滾動速度)

表示當滑鼠移上區域的時候停止滾動，滑鼠移開繼續滾動

img圖片標籤與路徑

圖片標籤與路徑：

  • 常見圖片格式：jpg/Jpeg png(半/全透明都支援) gif(只支援全透明)

圖片標籤寫法：

<img src=" " alt=" " width=" " height=" " />

圖片四要素：
src="" 圖片路徑
alt="" 圖片含義
width=""圖片寬度 和圖片大小保持一致
height=""圖片高度 和圖片大小保持一致
title="" 標題

相對路徑、絕對路徑：

  • 相對路徑：(Relative Path) 相對於該檔案的路徑；
  • 絕對路徑：(Absolute Path) 從磁碟出發的路徑；

列表

1、無序列表
<ul> 無序列表

  • 無序列表是一個沒有順序專案的列表，此列表項預設粗體圓點進行標識
<ul>
   <li> </li>
    <li> </li>
     <li> </li>
</ul>

2、有序列表
有序列表也是一列專案，只是列表專案使用的是數字進行標記。 有序列表始於 <ol> 標籤。每個列表項始於 <li>標籤。

<ol>
             <li>內容一</li>
             <li>內容二</li>
             <li>內容三</li>
 </ol>

列表符號

  • 無序列表-列表符號：
    type="circle"空心圓 type=“disc”實心圓 預設值 type="square" 方塊符
  • 有序列表-列表符號
    1、type="A" A B C D
    2、type="a"a b c d
    3、type="1"1 2 3 4 預設值type=”I” I II III type=”i” i ii iii

3、無序列表-巢狀

   <ul>

         <li>柚子
       
          <ul>
       
              <li>沙田柚</li>
   
              <li>蜜柚</li>
    
           </ul>
    
         </li>
      
         <li>荔枝</li>
 
         <li>蘋果</li>
</ul>

4、有序列表-巢狀

<ol>
      
         <li>茶
              <ul>
             		 <li>紅茶</li>
          			 <li>綠茶</li>
       
             </ul>
      
         </li>
         <li>果汁</li>
         <li>牛奶</li>
</ol>

5、定義列表

  • 定義列表不僅僅是一列專案，而是專案及其註釋的組合
  • 定義列表以 <dl> 標籤開始。每個定義列表項以 <dt>開始。每個自定義列表項的定義以 <dd> 開始。
<dl>
  <dt>pc網頁製作</dt>
  <dd>學習DIV+CSS JS JQ 專案實戰/dd>
  <dt>手機網頁製作</dt>
  <dd>手機網頁製作實戰</dd>
</dl>

dd是對dt的解釋

< dl>< /dl>用來建立一個普通的列表,
< dt>< /dt>用來建立列表中的上層專案，
< dd>< /dd>用來建立列表中最下層專案，
< dt>< /dt>和< dd>< /dd>都必須放在< dl>< /dl>標誌對之間。

 <dl>

            <dt>中國城市</dt> 
           		 <dd>北京 </dd>
            	 <dd>上海 </dd> 
            	 <dd>廣州 </dd>
            <dt>美國城市</dt>
           		 <dd>華盛頓 </dd>
            	 <dd>芝加哥 </dd>
            	 <dd>紐約 </dd>
        </dl>

dl是definition list的縮寫
dt是definition title的縮寫
dd是definition description的縮寫

list-style屬性具有三個屬性分量：
list-style-position：設定列表項圖示的位置，位於文字內或者文字外
list-style-type： 設定列表項圖示的型別
list-style-image：使用影像設定列表項圖示

表單元素

<form>表單標籤
          <form>表單是一個包含表單元素的區域，包括起來的都是表單的內容

<form>
         <input type="text"/>
 </form>

html標籤 - Action和確認按鈕

  • 當使用者單擊確認按鈕時，表單的內容會被傳送到另一個檔案。表單的動作屬性定義了目的檔案的檔名。由動作屬性定義的這個檔案通常會對接收到的輸入資料進行相關的處理。
<form action="html.do" method="get">    
  
                username:  <input type="text" name="user" />   
                <input type="submit" value="提  交" /

 </form>

<input>標籤常用type型別

<input type="" name="" value="" />
type="text"單行文字輸入框
type="password" 密碼（maxlength=""）
type="radio" 單項選擇（checked="checked"）
type="checkbox"多項選擇
type="button"按鈕
type="submit"提交 type="image"圖片提交
type="file"上傳檔案
type="reset"重置
type="hidden"隱藏

<label>標籤

<label></label>

label 元素不會向使用者呈現任何特殊效果。
不過，它為滑鼠使用者改進了可用性。
如果您在 label 元素內點選文字，就會觸發此控制元件。
就是說，當使用者選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制元件上。

<p>單向選擇</p>
   
            <label for="male">男：</label><input type="radio" name="sex" id="male"/>
           
            <label for="nv">女：</label><input type="radio" name="sex"checked="check"/>

表單和表格標籤：
<textarea>文字域標籤
<textarea>標籤：
<textarea></textarea>是文字域標籤，可以在其中插入一段文字內容，它有兩個常用屬性rows和cols

  • rows表示這個文字域有多少行
  • cols表示這個文字域有多少列
  • 除了這兩個屬性它還有readonly（只讀，文字域的內容無法改變，相當於協議）和title（滑鼠放上提示）

<select>標籤的掌握

當提交表單時，瀏覽器會提交選定的專案，或者收集用逗號分隔的多個選項，將其合成一個單獨的引數列表，並且在將 表單資料提交給伺服器時包括 name屬性

  <form>     
                <select name=""  id="">
                     <option value="1">1月</option>  
                      <option value="2">2月</option>      
    
            </select>
            </form>

<table>表格標籤
<table>表格標籤：<table>是表格標籤，可以用它定義一個表格。

 <table border="1">
              <tr>
              		<td>姓名</td>
              		<td>性別</td>
              </tr>
      
          </table>

<table>的border屬性不能少
<tr>可以定義表格中的一行，一個<tr></tr>表示一行。
<td>可以定義表格中的一個單元格，<td></td>表示一個單元格。

HTML5標籤集合

CSS篇

css的特徵

  1. css解決了兩個問題：
    1>. 將HTML頁面的內容與樣式分離。
    2>. 提高web開發的工作效率。
  2. css的優勢:
    1>. 內容與表現分離
    2>. 網頁的表現統一，容易修改
    3>. 豐富的樣式，使頁面佈局更加靈活
    4>. 減少網頁的程式碼量，增加網頁瀏覽器速度，節省網路頻寬
    5>. 運用獨立頁面的css,有利於網頁被搜尋引擎收錄
  3. css語法：
    1>. 選擇器；
    2>. 宣告=屬性+值；
       /*這是註釋*/

在這裡插入圖片描述

css的引入

1. 內嵌式
一般不寫內嵌式，以後不好維護

<h1 style="font-size: 10px;color: yellow">我是h1路飛學城</h1>

2. 內鏈式

        <style type="text/css">
            h2{font-size:30px;color:red;}
        </style>

3. 外鏈式

    連結式

         link css 同時載入的！
         <link rel="stylesheet" type="text/css" href="./css/index.css">

    匯入式

          實際用的很少，先載入html，在載入css
          import 是css2.1特有的，對於不相容css2.1的瀏覽器是無效的eg:IE5以下
          <style type="text/css">
              @import url('./css/index.css');
          </style>

        注意：@import url()必須寫在檔案最開始的位置。

連結式與匯入式的區別：
1、標籤屬於XHTML,@import是屬性css2.1
2、使用連結的css檔案先載入到網頁當中，再進行編譯顯示
3、使用@import匯入的css檔案，客戶端顯示HTML結構，再把CSS檔案載入到網頁當中
4、@import是屬於CSS2.1特有的，對於不相容CSS2.1的瀏覽器來說就是無效的

優先順序：內嵌式 > 內鏈式 > 外鏈式

選擇器

什麼是選擇器：css選擇器就是要改變樣式的物件

css選擇器

class 類選擇器可以重複使用
id 選擇器唯一

  1. id選擇器
    選擇id命名的元素 以 # 開頭 #p1{color:#0f0;}

  2. class選擇器，選擇clas命名的元素 以.開頭 .first{color:#00f;}

css程式碼寫完後上線前要經過壓縮處理
本地和伺服器分兩個css版本（備份）
壓縮後註釋都清除，空間體積減少

  1. 群組選擇器
    選擇多個元素,以逗號隔開 #main,.first,span,a,h1{color:red;}

  2. 包含選擇器
    選擇某元素的後代元素，也稱後代選擇器，父類與子類間以空格隔開p
    span{color:red;}

  3. 屬性選擇器
    選擇包含某一屬性的元素
    a[title]{color:red;}選擇包含title的a標籤
    a[title][href]{color:red;}選擇包含title和href的a標籤

背景屬性

  1. 背景顏色的新增:
    background:red;
    backgronnd-color:red;

  2. 背景圖片的新增：

background:url(“images/1.jpg”);
backgronnd-image:url(“images/1.jpg”);
  1. 背景的平鋪
    什麼是平鋪？平鋪就是圖片是否重複出現
    不平鋪：background-repeat:no-repeat;
    水平方向平鋪：background-repeat:repeat-x;
    垂直方向平鋪：background-repeat:repeat-y;
    完全平鋪：預設為完全平鋪
  2. 背景圖片的定位
    背景圖片的定位就是可以設定顯示背景圖片的位置，通過屬性background-position來實現
    background-position的取值可為英文單詞或者數值和百分值。
    background-positon的英文單詞取值
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

background-positon的數值取值
background-position:x y;
positon的百分值取值
background-position:x% y%;

  1. 背景圖片的大小
    背景圖片的大小可以通過屬性background-size來設定
background-size的取值可為數值和百分值。
background-size的數值取值
background-size:x y;
background-size的數值取值
background-size:x% y%;
  1. 背景圖片的滾動
    背景圖片是否隨著內容的滾動而滾動由background-attachment設定
    background-attachment:fixed; 固定，不隨內容的滾動而滾動
    background-attachment:scroll; 滾動，隨內容的滾動而滾動

文字文字屬性

  1. 文字屬性
color:red; 文字顏色

font-size:12px; 文字大小

font-weight:“bold” 文字粗細(bold/normal)

font-family:“宋體” 文字字型

font-variant:small-caps小寫字母以大寫字母顯示
  1. 文字屬性
text-align:center; 文字對齊(right/left/center)

line-height:10px; 行間距(可通過它實現文字的垂直居中)

text-indent:20px; 首行縮排

text-decoration:none;

文字線(none/underline/overline/line-through)

letter-spacing: 字間距

盒子模型

HTML文件中的每個元素都被描繪成矩形盒子，這些矩形盒子通過一個模型來描述其佔用空間，這個模型稱為盒子模型。

為了更好的控制頁面效果，css定義了盒子模型， 一個HTML元素就是一個盒子

在這裡插入圖片描述
盒子模型組成部分：
自身內容：width、height 寬高
內邊距： padding
盒子邊框： border 邊框線
與其他盒子距離： margin外邊距
內容+內邊距+邊框+外邊距=面積

盒子定位共有四種方式：相對定位、絕對定位、固定定位、浮動。

  1. 相對定位 relative
    　　元素在顯示時，相對自己本來的位置向下或者向右偏移指定數值，但元素本身並不脫離文件流，也就說後面的元素還認為此元素在原來的位置，所以會排列在此元素原本位置的後面（但會造成覆蓋）

  2. 絕對定位absolute
    　　以最近的已經定位的祖先元素為基準進行偏移（如果沒有這樣的祖先元素則以瀏覽器視窗為基準），元素本身脫離文件流，也就說後面元素認為此元素不存在，所以會佔據此元素原來的位置（但會造成覆蓋，脫離文件流後就不具有塊級元素獨佔一行的性質了）

  3. 固定定位fixed
    　　和絕對定位類似也會脫離文件流，但總是以瀏覽器視窗為基準，而且位置不會隨著滾動條移動

  4. 盒子浮動float
    　　如果一個盒子向左浮動(float: left;)：這個元素會成為行內元素；它後面的塊級元素會失去一半的獨佔一行的特性，即左邊緊靠在浮動元素後面，右邊延伸到行尾。向右浮動和向左浮動效果類似，可以使用clear: both;清除浮動效果對後面盒子的影響

實用的css程式碼片段

頁面優化方法

減少請求數
圖片合併
CSS檔案合併
減少內聯樣式
避免在 CSS中使用 import
減少檔案大小
選擇適合的圖片格式
圖片壓縮
CSS 值縮寫（Shorthand Property)
檔案壓縮
頁面效能
調整檔案載入順序
減少標籤數量
調整選擇器長度
儘量使用CSS 製作顯示錶現
增強程式碼可讀性與可維護性
規範化
語義化
模組化

相關文章