html概述及html文檔基本結構
html概述
HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本标記語言，超文本指的是超連結，标記指的是标簽，是一種用來制作網頁的語言，這種語言由一個個的标簽組成，用這種語言制作的檔案儲存的是一個文本檔案，檔案的擴充名為html或者htm。
html文檔基本結構
一個html的基本結構如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網頁标題</title>
</head>
<body>
網頁顯示内容
</body>
</html> 第一行是文檔聲明，第二行“<html>”标簽和最後一行“</html>”定義html文檔的整體，“<head>”标簽和“<body>”标簽是它的第一層子元素，“<head>”标簽裡面負責對網頁進行一些設定以及定義标題，設定包括定義網頁的編碼格式，外鍊css樣式檔案和javascript檔案等，設定的内容不會顯示在網頁上，标題的内容會顯示在标題欄，“<body>”内編寫網頁上顯示的内容。
一個html檔案就是一個網頁，html檔案用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用浏覽器打開，浏覽器會按照标簽描述内容将檔案渲染成網頁。
html文檔快速建立
建立一個html文檔後，可以用快捷鍵的方式快速建立html文檔。快捷鍵：!+tab鍵，或者 html:5+tab鍵
html标簽入門
标簽文法：
學習html語言就是學習标簽的用法，html常用的标簽有20多個，學會這些标簽的使用，就基本上學會了HTML的使用。
标簽的的使用方法：
<!-- 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">百度網</a>
<!-- 4、标簽的嵌套 -->
<div>
<img src="images/pic.jpg" alt="圖檔">
<a href="http://www.baidu.com">百度網</a>
</div> 塊元素标簽(行元素)和内聯元素标簽(行内元素)
标簽在頁面上會顯示成一個方塊。除了顯示成方塊，它們一般分為下面兩類：
塊元素：在布局中預設會獨占一行，塊元素後的元素需換行排列。
内聯元素：元素之間可以排列在一行，設定寬高無效，它的寬高由内容撐開。
常用塊元素标簽
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> 常用内聯元素标簽
1、超連結标簽，連結到另外一個網頁，具有内聯元素基本特性，預設文字藍色，有下劃線
<a href="02.html">第二個網頁</a>
<a href="http://www.baidu.com">百度網</a>
<a href="http://www.baidu.com"><img src="images/logo.png" alt="logo"></a>
<a href="#">預設連結</a> 2、通用内聯容器标簽，具有内聯元素基本特性，沒有其他預設樣式
<p>這是一個段落文字，段落文字中有<span>特殊标志或樣式</span>的文字</p> 3、圖檔标簽，在網頁中插入圖檔，具有内聯元素基本特性，但是它支援寬高設定。
<img src="images/pic.jpg" alt="圖檔" /> 其他常用功能标簽
1、換行标簽
<p>這是一行文字，<br>這是一行文字</p> 2、html注釋：
html文檔代碼中可以插入注釋，注釋是對代碼的說明和解釋，注釋的内容不會顯示在頁面上，html代碼中插入注釋的方法是：
<!-- 這是一段注釋 --> 常用html字元實體
代碼中成段的文字，如果文字間想空多個空格，在代碼中空多個空格，在渲染成網頁時隻會顯示一個空格，如果想顯示多個空格，可以使用空格的字元實體,代碼如下：
<!-- 在段落前想縮進兩個文字的空格，使用空格的字元實體： -->
<p>
一個html檔案就是一個網頁，html檔案用編輯器打開顯示的是文本，可以用<br />
文本的方式編輯它，如果用浏覽器打開，浏覽器會按照标簽描述内容将檔案<br />
渲染成網頁，顯示的網頁可以從一個網頁連結跳轉到另外一個網頁。</p>
在網頁上顯示 “<” 和 “>” 會誤認為是标簽，想在網頁上顯示“<”和“>”可以使用它們的字元實體，比如：
<p>
<div>是一個html的一個标簽
<br> 3 < 5
<br>10 > 5
</p> html布局初步
網頁布局原理
标簽在網頁中會顯示成一個個的方塊，先按照行的方式，把網頁劃分成多個行，再到行裡面劃分列，也就是在表示行的标簽中再嵌套标簽來表示列，标簽的嵌套産生疊加效果。
布局示例
根據網頁布局的原理以及上面的執行個體，寫出網頁的html結構代碼。
标簽語義化
在布局中需要盡量使用帶語義的标簽，使用帶語義的标簽的目的首先是為了讓搜尋引擎能更好地了解網頁的結構，提高網站在搜尋中的排名(也叫做SEO)，其次是友善代碼的閱讀和維護。
帶語義的标簽
1、h1~h6：表示标題
2、p：表示段落
3、img：表示圖檔
4、a：表示連結
不帶語義的标簽
1、div：表示一塊内容
2、span：表示行内的一塊内容
是以我們要根據網頁上顯示的内容，使用适合的标簽，可以優化之前的代碼。
css介紹
css概述
為了讓網頁元素的樣式更加豐富，也為了讓網頁的内容和樣式能拆分開，CSS由此思想而誕生，CSS是 Cascading Style Sheets 的首字母縮寫，意思是層疊樣式表。有了CSS，html中大部分表現樣式的标簽就廢棄不用了，html隻負責文檔的結構和内容，表現形式完全交給CSS，html文檔變得更加簡潔。
css基本文法
css的定義方法是：
選擇器 { 屬性：值； 屬性：值； 屬性：值；}
選擇器是将樣式和頁面元素關聯起來的名稱，屬性是希望設定的樣式屬性，每個屬性有一個或多個值。屬性和值之間用冒号，一個屬性和值與下一個屬性和值之間用分号，最後一個分号可以省略，代碼示例：
div{
width:100px;
height:100px;
background:gold;
} 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"> css選擇器
1、标簽選擇器
标簽選擇器，此種選擇器影響範圍大，一般用來做一些通用設定，或用在層級選擇器中。
舉例：
div{color:red}
......
<div>這是第一個div</div> <!-- 對應以上樣式 -->
<div>這是第二個div</div> <!-- 對應以上樣式 --> 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> 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="#" class="pink">....</a>
<a href="#" class="gold">...</a>
</div>
<span>....</span>
<a href="#" class="pink">....</a> 4、id選擇器
通過id名來選擇元素，元素的id名稱不能重複，是以一個樣式設定項隻能對應于頁面上一個元素，不能複用，id名一般給程式使用，是以不推薦使用id作為選擇器。
#box{color:red}
......
<p id="box">這是一個段落标簽</p> <!-- 對應以上一條樣式，其它元素不允許應用此樣式 -->
<p>這是第二個段落标簽</p> <!-- 無法應用以上樣式，每個标簽隻能有唯一的id名 -->
<p>這是第三個段落标簽</p> <!-- 無法應用以上樣式，每個标簽隻能有唯一的id名 --> 5、僞類選擇器
常用的僞類選擇器有hover，表示滑鼠懸浮在元素上時的狀态。
.box1:{width:100px;height:100px;background:gold;}
.box1:hover{width:300px;} css屬性入門
布局常用樣式屬性：
- 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;
文本常用樣式屬性一：
- 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
display屬性
display屬性是用來設定元素的類型及隐藏的，常用的屬性有：
1、none 元素隐藏且不占位置
2、block 元素以塊元素顯示
css元素溢出
當子元素的尺寸超過父元素的尺寸時，需要設定父元素顯示溢出的子元素的方式，設定的方法是通過overflow屬性來設定。
overflow的設定項：
1、visible 預設值。内容不會被修剪，會呈現在元素框之外。
2、hidden 内容會被修剪，并且其餘内容是不可見的。
3、scroll 内容會被修剪，但是浏覽器會顯示滾動條以便檢視其餘的内容。
4、auto 如果内容被修剪，則浏覽器會顯示滾動條以便檢視其餘的内容。
樣式中的注釋
/* 設定頭部的樣式 */
.header{
width:960px;
height:80px;
background:gold;
} 相對位址與絕對位址
網頁上引入或連結到外部檔案，需要定義檔案的位址，常見引入或連結外部檔案包括以下幾種：
<!-- 引入外部圖檔 -->
<img src="images/001.jpg" alt="圖檔" />
<!-- 連結到另外一個網頁 -->
<a href="002.html">連結到網頁2</a>
<!-- 外鍊一個css檔案 -->
<link rel="stylesheet" type="text/css" href="css/main.css" />
<!-- 外鍊一個js檔案 -->
<script type="text/javascript" src="js/jquery.js"></script> 這些位址分為相對位址和絕對位址:
相對位址
相對于引用檔案本身去定位被引用的檔案位址，以上的例子都是相對位址，相對位址的定義技巧：
- “ ./ ” 表示目前檔案所在目錄下，比如：“./pic.jpg” 表示目前目錄下的pic.jpg的圖檔，這個使用時可以省略。
- “ ../ ” 表示目前檔案所在目錄下的上一級目錄，比如：“../images/pic.jpg” 表示目前目錄下的上一級目錄下的images檔案夾中的pic.jpg的圖檔。
絕對位址
相對于磁盤的位置去定位檔案的位址，比如：<img src="C:\course5\03day\images\001.jpg" alt="圖檔" /> 絕對位址在整體檔案遷移時會因為磁盤和頂層目錄的改變而找不到檔案，相對位址就沒有這個問題。
CSS盒子模型
盒子模型解釋
元素在頁面中顯示成一個方塊，類似一個盒子，CSS盒子模型就是使用現實中盒子來做比喻，幫助我們設定元素對應的樣式。盒子模型示意圖如下：
把元素叫做盒子，設定對應的樣式分别為：盒子的寬度(width)、盒子的高度(height)、盒子的邊框(border)、盒子内的内容和邊框之間的間距(padding)、盒子與盒子之間的間距(margin)。
設定寬高
width:200px; /* 設定盒子的寬度，此寬度是指盒子内容的寬度，不是盒子整體寬度(難點) */
height:200px; /* 設定盒子的高度，此高度是指盒子内容的高度，不是盒子整體高度(難點) */
設定邊框
設定一邊的邊框，比如頂部邊框，可以按如下設定：
border-top:10px solid red; 其中10px表示線框的粗細；solid表示線性。
設定其它三個邊的方法和上面一樣，把上面的'top'換成'left'就是設定左邊，換成'right'就是設定右邊，換成'bottom'就是設定底邊。
四個邊如果設定一樣，可以将四個邊的設定合并成一句：
border:10px solid red; 設定内間距padding
設定盒子四邊的内間距，可設定如下：
padding-top：20px; /* 設定頂部内間距20px */
padding-left:30px; /* 設定左邊内間距30px */
padding-right:40px; /* 設定右邊内間距40px */
padding-bottom:50px; /* 設定底部内間距50px */
上面的設定可以簡寫如下：
padding：20px 40px 50px 30px; /* 四個值按照順時針方向，分别設定的是 上 右 下 左
四個方向的内邊距值。 */
padding後面還可以跟3個值，2個值和1個值，它們分别設定的項目如下：
padding：20px 40px 50px; /* 設定頂部内邊距為20px，左右内邊距為40px，底部内邊距為50px */
padding：20px 40px; /* 設定上下内邊距為20px，左右内邊距為40px*/
padding：20px; /* 設定四邊内邊距為20px */ 設定外間距margin
外邊距的設定方法和padding的設定方法相同，将上面設定項中的'padding'換成'margin'就是外邊距設定方法。
外間距居中技巧
如果子元素是塊元素，且它的寬度小于父元素，可以将子元素左右設定auto來水準居中子元素
/* 子元素上下外邊距設為0，左右設定為auto */
margin:0px auto 盒子的真實尺寸
盒子的width和height值固定時，如果盒子增加border和padding，盒子整體的尺寸會變大，是以盒子的真實尺寸為：
- 盒子寬度 = width + padding左右 + border左右
- 盒子高度 = height + padding上下 + border上下
無序清單标簽
無序清單一般應用在布局中的新聞标題清單和文章标題清單以及菜單，它是含有語義的，标簽結構如下：
<ul>
<li>清單标題一</li>
<li>清單标題二</li>
<li>清單标題三</li>
</ul>
清單的内容一般是可以連結的，點選連結到新聞或者文章的具體内容，是以具體結構一般是這樣的：
<ul>
<li><a href="#">清單标題一</a></li>
<li><a href="#">清單标題二</a></li>
<li><a href="#">清單标題三</a></li>
</ul> html表單
表單用于搜集不同類型的使用者輸入，表單由不同類型的标簽組成，相關标簽及屬性用法如下：
1、<form>标簽 定義整體的表單區域
- action屬性 定義表單資料送出位址
- method屬性 定義表單送出的方式，一般有“get”方式和“post”方式
2、<label>标簽 為表單元素定義文字标注
3、<input>标簽 定義通用的表單元素
- type屬性
- type="text" 定義單行文本輸入框
- type="password" 定義密碼輸入框
- type="radio" 定義單選框
- type="checkbox" 定義複選框
- type="file" 定義上傳檔案
- type="submit" 定義送出按鈕
- type="reset" 定義重置按鈕
- type="button" 定義一個普通按鈕
- value屬性 定義表單元素的值
- name屬性 定義表單元素的名稱，此名稱是送出資料時的鍵名
4、<textarea>标簽 定義多行文本輸入框
5、<select>标簽 定義下拉表單元素
6、<option>标簽 與<select>标簽配合，定義下拉表單元素中的選項
系統資料庫單執行個體：
<form action="http://www..." method="get">
<p>
<label>姓名：</label><input type="text" name="username" />
</p>
<p>
<label>密碼：</label><input type="password" name="password" />
</p>
<p>
<label>性别：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>愛好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 遊泳
</p>
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<p>
<label>個人描述：</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍貫：</label>
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">廣州</option>
<option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="送出">
<input type="reset" name="" value="重置">
</p>
</form>
單行文本框文字提示
- placeholder 設定input輸入框的預設提示文字。
表格元素及相關樣式
1、<table>标簽：聲明一個表格
2、<tr>标簽：定義表格中的一行
3、<td>和<th>标簽：定義一行中的一個單元格，td代表普通單元格，th表示表頭單元格，它們的常用屬性如下：
- colspan 設定單元格水準合并，設定值是數值
- rowspan 設定單元格垂直合并，設定值是數值
表格相關樣式屬性
- border-collapse 設定表格的邊線合并，如：border-collapse:collapse;
定位
文檔流
文檔流，是指盒子按照html标簽編寫的順序依次從上到下，從左到右排列，塊元素占一行，行内元素在一行之内從左到右排列，先寫的先排列，後寫的排在後面，每個盒子都占據自己的位置。
關于定位
我們可以使用css的position屬性來設定元素的定位類型，postion的設定項如下：
- relative 生成相對定位元素，一般是将父級設定相對定位，子級設定絕對定位，子級就以父級作為參照來定位，否則子級相對于body來定位。
- absolute 生成絕對定位元素，元素脫離文檔流，不占據文檔流的位置，可以了解為漂浮在文檔流的上方，相對于上一個設定了定位的父級元素來進行定位，如果找不到，則相對于body元素進行定位。
- fixed 生成固定定位元素，元素脫離文檔流，不占據文檔流的位置，可以了解為漂浮在文檔流的上方，相對于浏覽器視窗進行定位。
定位元素的偏移
定位的元素還需要用left、right、top或者bottom來設定相對于參照元素的偏移值。
定位元素層級
定位元素是浮動的正常的文檔流之上的，可以用z-index屬性來設定元素的層級
僞代碼如下:
.box01{
......
position:absolute; /* 設定了絕對定位 */
left:200px; /* 相對于參照元素左邊向右偏移200px */
top:100px; /* 相對于參照元素頂部向下偏移100px */
z-index:10 /* 将元素層級設定為10 */
}
新增相關樣式屬性
/* 設定元素透明度,将元素透明度設定為0.3，此屬性需要加一個相容IE的寫法 */
opacity:0.3;
/* 相容IE */
filter:alpha(opacity=30); 頁面嵌套
在一個頁面中可以開一個局部的視窗，嵌入另外一個頁面，可以使用iframe标簽來實作這個功能
<iframe src="001.html" frameborder="0"></iframe> 其中“src”設定的是另一個網頁的位址，“frameborder”設定的是這個局部視窗的邊框的粗細。
還可以将頁面上連結的頁面直接顯示在這個局部視窗中，需要用到a标簽的target屬性，target屬性值功能如下：
- target="_self" 預設值，用新的頁面替換掉目前頁面
- target="_blank" 新開一個浏覽器視窗顯示連結的頁面
- target="framename" 将連結的頁面顯示在名稱是“framename”的iframe視窗中
<a href="001.html" target="mainframe">001頁面</a>
<a href="002.html" target="mainframe">002頁面</a>
<a href="003.html" target="mainframe">003頁面</a>
<iframe src="001.html" frameborder="0" name="mainframe"></iframe>
上面的iframe視窗，預設顯示001.html頁面，點選連結，就可以切換iframe中顯示的頁面