整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML 實例
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥教程(runoob.com)</title></head><body><h1>我的第一個標題</h1><p>我的第一個段落。</p></body></html>
實例解析
DOCTYPE 聲明了文檔類型
位于標簽 <html> 與 </html> 描述了文檔類型
位于標簽 <body> 與 </body> 為可視化網頁內容
位于標簽 <h1> 與 </h1> 作為一個標題使用
位于標簽 <p> 與 </p> 作為一個段落顯示
| <!DOCTYPE html> 在HTML5中也是描述了文檔類型。 |
什么是HTML?
HTML 是用來描述網頁的一種語言。
HTML 指的是超文本標記語言: HyperText Markup Language
HTML 不是一種編程語言，而是一種標記語言
標記語言是一套標記標簽 (markup tag)
HTML 使用標記標簽來描述網頁
HTML 文檔包含了HTML 標簽及文本內容
HTML文檔也叫做 web 頁面
HTML 標簽
HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。
HTML 標簽是由尖括號包圍的關鍵詞，比如 <html>
HTML 標簽通常是成對出現的，比如 <b> 和 </b>
標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽
開始和結束標簽也被稱為開放標簽和閉合標簽
<標簽>內容</標簽>
HTML 元素
"HTML 標簽" 和 "HTML 元素" 通常都是描述同樣的意思.
但是嚴格來講, 一個 HTML 元素包含了開始標簽與結束標簽，如下實例:
HTML 元素:
<p>這是一個段落。</p>
Web 瀏覽器
Web瀏覽器（如谷歌瀏覽器，Internet Explorer，Firefox，Safari）是用于讀取HTML文件，并將其作為網頁顯示。
瀏覽器并不是直接顯示的HTML標簽，但可以使用標簽來決定如何展現HTML頁面的內容給用戶：
HTML 網頁結構
下面是一個可視化的HTML頁面結構：
<html>
<head>
<title>頁面標題</title>
</head>
<body>
<h1>這是一個標題</h1>
<p>這是一個段落。</p>
<p>這是另外一個段落。</p>
</body>
</html>
| 只有 <body> 區域 (白色部分) 才會在瀏覽器中顯示。 |
HTML版本
從初期的網絡誕生后，已經出現了許多HTML版本:
| 版本 | 發布時間 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
<!DOCTYPE> 聲明
<!DOCTYPE>聲明有助于瀏覽器中正確顯示網頁。
網絡上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網頁內容。
doctype 聲明是不區分大小寫的，以下方式均可：
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
通用聲明
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
查看完整網頁聲明類型 DOCTYPE 參考手冊。
中文編碼
目前在大部分瀏覽器中，直接輸出中文會出現中文亂碼的情況，這時候我們就需要在頭部將字符聲明為 UTF-8。
HTML 實例
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>頁面標題</title></head><body><h1>我的第一個標題</h1><p>我的第一個段落。</p></body></html>
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
所謂超文本，有2層含義：
標題標簽 <hx></hx>
段落標簽 <p></p>
水平線標簽 <hr />
換行標簽 <br/>
無語義標簽 <div></div> 和 <span></span> 注:這兩個標簽在后期經常使用文本格式化標簽
<b></b>和<strong></strong> 文字加粗
<i></i>和<em></em> 斜體
<s></s>和<del></del> 加刪除線
<u></u>和<ins></ins> 加下劃線圖片標簽
<img src="圖像URL" /> src 圖像路徑 圖像標簽 <img src="圖像URL" /> 該語法中src屬性用于指定圖像文件的路徑和文件名，他是img標簽的必需屬性。
屬性:
alt 文本,圖像不顯示時顯示文字<img src="" alt="">
title 文本,鼠標懸停時顯示內容<img src="cz.jpg" title="文本" />
width 圖像寬度<img src="cz.jpg" width="300" height="300" />
height 圖像高度<img src="cz.jpg" width="300" height="300" />
border 設置圖像邊框寬度<img src="cz.jpg" border="3" />
鏈接標簽
<a href="#" target="目標窗口的彈出方式">文本或圖像</a>屬性：
href (鏈接地址)必須寫 | 用于指定鏈接目標的url地址，（必須屬性）當為標簽應用href屬性時，它就具有了超鏈接的功能 | 1. 外部鏈接 需要添加 http:// www.baidu.com | ||
target (默認當前窗口打開,可新建窗口打開) | 用于指定鏈接頁面的打開方式，其取值有self和blank兩種，其中_self為默認值，__blank為在新窗口中打開方式。 |
錨點標簽
id="" | 錨點定位 | 通過創建錨點鏈接，用戶能夠快速定位到目標內容。 | <h3 id="two">第2集</h3> | 使用相應的id名標注跳轉目標的位置。 (找目標) |
base標簽
<base target="_blank" /> | base 可以設置整體鏈接的打開狀態 | base 寫到 <head> </head> 之間 |
預格式化標簽
<pre>文本</pre> | 標簽可定義預格式化的文本。 | 所謂的預格式化文本就是 ，按照我們預先寫好的文字格式來顯示頁面， 保留空格和換行等。 |
表格標簽
<table> 定義表格標簽 | border | 設置表格邊框(默認border="0"無邊框) | <table> |
cellspacing | 設置單元格與單元格之間的空白間距 (默認2像素) | ||
cellpadding | 設置單元格內容與單元格邊框之間的空白間距 (默認1像素) | ||
width | 設置表格的寬度 | ||
height | 設置表格的高度 | ||
align | 設置表格在網頁中的水平對齊方式 (三個屬性:left左 center中 right右 ) | align="center" align="right" | |
caption | caption 元素定義表格標題，通常這個標題會被居中且顯示于表格之上。 | <caption>個人信息表</caption> | |
rowspan="合并單元格的個數" | 跨行合并 | 合并的順序我們按照 先上 后下 先左 后右 的順序 | |
colspan="合并單元格的個數" | 跨列合并 | <td colspan="3"> </td> | |
<caption></caption> | 表格標題標簽 | ||
<tr></tr><td></td> | 標簽，他就像一個容器，可以容納所有的元素 | <tr><td></td></tr> | |
<th><td> | 一般表頭單元格位于表格的第一行或第一列，并且文本加粗居中 | <th><td></td></th> | |
<thead> 于定義表格的頭部。用來放標題之類的東西。<thead> 內部必須擁有 <tr> 標簽！ | 以上標簽都是放到table標簽中。 | 更好的給表格劃分結構 | |
<tbody> 用于定義表格的主體。放數據本體 。 | 以上標簽都是放到table標簽中。 | ||
<tfoot>放表格的腳注之類。 | 以上標簽都是放到table標簽中。 |
列表標簽
列表(ul里面只能包含li ,li里面可以包含標簽) | <ul><li></li></ul> | 無序列表 | 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的。 | 里面只能包含li 沒有順序，我們以后布局中最常用的列表 | ||
<ol><li></li></ol> | 有序列表 | 所有特性基本與ul 一致。 但是實際中比 無序列表 用的少很多。 | 里面只能包含li 有順序， 使用情況較少 | |||
<dl> | 自定義列表 | 里面有2個兄弟， dt 和 dd |
input控件
<input type="屬性值" value="你好"> | text | 單行文本輸入框 | |
password | 密碼輸入框 | ||
radio | 單選按鈕 | ||
checkbox | 復選按鈕 | ||
button | 普通按鈕 | ||
submit | 提交按鈕 | ||
reset | 重置按鈕 | ||
image | 圖像形式的提交按鈕 | ||
file | 文本域 | ||
name | 由用戶自定義 | 控件的名稱 | 用戶名:<input type="text" name=“username” /> |
value | 由用戶自定義 | input控件中的默認問本值 | 用戶名:<input type="text" name="username" value="請輸入用戶名"> |
size | 正整數 | input控件在頁面中的顯示寬度 | |
checked 默認被選中 | checked | 定義選擇控件默認被選中的項 | <input type="radio" name="sex" value="女" />女 |
maxlength | 正整數 | 控件允許輸入的最多字符數 |
<label> </label>
<label> 用戶名： <input type="radio" name="usename" value="請輸入用戶名"> </label> | 第一種用法就是用label直接包括input表單。 | 當我們鼠標點擊 label標簽里面的文字時， 光標會定位到指定的表單里面 | |
<label for="sex">男</label> | 第二種用法 for 屬性規定 label 與哪個表單元素綁定。 | 當我們鼠標點擊 label標簽里面的文字時， 光標會定位到指定的表單里面 |
文本域
<textarea >文本內容</textarea> | 通過textarea控件可以輕松地創建多行文本輸入框. | cols="每行中的字符數" rows="顯示的行數" 我們實際開發不用 | <textarea > 文本內容</textarea> |
select下拉列表
<select> | 在option 中定義selected =" selected "時，當前項即為默認選中項。 |
form表單域
<form action="url地址" method="提交方式" name="表單名稱"> | action 屬性值:url地址 | 用于指定接收并處理表單數據的服務器程序的url地址。 |
method 屬性值:get/post | 用于設置表單數據的提交方式，其取值為get或post。 | |
name 屬性值:名稱 | 用于指定表單的名稱，以區分同一個頁面中的多個表單。 |
以上標簽基本包含了前端開發所需常用標簽.來自本人,黑馬程序員.傳智播客學習筆記.
以下是個人筆記整理,需要請關注私信我.
希望本人筆記能對各位有所幫助.
前端不難,難的在于東西多和雜.每天努力學習一點點,不放棄.
節課學習頁面中的標題和段落標簽。為了豐富頁面中的內容，需要用到各種各樣不同的標簽
這里面出現了 三個不同的標題類型，他們的大小和加粗情況都不一樣，這些段落這時就需要用到不同的標簽來表示了，在頁面中 標題標簽有 6 個，分別是 h1 到 h6 對應著不同的字號大小和加粗情況。
打開編輯器，新建一個文件 title.html，在 body 內寫上一個 h1 標簽，來到瀏覽器我們看到一個一級標題出現了。
回到編輯器 我們依次寫下 h2 到 h6 標簽，瀏覽器刷新一下，不同的六個標題出現了這就是頁面中的標題標簽。這些標題標簽 h1最大 h6最小 而且加粗效果也是 h1 最粗 h6 最細。只有 h1 到 h6 這六個標題標簽供我們使用。
段落標簽 p 標簽 他是一個雙標簽，只要是文章正文內容區域都可以使用 p 標簽
打開編輯器 我們再次新建一個文件 section.htm 生成初始結構
在這里我們使用一個 p 標簽 <p></p> 把我提前準備好的課文 <背影> 復制過來，回到瀏覽器中 p 標簽里面的文本默認是從左側開始的，然后依次向右排列，當到達屏幕的右側 文本折行現實 用P標簽，實現自然段的分段。
回到瀏覽器中，頁面中出現了一個個的自然段。
但是每個自然段都要首行縮進2字符，如何實現這種效果？直接在編輯器里面使用空格鍵 打開瀏覽器發現 不管編輯器多少個空格，只能顯示一個空格的位置。
為了實現該效果 我們目前使用的方法是 一個 代表的是一個空格鍵的距離，如果想要實現多個空格距離的話 就多寫幾個 ; 即可。我們把剛才寫的空格修改成 來到瀏覽器刷新頁面 ，效果實現了， 最后我們把寫好的空格復制一份 給每一個段落都加一個 來到瀏覽器，一篇課文的網頁就制作完成了。
接下來我們來實現示例內容 先來新建一個文件 news.html
觀察效果圖 第一行是個一級標題 我們就需要使用 H1 標題標簽 打開瀏覽器 文字沒有居中 我們可以給這個 h1 標簽添加一個 align 屬性 表示的是文字水平方向上的對齊方式 屬性值為 center 再次來到瀏覽器 刷新以后 我們看到 文字居中的效果實現了
副標題使用 h4 標簽，在這里也來一個 h4 標簽， 加個 align 屬性居中顯示。
下面是一個小段落 p 標簽把這一段 文字寫好，加上2個空字符，來到瀏覽器。再接下來就是每一個小文章的標題， 這里使用 h3 標簽來實現。
文章小標題結束后，接下來是熱點新聞中的第一個段落，我們使用 p 標簽 把對應的文本放在標簽里面， 空開對應的間距，瀏覽器中運行 ,看到實現了對應的效果。 第一個文章就完成，后面的格式和這個是一樣！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
