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

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

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

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

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

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

不成對出現(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)簽
都會讓文字產(chǎn)生加粗效果
<strong>用于強(qiáng)調(diào)文本，強(qiáng)度更深，表示重要文本—>用于SEO優(yōu)化
<b>只是視覺加粗效果—>單純?yōu)榱水a(chǎn)生加粗
<em> <i>標(biāo)簽
em用于強(qiáng)調(diào)文本
i只是視覺斜體效果
<strong>比<em>強(qiáng)調(diào)更強(qiáng)
特殊符號：
—->空格
> —>大于號
&lt；—>小于號
&quot；—>引號
?–>版權(quán)號

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

HTMl基本標(biāo)簽：
span標(biāo)簽
對被用來組合文檔中的行內(nèi)元素
注意：span沒有固定的格式表現(xiàn)，當(dāng)對它應(yīng)用樣式時，才會產(chǎn)生視覺上的變化
<pre>標(biāo)簽
文字的格式按源碼的排版來顯示，我們稱之為預(yù)處理格式
<a>標(biāo)簽—>他有一個必不可少的屬性 href
target屬性：
_self(在原來頁面打開)
_blank（新窗口打開）
_top（打開時忽略所有的框架）
_parent（在父窗口中打開）
創(chuàng)建錨點(diǎn)和錨鏈接
錨點(diǎn)也是一種超鏈接，是頁面內(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)建一個內(nèi)容滾動效果

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

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

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

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

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

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

第五章三種列表的講解

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

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

有序列表

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

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

列表符號
無序列表-列表符號:
type="circle" 空心圓 type=“disc” 實(shí)心圓默認(rèn)值 type="square" 方塊符
有序列表-列表符號
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
列表嵌套
無序列表-嵌套

<ul>
 <li>柚子
 <ul>
 <li>沙田柚</li>
 <li>蜜柚</li>
 </ul>
 </li>
 <li>荔枝</li>
 <li>蘋果</li></ul>

有序列表-嵌套

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

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

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

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

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

dl是definition list的縮寫
dt是definition title的縮寫
dd是definition description的縮寫
list-style屬性具有三個屬性分量：
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>表單是一個包含表單元素的區(qū)域，包括起來的都是表單的內(nèi)容

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

HTML標(biāo)簽 - Action和確認(rèn)按鈕：
當(dāng)用戶單擊確認(rèn)按鈕時，表單的內(nèi)容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數(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)簽：
隱藏域在頁面中對于用戶是不可見的，在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時候，隱藏域的信息也被一起發(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="今天心情不錯" />
<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沒有默認(rèn)值
<label>標(biāo)簽的使用
<label></label>
label 元素不會向用戶呈現(xiàn)任何特殊效果。
不過，它為鼠標(biāo)用戶改進(jìn)了可用性。
如果您在 label 元素內(nèi)點(diǎn)擊文本，就會觸發(fā)此控件。
就是說，當(dāng)用戶選擇該標(biāo)簽時，瀏覽器就會自動將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
<label> 標(biāo)簽的for 屬性應(yīng)當(dāng)與相關(guān)元素的 id屬性相同。
例子：（重要—注冊表單–用戶體驗(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)容，它有兩個常用屬性rows和cols
注意：
rows表示這個文本域有多少行
cols表示這個文本域有多少列
除了這兩個屬性它還有readonly（只讀，文本域的內(nèi)容無法改變，相當(dāng)于協(xié)議）和title（鼠標(biāo)放上提示）
<select>標(biāo)簽的掌握
注：當(dāng)提交表單時，瀏覽器會提交選定的項(xiàng)目，或者收集用逗號分隔的多個選項(xiàng)，將其合成一個單獨(dú)的參數(shù)列表，并且在將 <select> 表單數(shù)據(jù)提交給服務(wù)器時包括 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)簽，可以用它定義一個表格。

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

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

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

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

<table border="1">
<tr>
<td >姓名</td>
<td>性別</td>
<td>愛好</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
一般用它來布局
a 超鏈接標(biāo)簽
href*屬性：設(shè)置跳轉(zhuǎn)的網(wǎng)頁地址
target屬性：設(shè)置跳轉(zhuǎn)的目標(biāo)
結(jié)論：凡事頁面可以點(diǎn)擊跳轉(zhuǎn)或者表單提交的文字，都用a標(biāo)簽
img
src*屬性用來設(shè)置圖片的url數(shù)據(jù)
alt提供給搜索引擎搜索的
width
height
結(jié)論：顯示圖片
ul li
列表
結(jié)論：只要將來設(shè)計(jì)頁面中有固定樣式的列表，就用ul和li
table caption tr td (th)
慢慢已經(jīng)被淘汰了被ul li代替
如果是合并豎排的就是合并行（rowspan）
如果是合并橫排的就是合并列（colspan）

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

HTML5標(biāo)簽集合

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

認(rèn)證的站長暫時還不能使用代碼，

可以先認(rèn)證再插入代碼

html組件和js組件使用權(quán)限限制

*頁面: 只允許經(jīng)過認(rèn)證的用戶使用html組件和js組件

*文章: 只允許經(jīng)過認(rèn)證的用戶使用js組件

html組件和js組件只允許使用規(guī)定的標(biāo)簽

*html組件: a, code, pre, blockquote, ul, ol, li, table, thead, tbody, tfoot, tr, td, th, dd, dl, dt, s, u, b, i, font, span, strong, br, em, hr, sub, sup, div, section, p, h1, h2, h3, h4, h5, h6, vedio, audio, svg, img, style, iframe, fidldset, animate, text, tspan

*js組件: , a, code, pre, blockquote, ul, ol, li, table, thead, tbody, tfoot, tr, td, th, dd, dl, dt, s, u, b, i, font, span, strong, br, em, hr, sub, sup, div, section, p, h1, h2, h3, h4, h5, h6, vedio, audio, svg, img, style, iframe, fidldset, animate, text, tspan

所有標(biāo)簽屬性限制

*不允許使用on開頭的屬性名

快站的技術(shù)小哥哥們限定了以上可使用的標(biāo)簽，如果有所補(bǔ)充歡迎在下方留言回復(fù)，或點(diǎn)擊【閱讀原文】在社區(qū)中回復(fù)，我們會考慮酌情開放

更多快站資訊，點(diǎn)擊進(jìn)入快站官網(wǎng)（www.kuaizhan.com）

avascript原生阻止冒泡

<html>
<head>
<style type="text/css">
#hide{width:75%;height:80px;background:skyblue;display:block;}
.hander{cursor:pointer;}
input{margin:5 0 0 900;}
</style>
<script>
    //不用window.onload也可以
    document.documentElement.onclick = function() {
    		document.getElementById('hide').style.display = 'none';
    }
//阻止冒泡事件方法
function stopBubble(e) {
    e = e || window.event;
    if(e.stopPropagation) { //W3C阻止冒泡方法
    e.stopPropagation();
    } else {
    e.cancelBubble = true; //IE阻止冒泡方法
    }
}
//方法必須要放在window.onload下
window.onload = function(){
    document.getElementById("hide").onclick = function(e) {
    stopBubble(e);
    }
    document.getElementById('btn_show').onclick = function(e) {
    document.getElementById('hide').style.display = 'block';
    stopBubble(e);
    }
}
</script>
</head>
<body>
<div id="hide" class="hander">click here nothing happen,you can click beside this area</div>
<input type="button" id="btn_show" value="show" class="hander"/>
</body>
onclick 如何阻止事件冒泡
<div id="id_tag_list"><span class="right">▼</span><span class="label" onclick="deleteLabel(this)">Python數(shù)據(jù)分析與應(yīng)用</span></div>
//刪除標(biāo)簽的方法
function deleteLabel(target){
    var e = target;
    if(e && e.stopPropagation){ //阻止冒泡
      // 因此它支持W3C的stopPropation()方法
      e.stopPropagation();
    }else{
      // 否則, 我們得使用IE的方法來取消事件冒泡
      window.event.cancelBubble=true;
    }
}

jQuery如何阻止事件冒泡

<div class="subcategories">這里有點(diǎn)擊事件</div>
<div class="subcategories">這里有點(diǎn)擊事件</div>
<div class="subcategories">這里有點(diǎn)擊事件</div>

<script type="text/javascript">
//阻止點(diǎn)擊事件
$(function() {
    $(".subcategories").click(function(event) {
        event.stopPropagation();
    });
});
</script>

什么是js事件冒泡?

在一個對象上觸發(fā)某類事件(比如單擊onclick事件), 如果此對象定義了此事件的處理程序, 那么此事件就會調(diào)用這個處理程序, 如果沒有定義此事件處理程序或者事件返回true,

那么這個事件會向這個對象的父級對象傳播, 從里到外, 直至它被處理(父級對象所有同類事件都將被激活), 或者它到達(dá)了對象層次的最頂層, 即document對象(有些瀏覽器是window)。

如何來阻止Jquery事件冒泡?

<!DOCTYPE html>
<html">
<head runat="server">
<title>Jquery 事件冒泡</title>
<script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
</head>
<body>
　　<form id="form1" runat="server">
　　　　<div id="divOne" onclick="alert('我是最外層');">
　　　　　　<div id="divTwo" onclick="alert('我是中間層！')">
　　　　　　　　<a id="hr_three" href="http://www.xxxxxx.com" mce_href="http://www.xxxxxx.com"onclick="alert('我是最里層！')">點(diǎn)擊我</a>
　　　　　　</div>
　　　　</div>
　　</form>
</body>
</html>

比如上面這個頁面，

分為三層：divOne是第外層，divTwo中間層，hr_three是最里層;

他們都有各自的click事件，最里層a標(biāo)簽還有href屬性。

運(yùn)行頁面，點(diǎn)擊“點(diǎn)擊我”,會依次彈出：我是最里層---->我是中間層---->我是最外層

---->然后再鏈接到百度.

這就是事件冒泡, 本來我只點(diǎn)擊ID為hr_three的標(biāo)簽, 但是確執(zhí)行了三個alert操作。

事件冒泡過程（以標(biāo)簽ID表示）：hr_three----> divTwo----> divOne 。從最里層冒泡到最外層。

如何來阻止?

1.event.stopPropagation();

<script type="text/javascript">
$(function() {
$("#hr_three").click(function(event) {
event.stopPropagation();
});
});
<script>

再點(diǎn)擊"點(diǎn)擊我", 會彈出：我是最里層, 然后鏈接到百度

2.return false;

如果頭部加入的是以下代碼

<script type="text/javascript">
$(function() {
　　$("#hr_three").click(function(event) {
　　　　return false;
　　});
});
<script>

再點(diǎn)擊"點(diǎn)擊我", 會彈出：我是最里層, 但不會執(zhí)行鏈接到百度頁面

由此可以看出：

1.event.stopPropagation();

事件處理過程中，阻止了事件冒泡，但不會阻擊默認(rèn)行為（它就執(zhí)行了超鏈接的跳轉(zhuǎn)）

2.return false;

事件處理過程中，阻止了事件冒泡，也阻止了默認(rèn)行為（比如剛才它就沒有執(zhí)行超鏈接的跳轉(zhuǎn)）

還有一種有冒泡有關(guān)的：

3.event.preventDefault();

如果把它放在頭部A標(biāo)簽的click事件中, 點(diǎn)擊"點(diǎn)擊我"。

會發(fā)現(xiàn)它依次彈出：我是最里層---->我是中間層---->我是最外層, 但最后卻沒有跳轉(zhuǎn)到百度

它的作用是：事件處理過程中, 不阻擊事件冒泡, 但阻擊默認(rèn)行為(它只執(zhí)行所有彈框, 卻沒有執(zhí)行超鏈接跳轉(zhuǎn))

在線咨詢

上一篇：如何編寫HTML提交按鈕代碼？
下一篇：簡單小程序：登錄頁面（html）

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

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

您的項(xiàng)目需求