整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
如果您看過《HTML是什么？——零基礎自學網頁制作》這篇教程，請按照其中說明創建一個txt文件。具體過程如下：
step1：在您方便的磁盤中建立一個文件夾，命名為"零基礎自學網頁制作"。例如我在D盤中建立了"零基礎自學網頁制作"文件夾。
step2：在文件夾中創建"HTML框架.txt"文件。鼠標移動到空白處點擊右鍵選擇"文本文檔"。
命名為"html框架"，如下圖所示。
如果您的電腦沒有顯示".txt"后綴的話，請做如下操作：點擊"工具"，找到"文件夾選項"
菜單如下：點擊"查看選項"。
下拉滑條，找到"隱藏已知文件類型的擴展名"選項，將前面的對勾去掉。
如果您使用的是win10的話請參考《邊學邊做網頁篇------初識HTML》，這也是我做的教程，不過以后都使用這個賬號來發了。
step3：把"HTML框架"復制粘貼到"html框架.txt"文件中。HTML框架代碼如下：
<!DOCTYPE HTML> <html> <head> </head><body> </body> </html>代碼講解請參照《HTML是什么？——零基礎自學網頁制作》這篇教程中的講解。
粘貼后效果如下：使用CTRL+s組合鍵保存文件。
step4：復制"html框架.txt"文件，更名為"第一個網頁.txt"。原始的"html框架.txt"文件為以后備用。
如圖所示：
step5：把"第一個網頁.txt"的后綴名".txt"改為".html"。
首先將光標放在"第一個網頁.txt"文件上，點擊右鍵，選擇"重命名"。如圖：
選擇".txt"
更改為".html",敲擊回車鍵。這時會彈出一個對話框，如圖:
大膽的點擊"是"即可。
修改后文件是這樣的，如圖：因為我的默認瀏覽器是360，所以，".html"文件圖標顯示為360瀏覽器的圖標，顯示其他瀏覽器的圖標也沒有問題。
step6：將鼠標移動到"第一個網頁.html"文件上，單擊右鍵，選擇打開方式，如圖：
選擇任何一個瀏覽器打開即可，我使用的是火狐瀏覽器（Firefox），打開后如圖所示：空白一片。
點擊鍵盤F12鍵，看一下控制臺，如圖：查看器中已經顯示我們的代碼框架了。成功！
如果網頁是一道菜，那么，html框架我們可以理解為裝菜的白盤子，所以我們打開框架時，瀏覽器顯示一片白。下面我們為盤子中加些簡單的"菜"。
首先我們為頁面添加"標題"
在添加標題前，我們來看一下html框架代碼中的內容，在<html></html>標簽中有<head></head>和<body></body>兩個兄弟標簽。
我們在頁面中看到的所有的內容都是添加到<body></body>標簽中間！
<head></head>標簽中的內容并不會顯示在頁面中。
那么如何添加"標題"呢？
標題在HTML中用<h></h>標簽表示。在<h></h>中間加入文字內容即可。如下所示：
<h>第一個頁面</h>右鍵，使用"記事本"打開"第一個網頁.html"文件。如圖所示：如果您的"打開方式"中沒有"記事本"請點擊"選擇默認程序"
在"其他程序"中找到"記事本"。點擊"確定"。從此，"記事本"就一直存在于"打開方式"中了。
我們把這句代碼粘貼到<body></body>之間。如下所示：保存后使用瀏覽器打開。
<!DOCTYPE HTML><html><head> </head> <body> <h>第一個頁面</h> </body> </html>然后，使用瀏覽器打開，如圖所示：標題出現在頁面中了。
下面，我們來添加段落內容。
段落在HTML中使用<p></p>標簽添加。代碼如下
<p>千里之行始于足下</p>請各位自行將代碼添加到"第一個網頁.html"文件中吧！示例代碼如下：
<!DOCTYPE HTML> <html> <head> </head> <body> <h>第一個網頁</h><p>千里之行始于足下</p> </body> </html>結果如圖所示：
通過這個練習，我們可以發現一個規律，在<body></body>中，子元素代碼的上下順序代表了它在頁面中顯示的排版順序。
這也簡單回答了代碼結構與排版的關系，html的標簽語句只是標記了它所承載的信息的屬性和版面位置。
基于這個特性，html被稱為超文本標記語言。
下一期我們具體討論頁面中文字編輯的技巧。
喜歡的小伙伴請加關注，有任何問題請給我留言，歡迎大家給與指正！感激不盡！
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
HTML： 超文本標記語言，標準通用標記語言下的一個應用。
“超文本”就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
§ HTML 是用來描述網頁的一種語言。
§ HTML 不是一種編程語言，而是一種標記語言
§ 標記語言是一套標記標簽 (markup tag)
§ HTML 使用標記標簽來描述網頁
§ HTML 文檔包含了HTML 標簽及文本內容
§ HTML 文檔也叫做 web 頁面
§ HTML 文件后綴可以是 .html 或者 .htm，二者沒有區別，都可以使用
超級文本標記語言是標準通用標記語言下的一個應用，也是一種規范，一種標準，它通過標記符號來標記要顯示的網頁中的各個部分。網頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網頁文件，然后根據標記符解釋和顯示其標記的內容，對書寫出錯的標記將不指出其錯誤，且不停止其解釋執行過程，編制者只能通過顯示效果來分析出錯原因和出錯部位。但需要注意的是，對于不同的瀏覽器，對同一標記符可能會有不完全相同的解釋，因而可能會有不同的顯示效果。
網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。
HTML特點：超級文本標記語言文檔制作不是很復雜，但功能強大，支持不同數據格式的文件鑲入，這也是萬維網（WWW）盛行的原因之一，其主要特點如下：
§ 簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便。
§ 可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言采取子類元素的方式，為系統擴展帶來保證。
§ 平臺無關性：雖然個人計算機大行其道，但使用MAC等其他機器的大有人在，超級文本標記語言可以使用在廣泛的平臺上，這也是萬維網（WWW）盛行的另一個原因。
§ 通用性：另外，HTML是網絡的通用語言,一種簡單、通用的全置標記語言。它允許網頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。
更多html課程：阿里云大學——開發者課堂（點擊下面“了解更多”）
.h1-h6標簽
都是標題標簽，定義一段話的標題，h1最大，依次遞減，h6最小
標題標簽的作用：讓文本加粗顯示
2. 段落標簽：p標簽
用來顯示一段文本(圖片)，它會忽略源代碼中的排版
塊元素：獨占一行的元素，和相鄰的元素不能共享同一行,所有的塊元素都有align屬性,h1-h6和p元素都是塊元素
3. 格式標簽：
b標簽：加粗文本
del標簽：包含的文本中間有條橫線
em標簽：包裹的文本會顯示為斜體
i標簽：包裹的文本會顯示為斜體
pre標簽：顯示源代碼的排版
strong標簽：和em作用一樣，都有強調的意思，如果要強調一段文字，建議使用strong標簽
u標簽：給文本添加下劃線
sup：定義上標文本
sub:定義下標文本
4. 圖片標簽img，用來把圖片顯示在網頁上
必須屬性:1.src:圖片的路徑(可以用相對路徑或絕對路徑，不建議用絕對路徑)
alt:定義圖片無法顯示時的代替文本
相對路徑：以當前文件所在的位置為參考路徑,定義出來的路徑叫相對路徑
絕對路徑：文件在硬盤上的物理路徑叫絕對路徑,
例如：
D:\work181129JAVA班\課件-web前端課件\web-day1\Code\web-day1\img\tly.jpg
可選屬性：
1.title：鼠標放在圖片上時的提示文字,所有元素都有title屬性
2.width:定義圖片的寬度，默認以像素px為單位，可以省略單位不寫
3.height:定義圖片的高度
br標簽：換行標簽，可以寫成<br>或者<br/>
hr標簽：水平線標簽，可以寫成<hr>或者<hr/>,屬性有：width(寬度),size(高度),color(顏色)
5. span:通常用于修飾文本，可以給它添加樣式，例如style="color: red;"
div:把文檔分割成若干個獨立的部分 ,塊級元素
6. ul定義無序列表，type屬性定義列表項目的標記，默認是disc
type="disc" 默認黑色圓點
type="circle" 空心圓點
type="square" 方塊
ol定義有序列表，type屬性定義項目的標記，默認是數字
type="A"或"a":表示大寫字母或者小寫字母
type="I"或type="i"：表示羅馬大寫字母或羅馬小寫字母
7. border:定義表格的邊框屬性
cellspacing:單元格之間的距離，設置為0則只有1條邊框了
cellpadding:單元格的內容到邊框之間的距離
8. 表頭：表格中的第一行，用來顯示列標題的，使用th定義表頭的每一列，把里面的內容加粗居中顯示
通常，第一行是表頭行，從第二行開始就是數據行(顯示具體的數據),
使用td(table data cell )表示數據行每一列
表格的align="center"：讓表格整體居中顯示
tr(table row)的align="center"：讓行里面的內容居中顯示
caption：定義表格的標題，會相當于表格居中
9. colspan:跨列，即在水平方向上合并單元格，值是要合并的單元格數目
rowspan:跨行，即在豎直方向上合并單元格，值是要合并的單元格數目
10. form:表單標簽，用于創建一個表單，收集用戶輸入的數據，并提交給服務器程序
屬性:action:指定將表單的數據發送到哪個服務器程序
method:指定用哪種方式來提交數據，常用值有GET,POST，默認值是get
表單域：又叫表單元素，作用是收集用戶輸入的數據 ，并提交給服務器端程序
常用的表單域：1.input元素：它的type屬性有不同值，表現出不同形態
type="text":表示文本框，提供文本的輸入
type="radio":單選框(單選按鈕)， 多個單選框的name值必須相同，如果name不同則不能互斥，提交時是提交value值
type="checkbox":復選框，當name相同時，可以提交多個值(value屬性的值)
type="file"":文件域，讓用戶選擇本地文件上傳到服務器
type="hidden":隱藏域，對用戶不可見的元素，可以有默認值并且能提交給服務器(在javaEE開發中會大量使用隱藏域)
2. select元素：表示下拉列表，又叫下拉框，在下拉列表中用option元素定義待選擇的選項，默認第1個選項被選中，
設置某個option被選中： 在option元素上添加selected="selected"或者selected
設置下拉列表為多選下拉列表：在select元素上加multiple屬性
關于選中元素的設置：
1)設置單選框或復選框被選中的屬性是checked
2)設置下拉列表的某個選項被選中的屬性是selected
11. body標簽：
1.background：定義網頁的背景圖片，如果背景圖片很小，會自動在水平和豎直方向上平鋪展示
2.bgcolor:定義網頁的背景顏色
12. textarea:文本域，又叫多行文本框,cols是文本區內的寬度,rows:行數
placeholder：用來設置單行文本框(不是textarea)里的默認提示文字，當輸入了新的內容后，該提示文字就消失了
label：本身沒有什么效果，當結合單選按鈕或復選框使用時，如果label的for屬性和按鈕的id相同，則點擊
label后就相當于點擊了按鈕，會將單選框或復選框選中
表單按鈕：
1.提交按鈕： <input type="submit">，提交按鈕作用是將表單數據發送到action指定的服務器上
2.重置按鈕： <input type="reset">，作用是將表單中數據清空
3.普通按鈕：<input type="button">，普通按鈕在沒有添加js代碼情況下，是不能提交表單的
13. frameset:框架集，用于將整個瀏覽器窗口劃分成多個小窗口，每個小窗口稱為一個frame，每個小窗口(frame)都可以,加載一個獨立的html文檔
使用frameset的cols或rows屬性定義如何分割整個大窗口，
cols:定義水平方向上分割的各個frame的百分比,
rows：定義豎直方向上分割的各個frame的百分比,
noresize:不能調整frame的寬或高 frameborder="0":去掉frame的邊框
*代表剩余百分比，會自動計算
使用frame來定義每個小窗口，src指frame所加載的網頁的相對路徑
14. iframe:能夠包含其它文檔(網頁)的內聯框架，內聯就是行內，因為它能和相鄰的元素共享同一行
src:要加載的文檔的路徑 width:寬度，height:高度
frameborder:邊框，0或no代表無邊框
15. 將超鏈接所跳轉的頁面顯示在iframe的技巧:
1)給iframe元素添加一個name屬性,例如
2)超鏈接添加屬性target，值應該是iframe元素的name
16. 實體集
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
