[HTML & CSS] HTML和CSS基礎知識

時間  2019-11-11
標籤 html css 基礎 知識 欄目 HTML 简体版
原文   原文鏈接

最近將博客簡單地修飾了下，須要用到HTML和CSS代碼，花了一天時間學習了一下這兩方面的知識。雖然內容很簡單，可是足夠用來修改本身的博客了。css

1. HTML

1.1. HTML介紹

HTML與CSS的關係html

HTML瀏覽器

網頁內容的載體，內容包含文字、圖片、視頻等。服務器

CSS佈局

網頁的樣式，即表現，包含標題字體、顏色、邊框等。學習

JavaScript字體

實現網頁上的特效效果。搜索引擎

 

HTML文件的基本結構spa

 
<html>
    <head>…</head>
    <body>…</body>
</html>

 

 <html></html> 爲根標籤，全部網頁標籤都在其中。code

 <head> 用於定義文檔的頭部，是全部頭部元素的容器，描述了文檔的各類屬性和信息，包括

<title>、<script>、<style>、<link>、<meta>

等標籤，絕大多數頭部包含的數據都不會真正做爲內容顯示給讀者。

 <body> 標籤之間的內容是網頁的主要內容，包括

<h1>、<p>、<a>、<img>

等網頁內容標籤，這裏的內容會在瀏覽器中顯示出來。

HTML文件的代碼註釋， <!--comments--> 

1.2. 標籤

標籤的用途：即語義化，明白每一個標籤的用途。語義化將使網頁更容易被搜索引擎收錄以及更容易讓屏幕閱讀器讀出網頁內容。

標籤

描述

備註

 <title>

網頁標題信息，會出如今瀏覽器的標題欄中。

告訴用戶和搜索引擎這個網頁的主要內容是什麼，搜索引擎能夠經過網頁標題，迅速判斷出網頁的主題。

 <p>

段落。

默認段落間會有空白。

 <hx>

文章標題，h1等級最高。

默認標題會加粗。

 <em>

表示強調。

默認用斜體表示。

 <strong>

表示強調。

默認用粗體表示。

 <span>

設置單獨的樣式。

沒有語義。

 <q>

引用，表示引用別人的話（簡短）。

自動爲引用語句添加雙引號。

 <blockquote>

對長文本的引用。

縮進樣式。

 <br/>

加入回車換行。

空標籤，即沒有內容，只需寫一個開始標籤。HTML忽略回車和空格，因此須要使用標籤。

 &nbsp

加入空格。

空標籤。格式爲 &nbsp;&nbsb;

 <hr/>

加入分割的橫線。

空標籤，默認線條比較粗，顏色爲灰色。

 <address>

地址信息。

默認爲斜體。

 <code>

一行代碼。

 

 <pre>

多行代碼。

此標籤中的文本會保留空格和換行符。

 <ul>

無序信息列表。

默認每項li自帶一個圓點項目符號。

語法格式爲，

<ul>
    <li>…</li>
    <li>…</li>
</ul>

 <ol>

有序信息列表。

每項li自帶一個序號，默認從1開始。

語法格式爲，

<ol>
    <li>…</li>
    <li>…</li>
</ol>

 <div>

容器，劃分一些獨立的邏輯部分。

用id屬性爲 <div> 提供惟一的名稱。

語法格式爲，

 <div id=「板塊名稱」>…</div>

 <table>

表格。

默認沒有表格線。

語法格式爲，

<table summary=「摘要」>
    <tr>
        <th>…</th>
        <th>…</th>
        <th>…</th>
    </tr>
    <tr>
        <td>…</td>
        <td>…</td>
        <td>…</td>
    </tr>
</table>

 <th> 表示表格表頭，默認粗體居中。

 <caption>

表格標題。

默認在表格上方。

 <a>

超連接。

默認連接文本爲藍色，點擊後爲紫色，並在當前瀏覽器窗口打開。

語法格式爲，

 <a href=「目標網址」 title=「鼠標滑過顯示的文本」> 連接顯示的文本 </a>

 <img>

插入圖片。

圖片能夠是GIF、PNG、JPEG格式。

語法格式爲，

 <img src=「圖片地址」 alt=「下載失敗時的替換文本」 title=「鼠標滑過圖片時顯示的文本」> 

 <form>

表單，將瀏覽器輸入的數據傳送到服務器端。

語法格式爲，

 <form method=「傳送方式」 action=「服務器文件」>

 <input>

form輸入框。

語法格式爲，

 <input type=「text/password」 name=「名稱」 value=「文本」>

 <textarea>

多行文本輸入。

 <textarea rows=「行數」 cols=「列數」>文本</ textarea>

 <select>

下拉選擇框。

 

 <label>

當用戶單擊選中的label標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上。

語法格式爲，

 <label for=「控件id名稱」>

2. CSS

2.1. CSS介紹

CSS全稱爲「層疊樣式表（Cascading Style Sheets）」，用於定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字體加粗等。

CSS樣式由選擇符和聲明組成，而聲明又由屬性和值組成，格式爲，

 p {color: blue} 

p爲選擇符，color爲屬性，blue爲值。

選擇符又稱選擇器，指明網頁中要應用樣式規則的元素。

聲明在大括號中，多條聲明時，以分號間隔。

CSS文件的代碼註釋， /* comments */ 

2.2. CSS基本知識

CSS樣式代碼插入形式

內聯式

將CSS代碼直接寫在現有的HTML標籤中，如，

 <p style=「color: red」>這裏文字是紅色</p> 

嵌入式

將CSS代碼寫在<style type=「text/css」></style>標籤之間，如，

<style type=「text/css」>
span{
    color: red;
}
</style>

外部式

將CSS代碼寫在一個以.css爲擴展名的文件中，在 <head> 內使用 <link> 標籤將CSS樣式文件連接到HTML文件內，如，

 <link href=「base.css」 rel=「stylesheet」 type=「text/css」> 

三種方式的優先級：內聯式 > 嵌入式 > 外部式（離被設置元素越近優先級別越高）。

 

選擇器分類

 .類選擇器{css樣式代碼;} 

使用標籤時，不須要.符號

使用class=「類選擇器名稱」爲標籤設置一個類，如，

 <span class=「stress」>膽小如鼠</span>

 #ID選擇器{css樣式代碼;} 

使用id=「類選擇器名稱」爲標籤設置一個類，如，

 <span id=「stress」>膽小如鼠</span>

兩種選擇器能夠應用於任何元素，但ID選擇器只能在一個HTML文檔中使用一次，而類選擇器可使用屢次；可使用類選擇器列表方法爲一個元素同時設置多個樣式，不能使用ID選擇器列表。

 

其它選擇器

子選擇器（.選擇器>標籤{}）

做用於該選擇器下的第一代子元素。

包含選擇器（.選擇器 標籤{}）

做用於該選擇器下的全部後代元素。

通用選擇器（*{}）

做用於HTML中全部標籤元素。

僞類選擇器（a:hover{}）

hover爲鼠標滑過的狀態，即不存在HTML標籤。

分組選擇器（h1,span{}）

爲多個標籤設置同一個樣式。

 

CSS樣式的特性

繼承性

CSS的某些樣式具備繼承性（如color、font-size等），而一些樣式不具備繼承性（如border等）。

特殊性

爲同一個元素設置了不一樣的CSS樣式值時，根據權值判斷使用哪一種CSS樣式。標籤的權值爲1，類選擇符的權值爲10，ID選擇符的權值最高爲100。

層疊性

對於同一個元素有多個CSS樣式，而且其權值相同時，處於最後面的CSS樣式會被使用（就近優先）。

重要性

使用!important設置某些樣式具備最高權值，如

p{color: red !important;}

 

CSS格式化排版

font-family

設置字體， {font-family: 「Microsoft Yahei」;} 兼容性好於 {font-family: 「微軟雅黑」;} 。

font-size

字號，單位使用像素px。

color

字體顏色。

font-weight

字體樣式，bold。

font-style

字體樣式，italic。

text-decoration

字體樣式，underline、line-through。

text-indent

縮進，如p {text-indent: 2em;} ，段落首行縮進兩個空格。

line-height

行間距。

letter-spacing

文字間距。

word-spacing

英文單詞間距。

text-align

塊狀元素位置，center、left、right。

 

CSS中的HTML元素分類

塊狀元素

 
<div>、<p>、<hx>、<ol>、<dl>、<table>、<address>
、<blockquote>、<form>、<ul>、<li>

等，重新的一行開始，而且其後的元素也另起一行，元素的高度、寬度、行高及底邊距均可以設置，設置 display: block 可將元素顯示爲塊狀元素。

內聯元素

 
<a>、<span>、<br>、<i>、<em>、<strong>、<lable>、
<q>、<var>、<cite>、<code>

等，即行內元素，元素的高度、寬度、行高及底邊距都不可設置，設置 display: inline 可將元素顯示爲內聯元素。

內聯塊狀元素

 <img>、<input> 等，具有塊狀元素和內聯元素的特色，和其它元素都在一行上，元素的高度、寬度、行高及底邊距均可以設置，設置 display: inline-block 可將元素顯示爲內聯塊狀元素。

 

盒模型，

元素的實際寬度和高度即爲margin（邊界）+ border（邊框）+ padding（填充）+ 內容。

CSS佈局模型

流動模型（Flow）

默認的網頁佈局模型，即塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分佈，內聯元素都會在所處的包含元素內。

浮動模型（Float）

設置float可使兩個塊狀元素並排顯示

層模型（Layer）

設置position能夠設置元素顯示位置，有三種形式：絕對定位（ position: absolute ）、相對定位（ position: relative ）、固定定位（ position: fixed ）。其中絕對定位使用left、right、top、bottom屬性相對於其最接近的一個具備定位屬性的父包含塊進行定位，相對定位則使用left、right、top、bottom屬性相對於之前的位置進行定位，固定定位使用left、right、top、bottom屬性相對於瀏覽器視圖進行定位。

 

單位和值

顏色值

四種表示方法，

1 p{color: red;}
2 p{color: rgb(100,100, 00);}
3 p{color: rgb(20%,20%,20%);}
4 p{color: #00ffff;}

長度值

px（像素）、em（倍率）、百分比。

 

一些技巧

行內元素水平居中

設置 text-align: center 便可。

塊狀元素水平居中

分爲兩種狀況，定寬塊狀元素和不定寬塊狀元素。

定寬塊狀元素：

設置左右margin值爲auto（必須有定寬值width）；

不定寬塊狀元素：

方法一，在HTML中加入table標籤，設置 display: inline ，設置 position: relative 和 left: 50% 。

方法二，設置 display: inline ，設置 text-align: center 。

方法三，父元素設置float而且設置 position: relative 和 left: 50% ，子元素設置 position: relative 和 left: 50% 。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程