【基礎筆記】《html&CSS設計與構造網站》一書導讀

時間 2019-11-17

標籤基礎筆記 html&css html css 設計構造網站一書導讀欄目 CSS 简体版

原文原文鏈接

◉HTMLcss

一、結構
網頁使用HTML HyperText Markup Language 來描述頁面結構
超文本標記語言容許對文本創建連接，容許對文本進行標記
網頁開頭都有一個DOCTYPE 文檔類型聲明，告訴瀏覽器此頁使用的HTML版本
在HTML中添加註釋使用<!—— 註釋文本 ——>
HTML使用元素 <p>paragraph</p> 來描述頁面內容的結構信息
元素由起始標籤 <p> 、結束標籤 </p> 和其間內容組成
HTML使用屬性 <p lang=「en-us」> 來描述元素內容的附加信息
屬性由屬性名稱 lang 和屬性值 en-us 組成
HTML具備白色空間摺疊特性，連續空格或換行都會顯示爲一個空格
<html>用來描述整個頁面，<head>用來描述頁面首部，<body>用來描述頁面主體
添加頁面標題使用<title>元素，元素位於<head>元素中
添加頁面信息使用<meta />元素，元素位於<head>元素中
－name=description｜keywords｜robots
content=———｜—，—，—｜noindex/nofollow
－http-equiv=author｜pragma｜expires
content=———｜no-cache｜Fri，04 Apr 2015 11:11:11GMThtml

二、文本
結構化標記用來描述文本結構信息
－<h6>標題 <p>段落
－<b>粗體 <i>斜體
－<s>刪除線 <u>下劃線
－<sup>上標 <sub>下標
－<br />換行符 <hr />水平線
語義化標記用來描述文本語義信息
－<abbr >詞彙縮寫title＝「」 <address>聯繫詳情
－<strong>着重強調 <em>通常強調
－<del>刪除 <ins>插入
－<blockquote>長引用 <q>短引用 cite＝「url」
－<cite>引文 <dfn>定義web

三、列表
有序列表 <ol>
－列表項目 <li>
無序列表 <ul>
－列表項目 <li>
定義列表 <dl>
－定義術語 <dt>
－定義描述 <dd>api

四、連接
添加連接使用<a>元素
<a>元素經過href屬性指明連接跳轉頁面，經過target屬性指明連接打開方式
連接文本儘可能明確具體
href屬性
－指向其餘網站 href＝「絕對url」
－指向同一網站其餘頁面 href＝「相對url」
－指向當前頁面特定位置 href＝「＃id值」
－指向其餘頁面特定位置 href＝「url/＃id值」
－指向email地址 href＝「mailto：email」
target屬性
－在新窗口中打開連接 target＝「_blank」瀏覽器

五、圖像
添加圖像使用 <img />元素
<img />元素經過src屬性指明圖像來源，經過alt屬性描述圖像內容
建立圖像基本原則
－使用正確的格式來保存圖像 JPEG：多色 GIF：動畫 PNG：透明
－使用正確的大小來保存圖像使用像素衡量圖像／使用縮放或裁剪匹配頁面
爲圖像添加說明使用<figure>元素
<figure>
<img />
<br />
<figcaption>圖像說明文本</figcaption>
</figure>服務器

六、表格
添加表格使用<table>元素
表格按照行的順序逐行繪製，行用<tr>元素表示
表格數據用<td>元素表示
表格標題用<th>元素表示，能夠經過scope屬性代表標題是行標題 row 仍是列標題 col
如須要跨行或跨列，可使用rowspan屬性或colspan屬性，屬性值爲所跨的行數或列數
長表格能夠用<thead>表示第一行，用<tbody>表示主體內容，用<tfoot>表示最後一行框架

七、表單
添加表單使用<form>元素，表單控件位於<form>元素中
表單中的信息以「名稱／值」的形式進行發送
<form>元素經過action屬性指明接收表單信息的web服務器，經過method屬性代表提交表單是隻爲了檢索信息 get 仍是爲了添加或刪除信息 post
表單控件類型
－添加文本
<input />
type=text/password/email/url/search
name＝
maxlength= 最長字符
placeholder= 佔位文本
required= 表單驗證
<textarea>
name=
－進行選擇
<input />
type=radio/checkbox
name=
value=
checked= 選中選項
<select> <option>
name= value＝
(size= ) 選項顯示數 selected＝選中選項
(multiple= ) 多選
－提交表單
<input />
type=submit
name=
value=
<input />
type=image
src=
width=
height=
－上傳文件/日期
<input />
type=file/date
name=
－隱藏控件
<input />
type=hidden
name=
value=
爲表單添加按鈕使用<button>元素，可在其間結合使用文本和圖像
爲表單添加說明使用<label>元素
<label>Age<input type=「text」 name=「age」 /></label>
<input id=「m」 type=「radio」 name=「gender」 value=「m」 /><label for=「m」>Male</label>
爲表單添加組合使用<fieldset>元素
<fieldset>
<legend>控件組標題</legend>
表單控件
表單控件
</fieldset>less

八、其餘標記
每一個HTML元素均可以附帶id屬性，用來對某一個元素進行標識
每一個HTML元素均可以附帶class屬性，用來對某一類元素進行標識
－若是某一個元素屬於不一樣類，能夠用空格將類名隔開
塊級元素在瀏覽器顯示中老是另起一行，如<h1>、<p>、<ul>
內聯元素在瀏覽器顯示中老是與鄰近元素出如今同一行內，如<a>、<b>、<img>
<div>元素將文本和元素集中在一個塊級元素中
<span>元素將文本和元素集中在一個內聯元素中
添加內聯框架使用<iframe>元素，內聯框架在頁面上劃出必定區域用來顯示其餘頁面
<iframe>元素經過src屬性指明顯示頁面地址，經過width和height屬性指明框架寬高，經過seamless屬性指明框架是否須要滾動條，添加此屬性則代表不需滾動條
有些字符用於編寫HTML代碼而成爲保留字符，須要使用轉義字符來實現顯示
－&lt &gt &amp &times &divide
－&quot &lsquo &rdquo
－&cent &pound &yen &euro
－&copy &reg &tradessh

九、Flash、視頻和音頻
添加Flash使用JavaScript腳本，添加視頻使用<video>元素，添加音頻使用<audio>元素
<video> <audio>
src src
poster 圖像顯示－－
width,height －－
controls controls 播放控件
preload none/auto/metadata preload 預加載
autoplay autoplay 自動播放
loop loop 從新播放
添加多個視頻源／音頻源使用<source />元素替代src屬性
－<source src=「video/文件名.mp4」 type=‘video/mp4;codecs=「」’ />
－<source src=「audio/文件名.mp3」 type=「video/mp3」 />ide

◉CSS

十、CSS簡介
網頁使用CSS Cascading Style Sheet 來控制頁面呈現
層疊樣式表設想在元素周圍有一個看不見的盒子，可經過規則來控制
一條CSS規則包含兩個部分：選擇器和聲明，選擇器指明要應用規則的元素，聲明指明這些元素的表現和佈局
－h1，p｛color：yellow；｝
－同一條規則能夠應用在多個元素上，其間用逗號隔開
－一條聲明包含兩個部分：屬性和值，二者用冒號隔開
－任意一條聲明內能夠指定多個屬性，其間用分號隔開
在CSS中添加註釋使用<／* 註釋文本 *／>
在頁面中添加CSS規則可以使用外部CSS文件（推薦使用），也可以使用內部CSS代碼
－外部 <link href= type=「text/css」 rel=「stylesheet」 />
－內部 <style type=「text/css」> ########### </style>
CSS選擇器類型
－基本選擇器
通用選擇器＊｛｝匹配全部元素
類型選擇器p｛｝匹配某一類型元素
類選擇器.class｛｝匹配class屬性相同的元素
ID選擇器＃id｛｝匹配id屬性相同的元素
子元素選擇器p>a｛｝匹配指定元素的直接子元素
後代選擇器p a｛｝匹配指定元素的後代元素
相鄰兄弟選擇器h1+p｛｝匹配指定元素的下一個元素
普通兄弟選擇器h1～p｛｝匹配指定元素的下一類元素
－特性選擇器
簡單選擇器p［class］匹配一種具備特定屬性的元素
精確選擇器p［class＝「css」］匹配一個具備特定屬性值的元素，該屬性值惟一
部分選擇器p［class～＝「css」］匹配一個具備特定屬性值的元素，該屬性值不惟一
開頭選擇器p［attr^=「c」］匹配一個具備特定屬性值的元素，該屬性值以某字符串開頭
包含選擇器p［attr*=「css」］匹配一個具備特定屬性值的元素，該屬性值包含某字符串
結尾選擇器p［attr$=「s」］匹配一個具備特定屬性值的元素，該屬性值以某字符串結尾
僞元素就像在代碼中加入了額外的元素
－首字母 :first-letter｛｝／首行文本 :first-line｛｝
僞類就像是一個類特性的額外的值
－未訪連接 :link｛｝／已訪連接 :visited｛｝
－懸停 :hover｛｝／操做 :active｛｝/獲取焦點 :focus｛｝
CSS優先級原則
－就近性原則：若是兩個選擇器徹底相同，那麼後出現的選擇器優先級更高
－具體性原則：若是一個選擇器比其餘選擇器更加具體，那麼具體的選擇器優先級更高
－重要性原則：若是在任意屬性值後添加！important ，那麼這條規則更重要

十一、顏色
指定顏色方式
－RGB值 rgba(90,90,90,0.5) 紅綠藍不透明
－HSL值 hsla(0,0%,78%,0.5) 色調飽和度|灰色亮度|黑色不透明
－十六進制編碼 #eeeeee 紅綠藍
－顏色名稱 DarkCyan
爲使文本清晰易讀，確保前景色 color 和背景色 background-color 之間有足夠對比度
－白色背景－灰黑色文本
－黑色背景－灰白色文本

十二、文本
文字屬性
－字體系列 font-family
Georgia,Times,serif 襯線字體適用於長文本
Arial,Verdana,sans-serif 無襯線字體適用於短文本
「Courier New」,Courier,monospace 等寬字體適用於代碼顯示
「Comic Sans MS」,cursive 草書字體適用於手寫風格
Impact,fantasy 虛幻字體適用於裝飾
－字體大小 font-size
12px 像素
200% 百分數默認16px
1.3em EM值 1em至關於1個字母m的寬度
－字體粗細 font-weight
normal 常規
bold 粗體
－字體樣式 font-style
normal 常規
italic 斜體
oblique 傾斜
文本屬性
－文本切換 text-transform
uppercase 大寫
lowercase 小寫
capitalize 單詞首字母大寫
－文本裝飾 text-decoration
none 無
underline 下劃線
overline 上劃線
line-through 穿越線
blink 閃爍
－文本對齊 text-align
left 左對齊
right 右對齊
center 居中對齊
justify 兩端對齊
－垂直對齊 vertical-align 用於內聯元素（如<img>）與文本的垂直對齊
top/text-top 頂部對齊
middle 中間對齊
baseline 基線對齊
bottom/text-bottom 底部對齊
－文本縮進 text-indent
20px
－文本投影 text-shadow
1px 1px 0px #111111
水平偏移垂直偏移模糊距離顏色
－文本間距
行間距 line-height 1.4em
單詞間距 word-spacing 0.25em
字母間距 letter-spacing 0.1em

1三、盒子
CSS採用盒子模型來處理每一個HTML元素
控制盒子大小
－盒子寬度 width 寬度限制 min-width/max-width
－盒子高度 height 高度限制 min-height/max-height
－內容溢出 overflow：hidden 隱藏/scroll 滾動
控制盒子邊框、內邊距、外邊距
－邊框 border：2px dotted #000000
邊框寬度 border-width：2px｜thin/midium/thick｜2px 1px｜2px 1px 3px 2px
－border-top-width／border-right-width／border-bottom-width／border-left-width
邊框樣式 border-style：solid 實線/dotted 方形點線/dashed 虛線/double 雙實線/groove 雕入/ridge 浮出/inset 嵌入/outset 凸出/hidden 隱藏/none 無
－border-top-style／border-right-style／border-bottom-style／border-left-style
邊框圖像 border-image：url(「images/dots.gif」) 11 11 11 11 stretch/repeat/round
圖像URL 切割位置伸展/重複/自適應重複
邊框顏色 border-color：#000000｜＃000000 #111111 #222222 #333333
－border-top-color／border-right-color／border-bottom-color／border-left-color
邊框圓角border-radius：2px｜2px 1px｜2px 1px 3px 2px｜1em 2em 1em 2em/2em 1em 2em 1em
－border-top/bottom-right/left-radius：2px 1px
－內邊距 padding：2px｜2px 1px｜2px 1px 3px 2px
padding-top／padding-right／padding-bottom／padding-left
－外邊距 margin：2px｜2px 1px｜2px 1px 3px 2px
margin-top／margin-right／margin-bottom／margin-left
－若是爲一個盒子指定了寬高，那麼盒子的邊框、內邊距、外邊距會增長到它的寬高上
－若是想爲一個盒子在包含此盒的外部元素內居中顯示，指定盒子寬度並將其左右兩側的外邊距設置爲auto，並在包含此盒的元素中添加text-align屬性，設定其值爲center
控制盒子陰影
－盒子投影 box-shadow
(inset) 1px 1px 2px 2px #111111
（內陰影）水平偏移垂直偏移模糊距離陰影擴展顏色
－顯示／隱藏盒子
盒子顯示 visibility
－hidden 使盒子隱藏，並在該盒子位置留下空白/ visible 顯示
－li｛display：inline；margin-right：10px；｝
li.hide｛visibility：hidden；｝
元素顯示 display 內聯元素與塊級元素轉換
－inline 使塊級元素表現得像內聯元素
－block 使內聯元素表現得像塊級元素
－inline-block 使塊級元素像內聯元素那樣浮動並保持其餘塊級元素特徵
－none 使元素隱藏，就像沒有這個元素同樣
－li｛display：inline；margin-right：10px；｝
li.hide｛display：none；｝

1四、列表、表格和表單
列表屬性
－列表標記 list-style：inside circle
列表標記類型 list-style-type：(ul)none/disc/circle/square ol)decimal/decimal-leading-zero/upper-alpha/lower-alpha/upper-roman/lower-roman
列表標記圖像 list-style-image:(ul)url(「images/star.png」)
列表標記位置 list-style-position：outside/inside
表格屬性
－表格寬度 table｛width:600px;｝
－空單元格 table｛empty-cells:show/hide;｝
－單元格間距 th，td｛border-spacing:5px｜5px 15px;｝
－單元格合併 th，td｛border-collapse:collapse/separate; ｝
－定義表格樣式技巧
設置單元格內邊距 th，td｛padding:7px 10px 10px 10px;｝
區分標題
－粗體大寫顯示 th｛text-transform:uppercase;letter-spacing:0.1em;font-size:90%;｝
－添加背景色或下劃線 th｛border-bottom:2px solid #111;border-top:1px solid #999;｝
交替改變表格行的背景色 tr.class｛background-color:#efefef;｝
懸停高亮顯示當前表格行 tr:hover｛background-color:#c3e6e5;｝
向右對齊數字 .number｛text-align:right;｝
表單屬性
－定義單行文本框樣式
input｛
font-size:120%;
color:#5a5854;
back-ground-color:#f2f2f2;
border:1px solid #bdbdbd;
border-radius:5px;
padding:5px 5px 5px 30px;
background-repeat:no-repeat;
background-position:8px 9px;
display:block;
margin-bottom:10px;｝
input:focus,input:hover｛
back-ground-color:#ffffff;
border:1px solid #b1e1e4;｝
input#email｛
background-image:url(「images/email.png」);｝
input#password｛
background-image:url(「images/password.png」);｝
－定義提交按鈕樣式
input#submit｛
color:#444444;
text-shadow:0px 1px 1px #ffffff;
border-bottom:2px solid #b2b2b2;
background-color:#b9e4e3;｝
input#submit:hover｛
color:#333333;
border:1px solid #a4a4a4;
border-top:2px solid #b2b2b2;｝
光標屬性
－光標類型 cursor：auto/default/crosshair/pointer/move/text/wait/help/url(「cursor.gif」)

1五、佈局
控制元素的位置 position
－普通流 static 每一個塊級元素都換行顯示
－相對定位 relative 以其在普通流中所處的位置進行移動
位移屬性 top/bottom:10px｜right/left:10px
－絕對定位 absolute 脫離普通流，不影響周圍元素的位置，隨着頁面的滾動而移動
－固定定位 fixed 脫離普通流，不影響周圍元素的位置，不隨着頁面的滾動而移動
位移屬性 top/bottom:0px｜right/left:0px
控制元素的層次 z-index
－當使用相對定位、絕對定位或固定定位時，元素可能重疊，後出現元素會位於先出現元素上面
－可以使用z-index屬性控制元素層次，該屬性值是一個數字，數字越大，元素屬性越靠前
控制元素的浮動 float
－浮動 float：left/right 將元素定位到其包含元素的最左側或最右側
－清除浮動 clear：left/right /both/none 代表該元素左側或右側不容許浮動元素出現
－若是一個包含元素只包含浮動元素，其高度可能會被當作0像素，需在其樣式中添加兩條CSS規則 overflow:auto｜width:100%
－使用浮動將元素並排
p｛width:230px;
float:left;
margin:5px;
padding:5px;
background-color:#efefef;｝
p.clear｛clear:left;｝
－使用浮動建立多列式佈局
.col1,.col2,.col3｛width:300px;
float:left;
margin;｝
理解頁面的佈局
－屏幕分辨率指一個屏幕在面積內所能顯示的點數
－首屏頁面寬度約爲960～1000像素，高度約爲570～600像素
－固定寬度佈局保持固定寬度，一般以像素做爲衡量單位
－流體佈局經過伸展或收縮來適應屏幕，一般使用百分數
－網格有助於建立頁面佈局，最多見的佈局網格爲960像素網格
－可在一個頁面中引用多個CSS文件
＊html <link />
<link />
<link />
＊html <link />
css @import url( )
@import url( )

1六、圖像
控制圖像大小 width｜height
設置背景圖像 background:(#ffffff) url( ) no-repeat center top, (#ffffff) url( ) no-repeat center top,(#ffffff) url( ) no-repeat center top 頂層→底層
－背景顏色 background-color
－背景圖像 background-image: url( )｜漸變-moz/webkit/0-linear-gradient(#fff,#000)
－背景重複 background-repeat:repeat/repeat-x/repeat-y/no-repeat
－背景綁定 background-attachment:fixed/scroll
－背景位置 background-position:left/center/right top/center/bottom｜0% 50%
控制圖像翻轉
－html <a class="button" id="add-to-basket">Add to basket</a>
<a class="button" id="framing-options">Framing options</a>
－css a.button {
height: 36px;
background-image: url("images/button-sprite.jpg");
text-indent: -9999px;
display: inline-block;}
a#add-to-basket {
width: 174px;
background-position: 0px 0px;}
a#framing-options {
width: 210px;
background-position: -175px 0px;}
a#add-to-basket:hover {
background-position: 0px -40px;}
a#framing-options:hover {
background-position: -175px -40px;}
a#add-to-basket:active {
background-position: 0px -80px;}
a#framing-options:active {
background-position: -175px -80px;}
背景圖像最好是低對比度的，若是是高對比度的，最好在文本下層插入半透明背景色

1七、HTML5佈局
添加頁眉使用<header>元素，添加頁腳使用<footer>元素
添加導航使用<nav>元素
添加文章使用<article>元素，添加附屬信息使用<aside>元素
組合標題使用<hgroup>元素
把部分組合成總體使用<div>元素，就像一個容器
把總體分解成部分使用<section>元素，就像一把剪刀

◉實用信息

1八、建站過程和設計方法
網站爲誰而建？
－我的：年齡、性別、國家、地區、教育程度、家庭情況、收入、職業、上網頻率、上網設備
－企業：規模、職務、建站目的、建站預算
人們爲何要訪問你的網站？
－什麼動機？→什麼目標？→什麼行動？
怎麼構建網站？
－網站地圖→線框圖→高保真原型
怎麼設計網站？
－造成視覺層次
大小：較大的尺寸更容易引發注意
顏色：明亮的顏色更容易引發注意
樣式：獨特的樣式更容易引發注意
表現：合適的圖像更容易引發注意
－分組
經過空白分組
經過背景色分組
經過邊框分組
－保持一致

1九、實用信息搜索引擎優化－站內優化：在頁面網址、頁面描述、頁面標題、標題、正文、連接文本、圖像說明添加關鍵詞－站外優化網站分析－經常使用分析工具：Google Analytics－多少人訪問了你的網站、他們如何找到你的網站、他們來你的網站作了什麼網站構建－爲將網站上傳到Web，須要註冊一個域名並使用Web託管－爲了讓人們看到網站，須要使用文件傳輸協議 FTP 將網站文件上傳到Web服務器