Java前端技术学习
一、Html和CSS的關系
學習web前端開發基礎技術需要掌握：HTML、CSS、JavaScript語言
1. HTML是網頁內容的載體。內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
2. CSS樣式是表現。就像網頁的外衣。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。
3. JavaScript是用來實現網頁上的特效效果。如：鼠標滑過彈出下拉菜單。或鼠標滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這么理解，有動畫的，有交互的一般都是用JavaScript來實現的。
html 標簽
<html></html>稱為根標簽，所有的網頁標簽都在<html></html>中。
<head> 標簽用于定義文檔的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標簽
在<body>和</body>標簽之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標簽，在這里的標簽中的內容會在瀏覽器中顯示出來。
<title>標簽：在<title>和</title>標簽之間的文字內容是網頁的標題信息，它會出現在瀏覽器的標題欄中。網頁的title標簽用于告訴用戶和搜索引擎這個網頁的主要內容是什么，搜索引擎可以通過網頁標題，迅速的判斷出網頁的主題。每個網頁的內容都是不同的，每個網頁都應該有一個獨一無二的title。
<h1></h1> 標題標簽
<p></p> 段落標簽
代碼注解的語法：<!--注釋文字 -->
CSS
CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用于定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字體加粗等。
css 樣式由選擇符和聲明組成，而聲明又由屬性和值組成
選擇符：又稱選擇器，指明網頁中要應用樣式規則的元素，如本例中是網頁中所有的段（p）的文字將變成藍色，而其他的元素（如ol）不會受到影響。
聲明：在英文大括號“｛｝”中的的就是聲明，屬性和值之間用英文冒號“：”分隔。當有多條聲明時，中間可以英文分號“;”分隔
就像在Html的注釋一樣，在CSS中也有注釋語句：用/*注釋語句*/來標明（Html中使用<!--注釋語句-->)。
CSS樣式可以寫在哪些地方呢？從CSS 樣式代碼插入的形式來看基本可以分為以下3種：內聯式、嵌入式和外部式三種。這三種的優先級遵守就近原則
內聯式css樣式表就是把css代碼直接寫在現有的HTML標簽中
外部式css樣式，寫在單獨的一個文件中
外部式css樣式(也可稱為外聯式)就是把css代碼寫一個單獨的外部文件中，這個css樣式文件以“.css”為擴展名，在<head>內（不是在<style>標簽內）使用<link>標簽將css樣式文件鏈接到HTML文件內
<link href="base.css" rel="stylesheet" type="text/css" />
類選擇器在css樣式編碼中是最常用到的
語法：.類選器名稱{css樣式代碼;}
注意：
1、英文圓點開頭
2、其中類選器名稱可以任意起名（但不要起中文噢）
使用方法：
第一步：使用合適的標簽把要修飾的內容標記起來，如下：
<span>勇氣</span>
第二步：使用class="類選擇器名稱"為標簽設置一個類，如下：
<span class="stress">勇氣</span>
第三步：設置類選器css樣式，如下：.stress{color:red;}/*類前面要加入一個英文圓點*/
還有一個比較有用的選擇器子選擇器，即大于符號(>),用于選擇指定標簽元素的第一代子元素。如右側代碼編輯器中的代碼：.food>li{border:1px solid red;}
這行代碼會使class名為food下的子元素li（水果、蔬菜）加入紅色實線邊框。
包含選擇器，即加入空格,用于選擇指定標簽元素下的后輩元素。如右側代碼編輯器中的代碼：
.first ?span{color:red;}
這行代碼會使第一段文字內容中的“膽小如鼠”字體顏色變為紅色。
請注意這個選擇器與子選擇器的區別，子選擇器（child selector）僅是指它的直接后代，或者你可以理解為作用于子元素的第一代后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進行選擇，而子選擇器是通過“>”進行選擇。
總結：>作用于元素的第一代后代，空格作用于元素的所有后代。
通用選擇器
通用選擇器是功能最強大的選擇器，它使用一個（*）號指定，它的作用是匹配html中所有標簽元素，如下使用下面代碼使用html中任意標簽元素字體顏色全部設置為紅色：
* {color:red;}
什么是塊級元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是塊級元素。
塊級元素特點：
1、每個塊級元素都從新的一行開始，并且其后的元素也另起一行。（真霸道，一個塊級元素獨占一行）
2、元素的高度、寬度、行高以及頂和底邊距都可設置。
3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。
在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的內聯元素（行內元素）（inline）元素。
內聯元素特點：
1、和其他元素都在一行上；
2、元素的高度、寬度及頂部和底部邊距不可設置；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。
內聯塊狀元素（inline-block）就是同時具備內聯元素、塊狀元素的特點
inline-block 元素特點：
1、和其他元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距都可設置。
css布局模型
布局模型與盒模型一樣都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基礎之上，又不同于我們常說的 CSS 布局樣式或 CSS 布局模板。如果說布局模型是本，那么 CSS 布局模板就是末了，是外在的表現形式。?
在網頁中，元素有三種布局模型：
1、流動模型（Flow）
2、浮動模型 (Float)
3、層模型（Layer）
流動布局模型具有2個比較典型的特征：
第一點，塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在默認狀態下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式占據位置。如右側代碼編輯器中三個塊狀元素標簽(div，h1，p)寬度顯示為100%。
第二點，在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分布顯示。（內聯元素可不像塊狀元素這么霸道獨占一行）
浮動模型
塊狀元素這么霸道都是獨占一行，如果現在我們想讓兩個塊狀元素并排顯示，怎么辦呢？不要著急，設置元素浮動就可以實現這一愿望。
任何元素在默認情況下是不能浮動的，但可以用 CSS 定義為浮動，如 div、p、table、img 等元素都可以被定義為浮動。
什么是層布局模型？
層布局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣，每個圖層能夠精確定位操作
CSS定義了一組定位（positioning）屬性來支持層布局模型。
層模型有三種形式：
1、絕對定位(position: absolute)
2、相對定位(position: relative)
3、固定定位(position: fixed)
長度單位總結一下，目前比較常用到px（像素）、em、% 百分比，要注意其實這三種單位都是相對單位。
1、像素
像素為什么是相對單位呢？因為像素指的是顯示器上的小點（CSS規范中假設“90像素=1英寸”）。實際情況是瀏覽器會使用顯示器的實際像素值有關，在目前大多數的設計者都傾向于使用像素（px）作為單位。
2、em
就是本元素給定字體的 font-size 值，如果元素的 font-size 為 14px ，那么 1em = 14px；如果 font-size 為 18px，那么 1em = 18px。如下代碼：
p{font-size:12px;text-indent:2em;}
上面代碼就是可以實現段落首行縮進 24px（也就是兩個字體大小的距離）。
下面注意一個特殊情況：
但當給 font-size 設置單位為 em 時，此時計算的標準以 p 的父元素的 font-size 為基礎。如下代碼：
html:
<p>以這個<span>例子</span>為例。</p>
css:
p{font-size:14px}
span{font-size:0.8em;}
結果 span 中的字體“例子”字體大小就為 11.2px（14 * 0.8 = 11.2px）。
3、百分比
p{font-size:12px;line-height:130%}
設置行高（行間距）為字體的130%（12 * 1.3 = 15.6px）。
轉載于:https://blog.51cto.com/zhoum1118/1736190
總結
以上是生活随笔為你收集整理的Java前端技术学习的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mod_python模块安装
- 下一篇： 2017年html5行业报告,云适配发布