最詳細的html+css筆記（一）

一章職業規劃和前景

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

第二章 html基本結構

認識HTML：
html不是一種編程語言，是一種標志語言
標記語言是由一套標識標簽組成的
html使用標簽來描述網頁
html結構：

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

不成對出現的標簽
<br> <hr> <meta> <img> <input..> <option..> <link>
HTML 基本標簽的講解：
<html> <head> <body>標簽
<h1>—-<h6>僅僅用于標題文本，不要為了產生粗體文本使用它們
<p>標簽段落標簽
<strong><b>標簽
都會讓文字產生加粗效果
<strong>用于強調文本，強度更深，表示重要文本—>用于SEO優化
<b>只是視覺加粗效果—>單純為了產生加粗
<em> <i>標簽
em用于強調文本
i只是視覺斜體效果
<strong>比<em>強調更強
特殊符號：
—->空格
> —>大于號
&lt；—>小于號
&quot；—>引號
?–>版權號

第三章 html基本標簽

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

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

direction 表示滾動方向，取值有（left,right,up,down,默認left）
loop表示滾動循環的次數，默認為無限循環

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

表示當鼠標移上區域的時候停止滾動，鼠標移開繼續滾動

第四章 img圖片標簽與路徑

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

第五章三種列表的講解

三種列表的知識講解：
<ul>無序列表
無序列表是一個沒有順序項目的列表，此列表項默認粗體圓點進行標識

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

有序列表

有序列表也是一列項目，只是列表項目使用的是數字進行標記。有序列表始于 <ol> 標簽。每個列表項始于 <li>標簽。

<ol>
 <li>內容一</li>
 <li>內容二</li>
 <li>內容三</li>
</ol>

列表符號
無序列表-列表符號:
type="circle" 空心圓 type=“disc” 實心圓默認值 type="square" 方塊符
有序列表-列表符號
type="A" A B C D
type="a" a b c d
type="1" 1 2 3 4 默認值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>

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

<dl> 
 <dt>pc網頁制作</dt> 
 <dd>學習DIV+CSS JS JQ 項目實戰</dd> 
 <dt>手機網頁制作</dt> 
 <dd>手機網頁制作實戰</dd>
</dl>

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

<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 ：設置列表項圖標的位置，位于文本內或者文本外
list-style-type：設置列表項圖標的類型
list-style-image：使用圖像設置列表項圖標

第六章表單元素(上)

表單標簽:
<form>表單標簽
<form>表單是一個包含表單元素的區域，包括起來的都是表單的內容

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

HTML標簽 - Action和確認按鈕：
當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。

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

HTML標簽 - 隱藏域隱藏標簽：
隱藏域在頁面中對于用戶是不可見的，在表單中插入隱藏域的目的在于收集或發送信息，以利于被處理表單的程序所使用。瀏覽者單擊發送按鈕發送表單的時候，隱藏域的信息也被一起發送到服務器

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

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

<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沒有默認值
<label>標簽的使用
<label></label>
label 元素不會向用戶呈現任何特殊效果。
不過，它為鼠標用戶改進了可用性。
如果您在 label 元素內點擊文本，就會觸發此控件。
就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。
<label> 標簽的for 屬性應當與相關元素的 id屬性相同。
例子：（重要—注冊表單–用戶體驗–必做）

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

第七章表單和表格(下)

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

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

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

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

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

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

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

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

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

第一部分總結：

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

HTML部分導圖總結

HTML5標簽集合

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

慶假期很適合學習點新知識。前幾天有粉絲在后臺問我關于使用 js 開發后端服務的建議，我給推薦了這一個面向小白的走向全棧開發工程師的教程。

關于這個全棧入門教程

這是一個面向零基礎的基于 JavaScript 語言的全棧開發教程，教程基于目前流行的前后端分離開發模式，使用 Vue.js + Node.js 并且通過從實際需求的角度來完成基礎的業務代碼，沒有過多功能封裝，幾乎都是底層的代碼，通俗易懂，上手容易。

教程截圖

關于作者

這套 JavaScript 全棧教程的作者是廖雪峰，是一位有著超過十年軟件開發經驗的大神，精通 Java / Python / Ruby / Visual Basic / Objective C 等，對開源框架有很深入的研究，著有《Spring 2.0核心技術與最佳實踐》一書，是很多后端開發工程師非常熟知的業內大神。

教程目錄

因為針對的是對 javascript 零基礎的小白用戶，因此這個教程有很大篇幅是 javascript 語言入門。

JavaScript簡介
快速入門
函數
標準對象
面向對象編程
瀏覽器
jQuery
錯誤處理
underscore
Node.js

學習建議和感想

這是我毫無后端開發經驗時學習后端開發的入門的教程，這套教程讓我學會了如何使用 javascript 來開發后端 api 接口。而且前面的基礎語法教程，也看得津津有味，復習了很多不會用、不常用但很巧妙的代碼實現。這是我推薦這個教程的最大原因。

教程截圖

這個教程除了適合零基礎的小白，我認為這更像一個寫給后端開發者的、從其他后端語言轉 javascript 的教程，如果像我之前學習的那樣沒有過后端開發經驗，就需要注意幾個問題：

教程涉及的代碼最后自己敲出來實現一遍，看懂并不代表會寫
后端開發設計的基礎知識很多，建議提前了解數據庫、服務器基本知識，學習起來會更順暢
教程中很多關聯的代碼片段，拷貝出來配合流程圖來理解，會事半功倍

入門靠老師，修行靠自己。總的來說，這只是一套非常基礎的入門教程，學完后能夠了解前端開發和后端開發，可以實現簡單的 demo，可以幫助我們學習 koa / egg.js 這類基于 Node.js 的后端開發框架，但后端開發需要學習的知識很多，數據庫設計、查詢優化、架構設計等等，成為一個合格的全棧工程師，路還有很遠。

教程免費學習說明

這是一個完全免費的 JavaScript 全棧入門教程，就算完全不懂 js 也能快速入門，在線免費學習。如果想學 js 語法，也可以看看之前推薦過的阮一峰寫的免費 javascript 系統學習入門教程。

最后祝各位有所收獲，邁進全棧開發工程師行列。

關注我，持續分享高質量的免費開源、免費商用的資源。

↓↓點擊查看本次分享的網址。

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

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

是全球性計算機互聯網絡,是由若干終端(PC,移動端)以及特殊的傳輸介質而組成的一個網絡結構

PC:Personal Computer

2、提供的服務

信息共享

Telnet : 遠程連接

Email : 電子郵件

WWW : 萬維網 www.baidu.com

BBS : 電子公告板，論壇

FTP : 上傳和下載服務

3、實現技術

1、分組交換原理:數據通過數據包進行傳遞，到達目的地后，對數據包進行重組

2、TCP/IP 協議簇

2、WEB

1、什么是WEB

就是 WWW（World Wide Web）

w3c : www consortium 萬維網聯盟

2、能干什么

能夠將各類的信息和服務進行連接，提供圖形用戶界面

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

服務:Telnet, FTP , Mail , HTTP ...

3、萬維網就是無數的文檔集合（網頁文檔）,文檔會駐留在世界（互聯網）的任何一個角落

3、WEB的工作原理

WEB是基于Internet的多媒體信息服務系統

1、基于瀏覽器 / 服務器模式

B / S : Browser / Server

在服務器上，主要以網頁的形式發布多媒體信息

2、由WEB服務器、瀏覽器、通信協議組成

3、WEB 相關技術

1、服務器端技術（后臺）

PHP,JSP,ASP 。。。。。。

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

HTML,

CSS,

Javascript

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

1、HTML 入門

1、什么是HTML

HTML(Hyper Text Markup Language),超級文本標記語言

超文本:

標記 : 超文本都是由標記組成的

<a>

語言 : 包含自己獨特的語法

HTML最終由瀏覽器負責解釋

HTML總可以嵌入一些腳本語言編寫的程序段:Javascript,VBScript

2、HTML版本

超級文本標記語言（第一版）

HTML2.0

HTML3.2

HTML4.0

HTML4.01

XHTML1.0

HTML5

3、標簽(標記)

1、標簽語法

1、必須使用尖括號擴起來

<a>,<div> ...

<A>,<a>

2、有封閉類型的標簽，也有非封閉類型的標簽

1、封閉類型

也稱作雙標記，則必須成對出現

<標記>文本內容</標記>

不同的標記，決定了"文本內容"的不同表現形式

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

2、非封閉類型

也稱作單標記、空標記

<標記>

或者

<標記/>

eg:

3、元素

標記就是元素，元素也稱為標記

4、元素嵌套(標簽嵌套)

標簽之間相互嵌套，形成復雜的語法結構

<body>

<p>

<a></a>

</p>

</body>

5、屬性

屬性是出現在開始標記中的內容,作用是修飾元素

標準屬性:每個元素都會具備的通用屬性

id : 定義每個標簽的唯一標識

title:提示文本

class:樣式相關，類樣式

style:樣式相關，行內樣式

操作1：定義一對p標簽，id屬性設置為program

多屬性:

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

2、創建HTML文檔

開發工具:任何一個文字編輯軟件都可以開發HTML

EditPlus ：超級記事本

運行環境:任何一個瀏覽器都能運行HTML

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

超文本文件(HTML文檔):

是一個以.html或.htm結尾的文檔

3、文檔結構

1、文檔類型聲明

聲明使用的html版本和風格

<!doctype html>

2、html頁面

1、文檔根元素

每個文檔有且僅有一對根元素 , html

2、在根元素的內部，包含兩對子元素

1、head : 頁面的頭部內容

定義頁面全局信息

包含:

<title></title> : 網頁標題

2、body : 頁面的主體內容

任何一個標簽，都可能會出現在body中

3、head元素

1、聲明網頁標題

2、定義網頁文本編碼格式

默認:ISO-8859-1,只支持英文以及英文狀態下的標點符號

utf-8:支持中英文,標點符號

3、... ...

4、body元素

屬性:

text : 文本的顏色

bgcolor : 背景顏色

練習1:

1、為body添加兩個屬性，text，bgcolor

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

背景顏色 : 銀色(silver)

3、在body中隨意寫上一段文本，觀察頁面顯示效果

5、文本標記

1、特殊的文本

轉義字符:

空格: 

< : < less than

> : > greater than

版權標識:©

2、文本標記

1、文本樣式

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

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

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

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

<sup>...</sup> : 上標

<sub>...</sub> : 下標

2、標題元素

1-6級6個標題

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

一級最大

六級最小

3、段落元素

提供了結構化文本的表現方式

語法:<p></p>

注意：

1、每對p標簽單獨成一個段落

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

常用屬性:

align : 水平對齊方式

取值:left center right

4、換行元素

在代碼的任何位置處，實現回車的效果

<br />

5、水平線

又叫分割線

<hr />

屬性:

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

2、width: 寬度

3、align: 水平線的水平對齊方式

4、color: 顏色

6、分區元素

目的：為元素進行分組，多數用在布局中

塊分區元素:<div></div> 層

行內分區元素:<span></span>

注意：

div ：主要用在布局上

span：修改其內部內容的樣式

7、預格式化

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

<pre>

文本內容

</pre>

3、注釋

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

語法:

4、行內元素與塊級元素

塊級元素:默認情況下，塊級元素獨占一行，元素的前后都會自動換行 div,hn,hr,p

塊級元素作用:布局

行內元素:默認情況，多個元素位于同一行，不會換行

span,文本標記... ...

行內元素作用:修改內部內容的樣式

在線咨詢

上一篇：看完這篇 HTTP，跟面試官扯皮就沒問題了
下一篇：用html代碼編寫的免費軟件下載和安裝教程

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。