最詳細(xì)的html+css筆記（一）

一章職業(yè)規(guī)劃和前景

職業(yè)方向規(guī)劃定位：
web前端開(kāi)發(fā)工程師
web網(wǎng)站架構(gòu)師
自己創(chuàng)業(yè)
轉(zhuǎn)崗管理或其他
web前端開(kāi)發(fā)的前景展望：
未來(lái)IT行業(yè)企業(yè)需求最多的人才
結(jié)合最新的html5搶占移動(dòng)端的市場(chǎng)
自己創(chuàng)業(yè)做老板
隨著互聯(lián)網(wǎng)的普及web開(kāi)發(fā)成為企業(yè)的寵兒和核心
web職業(yè)發(fā)展目標(biāo)：
第一、梳理知識(shí)架構(gòu)
負(fù)責(zé)內(nèi)容的HTML
負(fù)責(zé)外觀的css（層疊樣式表）
負(fù)責(zé)行為的js
ps切圖
第二、分解目標(biāo)（起步階段、提升階段、成型階段）
起步階段：
基本知識(shí)的掌握
常用工具的掌握
溝通技巧的掌握（圍繞客戶的需求）
良好的開(kāi)發(fā)習(xí)慣（加注釋、對(duì)齊方式）
提升階段：
熟悉掌握HTML基本標(biāo)簽和屬性
熟練掌握css的基本語(yǔ)法和使用
瀏覽器兼容和w3c標(biāo)準(zhǔn)的掌握
結(jié)合html+css+js開(kāi)始系統(tǒng)項(xiàng)目的開(kāi)發(fā)
成型階段：
精通DIV+CCS布局
精通css樣式表控制html標(biāo)簽
熟悉運(yùn)用js制作動(dòng)態(tài)網(wǎng)站的效果
能獨(dú)立開(kāi)發(fā)完成網(wǎng)站

第二章 html基本結(jié)構(gòu)

認(rèn)識(shí)HTML：
html不是一種編程語(yǔ)言，是一種標(biāo)志語(yǔ)言
標(biāo)記語(yǔ)言是由一套標(biāo)識(shí)標(biāo)簽組成的
html使用標(biāo)簽來(lái)描述網(wǎng)頁(yè)
html結(jié)構(gòu)：

<html>
 <head></head>
 <body></body>
</html>

不成對(duì)出現(xiàn)的標(biāo)簽
<br> <hr> <meta> <img> <input..> <option..> <link>
HTML 基本標(biāo)簽的講解：
<html> <head> <body>標(biāo)簽
<h1>—-<h6>僅僅用于標(biāo)題文本，不要為了產(chǎn)生粗體文本使用它們
<p>標(biāo)簽段落標(biāo)簽
<strong><b>標(biāo)簽
都會(huì)讓文字產(chǎn)生加粗效果
<strong>用于強(qiáng)調(diào)文本，強(qiáng)度更深，表示重要文本—>用于SEO優(yōu)化
<b>只是視覺(jué)加粗效果—>單純?yōu)榱水a(chǎn)生加粗
<em> <i>標(biāo)簽
em用于強(qiáng)調(diào)文本
i只是視覺(jué)斜體效果
<strong>比<em>強(qiáng)調(diào)更強(qiáng)
特殊符號(hào)：
—->空格
> —>大于號(hào)
&lt；—>小于號(hào)
&quot；—>引號(hào)
?–>版權(quán)號(hào)

第三章 html基本標(biāo)簽

HTMl基本標(biāo)簽：
span標(biāo)簽
對(duì)被用來(lái)組合文檔中的行內(nèi)元素
注意：span沒(méi)有固定的格式表現(xiàn)，當(dāng)對(duì)它應(yīng)用樣式時(shí)，才會(huì)產(chǎn)生視覺(jué)上的變化
<pre>標(biāo)簽
文字的格式按源碼的排版來(lái)顯示，我們稱之為預(yù)處理格式
<a>標(biāo)簽—>他有一個(gè)必不可少的屬性 href
target屬性：
_self(在原來(lái)頁(yè)面打開(kāi))
_blank（新窗口打開(kāi)）
_top（打開(kāi)時(shí)忽略所有的框架）
_parent（在父窗口中打開(kāi)）
創(chuàng)建錨點(diǎn)和錨鏈接
錨點(diǎn)也是一種超鏈接，是頁(yè)面內(nèi)進(jìn)行跳轉(zhuǎn)的超鏈接
第一步：創(chuàng)建錨點(diǎn) <a name="錨點(diǎn)名稱"></a>
第二步：使用創(chuàng)建好的錨點(diǎn)名稱 <a href="#錨點(diǎn)名稱">內(nèi)容</a>
marquee標(biāo)簽
可以創(chuàng)建一個(gè)內(nèi)容滾動(dòng)效果

<marquee direction="down" loop="4" onmouseover=this.stop() onmouseout=this.start()></marquee>

direction 表示滾動(dòng)方向，取值有（left,right,up,down,默認(rèn)left）
loop表示滾動(dòng)循環(huán)的次數(shù)，默認(rèn)為無(wú)限循環(huán)

onmouseover=this.stop() onmouseover=this.start() scrollamout="1"(滾動(dòng)速度)

表示當(dāng)鼠標(biāo)移上區(qū)域的時(shí)候停止?jié)L動(dòng)，鼠標(biāo)移開(kāi)繼續(xù)滾動(dòng)

第四章 img圖片標(biāo)簽與路徑

圖片標(biāo)簽與路徑：
常見(jiàn)圖片格式 jpg png gif
Gif （只支持全透明）
Jpeg /jpg
Png 半/全透明都支持
圖片標(biāo)簽寫(xiě)法：
<img src="" alt="" width="" height="" />
圖片四要素：
src="" 圖片路徑
alt="" 圖片含義
width="" 圖片寬度和圖片大小保持一致
height="" 圖片高度和圖片大小保持一致
title=""
路徑知識(shí)：
相對(duì)路徑、絕對(duì)路徑：
相對(duì)路徑：(Relative Path) 相對(duì)于該文件的路徑；
絕對(duì)路徑：(Absolute Path) 從磁盤(pán)出發(fā)的路徑；
<img src="" …… align="" /> align屬性–設(shè)置圖片與后面文字的位置關(guān)系
值–top、bottom、middle、absmiddle、left、right
在靜態(tài)頁(yè)面中：
/開(kāi)頭表示根目錄；
./表示當(dāng)前目錄；（斜畫(huà)線前面一個(gè)點(diǎn)）
../上級(jí)目錄；（斜畫(huà)線前面兩個(gè)點(diǎn)）
直接用文件名不帶/也表示同一目錄
這些都是相對(duì)于當(dāng)前文件的位置來(lái)說(shuō)的，如果用絕對(duì)路徑的話就是寫(xiě)全了。

第五章三種列表的講解

三種列表的知識(shí)講解：
<ul>無(wú)序列表
無(wú)序列表是一個(gè)沒(méi)有順序項(xiàng)目的列表，此列表項(xiàng)默認(rèn)粗體圓點(diǎn)進(jìn)行標(biāo)識(shí)

<ul>
 <li></li>
 <li></li>
 <li></li>
</ul>

有序列表

有序列表也是一列項(xiàng)目，只是列表項(xiàng)目使用的是數(shù)字進(jìn)行標(biāo)記。有序列表始于 <ol> 標(biāo)簽。每個(gè)列表項(xiàng)始于 <li>標(biāo)簽。

<ol>
 <li>內(nèi)容一</li>
 <li>內(nèi)容二</li>
 <li>內(nèi)容三</li>
</ol>

列表符號(hào)
無(wú)序列表-列表符號(hào):
type="circle" 空心圓 type=“disc” 實(shí)心圓默認(rèn)值 type="square" 方塊符
有序列表-列表符號(hào)
type="A" A B C D
type="a" a b c d
type="1" 1 2 3 4 默認(rèn)值type=”I” I II III type=”i” i ii iii
列表嵌套
無(wú)序列表-嵌套

<ul>
 <li>柚子
 <ul>
 <li>沙田柚</li>
 <li>蜜柚</li>
 </ul>
 </li>
 <li>荔枝</li>
 <li>蘋(píng)果</li></ul>

有序列表-嵌套

<ol>
 <li>茶
 <ul>
 <li>紅茶</li>
 <li>綠茶</li>
 </ul>
 </li>
 <li>果汁</li>
 <li>牛奶</li></ol>

定義列表
定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。定義列表以 <dl> 標(biāo)簽開(kāi)始。每個(gè)定義列表項(xiàng)以 <dt>開(kāi)始。每個(gè)自定義列表項(xiàng)的定義以 <dd> 開(kāi)始。

<dl> 
 <dt>pc網(wǎng)頁(yè)制作</dt> 
 <dd>學(xué)習(xí)DIV+CSS JS JQ 項(xiàng)目實(shí)戰(zhàn)</dd> 
 <dt>手機(jī)網(wǎng)頁(yè)制作</dt> 
 <dd>手機(jī)網(wǎng)頁(yè)制作實(shí)戰(zhàn)</dd>
</dl>

dd是對(duì)dt的解釋
< dl>< /dl>用來(lái)創(chuàng)建一個(gè)普通的列表,
< dt>< /dt>用來(lái)創(chuàng)建列表中的上層項(xiàng)目，
< dd>< /dd>用來(lái)創(chuàng)建列表中最下層項(xiàng)目，
< dt>< /dt>和< dd>< /dd>都必須放在< dl>< /dl>標(biāo)志對(duì)之間。

<dl>
 <dt>中國(guó)城市</dt>
 <dd>北京 </dd>
 <dd>上海 </dd>
 <dd>廣州 </dd>
 <dt>美國(guó)城市</dt>
 <dd>華盛頓 </dd>
 <dd>芝加哥 </dd>
 <dd>紐約 </dd>
</dl>

dl是definition list的縮寫(xiě)
dt是definition title的縮寫(xiě)
dd是definition description的縮寫(xiě)
list-style屬性具有三個(gè)屬性分量：
list-style-position ：設(shè)置列表項(xiàng)圖標(biāo)的位置，位于文本內(nèi)或者文本外
list-style-type：設(shè)置列表項(xiàng)圖標(biāo)的類型
list-style-image：使用圖像設(shè)置列表項(xiàng)圖標(biāo)

第六章表單元素(上)

表單標(biāo)簽:
<form>表單標(biāo)簽
<form>表單是一個(gè)包含表單元素的區(qū)域，包括起來(lái)的都是表單的內(nèi)容

<form>
 <input type="text"/>
</form>

HTML標(biāo)簽 - Action和確認(rèn)按鈕：
當(dāng)用戶單擊確認(rèn)按鈕時(shí)，表單的內(nèi)容會(huì)被傳送到另一個(gè)文件。表單的動(dòng)作屬性定義了目的文件的文件名。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對(duì)接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。

<form action="html.do" method="get"> 
 username: <input type="text" name="user" /> 
 <input type="submit" value="提 交" />
</form>

HTML標(biāo)簽 - 隱藏域隱藏標(biāo)簽：
隱藏域在頁(yè)面中對(duì)于用戶是不可見(jiàn)的，在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時(shí)候，隱藏域的信息也被一起發(fā)送到服務(wù)器

<form> 
 <input type="hidden" name="hid" value="value">
</form>

<input>標(biāo)簽的掌握
常用type類型：
<input type="" name="" value="" />
type="text" 單行文本輸入框
type="password" 密碼（maxlength=""）
type="radio" 單項(xiàng)選擇（checked="checked"）
type="checkbox" 多項(xiàng)選擇
type="button" 按鈕
type="submit" 提交 type="image"圖片提交
type="file" 上傳文件
type="reset"重置
type="hidden" 隱藏
關(guān)于表單中的設(shè)置默認(rèn)值：

<input type="text" name="" value="今天心情不錯(cuò)" />
<input type="radio" name="" value="" checked="checked">
<input type="checkbox" name="" value="" checked="checked">

<select name="" >
 <option value=""></option>
 <option value="" selected="selected"></option>
<select>

textarea沒(méi)有默認(rèn)值
<label>標(biāo)簽的使用
<label></label>
label 元素不會(huì)向用戶呈現(xiàn)任何特殊效果。
不過(guò)，它為鼠標(biāo)用戶改進(jìn)了可用性。
如果您在 label 元素內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。
就是說(shuō)，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
<label> 標(biāo)簽的for 屬性應(yīng)當(dāng)與相關(guān)元素的 id屬性相同。
例子：（重要—注冊(cè)表單–用戶體驗(yàn)–必做）

<p>單向選擇</p>
<label for="male">男：</label><input type="radio" name="sex" id="male"/>
<label for="nv">女：</label><input type="radio" name="sex"checked="check"/>

第七章表單和表格(下)

表單和表格標(biāo)簽：
<textarea>文本域標(biāo)簽
<textarea>標(biāo)簽：
<textarea></textarea>是文本域標(biāo)簽，可以在其中插入一段文字內(nèi)容，它有兩個(gè)常用屬性rows和cols
注意：
rows表示這個(gè)文本域有多少行
cols表示這個(gè)文本域有多少列
除了這兩個(gè)屬性它還有readonly（只讀，文本域的內(nèi)容無(wú)法改變，相當(dāng)于協(xié)議）和title（鼠標(biāo)放上提示）
<select>標(biāo)簽的掌握
注：當(dāng)提交表單時(shí)，瀏覽器會(huì)提交選定的項(xiàng)目，或者收集用逗號(hào)分隔的多個(gè)選項(xiàng)，將其合成一個(gè)單獨(dú)的參數(shù)列表，并且在將 <select> 表單數(shù)據(jù)提交給服務(wù)器時(shí)包括 name屬性

<form> 
 <select name="" id="">
 <option value="1">1月</option> 
 <option value="2">2月</option> 
</select>
</form>

常用到的屬性：disabled=“disabled” name="sel" size="2"
<table>表格標(biāo)簽
<table>表格標(biāo)簽：<table>是表格標(biāo)簽，可以用它定義一個(gè)表格。

<table border="1">
 <tr>
 <td>姓名</td>
 <td>性別</td>
 </tr>
</table>

注意：<table>的border屬性不能少
<tr> <td>標(biāo)簽的使用
<tr>行標(biāo)簽：
<tr>可以定義表格中的一行，一個(gè)<tr></tr>表示一行。

<table border="1">
<tr>
 <td>姓名</td>
 <td>性別</td>
</tr>
<tr>
 <td>姓名</td>
 <td>性別</td>
</tr>
</table>

<td>單元格標(biāo)簽:
<td>可以定義表格中的一個(gè)單元格，<td></td>表示一個(gè)單元格。

<table border="1">
<tr>
<td >姓名</td>
<td>性別</td>
<td>愛(ài)好</td>
</tr>
</table>

border-collapse 屬性設(shè)置是否將表格邊框折疊為單一邊框：
border-collapse:collapse;
colspan左右合并
rowspan上下合并

第一部分總結(jié)：

非可視化標(biāo)簽：head meta style scrpit...
可視化標(biāo)簽：img div span a ul li…
只有可視化標(biāo)簽，才能用css改變它
單標(biāo)簽：meta link base img input br hr
雙標(biāo)簽：html head body div a p span ..ul li ol dl ….
常用可視化標(biāo)簽
div
一般用它來(lái)布局
a 超鏈接標(biāo)簽
href*屬性：設(shè)置跳轉(zhuǎn)的網(wǎng)頁(yè)地址
target屬性：設(shè)置跳轉(zhuǎn)的目標(biāo)
結(jié)論：凡事頁(yè)面可以點(diǎn)擊跳轉(zhuǎn)或者表單提交的文字，都用a標(biāo)簽
img
src*屬性用來(lái)設(shè)置圖片的url數(shù)據(jù)
alt提供給搜索引擎搜索的
width
height
結(jié)論：顯示圖片
ul li
列表
結(jié)論：只要將來(lái)設(shè)計(jì)頁(yè)面中有固定樣式的列表，就用ul和li
table caption tr td (th)
慢慢已經(jīng)被淘汰了被ul li代替
如果是合并豎排的就是合并行（rowspan）
如果是合并橫排的就是合并列（colspan）

HTML部分導(dǎo)圖總結(jié)

HTML5標(biāo)簽集合

學(xué)習(xí)從來(lái)不是一個(gè)人的事情，要有個(gè)相互監(jiān)督的伙伴，想要學(xué)習(xí)或交流前端問(wèn)題的小伙伴可以私信“學(xué)習(xí)”小明加群獲取2019web前端最新入門資料，一起學(xué)習(xí)，一起成長(zhǎng)！

慶假期很適合學(xué)習(xí)點(diǎn)新知識(shí)。前幾天有粉絲在后臺(tái)問(wèn)我關(guān)于使用 js 開(kāi)發(fā)后端服務(wù)的建議，我給推薦了這一個(gè)面向小白的走向全棧開(kāi)發(fā)工程師的教程。

關(guān)于這個(gè)全棧入門教程

這是一個(gè)面向零基礎(chǔ)的基于 JavaScript 語(yǔ)言的全棧開(kāi)發(fā)教程，教程基于目前流行的前后端分離開(kāi)發(fā)模式，使用 Vue.js + Node.js 并且通過(guò)從實(shí)際需求的角度來(lái)完成基礎(chǔ)的業(yè)務(wù)代碼，沒(méi)有過(guò)多功能封裝，幾乎都是底層的代碼，通俗易懂，上手容易。

教程截圖

關(guān)于作者

這套 JavaScript 全棧教程的作者是廖雪峰，是一位有著超過(guò)十年軟件開(kāi)發(fā)經(jīng)驗(yàn)的大神，精通 Java / Python / Ruby / Visual Basic / Objective C 等，對(duì)開(kāi)源框架有很深入的研究，著有《Spring 2.0核心技術(shù)與最佳實(shí)踐》一書(shū)，是很多后端開(kāi)發(fā)工程師非常熟知的業(yè)內(nèi)大神。

教程目錄

因?yàn)獒槍?duì)的是對(duì) javascript 零基礎(chǔ)的小白用戶，因此這個(gè)教程有很大篇幅是 javascript 語(yǔ)言入門。

JavaScript簡(jiǎn)介
快速入門
函數(shù)
標(biāo)準(zhǔn)對(duì)象
面向?qū)ο缶幊?/span>
瀏覽器
jQuery
錯(cuò)誤處理
underscore
Node.js

學(xué)習(xí)建議和感想

這是我毫無(wú)后端開(kāi)發(fā)經(jīng)驗(yàn)時(shí)學(xué)習(xí)后端開(kāi)發(fā)的入門的教程，這套教程讓我學(xué)會(huì)了如何使用 javascript 來(lái)開(kāi)發(fā)后端 api 接口。而且前面的基礎(chǔ)語(yǔ)法教程，也看得津津有味，復(fù)習(xí)了很多不會(huì)用、不常用但很巧妙的代碼實(shí)現(xiàn)。這是我推薦這個(gè)教程的最大原因。

教程截圖

這個(gè)教程除了適合零基礎(chǔ)的小白，我認(rèn)為這更像一個(gè)寫(xiě)給后端開(kāi)發(fā)者的、從其他后端語(yǔ)言轉(zhuǎn) javascript 的教程，如果像我之前學(xué)習(xí)的那樣沒(méi)有過(guò)后端開(kāi)發(fā)經(jīng)驗(yàn)，就需要注意幾個(gè)問(wèn)題：

教程涉及的代碼最后自己敲出來(lái)實(shí)現(xiàn)一遍，看懂并不代表會(huì)寫(xiě)
后端開(kāi)發(fā)設(shè)計(jì)的基礎(chǔ)知識(shí)很多，建議提前了解數(shù)據(jù)庫(kù)、服務(wù)器基本知識(shí)，學(xué)習(xí)起來(lái)會(huì)更順暢
教程中很多關(guān)聯(lián)的代碼片段，拷貝出來(lái)配合流程圖來(lái)理解，會(huì)事半功倍

入門靠老師，修行靠自己。總的來(lái)說(shuō)，這只是一套非常基礎(chǔ)的入門教程，學(xué)完后能夠了解前端開(kāi)發(fā)和后端開(kāi)發(fā)，可以實(shí)現(xiàn)簡(jiǎn)單的 demo，可以幫助我們學(xué)習(xí) koa / egg.js 這類基于 Node.js 的后端開(kāi)發(fā)框架，但后端開(kāi)發(fā)需要學(xué)習(xí)的知識(shí)很多，數(shù)據(jù)庫(kù)設(shè)計(jì)、查詢優(yōu)化、架構(gòu)設(shè)計(jì)等等，成為一個(gè)合格的全棧工程師，路還有很遠(yuǎn)。

教程免費(fèi)學(xué)習(xí)說(shuō)明

這是一個(gè)完全免費(fèi)的 JavaScript 全棧入門教程，就算完全不懂 js 也能快速入門，在線免費(fèi)學(xué)習(xí)。如果想學(xué) js 語(yǔ)法，也可以看看之前推薦過(guò)的阮一峰寫(xiě)的免費(fèi) javascript 系統(tǒng)學(xué)習(xí)入門教程。

最后祝各位有所收獲，邁進(jìn)全棧開(kāi)發(fā)工程師行列。

關(guān)注我，持續(xù)分享高質(zhì)量的免費(fèi)開(kāi)源、免費(fèi)商用的資源。

↓↓點(diǎn)擊查看本次分享的網(wǎng)址。

JavaScript 全棧開(kāi)發(fā)入門 - 由廖雪峰提供的面向小白的免費(fèi)在線教程｜那些免費(fèi)的磚

1272208556@qq.com

1、HTML + CSS + UI

2、Javascript

3、HTML5CORE + AJAX + Jquery

4、Bootstrap,Angular JS + 其他框架

1、HTML + CSS3BASIC + PRO + UI + PRO + CSS3CORE + PRO

======================================================

1、Internet

1、什么是Internet

是全球性計(jì)算機(jī)互聯(lián)網(wǎng)絡(luò),是由若干終端(PC,移動(dòng)端)以及特殊的傳輸介質(zhì)而組成的一個(gè)網(wǎng)絡(luò)結(jié)構(gòu)

PC:Personal Computer

2、提供的服務(wù)

信息共享

Telnet : 遠(yuǎn)程連接

Email : 電子郵件

WWW : 萬(wàn)維網(wǎng) www.baidu.com

BBS : 電子公告板，論壇

FTP : 上傳和下載服務(wù)

3、實(shí)現(xiàn)技術(shù)

1、分組交換原理:數(shù)據(jù)通過(guò)數(shù)據(jù)包進(jìn)行傳遞，到達(dá)目的地后，對(duì)數(shù)據(jù)包進(jìn)行重組

2、TCP/IP 協(xié)議簇

2、WEB

1、什么是WEB

就是 WWW（World Wide Web）

w3c : www consortium 萬(wàn)維網(wǎng)聯(lián)盟

2、能干什么

能夠?qū)⒏黝惖男畔⒑头?wù)進(jìn)行連接，提供圖形用戶界面

信息:文字、圖片、音頻、視頻

服務(wù):Telnet, FTP , Mail , HTTP ...

3、萬(wàn)維網(wǎng)就是無(wú)數(shù)的文檔集合（網(wǎng)頁(yè)文檔）,文檔會(huì)駐留在世界（互聯(lián)網(wǎng)）的任何一個(gè)角落

3、WEB的工作原理

WEB是基于Internet的多媒體信息服務(wù)系統(tǒng)

1、基于瀏覽器 / 服務(wù)器模式

B / S : Browser / Server

在服務(wù)器上，主要以網(wǎng)頁(yè)的形式發(fā)布多媒體信息

2、由WEB服務(wù)器、瀏覽器、通信協(xié)議組成

3、WEB 相關(guān)技術(shù)

1、服務(wù)器端技術(shù)（后臺(tái)）

PHP,JSP,ASP 。。。。。。

2、客戶端技術(shù)(前端技術(shù))

HTML,

CSS,

Javascript

=========================================================

1、HTML 入門

1、什么是HTML

HTML(Hyper Text Markup Language),超級(jí)文本標(biāo)記語(yǔ)言

超文本:

標(biāo)記 : 超文本都是由標(biāo)記組成的

<a>

語(yǔ)言 : 包含自己獨(dú)特的語(yǔ)法

HTML最終由瀏覽器負(fù)責(zé)解釋

HTML總可以嵌入一些腳本語(yǔ)言編寫(xiě)的程序段:Javascript,VBScript

2、HTML版本

超級(jí)文本標(biāo)記語(yǔ)言（第一版）

HTML2.0

HTML3.2

HTML4.0

HTML4.01

XHTML1.0

HTML5

3、標(biāo)簽(標(biāo)記)

1、標(biāo)簽語(yǔ)法

1、必須使用尖括號(hào)擴(kuò)起來(lái)

<a>,<div> ...

<A>,<a>

2、有封閉類型的標(biāo)簽，也有非封閉類型的標(biāo)簽

1、封閉類型

也稱作雙標(biāo)記，則必須成對(duì)出現(xiàn)

<標(biāo)記>文本內(nèi)容</標(biāo)記>

不同的標(biāo)記，決定了"文本內(nèi)容"的不同表現(xiàn)形式

eg:<a></a>,<p></p>,<div></div>

2、非封閉類型

也稱作單標(biāo)記、空標(biāo)記

<標(biāo)記>

或者

<標(biāo)記/>

eg:

3、元素

標(biāo)記就是元素，元素也稱為標(biāo)記

4、元素嵌套(標(biāo)簽嵌套)

標(biāo)簽之間相互嵌套，形成復(fù)雜的語(yǔ)法結(jié)構(gòu)

<body>

<p>

<a></a>

</p>

</body>

5、屬性

屬性是出現(xiàn)在開(kāi)始標(biāo)記中的內(nèi)容,作用是修飾元素

標(biāo)準(zhǔn)屬性:每個(gè)元素都會(huì)具備的通用屬性

id : 定義每個(gè)標(biāo)簽的唯一標(biāo)識(shí)

title:提示文本

class:樣式相關(guān)，類樣式

style:樣式相關(guān)，行內(nèi)樣式

操作1：定義一對(duì)p標(biāo)簽，id屬性設(shè)置為program

多屬性:

注意：多屬性之間，排名不分先后

2、創(chuàng)建HTML文檔

開(kāi)發(fā)工具:任何一個(gè)文字編輯軟件都可以開(kāi)發(fā)HTML

EditPlus ：超級(jí)記事本

運(yùn)行環(huán)境:任何一個(gè)瀏覽器都能運(yùn)行HTML

Google Chrome,Mozilla Firefox,Microsoft IE,Safari,Opera

超文本文件(HTML文檔):

是一個(gè)以.html或.htm結(jié)尾的文檔

3、文檔結(jié)構(gòu)

1、文檔類型聲明

聲明使用的html版本和風(fēng)格

<!doctype html>

2、html頁(yè)面

1、文檔根元素

每個(gè)文檔有且僅有一對(duì)根元素 , html

2、在根元素的內(nèi)部，包含兩對(duì)子元素

1、head : 頁(yè)面的頭部?jī)?nèi)容

定義頁(yè)面全局信息

包含:

<title></title> : 網(wǎng)頁(yè)標(biāo)題

2、body : 頁(yè)面的主體內(nèi)容

任何一個(gè)標(biāo)簽，都可能會(huì)出現(xiàn)在body中

3、head元素

1、聲明網(wǎng)頁(yè)標(biāo)題

2、定義網(wǎng)頁(yè)文本編碼格式

默認(rèn):ISO-8859-1,只支持英文以及英文狀態(tài)下的標(biāo)點(diǎn)符號(hào)

utf-8:支持中英文,標(biāo)點(diǎn)符號(hào)

3、... ...

4、body元素

屬性:

text : 文本的顏色

bgcolor : 背景顏色

練習(xí)1:

1、為body添加兩個(gè)屬性，text，bgcolor

2、文本顏色 : 紅色(red)

背景顏色 : 銀色(silver)

3、在body中隨意寫(xiě)上一段文本，觀察頁(yè)面顯示效果

5、文本標(biāo)記

1、特殊的文本

轉(zhuǎn)義字符:

空格: 

< : < less than

> : > greater than

2、文本標(biāo)記

1、文本樣式

<b>...</b> : 加粗文本

<i>...</i> : 斜體文本

<u>...</u> : 下劃線

<s>...</s> : 刪除線

<sup>...</sup> : 上標(biāo)

<sub>...</sub> : 下標(biāo)

2、標(biāo)題元素

1-6級(jí)6個(gè)標(biāo)題

<hn></hn> n:1-6

一級(jí)最大

六級(jí)最小

3、段落元素

提供了結(jié)構(gòu)化文本的表現(xiàn)方式

語(yǔ)法:<p></p>

注意：

1、每對(duì)p標(biāo)簽單獨(dú)成一個(gè)段落

2、段落與其他元素有垂直空白，段落間距

常用屬性:

align : 水平對(duì)齊方式

取值:left center right

4、換行元素

在代碼的任何位置處，實(shí)現(xiàn)回車的效果

<br />

5、水平線

又叫分割線

<hr />

屬性:

1、size : 水平線的粗細(xì)，通常以像素(px)為單位

2、width: 寬度

3、align: 水平線的水平對(duì)齊方式

4、color: 顏色

6、分區(qū)元素

目的：為元素進(jìn)行分組，多數(shù)用在布局中

塊分區(qū)元素:<div></div> 層

行內(nèi)分區(qū)元素:<span></span>

注意：

div ：主要用在布局上

span：修改其內(nèi)部?jī)?nèi)容的樣式

7、預(yù)格式化

保留源文檔中的空格和回車

<pre>

文本內(nèi)容

</pre>

3、注釋

可以寫(xiě)在html源碼中，但不被瀏覽器解釋的文本

語(yǔ)法:

4、行內(nèi)元素與塊級(jí)元素

塊級(jí)元素:默認(rèn)情況下，塊級(jí)元素獨(dú)占一行，元素的前后都會(huì)自動(dòng)換行 div,hn,hr,p

塊級(jí)元素作用:布局

行內(nèi)元素:默認(rèn)情況，多個(gè)元素位于同一行，不會(huì)換行

span,文本標(biāo)記... ...

行內(nèi)元素作用:修改內(nèi)部?jī)?nèi)容的樣式

在線咨詢

上一篇：看完這篇 HTTP，跟面試官扯皮就沒(méi)問(wèn)題了
下一篇：用html代碼編寫(xiě)的免費(fèi)軟件下載和安裝教程

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。