酷炫網頁制作之《HTML認識及基礎標簽使用》，分分鐘搞定

么是HTML

Hyper Text Markup Language, 超文本標記語言

標記又稱為標簽(Tag), 一般語法:

它可以有屬性(Attribute):

<tagName attributeName="value">, 如:

標簽也可以不成對地關閉:

HTML文檔由瀏覽器解釋并執行。

HTML文檔基本結構

<!DOCTYPE html> ----- 告訴瀏覽器用html5的標準來解釋和執行該網頁
<html>
<head> ---- 頭部, 可包含meta, title等標簽

</head>
<body> ---- 主體, 包含主要內容

</body>
</html>

title

網頁標題, 顯示在瀏覽器選項卡的標題欄上!

文本排版標簽

h1-h6: 內容標題標簽
p: 段落
br: 換行
hr: 水平線
strong: 粗體文本
em: 斜體文本
span: 無任何特殊樣式的文本
pre: 預格式標簽,其中的內容在頁面上帶格式渲染
small: 比當前字體小的文本

html特殊字符/轉義字符

空格
< 小于
> 大于
? 版權符
" 雙引號

html注釋

圖像標簽

<img
src="圖像地址"
title="鼠標懸停提示"
alt="圖像加載錯誤時的替代文本"
width="寬度"
height="高度"
/>

圖像地址分為2種:

1. 相對地址, 如: img/cc.jpg

2. 絕對地址, 如: http://img.bcd.com/2017/1644232421.jpg

超鏈接

<a href="鏈接地址" target="目標窗口">文本|圖片</a>

目標窗口:

_self: 目標頁面在當前窗口打開

_blank: 目標頁面在新窗口中打開

如果是在頁面具有frameset/frame/iframe的場景下:

_top: 在頂級窗口中打開

_parent: 在父級窗口中打開

_自定義名稱: 在指定的特定窗口中打開

三種用法:

1. 頁面間鏈接
<a href="page/login.html"></a>
2. 錨鏈接
<a href="#help"></a>
help是本頁面中一處id為help的標簽, 如: <p id="help">
或者:
help是通過a標簽命名的錨記, 如: <a name="help"></a>
3. 功能性鏈接
喚醒本地安裝的外部程序如 outlook/foxmail/qq/msn/aliwangwang...
<a href="mailto:abcdef@qq.com"></a>

div標簽

div是一個容器, 常用于頁面的布局

標簽的分類:

1. 塊級標簽/塊級元素
如: div, h1-h6, p, hr
特征: 獨占容器中的一行, 其寬度是容器的100%
2. 行級標簽/行級元素
如: span, img, strong, em, a

特征1: 多個行級元素可以同處一行, 其寬度由內容來撐開(auto)

特征2: 大部分行級元素設置其width/height無效

HBuilder常用快捷鍵

ctrl + D : 刪除當前行
ctrl + PgUp : 當前行上移
ctrl + PgDown : 當前行下移
ctrl + / : 注釋 | 取消注釋
ctrl + shift + F : 整理代碼格式
ctrl + C : 復制當前行
ctrl + X : 剪切當前行
ctrl + V : 粘貼
ctrl + Z : 撤消上一步操作
ctrl + S : 保存當前文件
ctrl + shift + S : 保存項目中全部文件
ctrl + Enter : 在當前行的下方插入新行
ctrl + shift + Enter : 在當前行的上方插入新行

以上知識能做的效果圖

部分效果

SS 組合選擇符

	組合選擇符說明了兩個選擇器直接的關系。

CSS組合選擇符包括各種簡單選擇符的組合方式。

在 CSS3 中包含了四種組合方式:

后代選取器(以空格分隔)
子元素選擇器(以大于號分隔）
相鄰兄弟選擇器（以加號分隔）
普通兄弟選擇器（以破折號分隔）

后代選取器

后代選取器匹配所有值得元素的后代元素。

以下實例選取所有 <p> 元素插入到 <div> 元素中:

實例

divp{background-color:yellow;}

子元素選擇器

與后代選擇器相比，子元素選擇器（Child selectors）只能選擇作為某元素子元素的元素。

以下實例選擇了<div>元素中所有直接子元素 <p> ：

實例

div>p{background-color:yellow;}

相鄰兄弟選擇器

相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的元素，且二者有相同父元素。

如果需要選擇緊接在另一個元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器（Adjacent sibling selector）。

以下實例選取了所有位于 <div> 元素后的第一個 <p> 元素:

實例

div+p{background-color:yellow;}

普通相鄰兄弟選擇器

普通兄弟選擇器選取所有指定元素的相鄰兄弟元素。

以下實例選取了所有 <div> 元素的所有相鄰兄弟元素 <p> :

實例

div~p{background-color:yellow;}

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

SS3是css技術的升級版本，CSS3語言開發是朝著模塊化發展的。以前的規范作為一個模塊實在是太龐大而且比較復雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進來。這些模塊包括：盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等。

css3的優點：CSS3將完全向后兼容，所以沒有必要修改現在的設計來讓它們繼續運作。網絡瀏覽器也還將繼續支持CSS2。對我們來說，CSS3主要的影響是將可以使用新的可用的選擇器和屬性，這些會允許實現新的設計效果（譬如動態和漸變），而且可以很簡單的設計出現在的設計效果（比如說使用分欄）

概念：漸進增強：漸進增強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗

優雅降級 graceful degradation：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容

區別：優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶。

CSS3選擇符:

1、屬性選擇器：

1）E[attr]：只使用屬性名，但沒有確定任何屬性值2）E[attr=“value”]：指定屬性名，并指定了該屬性的屬性值

3）E[attr~=“value”]：指定屬性名，并且具有屬性值，此屬性值是一個詞列表，并且以空格隔開，其中詞列表中包含了一個value詞，而且等號前面的“?”必須的

4）E[attr^=“value”]：指定了屬性名，并且有屬性值，屬性值是以value開頭的

5）E[attr$=“value”]：指定了屬性名，并且有屬性值，而且屬性值是以value結束的

6）E[attr*=“value”]：指定了屬性名，并且有屬性值，而且屬值中包含了value

7）E[attr|=“value”]：指定了屬性名，并且屬性值僅是value或者以“value-”開頭的值（比如說left-con）

<style>							  	input[value|="a"]{color:#ff0;}
</style>						
<input  value=“a”   > 只有al
<input  value=“a-”  > 以al- 開頭的

2、偽類選擇器

1）結構性偽類選擇器

X:first-child 匹配子集的第一個元素。IE7就可以支持

X:last-child 匹配父元素中最后一個X元素 X:nth-child(n) 用于匹配索引值為n的子元素。索引值從1開始X:only-child 這個偽類一般用的比較少，比如上述代碼匹配的是div下的有且僅有一個的p，也就是說，如果div內有多個p，將不匹配。 (唯一的一個子元素)X:nth-last-child(n) 從最后一個開始算索引。

注：(n) 括號里可以指定參數值，也可以寫表達式如：2n n+1 \ odd \even

位置和標簽都要匹配上

X:first-of-type 匹配同級(相同的元素)兄弟元素中的第一個X元素X:last-of-type 匹配同級兄弟元素中的最后一個X元素X:nth-of-type(n) 匹配同類型中的第n個同級兄弟元素XX:only-of-type 匹配屬于同類型中唯一兄弟元素的XX:nth-last-of-type(n) 匹配同類型中的倒數第n個同級兄弟元素X

:root匹配文檔的根元素。在HTML（標準通用標記語言下的一個應用）中，根元素永遠是HTMLX:empty**匹配沒有任何子元素（包括包含文本）的元素X

目標偽類選擇器:

E:target 選擇匹配E的所有元素，且匹配元素被相關URL指向 (如：錨點鏈接)

動態偽類選擇器

E:link 鏈接偽類選擇器選擇匹配的E元素，而且匹配元素被定義了超鏈接并未被訪問過。常用于鏈接描點上E:visited 鏈接偽類選擇器選擇匹配的E元素，而且匹配元素被定義了超鏈接并已被訪問過。常用于鏈接描點上E:active 用戶行為選擇器選擇匹配的E元素，且匹配元素被激活。常用于鏈接描點和按鈕上E:hover 用戶行為選擇器選擇匹配的E元素，且用戶鼠標停留在元素E上。IE6及以下瀏覽器僅支持a:hoverE:focus 用戶行為選擇器選擇匹配的E元素，而且匹配元素獲取焦點

UI 元素狀態偽類選擇器

E:enabled 匹配所有用戶界面（form表單）中處于可用狀態的E元素E:disabled 匹配所有用戶界面（form表單）中處于不可用狀態的E元素E:checked 匹配所有用戶界面（form表單）中處于選中狀態的元素E

默認選中： checked 禁用：disabled 可用：enabled

E::selection 匹配E元素中被用戶選中或處于高亮狀態的部分

層級選擇器

E>F

子選擇器選擇匹配的F元素，且匹配的F元素所匹配的E元素的子元素

E+F相鄰兄弟選擇器(找后面的相鄰的第一個同輩元素)選擇匹配的F元素，且匹配的F元素緊位于匹配的E元素的后面

E~F通用選擇器 (找后面的所有同輩元素)選擇匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

在線咨詢

上一篇：HTML表單3（下拉列表、多行文字輸入）-零基礎自學網頁制作
下一篇：總結php刪除html標簽和標簽內的內容的方法

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商