天天看點
傳回

html 和 css 入門1 html概述及html文檔基本結構2 html标簽入門3 html布局4 css介紹5 css引入方式6 css選擇器一7 css屬性8 css布局示範

1 html概述及html文檔基本結構

1.1 html概述

HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本标記語言，超文本指的是超連結，标記指的是标簽，是一種用來制作網頁的語言，這種語言由一個個的标簽組成，用這種語言制作的檔案儲存的是一個文本檔案，檔案的擴充名為html或者htm。

1.2 html文檔基本結構

一個html的基本結構如下：

<!DOCTYPE html>
<html>
    <head>            
        <meta charset="UTF-8">
        <title>網頁标題</title>
    </head>
    <body>
          網頁顯示内容
    </body>
</html>

第一行是文檔聲明，第二行“<html>”标簽和最後一行“</html>”定義html文檔的整體，“<head>”标簽和“<body>”标簽是它的第一層子元素，“<head>”标簽裡面負責對網頁進行一些設定以及定義标題，設定包括定義網頁的編碼格式，外鍊css樣式檔案和javascript檔案等，設定的内容不會顯示在網頁上，“<title>”标簽裡面是标題的内容，會顯示在标題欄，“<body>”内編寫網頁上顯示的内容。

一個html檔案就是一個網頁，html檔案用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用浏覽器打開，浏覽器會按照标簽描述内容将檔案渲染成網頁。

1.3 html文檔快速建立

建立一個html文檔後，可以用快捷鍵的方式快速建立html文檔。快捷鍵：!+tab鍵，或者 html:5+tab鍵

2 html标簽入門

2.1 标簽文法

學習html語言就是學習标簽的用法，html常用的标簽有20多個，學會這些标簽的使用，就基本上學會了HTML的使用。

2.2 标簽的的使用方法 

<!-- 1、成對出現的标簽：-->

<h1>h1标題</h1>
<div>這是一個div标簽</div>
<p>這個一個段落标簽</p>


<!-- 2、單個出現的标簽： -->
<br>
<img src="images/pic.jpg" alt="圖檔">

<!-- 3、帶屬性的标簽，如src、alt 和 href等都是屬性 -->
<img src="images/pic.jpg" alt="圖檔">
<a href="http://www.baidu.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >百度網</a>

<!-- 4、标簽的嵌套 -->
<div>
    <img src="images/pic.jpg" alt="圖檔">
    <a href="http://www.baidu.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >百度網</a>
</div>

2.3 塊元素标簽(行元素)和内聯元素标簽(行内元素)

标簽在頁面上會顯示成一個方塊。除了顯示成方塊，它們一般分為下面兩類：

塊元素：在布局中預設會獨占一行，塊元素後的元素需換行排列。

内聯元素：元素之間可以排列在一行，設定寬高無效，它的寬高由内容撐開。

2.3.1 常用塊元素标簽

1、标題标簽，表示文檔的标題，除了具有塊元素基本特性外，還含有預設的外邊距和字型大小

<h1>一級标題</h1>
<h2>二級标題</h2>
<h3>三級标題</h3>
<h4>四級标題</h4>
<h5>五級标題</h5>
<h6>六級标題</h6>

2、段落标簽，表示文檔中的一個文字段落，除了具有塊元素基本特性外，還含有預設的外邊距

<p>本人叫張山，畢業于某大學計算機科學與技術專業，今年23歲，本人性格開朗、
穩重、待人真誠、熱情。有較強的組織能力和團隊協作精神，良好的溝通能力和社
交能力，善于處理各種人際關系。能迅速适應環境，并融入其中。</p>
<p>本人熱愛研究技術，熱愛程式設計，希望能在努力為企業服務的過程中實作自身價值。</p>

3、通用塊容器标簽，表示文檔中一塊内容，具有塊元素基本特性，沒有其他預設樣式

<div>這是一個div元素</div>
<div>這是第二個div元素</div>
<div>
    <h3>自我介紹</h3>
    <p>本人叫張山，畢業于某大學計算機科學與技術專業，今年23歲，本人性格開朗、
穩重、待人真誠、熱情。有較強的組織能力和團隊協作精神，良好的溝通能力和社
交能力，善于處理各種人際關系。能迅速适應環境，并融入其中。</p>
</div>

2.3.2 常用内聯元素标簽

1、超連結标簽，連結到另外一個網頁，具有内聯元素基本特性，預設文字藍色，有下劃線

<a href="02.html" target="_blank" rel="external nofollow" >第二個網頁</a>
<a href="http://www.baidu.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >百度網</a>
<a href="http://www.baidu.com" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ><img src="images/logo.png" alt="logo"></a>
<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >預設連結</a>

2、通用内聯容器标簽，具有内聯元素基本特性，沒有其他預設樣式

<p>這是一個段落文字，段落文字中有<span>特殊标志或樣式</span>的文字</p>

3、圖檔标簽，在網頁中插入圖檔，具有内聯元素基本特性，但是它支援寬高設定。

<img src="images/pic.jpg" alt="圖檔" />

2.3.3 其他常用功能标簽

1、換行标簽

<p>這是一行文字，<br>這是一行文字</p>

2、html注釋

html文檔代碼中可以插入注釋，注釋是對代碼的說明和解釋，注釋的内容不會顯示在頁面上，html代碼中插入注釋的方法是：

<!-- 這是一段注釋  -->

2.4 常用html字元實體

代碼中成段的文字，如果文字間想空多個空格，在代碼中空多個空格，在渲染成網頁時隻會顯示一個空格，如果想顯示多個空格，可以使用空格的字元實體,代碼如下：

<!--  在段落前想縮進兩個文字的空格，使用空格的字元實體：&nbsp;   -->
<p>
&nbsp;&nbsp;一個html檔案就是一個網頁，html檔案用編輯器打開顯示的是文本，可以用<br />
文本的方式編輯它，如果用浏覽器打開，浏覽器會按照标簽描述内容将檔案<br />
渲染成網頁，顯示的網頁可以從一個網頁連結跳轉到另外一個網頁。</p>

在網頁上顯示 “<” 和 “>” 會誤認為是标簽，想在網頁上顯示“<”和“>”可以使用它們的字元實體，比如：

<!-- “<” 和 “>” 的字元實體為 &lt; 和 &gt;  -->
<p>
    &lt;div&gt;是一個html的一個标簽<br>
    3 &lt; 5 <br>
    10 &gt; 5
</p>

3 html布局

3.1 網頁布局原理

标簽在網頁中會顯示成一個個的方塊，先按照行的方式，把網頁劃分成多個行，再到行裡面劃分列，也就是在表示行的标簽中再嵌套标簽來表示列，整體按照先整體，後局部，先大後小的順序來書寫結構。

html 和 css 入門1 html概述及html文檔基本結構2 html标簽入門3 html布局4 css介紹5 css引入方式6 css選擇器一7 css屬性8 css布局示範

3.2 布局示例

根據網頁布局的原理以及上面的執行個體，寫出網頁的html結構代碼。

3.3 标簽語義化

在布局中需要盡量使用帶語義的标簽，使用帶語義的标簽的目的首先是為了讓搜尋引擎能更好地了解網頁的結構，提高網站在搜尋中的排名(也叫做SEO)，其次是友善代碼的閱讀和維護。

3.3.1 帶語義的标簽 

1、h1~h6：表示标題

2、p：表示段落

3、img：表示圖檔

4、a：表示連結

3.3.2 不帶語義的标簽

1、div：表示一塊内容

2、span：表示行内的一塊内容

是以我們要根據網頁上顯示的内容，使用适合的标簽，可以優化之前的代碼。

4 css介紹

4.1 css概述

為了讓網頁元素的樣式更加豐富，也為了讓網頁的内容和樣式能拆分開，CSS由此思想而誕生，CSS是 Cascading Style Sheets 的首字母縮寫，意思是層疊樣式表。有了CSS，html中大部分表現樣式的标簽就廢棄不用了，html隻負責文檔的結構和内容，表現形式完全交給CSS，html文檔變得更加簡潔。

4.2 css基本文法

css的定義方法是：選擇器 { 屬性：值； 屬性：值； 屬性：值；}

選擇器是将樣式和頁面元素關聯起來的名稱，屬性是希望設定的樣式屬性，每個屬性有一個或多個值。屬性和值之間用冒号，一個屬性和值與下一個屬性和值之間用分号，最後一個分号可以省略，代碼示例：

div{ 
    width:100px; 
    height:100px; 
    background:gold; 
}

5 css引入方式

css引入頁面的方式有三種：

1、内聯式：通過标簽的style屬性，在标簽上直接寫樣式。

<div style="width:100px; height:100px; background:red ">......</div>

2、嵌入式：通過style标簽，在網頁上建立嵌入的樣式表。

<style type="text/css">
    div{ width:100px; height:100px; background:red }
    ......
</style>

3、外鍊式：通過link标簽，連結外部樣式檔案到頁面中。

<link rel="stylesheet" type="text/css" href="css/main.css" target="_blank" rel="external nofollow" >

6 css選擇器一

6.1 标簽選擇器

标簽選擇器，此種選擇器影響範圍大，一般用來做一些通用設定，或用在層級選擇器中。

div{color:red} 
......
<div>這是第一個div</div>   <!-- 對應以上樣式 -->
<div>這是第二個div</div>   <!-- 對應以上樣式 -->

6.2 類選擇器

通過類名來選擇元素，一個類可應用于多個元素，一個元素上也可以使用多個類，應用靈活，可複用，是css中應用最多的一種選擇器。

.blue{color:blue}
.big{font-size:20px}
.box{width:100px;height:100px;background:gold} 
......
<div class="blue">....</div>
<h3 class="blue big box">....</h3>
<p class="blue box">....</p>

6.3 層級選擇器

主要應用在标簽嵌套的結構中，層級選擇器，是結合上面的兩種選擇器來寫的選擇器,它可與标簽選擇器結合使用，減少命名，同時也可以通過層級，限制樣式的作用範圍。

.con{width:300px;height:80px;background:green}
.con span{color:red}
.con .pink{color:pink}
.con .gold{color:gold}
......
<div class="con">
    <span>....</span>
    <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="pink">....</a>
    <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="gold">...</a>
</div>
<span>....</span>
<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="pink">....</a>

7 css屬性

7.1 布局常用樣式屬性：

  • width 設定元素(标簽)的寬度，如：width:100px;
  • height 設定元素(标簽)的高度，如：height:200px;
  • background 設定元素背景色或者背景圖檔，如：background:gold; 設定元素背景色為金色
  • border 設定元素四周的邊框，如：border:1px solid black; 設定元素四周邊框是1像素寬的黑色實線

以上也可以拆分成四個邊的寫法，分别設定四個邊的：

  • border-top 設定頂邊邊框，如：border-top:10px solid red;
  • border-left 設定左邊邊框，如：border-left:10px solid blue;
  • border-right 設定右邊邊框，如：border-right:10px solid green;
  • border-bottom 設定底邊邊框，如：border-bottom:10px solid pink;
  • padding 設定元素包含的内容和元素邊框的距離，也叫内邊距，如padding:20px;padding是同時設定4個邊的，也可以像border一樣拆分成分别設定四個邊:padding-top、padding-left、padding-right、padding-bottom。
  • margin 設定元素和外界的距離，也叫外邊距，如margin:20px;margin是同時設定4個邊的，也可以像border一樣拆分成分别設定四個邊:margin-top、margin-left、margin-right、margin-bottom。
  • float 設定元素浮動，浮動可以讓塊元素排列在一行，浮動分為左浮動：float:left; 右浮動：float:right;

7.2 文本常用樣式屬性一：

  • color 設定文字的顔色，如： color:red;
  • font-size 設定文字的大小，如：font-size:12px;
  • font-family 設定文字的字型，如：font-family:'微軟雅黑';為了避免中文字不相容，一般寫成：font-family:'Microsoft Yahei';
  • font-weight 設定文字是否加粗，如：font-weight:bold; 設定加粗 font-weight:normal 設定不加粗
  • line-height 設定文字的行高，如：line-height:24px; 表示文字高度加上文字上下的間距是24px，也就是每一行占有的高度是24px
  • text-decoration 設定文字的下劃線，如：text-decoration:none; 将文字下劃線去掉
  • text-align 設定文字水準對齊方式，如text-align:center 設定文字水準居中
  • text-indent 設定文字首行縮進，如：text-indent:24px; 設定文字首行縮進24px

7.3 樣式中的注釋 

/* 設定頭部的樣式 */
.header{
    width:960px;
    height:80px;
    background:gold;
}

8 css布局示範

通過樣式，并且參照下圖，可以把之前寫的布局做進一步的調整，完成最終的布局效果：

html 和 css 入門1 html概述及html文檔基本結構2 html标簽入門3 html布局4 css介紹5 css引入方式6 css選擇器一7 css屬性8 css布局示範
html前端 HTML入門 HTML标簽、布局 css入門 CSS選擇器 CSS屬性
上一篇: Css html elements,CSS &amp; HTML Moving elements
下一篇: html選擇器 父元素,CSS子元素選擇父元素

繼續閱讀