html+css課堂筆記

阿新 • • 發佈：2019-01-15

<html>部分：包括頭部標籤<head></head>和內容標籤<body></body>

頭部標籤包括：<title></title>、<link/>、<meta/>、 <style></style>、<script></script>;

常用標籤包括：

標題標籤：<h1></h1>…<h6></h6>;

段落標籤：<p></p>;

預格式化標籤：<pre></pre>;

換行符：<br/>;

字元格式化：包括加粗<b></b> 斜體<i></i> 上標<sup></sup> 下標<sub></sub> 下劃線<u></u>;

水平線:<hr/>;

字型:<font></font>;

跑馬燈效果：<marquee></marquee>;

引數：

Onmouseout=“this.start()”滑鼠離開時繼續滾動；

Onmouseover=“this,stop()”滑鼠點選時停止滾動；

Behavior 設定滾動方式

alternate 來回滾動 scroll 重複的滾動 slide不重複的滾動；

Direction 設定滾動方向；

Hspace 設定字幕與容器間的水平距離；

Vspace 設定字幕與容器間的垂直距離；

Loop 表示滾動次數；

Scrollamount 設定滾動的速度；

Scrolldelay 設定活動螢幕延遲的滾動間隔。

列表標籤包括：

無序列表：<ul>

</ul>

有序列表<ol>

</ol>

自定義列表<dl>

</dl>

表格標籤：<table>

<tr>

</tr>

</table>

框架集標籤：<frameset></frameset>；

引數：

Rows 橫向分割視窗 *代表餘下的

Cols 縱向分割視窗

活動框架標籤：<iframe></iframe>；一個單獨的頁面

同時還有絕對路徑和相對路徑的概念：

絕對路徑：是指從網上瀏覽某個圖片或網頁時的地址；

例如：http://www.baidu.com/image/1.jpg

相對路徑：是指本地電腦上的圖片或者是網頁；

相對路徑常用的符號：

./代表當前目錄 ../代表上一目錄 ../../代表上上目錄

常用的特殊字元：

  —- 空格；

> —- 大於號；

< —- 小於號；

¥—-人民幣符號；

©—-版權符號；

還有兩個重要的標籤：

超連結<a></a>

超連結常用屬性：

Target：指定開啟頁面的方式 _black新的頁面 _self當前頁面；

表單<form></form>

表單常用屬性：

Action：指定服務地址；

Method：指定提交方式 POST&GET；

CSS（Cascade Style Sheet）層疊樣式表部分：

css選擇器：

包括：類選擇器、ID選擇器、元素選擇器、後代選擇器、偽類選擇器

類選擇器：通過class屬性查詢元素

例如： .class{….}

類選擇器的css樣式可共多個元素使用；

ID選擇器：通過id屬性來查詢元素

例如：#class{…}

一條id屬性的css樣式只能被一個id元素使用，不能重複使用

元素選擇器：根據元素名稱找到元素

例如：a{….}

<a></a>

後代選擇器：改變某css樣式下的某個元素；

例如： #nav li{…}

<ul>

</ul>

</div>

偽類選擇器：改變某種元素在特定情況下的樣式；

例如：

a:link{…}

a:visited{…}

a:hover{…}

a:active{…}

設定樣式的順序不可更改依次為 link visited hover active

想要更改元素在特定情況下的樣式只需

元素名稱: link & visited & hover & active {….}

改變輸入框樣式：

Css樣式 input：focus{background：#ccc}

背景樣式屬性：

背景顏色：background-color

背景圖片：background-image

背景重複:background-repeat

背景位置：background-position

文字屬性：

字元間隔：letter-spacing

單詞間隔：word-spacing

水平對齊：text-align

字元縮排：text-indent 單位em 表示縮排兩個字元

字元轉換：text-transform

文字裝飾：text-decoration

文字顏色：color

字型屬性：

字體系列：font-family

字型粗細：font-weight

字型樣式：font-style

字型大小：font-size

字型顏色：color

設定行高：line-height

列表樣式：list-style:none 列表符號點陣圖像 list-style-imag：url（）

邊框樣式:

邊框粗細:border-width:

邊框顏色：border-color

邊框樣式：border-style

上邊框樣式：border-style-top

下邊框樣式：border-style-bottom

左邊框樣式：border-style-left

右邊框樣式：border-style-right

CSS元素分類：包括塊級元素、行內元素

塊級元素較霸道,不允許和它同用一塊

例如：div ul ol li h1-h6

行內元素允許其他元素在一起

例如：a img p span

將行內元素轉換成塊級元素 display：block

將塊級元素轉換成行內元素 display：inline

知識重點：

Css盒子模型

包括外邊距：margin 內邊距：padding 邊框：border

Margin和padding一樣都是按照上右下左的順序設定樣式

居中顯示： margin：auto；

浮動佈局：float

技巧：如果想要多個塊級元素顯示在一行，則他們浮動的方向相同

絕對定位：positio：absolute

相對定位：position：relative

注意：

絕對定位佈局的時候，如果父元素是相對定位（position:relative），那麼絕對定位的元素相對於父元素移動；如果父元素不是相對定位，絕對定位的元素相對於body來移動

區別：絕對定位是不佔用原來的位置空間，是按照父元素來進行定位；相對定位移動後仍佔用原來的位置空間，且移動位置的座標是按照原來位置做參考而不是父元素。

html+css課堂筆記

<html>部分：包括頭部標籤<head></head>和內容標籤<body></body> 頭部標籤包括：<title></title>、<link/>、<meta/

HTML/CSS 學習筆記

選擇 active 字體顏色 one 字體允許關系 itl :active 外邊距：margin內邊距：padding 連接：hrefa:link（未被訪問）a:hover（鼠標懸停）a:visited（訪問過）a:active（鼠標點擊與釋放直接）順序：link-v

css 課堂筆記

屬性 style 表示特征例如備註 ext 不可文件一、屬性屬性：表示事物的一些特征分為兩種：1、標簽屬性 2、樣式屬性兩者的區別：位置不一樣（樣式屬性寫在style中，標簽屬性寫在標簽內）

html css學習筆記-派生選擇器 id選擇器類選擇

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <t

HTML/CSS基礎筆記一

1. HTML/CSS介紹 HTML和CSS的關係學習web前端開發基礎技術需要掌握：HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術都是用來實現什麼的： 1. HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要

Html+css學習筆記

一、一些比較好用的html小技巧： 1）在文字<head>標籤中加入<meta charset="uft-8">,這樣就不用考慮文字的字元編碼問題了。 2）html是標記語言，不是程式語言 3）在某個頁面停留幾秒之後重新整理到新的網頁<meta http

html css優先順序筆記五

<html> <head> <title>HTML示列</title> <style type="text/css"> div{ backgroun

HTML+CSS學習筆記前言

目錄五、語義化 HTML與CSS的關係 HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓使用者瀏覽的資訊，可以包含文字、圖片、視訊等。 CSS樣式是表現。比如，標題字型、顏色變化或為標題加入背景圖片、邊框等。這些用來改變內容外觀的東西稱之

HTML CSS整理筆記

——修改placeholder提示的樣式： 1.除IE外通用寫法類名或標籤名::placeholder {color: red;}2.加相容字首寫法 css超出一行顯示省略號：給定寬度(width:100px)、超出隱藏（overflow:hidden）、強制在同一行顯示（white-space: nowr

【網頁開發學習】Coursera課程《面向 Web 開發者的 HTML、CSS 與 Javascript》Week1課堂筆記

Coursera課程《面向 Web 開發者的 HTML、CSS 與 Javascript》 Johns Hopkins University Yaakov Chaikin Week1 Introduction to HTML5 對於網頁來說，HTML定義的是網頁的骨架（structure），CSS

python之前端HTML/CSS基礎知識學習筆記

引號編寫 css基礎通用浮動我們公司地址將不多行 1. 文件結構： HTML文件的固定結構： <html> <head>...</head> <body>...&l

HTML+CSS基礎小筆記再整理

abs 其中寬度書寫 html5 font pla 之間 footer 1、 font的兩個必須要寫的：font-size 和 font-family text-indent 首行縮進（em）1em=一個文字大小 text-algin 對齊方式：left、center

HTML CSS筆記列表與表格

HTML CSS 加粗:<b>b</b> <strong>strong</strong>換行:<br /> <wbr>安全換行</wbr>傾斜:<i>i</i> <em>em<

HTML CSS筆記變形效果-過渡效果-動畫效果

HTML CSS 動畫效果變形效果過渡效一．transformCSS3 提供了元素變形效果，也叫做變換。它可以將元素實現旋轉、縮放和平移的功能。屬性有兩個：transform 和 transform-origin。對於 transform 的屬性值，具體如下表：//向水平和垂直各移動

HTML課堂筆記！

行內元素 ros 字體大小 display -s 什麽 sof 式表 .class html的全稱為“Hyper Text Markup Language”html是超文本標記性語言. html前端三大模塊：1.html（結構）

web前端學習（三）css學習筆記部分（5）-- CSS動畫--頁面特效、HTML與CSS3簡單頁面效果實例

key cti 樣式描述 ans 轉換方法動畫效果 ansi order CSS動畫--頁面特效部分內容目前僅僅觀看了解內容,記錄簡單筆記，之後工作了進行內容的補充 7. CSS動畫--頁面特效 7.1 2D、3D轉換　　7.1.1 通過CSS3轉換，我們能夠對

HTML+CSS基礎知識個人筆記_8

HTML+CSS基礎知識個人筆記_8 1. 結構偽類選擇器 2. 屬性選擇器 3. 偽元素選擇器 4. CSS3盒子模型 5. 經典案例 6. 過渡 6.1 transition 6.2 transform的t

HTML+CSS基礎知識個人筆記_7

HTML+CSS基礎知識個人筆記_7 1. 顯示與隱藏 2. 土豆案例 3. overflow 4. cursor 5. 輪廓線和防止檔案域拖拽 6. vertical-align 7. 溢位文字省略號 8. sprite

HTML+CSS基礎知識個人筆記_6

HTML+CSS基礎知識個人筆記_6 1. 清除浮動的四種方法 1.1 額外標籤法 1.2 overflow清除浮動 1.3 after偽元素清除浮動 1.4 雙偽元素清除浮動 2. 定位 2.1 靜態定

HTML+CSS基礎知識個人筆記_5

HTML+CSS基礎知識個人筆記_5 1.盒子小知識點 1.1盒子水平居中 1.2 外邊距合併 1.3 外邊距塌陷 1.4 盒子預設寬度 1.5 圓角盒子 1.6 盒子陰影 2. 盒子浮動

html+css課堂筆記

相關推薦