HTML 與 CSS 筆記（更新中）

Copyright © 2020 Linyer. All Rights Reserved

HTML 基本標籤

名稱	標籤
標題標籤	<h1>~<h6>
段落、換行	<p>···</p>、<br/>
水平線標籤	<hr/>
斜體	<em>···</em>
字體加粗	<strong>···</strong>

圖像標籤

• 常見圖片格式：jpg、gif、bmp、png

  <img src="圖片路徑" alt="替換文本" width="x寬度" height="y高度"/>
  

超鏈接

• target目標窗口位置：
  • _self：
    自身窗口
  • _blank：
    新建窗口

<a href="鏈接地址" target="目標窗口位置">文本或圖像</a>

• 超鏈接的應用

  • 頁面間鏈接：A頁到 B頁，網上常見鏈接
  • 錨鏈接：跳至自身固定位置，或 A頁跳到 B頁固定位置，需錨標記
  • 功能性鏈接：電子郵件、QQ、 MSN 等鏈接

• 錨鏈接

  <a href="#register">註冊</a>
  <a name="register">註冊</a>
  

• 電子郵件

  <a href="mailto:[email protected]">發送電子郵件</a>
  

特殊符號和註釋

• 常用特殊符號

  特殊符號	字符實體
  空格	 
  大於號 >	>
  小於號 <	&lt;
  引號 "	&quot;
  版權符號 ©	&copy;

• 註釋

  <!--註釋內容-->
  

W3C標準（World Wide Web Consortium，萬維網聯盟）

• 規範
  • 標籤名稱、屬性名稱必須小寫
  • 標籤必須嚴格嵌套，並且必須閉合，即使空元素標籤也必須閉合
  • 屬性值必須用引號引起來

播放視頻音頻

在網頁上播放視頻和音頻的方法：

• 第三方自主開發的播放器
• Flash
• HTML5 媒體元素

HTML5 的媒體元素

• 視頻元素：video

  • controls提供播放、暫停和音量的控件

  • autoplay自動播放

  • 主流瀏覽器支持的視頻格式
    

    <video src="視頻路徑" controls></video>
    

  • 不同格式

    <video controls>
    	<source src="video/video.webm" type="video/webm"/>
    	<source src="video/video.mp4" type="video/mp4"/>
    </video>
    

• 音頻標籤：audio

  <audio src="音頻路徑" controls="controls"></audio>
  

  • 不同格式

    <audio controls>
    	<source src="music/music.mp3" type="audio/mpeg"/>
    	<source src="music/music.ogg" type="audio/ogg"/>
    	你的瀏覽器不支持audio元素
    </audio>
    

頁面結構佈局

• html5 結構元素

  元素名	描述
  header	標題頭部區域的內容(用於頁面或頁面中的一塊區域)
  footer	標記腳部區域的內容(用於整個頁面或頁面的一塊區域)
  section	Web頁面中的一塊獨立區域
  article	獨立的文章內容
  aside	相關內容或應用(常用於側邊欄)
  nav	導航類輔助內容

CSS 層疊樣式表（Cascading Style Sheet）

• CSS的優勢
  • 內容與表現分離
  • 網頁的表現統一，容易修改
  • 豐富的樣式，使頁面佈局更加靈活
  • 減少網頁的代碼量，增加網頁的瀏覽速度，節省網絡帶寬
  • 運用獨立於頁面的CSS，有利於網頁被搜索引擎收錄

CSS 語法規則

選擇器 {
	屬性1: 值1;
	屬性2: 值2;
	屬性3: 值3;
	......
}

• 選擇器：
  • 標籤選擇器
  • 類選擇器
  • ID選擇器

網頁中引用CSS樣式

內聯樣式

<h1 style="color: red;">css內聯樣式</h1>

內部樣式表

<style>
	h1 {
		color: red;
	}
</style>

外部樣式表

• 鏈接式
  • 創建一個外部的css文件：xx.css，把樣式寫在這個文件中
  • 誰想用這個樣式，誰就引入這個.css文件即可

  <link rel="stylesheet" href="css/style.css"/>
  

• 導入式

    	<sty1e>
  		@import "css/style.css";
  	</sty1e>
  

• 鏈接式與導入式的區別
  • <link/>標籤屬於XHTML，@import是屬於CSS2.1
  • 使用<link/>鏈接的CSS文件先加載到網頁當中,再進行編譯顯示
  • 使用@import導入的CSS文件，客戶端顯示HTML結構,再把CSS文件加載到網頁當中
  • @import是屬於CSS2.1特有的，對於不兼容CSS2.1的瀏覽器來說就是無效的。

編輯網頁文本

• <span>標籤的作用：能讓某幾個文字或者某個詞語凸顯出來

字體樣式

屬性名	含義	舉例
font-family	設置字體 類型	font-family: "隸書";
font-size	設置字體 大小	font-size: 12px;
font-style	設置字體 風格	font-style: italic;
font-weight	設置字體的 粗細	font-weight: bold;
font	在一個聲明中設置所有字體屬性	font: italic bold 36px "宋體";

• font-size屬性單位：

  • px(像素)、em、rem、 cm、mm、pt、pc

• font-style屬性：

  • normal、italic和oblique

• font-weight屬性

  值	說明
  normal	默認值，定義標準的字體
  bold	粗體字體
  bolder	更粗的字體
  lighter	更細的字體
  100、200、 300、 400、500、 600、 700、800、 900	定義由細到粗的字體， 400等同於normal, 700等 同於bold

• font屬性：

  • 字體屬性的順序：字體風格 → 字體粗細 → 字體大小 → 字體類型

文本屬性

屬性	含義	舉例
color	設置文本 顏色	color: #00C;
text-align	設置元素 水平對齊方式	text-align: right;
text-indent	設置首行文本的 縮進	text-indent: 20px;
line-height	設置文本的 行高	line-height: 25px;
text-decoration	設置文本的 裝飾	text-decoration: underline;

• color屬性

  • RGB
    • 十六進制方法表示顏色：前兩位表示紅色分量，中間兩位表示綠色分量，最後兩位表示藍色分量
    • rgb(r,g,b)：正整數的取值爲0~255
  • RGBA
  • 在RGB基礎上增加了控制alpha透明度的參數,其中這個透明通道值爲0~1

    color: #A983D8;
    color: #EEFF66;
    color: rgb(0,255,255);
    color: rgba(0,0,255,0.5);
    

• text-align屬性：水平對齊方式

  值	說明
  left	把文本排列到左邊。默認值:由瀏覽器決定
  right	把文本排列到右邊
  center	把文本排列到中間
  justify	實現兩端對齊文本效果

• text-indent屬性：首行縮進，單位：em（相對值）或px

• line-height屬性：行高，單位：px

• text-decoration屬性：文本裝飾

  值	說明
  none	默認值，定義的標準文本
  underline	設置文本的下劃線
  overline	設置文本的上劃線
  line-through	設置文本的刪除線

• vertical-align屬性：垂直對齊方式

  • middle、top、bottom

• 結構僞類選擇器：a:nth-of-type(1)

  父級下面類型爲a的第1個元素

• text-shadow屬性：文本陰影

  • text-shadow: color x-offset y-offset blur-radius;

  • color：陰影顏色

  • x-offset：X軸位移，用來指定陰影水平位移量

  • y-offset：Y軸位移，用來指定陰影垂直位移量

  • blur-radius：陰影模糊半徑，代表陰影向外模糊的模糊範圍

  • 瀏覽器兼容性

    屬性名	lE	Firefox	Chrome	Opera	Safari
    Text-shadow	9+	3.5+	2.0+	9.6+	4.0+

使用CSS設置超鏈接

僞類名稱	含義	示例
a:link	未單擊訪問時超鏈接樣式	a:link{color:#9ef5f9;}
a:visited	單擊訪問後超鏈接樣式	a:visited {color:#333;}
a:hover	鼠標懸浮其上的超鏈接樣式	a:hover{color:#ff7300;}
a:active	鼠標單擊未釋放的超鏈接樣式	a:active {color:#999;}

• 設置僞類的順序: a:link→a:visited→a:hover→a:active

背景樣式

• 背景圖像
  • background-image屬性
    • background-image: url(圖片路徑);
  • 背景重複方式
    • background-repeat屬性
      • repeat：沿水平和垂直兩個方向平鋪
      • no-repeat：不平鋪，即只顯示一次
      • repeat-x：只沿水平方向平鋪
      • repeat-y：只沿垂直方向平鋪
  • 背景定位

    • background-position屬性

      值	含義
      Xpos Ypos	單位：px，Xpos表示水平位置，Ypos表示垂 直位置
      X% Y%	使用百分比表示背景的位置
      X、Y方向關鍵詞	水平方向的關鍵詞：left、center、right 垂直方向的關鍵詞：top、 center、bottom

  • 組合
    • background: #C00 url(../image/arrow-down.gif) 205px 10px no-repeat;