使用HTML 和CSS 開發商業站點

時間 2020-09-09

標籤使用 html css 開發商業站點欄目 HTML 简体版

原文原文鏈接

第一章HTML 基礎
1.html 的基本結構？
解析：
2.HTML 全稱
Hyper Text Markup Language（超文本標記語言）
擴展XML:Extendsible Markup Language(可擴展性標記語言)
3.高級記事本
Ue（UltraEdit）
nodepad++
Editplus
快捷鍵用熟一個便可。
4.編寫html 文檔的注意點
01.全部標籤字母均小寫。
02.有開始就要有閉合標籤
03.每一個層次的標籤有必定程度的縮進。
解析：若是發現body 內書寫了內容，用瀏覽器打開後發現沒有內容，那麼
就須要檢查下title 標籤有沒有閉合。
5.三種文檔類型
嚴格類型，過渡類型，框架類型
6.編碼方式
gb2312
Gbk
Gb2312 和gbk 的區別
GB2312 是中國規定的漢字編碼，也能夠說是簡體中文的字符集編碼;GBK 是GB2312 的
擴展,除了兼容GB2312 外，它還能顯示繁體中文，還有日文的假名
utf-8:全球通用編碼
用在網頁上能夠同一頁面顯示中文簡體繁體及其它語言（如英文，日文，韓文）。
7.W3C：組織
解析：是一個組織，專門用來給各個瀏覽器廠商等指定規範的。
8.標籤
01.h 標籤：從h1 到h6 字體逐漸減少。
效果：自身加粗，而且能夠控制字號。
02.p 標籤：和其餘的內容行之間有一個空行。
03.br 換行標籤：是自身閉合標籤。<br/>
04.hr 水平線標籤，是自身閉合標籤。
05.strong（加粗）、06.em（傾斜）
07.特殊符號：全部的特殊符號都是包括在&;中
空格： 
大於號：>
小於號:<
雙引號:"
版權符號:©
林徽因：冰心(謝婉瑩)，小桔燈() 99
你是人間的四月天
9.圖像標籤
夏洛特的網
html 中兩種路徑：
第一種：絕對路徑，就是掛着盤符的路徑形式，例如：c:\\123\\01.jpg
相對路徑：相對的對象時當前你訪問的html 文檔。符號是../(上一級目錄)
注意問題：相對路徑../：去該html 文件對應的上層文件夾
通常不會使用絕對路徑：D:\\1.html
<img src=」美女.jpg」 alt=「網絡異常的時候，顯示的文本」 title=」鼠標懸浮在圖片上
顯示的文字」/>
自身閉合標籤
10.超連接
分類：頁面間連接，錨連接，功能性連接。
頁面間連接：
<a href=」http://www.baidu.com」>去百度</a>
錨連接：
01.同頁面間錨連接
分兩步：第一步：在頁面目標位置設置一個錨記。<a name=」star」><img src=」01.jpg」
/></a>
第二步：在另外一處建立出一個超連接：<a href=」#star」>去看明星的隱私信
息吧</a>
02.跨頁面的錨連接
功能性連接：
<a href=」mailto:yymqqc@126.com」>站長信箱</a>
<a href="tencent://message/?uin=QQ">打開QQ</a>
迅雷
電驢
ek2k://
QQ 旋風
第二章列表、表格與框架
第二章列表、表格與框架
收做業
聽寫
補充a 標籤的一個屬性target
1._blank:在新選項卡中打開
2._self:若是沒有設置target 屬性，默認取值是_self
01.列表
001.無序列表：
<ul>
<li></li>
</ul>
002.有序列表
<ol>
<li></li>
</ol>
003.定義描述標籤：應用場景：在圖文混編的狀況下使用
<dl>
<dt>放置圖片</dt>
<dd></dd>
....
</dl>
02.表格
<html>
<head>
<title>表格</title>
</head>
<body>
<table border="1px">
<tr>
<td>北京</td>
<td>上海</td>
<td>廣州</td>
</tr>
<tr>
<td>北京</td>
<td>上海</td>
<td>廣州</td>
</tr>
<tr>
<td>北京</td>
<td>上海</td>
<td>廣州</td>
</tr>
</table>
</body>
</html>
重點：表格的跨行跨列
步驟：一、有幾行幾列？
解析：3 行兩列
2.該跨行的跨行(rospan)，該跨列的跨列(cospan)
3.核心原則：跨行和跨列只能出如今td 中
必定要注意的是：全部的跨行和跨列操做都出如今td 中。
表格跨行跨列步驟：
01.肯定表格的行和列
02.搭建出表格架構
03.根據需求，刪除多餘的td(單元格)
3.框架集和內嵌框架
再來一遍Frameset
做用：當咱們須要將一個比較大的頁面切割成多個小頁面的時候，可使用FrameSet，它
通常用於後臺管理員佈局方式。
重要內容：FrameSet 和body 不能共存。
實現：
首先：建立出top.html, left.html right.html 三個子頁面
而後，在主頁面index.html 中經過frameset 標籤來引入三個子頁面

<frameset rows="20%,*">

<frame src="top.html"/>

<frameset cols="20%,*">

<frame src="left.html"/>

<frame src="right.html" name="rightFrame"/>
</frameset>
</frameset>
註釋：01.border 能夠設置邊框的寬度，若是是20，那麼表明邊框寬度是20px，若是設置爲
0，表明無邊框。
02.noresize=」noresize」不容許用戶拖動框架
03.scrolling=」no」不顯示滾動條
Iframe 用法：
應用場景：連接外部的頁面，實現樣式的代碼重用。
FrameSet:
01.不能和body 共存
02.將index 頁面用三個頁面組合起來，將一個大
頁面Index 切成3 小塊，每個小塊兒對應一個頁面
top.html
left.html
right.html
04.框架集Frameset 和內嵌框架iframe
frameset 用於進行網頁佈局，對多個頁面進行組
合。比較複雜，而iframe 通常用於引入站外連接，天氣預
報
frameset 關鍵屬性：
border：設置邊框：能夠取值100
frameborder:0 和1
borderColor:顏色
frame:noresize srcolling
iframe：noresize srcolling width height
第三章表單
第三章表單
01.什麼是表單？？
解析：表單就是form
<form action=」http://www.baidu.com」
method=」post」>
重置按鈕必須放入到表單中，才能發揮到做用
</form>
注意點：
02.表單元素？
解析：在表單中的標籤就是表單元素
03.老溼：你說get 和post 提交方式有什麼區別？
解析：get 在地址欄顯示提交的數據（危險）
2k
1byte=8bit(位)）
（1kb=1024byte(字節)
1mb=1024kb
1Gb=1024mb
1Tb=1024Gb
4M: 4m/s 512k/s
post 在表單，經過開發人員工具能夠看到（安
全）沒有上限
要想讓表單元素中的value 值提交到服務器，
表單元素必須有name 屬性
重置和清空？？
解析：
表單元素：
input: type="text" 文本框
type="passsword" 密碼框
type="radio" 單選框
type="checkbox" 複選框
type="submit" 提交按鈕
type="reset" 重置按鈕
type="button" 普通按鈕
type="image" 圖片按鈕
type="file"文件域
type="hidden" 隱藏域
下拉框
select ---option 下拉框
多行文本域
<textarea>多行文本域</textarea>
屬性
：只讀readonly="readonly"
禁用： disabled="disabled"
-->
第四章初識CSS
1.任務
1.第三章和第四章單詞
2.考試
3.前三章總結
4.第四章內容講解
引入dreamweaver 工具使用
2.內容：
1.使用css 的意義：爲了實現代碼和樣式的分離
01.什麼是CSS：(Cascading Stylesheet)層疊樣式表
02.CSS 在頁面中的應用：
解析：
<style type=」text/css」>
P{
font-size:20px;
Color:red;
}
</style>
03.CSS 的優點
CSS 的基本語法
01.CSS 基本語法結構
02.認識<style>標籤
03.CSS 選擇器
標籤選擇器:經過標籤名來設置元素的樣式。
類選擇器
解析：兩步：第一步：在要設置樣式的目標標籤中起一個名字爲class 的屬性名
第二步：在style 標籤中，經過.屬性名{}設置
ID 選擇器
解析：
第一步：在要設置樣式的標籤中起一個名稱爲id 的屬性，
第二步：在style 標籤中經過#屬性名{}設置
在HTML 中引入CSS 樣式
01.行內樣式
解析：直接在html 代碼的標籤中設置style 屬性，這種方式缺點作不到代碼和樣式分離。
02.內部樣式表
解析：直接在style 標籤中書寫樣式代碼，可是真正在項目發佈的時候，仍是最好將樣式
單獨出一個文件，這樣會提升網站的性能。
03.外部樣式表
解析：經過link 標籤引入當前網站css 文件夾中某一個後綴名是.css 的文件，
<link href="site.css" rel="stylesheet" type="text/css" />
04.樣式優先級
規律：
行內>內部樣式表>外部樣式表
也就是遵循的是就近原則。
CSS 高級應用
01.CSS 複合選擇器
A.後代選擇器
B.交集選擇器
C.並集選擇器
02.CSS 繼承特性
A.繼承關係
B.繼承的應用
注意點：
01.如何調整dreamweaver 中代碼視圖的字體大小。
.
2.問：
聲明：下次課的預習你們必定要好好預習，由於裏面的東東不少很雜，因此須要你們多用點
心。
總結：
1.爲何使用CS
2.CSS 語法
<style type=」text/css」>
標籤類ID 選擇器
</style>
3.選擇器的優先級
近者優勢
4.三種引入樣式表方式
第一種：行內樣式
第二種：內部樣式表
第三種：外部樣式表
5. 複合選擇器
01.後代選擇器空格
02.並集選擇器，，，，
03.交集選擇器鏈接寫，第一個只能是標籤，後續跟的是類樣式，ID
6.CSS 當中的繼承
做業：
1.預習第五章（難點，但願你們好好預習）
第五章CSS 美化網頁元素
內容回顧：
01.CSS：讓網頁看起來更加美觀，能夠實現頁面樣式的複用。層疊樣式表
02.CSS 選擇器：ID 類選擇器標籤
03.複合選擇器：交集，並集，後代
現階段，你們所用的選擇器，只要能知足題目要求便可，沒有必要刻意去使用複合選擇器，
等到有一天，你發覺使用常見3 種選擇器，定位某一個標籤特別麻煩的時候，思路能夠往這
個方向偏移。
交集選擇器：p.name div#name
並集選擇器：p,div
後代選擇器: p ul li
04 選擇器的.優先級
ID>類選擇器>標籤選擇器
05.CSS 中的繼承
子標籤能夠繼承父標籤的樣式
CSS 美化網頁元素
1.span 標籤引入
老師說了，經過span 標籤，咱們學了一個知識點，就是行級標籤和塊級標籤。
行級標籤：；全部的行級標籤都顯示在同一行（span，img）
塊級標籤：獨佔一行（p ，div）
2.字體樣式
你們教了我一點，就是若是font-family 屬性值有多個，用逗號
隔開。若是英文字體和中文字體同時出現，英文位於前面。
02.若是字體屬性值有空格，必須有」」,
03.若是字體屬性是中文，也要有」」
分開設置屬性：
設置字體類型:font-family:究竟是楷體呢仍是宋體」楷體_GB2312」
設置字體大小:font-size：設置字體大小
設置字體風格:font-style;傾斜：font-style:italic
設置字體粗細font-weight:bold; 700px
總體設置屬性：font:字體風格字體的粗細字體大小字體類型;
<div>----------------------------------------------------</div>
水變油
3.文本樣式
設置文本顏色:color:前景色
設置元素水平對齊方式:text-align:center left
設置文本縮進:text-indent:20px;
設置文本的行高line-height:20px;若是咱們將line-height 和height 設置成同樣的高度，那麼
就至關於對盒子中內容做了垂直居中，這是一個佈局技巧
設置文本的裝飾:text-decoration:underline;
圖片和文字垂直對齊方式
設置圖片Vetical-align:middle;
4.超連接僞類
去除a 標籤中的img 標籤外圍的邊框，有兩種方案：
01.img{border:0px;}
02.img{border:none;}
僞類：選擇器(#div .div div):狀態值(link,visited,hover,active)
a:link:你們的小手尚未點擊超連接時的樣式
A:visited：你們的大手已經點擊過了某個超連接的樣式
A:hover：你們的小腳懸停在超連接上的樣式
A:active：你們的大腳踩在超連接上，可是還未彈起的樣式
設置鼠標形狀
Cursor:pointer;設置成小手
Cursor:wait:小沙漏忙碌圖標
5.Div
Div 我們一直在用，知道它是一個塊級標籤，之後佈局的
時候會常常用到它。
6.背景樣式：背景偏移技術！
div {
background-color: pink;//給箱子設置背景顏色。
background-image: url(image/02.jpg);//給某一個標籤，或者說的直白
一些就是給html頁面上的一個箱子，設置背景圖
background-repeat: no-repeat;//圖片比標籤寬高小的時候，只顯示一
張背景圖片
background-repeat:repeat-x;在水平方向上平鋪
background-repeat:repeat-y:在垂直方向上平鋪
background-position:-104px 0px;
//position表明位置：有兩個值，
第一個表明的是水平方向上作偏移，若是須要圖片左移，那麼取負值
第二個表明的是垂直方向上的偏移，若是須要圖片上移動，取值爲負值。
width: 300px;
height: 300px;
}
鑑於以上四個屬性寫起來代碼過多，能夠將其合成一個屬性，而且嚴重十分很是特別及
其建議要用合寫形式。
Background:pink url(image/美女.jpg) 0px 0px no-repeat;
7.列表樣式
List-style-image:url(image/02.jpg)
List-style:none;將默認的標記去除
List-style:circle:空心圓
List-style:square;方塊
List-style:decimal;實現了從無序列表到有序列表的轉換。
第六章盒子模型
第六章盒子模型
1.盒子模型
盒子模型包括內容和盒子屬性(border,padding,margin)
盒子模型的真實寬度：內容寬度+左右兩側的padding 值+左右兩側的border 值
盒子的真實高度：內容高度+上下的padding 值+上下的border
2.盒子模型常見考題
/*
border:設置顏色後跟參數個數含義
1 個參數:四個邊框顏色都是該顏色
2 個參數(red blue):上下顏色爲紅色,左右爲藍色
3 個參數(red blue yellow):上邊線顏色爲紅色,
左右爲藍色,下邊線爲黃色
4 個參數()按照上/右/下/左的規律設置顏色
*/
盒子模型對網頁佈局的重要性：
注意：對一個容器設置內邊距，會改變該容器自己的尺寸，因此在佈局的時候要特別小
心。另外能經過margin 實現的功能，儘可能不要用padding。
Ul 中的li 是超不出ul 的包圍的。這是一個特例。就是對ul 設置了內邊距，ul 自己的尺
寸不會改變。
2.標準文檔流
塊級標籤和行級標籤
注意：塊級標籤能夠和行級標籤轉換
經過display 屬性
display:block;
display:inline;
display 屬性的三個取值：
01.none:將某個元素隱藏display: none;*將div 隱藏*
02.block：將某個元素顯示
03.inline:將某個塊級標籤轉換成了行級標籤
3.鼠標單擊到img 行的時候圖片隱藏方案
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
a:hover img{
display:none;
}
</style>
</head>
<body>
<a href="#">懸停到我身上有驚喜，點壞不用賠！
<br /><br /><br />
<img src="image/pig.jpg" />
</a>
</body>
</html>
第七章浮動
第七章浮動
1.常見的網頁佈局
浮動：簡單理解就是爲了佈局網頁，讓兩個div 能夠在同一行顯示
清除浮動必須遵循一個重要的原則，就是若是想要清除浮動，那麼原來盒子div 浮動的方
向就決定了清除浮動的方向值。
2.overflow:解決div 的高度塌陷問題
高度塌陷是如何引發的？
解析：當一個div 中全部的子div 都進行了浮動後，那麼會出現該問題，那麼解決方就是在
父div 中設置器overflow:hidden：便可解決高度塌陷問題
方式二：在父div 結束標籤前添加一個子的div，給該div 設置一個id，而後經過樣式清除
浮動。代碼以下:#littlediv{clear:left;}
3.如何將ul 中最後一個li 前提到第一個li 之上?
解析：用的思路就是給ul 設置相對定位:position:reletive ; 給最後一個li 起一個id，設置
其絕對定位:position:absolute: top:-15px;
1.網頁中浮動的應用
浮動就是爲了配合網頁佈局中常見的佈局方式，將兩個div 顯示到同一行
01.橫向導航菜單
02.圖文混編
1.大div 叫container 360px
2.兩個小div，一個承載標題，。另外一個承載視頻列表
3.定義列表來寫。
01.將dl 進行左浮動，讓多個dl 能夠在同一行顯示
02 設置dl 寬度保證兩個dl 以前出現必定間隔。
03..經過text-align:center:來居中dl 中內容
04.若是網頁中部分元素應用了浮動，可能會引發高度塌陷，這個時候解決方案
經過在body 中加多一個空的div，而後給該div 設置浮動屬性爲both
4.網頁元素三種常見的定位機制
普通流，浮動和絕對定位
1）普通流：不少人或者文章稱之爲文檔流或者普通文檔流，其實標準里根本就沒有這個
詞。若是把文檔流直譯爲英文就是document flow ，但標準裏只有另外一個詞，叫作普通流
（normal flow)，或者稱之爲常規流。但彷佛你們更習慣文檔流的稱呼，由於不少中文翻譯
的書就是這麼來的。好比《CSS Mastery》，英文原書中至始至終都只有普通流normal flow
（普通流）這一詞，歷來沒出現過document flow （文檔流）
2）浮動：浮動的框能夠左右移動，直至它的外邊緣遇到包含框或者另外一個浮動框的邊緣。
浮動框不屬於文檔中的普通流，當一個元素浮動以後，不會影響到塊級框的佈局而只會影
響內聯框（一般是文本）的排列，文檔中的普通流就會表現得和浮動框不存在同樣，當浮動
框高度超出包含框的時候，也就會出現包含框不會自動伸高來閉合浮動元素（「高度塌陷」
現象）。顧名思義，就是漂浮於普通流之上，像浮雲同樣，可是隻能左右浮動。
正是由於浮動的這種特性，致使本屬於普通流中的元素浮動以後，包含框內部因爲不存在其
他普通流元素了，也就表現出高度爲0（高度塌陷）。在實際佈局中，每每這並非咱們所
但願的，因此須要閉合浮動元素，使其包含框表現出正常的高度。
浮動(float)，一個咱們即愛又恨的屬性。愛，由於經過浮動，咱們能很方便地佈局；
恨，浮動以後遺留下來太多的問題須要解決，特別是IE6-7（如下無特殊說明均指windows
平臺的IE 瀏覽器）。
也許不少人都有這樣的疑問，浮動從何而來？咱們爲什麼要清除浮動？清除浮動的原理是什
麼？
本文將一步一步地深刻剖析其中的奧祕，讓浮動使用起來更加駕輕就熟。
1、清除浮動仍是閉合浮動（Enclosing float or Clearing float）？
不少人都已經習慣稱之爲清除浮動，之前我也一直這麼叫着，可是確切地來講是不許確的。
咱們應該用嚴謹的態度來對待代碼，也能更好地幫助咱們理解開頭的三個問題。
1）清除浮動：清除對應的單詞是clear，對應CSS 中的屬性是clear：left | right | both | none；
2）閉合浮動：更確切的含義是使浮動元素閉合，從而減小浮動帶來的影響。
二者的區別請看優雅的Demo
經過以上實例發現，其實咱們想要達到的效果更確切地說是閉合浮動，而不是單純的清除浮
動，
在footer 上設置clear：both 清除浮動並不能解決warp 高度塌陷的問題。
結論：用閉合浮動比清除浮動更加嚴謹，因此後文中統一稱之爲：閉合浮動。
2、爲什麼要清除浮動？
要解答這個問題，咱們得先說說CSS 中的定位機制：普通流，浮動，絕對定位
（其中"position:fixed" 是"position:absolute" 的一個子類）。
1）普通流：不少人或者文章稱之爲文檔流或者普通文檔流，其實標準里根本就沒有這個詞。
若是把文檔流直譯爲英文就是document flow ，但標準裏只有另外一個詞，叫作普通流
（normal flow)，
或者稱之爲常規流。但彷佛你們更習慣文檔流的稱呼，由於不少中文翻譯的書就是這麼來的。
好比《CSS Mastery》，英文原書中至始至終都只有普通流normal flow（普通流）這一詞，
歷來沒出現過document flow （文檔流）
2）浮動：浮動的框能夠左右移動，直至它的外邊緣遇到包含框或者另外一個浮動框的邊緣。
浮動框不屬於文檔中的普通流，當一個元素浮動以後，不會影響到塊級框的佈局而只會影
響內聯框（一般是文本）的排列，
文檔中的普通流就會表現得和浮動框不存在同樣，當浮動框高度超出包含框的時候，也就會
出現包含框不會
自動伸高來閉合浮動元素（「高度塌陷」現象）。顧名思義，就是漂浮於普通流之上，像浮
雲同樣，可是隻能左右浮動。
正是由於浮動的這種特性，致使本屬於普通流中的元素浮動以後，包含框內部因爲不存在其
他普通流元素了，
也就表現出高度爲0（高度塌陷）。在實際佈局中，每每這並非咱們所但願的，因此須要
閉合浮動元素，
使其包含框表現出正常的高度。
第八章定位網頁元素
第八章定位網頁元素
01.只有塊級標籤才能夠浮動
02.定位網頁元素的方案
Static：默認
Absolute：絕對定位
Reletive：相對定位，相對的對象是自身
Fixed：固定的，相似於空間的Top 效果
重點中的重點：
絕對定位：
01.涉及到兩個標籤，而且標籤有嵌套
關係。
02.通常給外層標籤設置爲相對定位
Position:relative，不須要設置left，top 等
偏移量。
03. 給內層標籤設置絕對定位，
position:absolute;，須要設置left 和top
項目階段
01.經濟半小時
02.噹噹圖書榜
03.噹噹暢銷排行
004.淘寶導航
005.開心網
006.V+首頁
007.曬新貨頁面
008.商品詳細頁
009.家紡頁面
010.幫助中心
011.註冊和登錄頁css