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>
    

特殊符號和註釋

  • 常用特殊符號

    特殊符號 字符實體
    空格 &nbsp;
    大於號 > &gt;
    小於號 < &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屬性:

    • normalitalicoblique
  • 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屬性:垂直對齊方式

    • middletopbottom
  • 結構僞類選擇器: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:linka:visiteda:hovera:active

背景樣式

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

        含義
        Xpos Ypos 單位:pxXpos表示水平位置,Ypos表示垂 直位置
        X% Y% 使用百分比表示背景的位置
        XY方向關鍵詞 水平方向的關鍵詞:leftcenterright
        垂直方向的關鍵詞:topcenterbottom
    • 組合
      • background: #C00 url(../image/arrow-down.gif) 205px 10px no-repeat;
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章