整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
篇文章我們介紹了怎么創(chuàng)建一個(gè)最基本的網(wǎng)頁(yè)，這篇我們介紹一下經(jīng)常被使用的標(biāo)簽及用途。
顯示在瀏覽器中的內(nèi)容都要添加在基本模板中的body標(biāo)簽的中間，這點(diǎn)一定要記住！！
下面的body標(biāo)簽中各個(gè)標(biāo)簽，我做了解釋說(shuō)明，大概了解各個(gè)標(biāo)簽長(zhǎng)什么樣子，能記住就更好了。
下面的HTML代碼可以直接復(fù)制到你的網(wǎng)頁(yè)中（創(chuàng)建HTML文件的方法上篇文章有介紹）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>這里是網(wǎng)頁(yè)的標(biāo)題，你看到在哪里顯示的了嗎？——橙先生</title>
</head>
<body>
<div>div標(biāo)簽可以理解為是個(gè)空盒子，什么都能裝下</div>
<!-- img標(biāo)簽用來(lái)插入圖片，src="圖片路徑"，alt屬性可選，用來(lái)描述圖片, <img src="圖片路徑" alt="圖片的說(shuō)明（可選）"> -->
這是一張圖片，注意這里的img標(biāo)簽形式，這是個(gè)單標(biāo)簽
<img src="圖片地址" alt="圖片的說(shuō)明（可選）">
<!-- a標(biāo)簽用來(lái)添加超鏈接 ，target="_blank"屬性用來(lái)點(diǎn)擊鏈接后跳轉(zhuǎn)到新的瀏覽器頁(yè)簽 href="需要跳轉(zhuǎn)到的網(wǎng)址或是文件"-->
<a href="需要跳轉(zhuǎn)到的網(wǎng)址或是文件，如" target="_blank">這個(gè)是文字的鏈接，也可以在其他內(nèi)容上添加（比如圖片）</a>
<!-- p標(biāo)簽用來(lái)填入文字 -->
<p>在這里填入文字</p>
<p>在這里填入文字</p>
<!-- span標(biāo)簽用來(lái)添加文字等，屬于行內(nèi)元素 -->
<span>在這里添加你想要的內(nèi)容</span><span>!!!!!!這里是另外一段內(nèi)容</span>
<!-- 這里說(shuō)說(shuō)塊元素和行內(nèi)元素，像上面的P標(biāo)簽就是塊元素，它獨(dú)占一行， span標(biāo)簽就是行內(nèi)元素，可以在一行中顯示多個(gè)span標(biāo)簽內(nèi)容 -->
<!-- br標(biāo)簽用來(lái)?yè)Q行 -->
<br>
<!-- h1至h6是有固定大小的標(biāo)題/文字標(biāo)簽 -->
<h1>這是h1里的內(nèi)容</h1>
<h2>這是h2里的內(nèi)容</h2>
<h3>這是h3里的內(nèi)容</h3>
<h4>這是h4里的內(nèi)容</h4>
<h5>這是h5里的內(nèi)容</h5>
<h6>這是h6里的內(nèi)容</h6>
<!-- ul 和li是固定的搭配，是無(wú)序列表，可以有N個(gè)li -->
<ul>
<li>這里是無(wú)序列表1</li>
<li>這里是無(wú)序列表2</li>
<li>這里是無(wú)序列表3</li>
</ul>
<!-- ol 和li是固定的搭配，是有序列表，可以有N個(gè)li -->
<ol>
<li>這里是有序列表1</li>
<li>這里是有序列表2</li>
</ol>
<!-- table 、tr 和 td是固定搭配 ：table是表格，tr是表格里的行，td是表格里的列， 表格里可以有N行 N列-->
<table>
<tr>
<td>表格中第一行的第1列</td>
<td>表格中第一行的第2列</td>
</tr>
<tr>
<td>表格中第二行的第1列</td>
<td>表格中第二行的第2列</td>
<td>表格中第二行的第3列</td>
</tr>
</table>
?
</body>
</html>
上面的內(nèi)容已經(jīng)大致了解了吧？下一篇我們將介紹各種常用到的樣式，讓各個(gè)標(biāo)簽更加的美觀。記得關(guān)注一下哦！
示：點(diǎn)擊上方"WEB網(wǎng)頁(yè)設(shè)計(jì)自學(xué)平臺(tái)"↑ 可以訂閱噢！
摘要 51RGB官方微信在學(xué)習(xí)CSS制作知識(shí)之前，我們必須需要認(rèn)識(shí)的HTML什么基礎(chǔ)知識(shí)。
一、必知HTML基礎(chǔ)-CSS教程系列
目錄
搞清瀏覽器作用
搞清什么是HTML
html作用
html我們涉及哪些基礎(chǔ)知識(shí)
常見html單詞及單詞功能作用有哪些
html結(jié)構(gòu)
html與CSS關(guān)系
瀏覽器主要作用是瀏覽網(wǎng)頁(yè)作用，在DIV+CSS制作開發(fā)時(shí)候仍然是瀏覽我們制作開發(fā)重構(gòu)網(wǎng)頁(yè)作用。瀏覽器可測(cè)試我們開發(fā)的CSS網(wǎng)頁(yè)兼容性、網(wǎng)頁(yè)效果、因開發(fā)疏忽導(dǎo)致錯(cuò)誤等作用。
在CSS測(cè)試（CSS工具）里常用瀏覽器包括IE6、IE7、IE8、火狐（FF）、谷歌（chrome）、蘋果Safari、Opera主流瀏覽器。至于傲游、360瀏覽器因?yàn)樗麄兪褂媚阆到y(tǒng)自帶的IE內(nèi)核，所以不必考慮，只要支持你瀏覽器版本即支持類似這2款瀏覽器
需要兼容瀏覽器有哪些？http://www.51rgb.com/css-tool/t86.shtml
html是hypertext markup language的縮寫，即超文本標(biāo)記語(yǔ)言。可以這樣理解，HTML文件是一定規(guī)則規(guī)律以html\htm等命名后綴名的文本文件。
HTML作用，通過(guò)一定html自身語(yǔ)法結(jié)構(gòu)（html結(jié)構(gòu)），顯示文字、圖片、動(dòng)畫（flash）、視頻或音頻音樂(lè)。而CSS則是配合html實(shí)現(xiàn)漂亮的各式各樣的頁(yè)面內(nèi)容。
4、html我們涉及哪些基礎(chǔ)知識(shí)
Html擴(kuò)展名、html源代碼、DOCTYPE、html結(jié)構(gòu)、head標(biāo)簽、charset
a、B(strong)：加粗
b、P：換行實(shí)例：<p>我是第一段內(nèi)容</p><p>我是第二段內(nèi)容</p>
c、Br：提行實(shí)例：我是第一排<br />我是第二排內(nèi)容
d、px：像素、長(zhǎng)度寬度單位
實(shí)例：width:30px; 寬度30像素
e、ul、ol、li列表標(biāo)簽實(shí)例：
<ul>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ul>
<ol>
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ol>
f、div與span：都是html標(biāo)簽
實(shí)例：<div>我占一行</div><span>我多長(zhǎng)占多長(zhǎng)位置</span>
兩者區(qū)別：DIV占用1整排，而SPAN所占位置是內(nèi)容多少占用多長(zhǎng)長(zhǎng)度
g、img：圖片引用標(biāo)簽
<img src="/css-images/css-logo.gif" />圖片標(biāo)簽
h、dl dt dd：CSS的另類表格組合
實(shí)例：
<dl>
<dt>我是標(biāo)題</dt>
<dd>列表一</dd>
<dd>列表二</dd>
</dl>
j、title：標(biāo)題標(biāo)簽
實(shí)例：<title>標(biāo)題</title>
特點(diǎn)，在一個(gè)網(wǎng)頁(yè)內(nèi)只能使用一次（只能出現(xiàn)一次）
6、html結(jié)構(gòu) - TOP
這里Html結(jié)構(gòu)可用于每次新建制作網(wǎng)頁(yè)模板使用。
舊html結(jié)構(gòu)：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIVCSS5標(biāo)題</title>
</head>
<body>
具體網(wǎng)頁(yè)呈現(xiàn)內(nèi)容
</body>
</html>
經(jīng)過(guò)CSS教程網(wǎng)的DIVCSS5優(yōu)化后的HTML結(jié)構(gòu)（可用于每次新建HTML模板）：
<!DOCTYPE html>
<html>
<title>標(biāo)題</title>
<meta name="keywords" content="關(guān)鍵字" />
<meta name="description" content="網(wǎng)頁(yè)描述" />
<link href="這里CSS文件引入地址" rel="stylesheet" type="text/css" />
內(nèi)容www.divcss5.com提供
搞清楚html與CSS關(guān)系很重要，也是認(rèn)識(shí)CSS基礎(chǔ)。html與CSS關(guān)系解釋：HTML內(nèi)放置顯示網(wǎng)頁(yè)要顯示的具體內(nèi)容（圖片、文字、動(dòng)畫等）而CSS是控制HTML內(nèi)這些具體內(nèi)容的怎么顯示、怎么排版、顏色、大小、寬度、高度、左右布局等顯示樣式。
以上7點(diǎn)是學(xué)習(xí)CSS的html基礎(chǔ)，可能還不完善，但是在以后運(yùn)用的時(shí)候DIVCSS5會(huì)給大家詳細(xì)、本簡(jiǎn)單CSS教程分為15節(jié)，此節(jié)DIV CSS教程以文字內(nèi)容為主，以后會(huì)穿插更多實(shí)例和圖例、跟我做的內(nèi)容希望對(duì)大家能有幫助。
在前面：java作為一門世界級(jí)編程語(yǔ)言金字塔頂尖的語(yǔ)言。需要大量的練習(xí)、練習(xí)、練習(xí)來(lái)鞏固自己所獲得的知識(shí)。冰凍三尺非一日之寒，希望大家在學(xué)習(xí)java的日子里一定一定要堅(jiān)持不懈，嚴(yán)格要求。多練，多問(wèn)，多百度。祝大家早日成為一名優(yōu)秀的軟件工程師！
文章摘要：此篇文章會(huì)帶領(lǐng)大家創(chuàng)建一個(gè)html最簡(jiǎn)單的頁(yè)面，以及在頁(yè)面中增加一些簡(jiǎn)單的內(nèi)容。
我先給大家放2張我以前教學(xué)的時(shí)候，開課前給學(xué)生畫的圖：
這2張圖應(yīng)該已經(jīng)比較清晰明了的告訴你，學(xué)習(xí)java前端需要具備的一些主觀和客觀方面的東西，我就不多做解釋了，以后我的文章中，會(huì)以代碼圖片及展現(xiàn)效果居多，盡量減少文字的占比。讓大家對(duì)所學(xué)的知識(shí)有一個(gè)更直觀的感受。
言歸正傳，想要編寫html代碼，首先需要一個(gè)后綴為.html的文件，這個(gè)文件怎么創(chuàng)建呢？最簡(jiǎn)單的方式，建一個(gè)txt，然后把后綴改為.html，用編輯器打開，就可以編寫代碼了。
當(dāng)然，txt界面太丑，筆者這里選用sublime,該編輯器也可以直接加載一個(gè)html模板，選擇菜單→新建文件(模板)→html,當(dāng)然，前提要先設(shè)置好這個(gè)模板，具體設(shè)置方法這里就不做詳細(xì)介紹了，百度上一大堆。新建完成后，產(chǎn)生一個(gè)代碼如下的頁(yè)面：
然后在<body></body>標(biāo)簽體之間打入一行代碼
用瀏覽器打開該文件，顯示如下圖，說(shuō)明這個(gè)html文件已經(jīng)創(chuàng)建成功了，能夠正常的編寫代碼。
零基礎(chǔ)的同學(xué)一定對(duì)剛才的代碼比較疑惑，雖然照著寫能實(shí)現(xiàn)功能，但是這些代碼各自又都是什么意義呢？ 我用注釋的方式上圖來(lái)告訴大家：
首先，html 的標(biāo)簽分為自閉和標(biāo)簽和閉合標(biāo)簽
自閉和標(biāo)簽：就是沒(méi)有結(jié)束標(biāo)簽，比如上圖的<meta>標(biāo)簽，該標(biāo)簽是沒(méi)有結(jié)束標(biāo)簽相呼應(yīng)的。
閉合標(biāo)簽：有開始和結(jié)束標(biāo)簽，比如上圖的<html><body><h1>標(biāo)簽，他們都有一個(gè)</html></body></h1>相呼應(yīng)
在上圖中，我用過(guò)了比較多的 < !-- -- >標(biāo)簽，這是html里的注釋標(biāo)簽，在編寫代碼的過(guò)程中，勤加注釋是一個(gè)非常非常好的習(xí)慣，不僅方便了他人也方便了以后自己代碼的維護(hù)。所以說(shuō)，不加注釋的代碼都是在耍流氓。
我們80%的頁(yè)面標(biāo)簽代碼都會(huì)寫在<body></body>標(biāo)簽里面,什么是標(biāo)簽，至少包含< > 和標(biāo)簽元素，比如<div><a><p><input>等，標(biāo)簽還有標(biāo)簽屬性和屬性值，標(biāo)簽屬性和屬性值在第一個(gè)標(biāo)簽內(nèi)容中，如果是多個(gè)標(biāo)簽則以空格符號(hào)分割 ，如圖：
Div 是整個(gè)html中最常用的一個(gè)標(biāo)簽元素，<div></div>類似于一個(gè)盒子，里面可以承載各種各樣的元素標(biāo)簽，大家看到的所有的網(wǎng)站都是靠著div一個(gè)個(gè)的盒子規(guī)劃開來(lái)，最后拼接在一起的，形成了一個(gè)完整的頁(yè)面。
那么如何去建立一個(gè)div呢？首先，我們?cè)趆tml的<body></body>標(biāo)簽中加入一個(gè)<div></div>標(biāo)簽 ，但是單純的加入標(biāo)簽并不會(huì)在頁(yè)面中產(chǎn)生肉眼可見的東西，因?yàn)槲覀冞€要定義這個(gè)div的寬，高，背景色，邊框等等，詳見如下代碼：
這樣的一行代碼，最后展現(xiàn)出來(lái)的效果是：
我們來(lái)一點(diǎn)點(diǎn)的剖析這一行代碼：
Style:style 是元素標(biāo)簽里的一個(gè)標(biāo)簽屬性，他的作用是可以定義該標(biāo)簽的樣式。里面的樣式格式是xxx:xxx; 每一組樣式都是這樣的定義，冒號(hào)用來(lái)隔開樣式屬性和樣式屬性值，最后以分號(hào)結(jié)尾.
width:定義該元素的寬
height:定義該元素的高
background:定義該元素的背景顏色(也可使用red,yellow等顏色定義)
border:定義該元素的邊框
4px 代表邊框粗細(xì)，
solid 代表邊框樣式, 邊框樣式又分為solid(實(shí)框)、dotted(虛框)
red代表邊框顏色,邊框顏色也可用#ccc,#112233這種形式表現(xiàn)
Div里可以放入文字、圖片、標(biāo)簽元素等各式各樣的東西。下面我演示一下如何放入照片：
首先，放入照片要使用到<img>標(biāo)簽，這是一個(gè)自閉和標(biāo)簽，所有沒(méi)有結(jié)束標(biāo)簽。
Src代表圖片的路徑，width,height 代表圖片的寬度和高度 ,alt是圖片的描述
這個(gè)路徑可以是相對(duì)路徑，也可以是絕對(duì)路徑。
相對(duì)路徑：就是相對(duì)于這個(gè)網(wǎng)頁(yè)的路徑，比如圖片和網(wǎng)頁(yè)在同一個(gè)文件夾下，那么src處就直接填圖片的文件名字就可以，若建了一個(gè)文件夾images，圖片放在該文件夾中，同時(shí)這個(gè)文件夾和網(wǎng)頁(yè)在同一個(gè)位置，那么src所填的就是images/圖片名字.jpg
絕對(duì)路徑：即從頭開始寫路徑，如src = “C:/xxx/xxx/xxx/xxx.jpg”
假設(shè)我現(xiàn)在的圖片位置和網(wǎng)頁(yè)位置同處一處
最后的效果：
我這里改大了DIV的寬度和高度，若圖片所設(shè)的寬高大于DIV的寬度高度，那么將會(huì)發(fā)生溢出的情況，同學(xué)們可以自己去試一下，這種溢出的情況也有對(duì)應(yīng)的標(biāo)簽可以做調(diào)整，這個(gè)我們后面再講。
這邊特別提醒一點(diǎn)，如果div沒(méi)有設(shè)定寬度width,則默認(rèn)為等同瀏覽器寬度的寬度，若div沒(méi)有設(shè)定高度，則該div根據(jù)div中內(nèi)容進(jìn)行高度的伸縮，div中的內(nèi)容有多高，div就有多高，如圖，我把width和height全部去掉：
上圖width和height全部去掉，所以，width默認(rèn)跟瀏覽器寬度等寬，高度為圖片的高度。
文字的話就比較簡(jiǎn)單了，代碼貼上：
最后結(jié)果：
第二句文字才是div創(chuàng)建出來(lái)的文字，我解釋一下style里面的樣式：
Font-size:文字大小，px為單位(像素)
Font-family:文字樣式，分為很多，這個(gè)可以去word文檔里找找
Font-weight：文字加粗，bold是一種默認(rèn)加粗的大小。
End.
來(lái)源：公眾號(hào)“java編程”
運(yùn)行人員：中國(guó)統(tǒng)計(jì)網(wǎng)小編（微信號(hào)：itongjilove）
微博ID：中國(guó)統(tǒng)計(jì)網(wǎng)
中國(guó)統(tǒng)計(jì)網(wǎng)，是國(guó)內(nèi)最早的大數(shù)據(jù)學(xué)習(xí)網(wǎng)站，公眾號(hào)：中國(guó)統(tǒng)計(jì)網(wǎng)
http://www.itongji.cn
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
