當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

2020-08-18 前端html与css学习笔记总结篇(超详细)

發布時間：2023/12/20 HTML 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 2020-08-18 前端html与css学习笔记总结篇(超详细) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

第一部分 HTML

第一章職業規劃和前景

職業方向規劃定位：
- 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結構：

1234	<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標簽
  - 可以創建一個內容滾動效果

1	<marquee direction="down" loop="4" οnmοuseοver=this.stop() οnmοuseοut=this.start()></marquee>

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

1	οnmοuseοver=this.stop() οnmοuseοver=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>無序列表
  - 無序列表是一個沒有順序項目的列表，此列表項默認粗體圓點進行標識

12345

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

12345

列表符號
- 無序列表-列表符號:
  - 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
- 列表嵌套
- 無序列表-嵌套

123456789

有序列表-嵌套

123456789

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

123456

<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>標志對之間。

12345678910

dl是definition list的縮寫
dt是definition title的縮寫
dd是definition description的縮寫

list-style屬性具有三個屬性分量：
list-style-position?：設置列表項圖標的位置，位于文本內或者文本外
list-style-type：設置列表項圖標的類型
list-style-image：使用圖像設置列表項圖標

第六章表單元素(上)

表單標簽:
- <form>表單標簽
  - <form>表單是一個包含表單元素的區域，包括起來的都是表單的內容
    123 <form><input type="text"/></form>
HTML標簽 -?Action和確認按鈕：
- 當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。

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

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

123	<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"?隱藏
關于表單中的設置默認值：

123 <input type="text" name="" value="今天心情不錯" /><input type="radio" name="" value="" checked="checked"><input type="checkbox" name="" value="" checked="checked">

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

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

123456 <table border="1"><tr><td>姓名</td><td>性別</td></tr></table>
注意：<table>的border屬性不能少

<tr>?<td>標簽的使用
- <tr>行標簽：
  - <tr>可以定義表格中的一行，一個<tr></tr>表示一行。

1234567891011

<td>單元格標簽:
- <td>可以定義表格中的一個單元格，<td></td>表示一個單元格。
  1234567 <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標簽集合

第二部分 CSS

第八章 css基礎知識

css基礎知識：
- css樣式表的定義
- css：（Cascading Style Sheets）層疊樣式表；
分類及位置：內部樣式-head區域style標簽里面
- 外部樣式-link調用
- 內聯樣式-標簽元素里面
css內的注釋：/*注釋內容*/
css樣式表的語法
- CSS規則由兩個主要的部分構成：要添加樣式的盒子名或者標簽名、和要添加的樣式。
- 盒子名或者標簽名{屬性:值;}
- CSS中幾種顏色的表示方法
  - 用顏色名表示
    - 有17個預先確定的顏色，它們是
      - aqua,?black,?blue,?fuchsia,?gray,?green,?lime,?maroon,?navy,
        　　olive,?orange,?purple,?red,?silver,?teal,?white, and?yellow
  - 用十六進制的顏色值表示(紅、綠、藍)
    - #FF0000或者#F00
  - 用rgb(r,g,b)函數表示
    - 如：rgb(255,255,0)
  - 用hsl(Hue,Saturation,Lightness)函數表示（色調、飽和度、亮度)
    - 如：hsl(120,100%,100%),色調0代表紅色，120代表綠色，240代表
      藍色
  - 用rgba(r,g,b,a)函數表示
    - 其中a表示的是改顏色的透明度，取值范圍是0~1，其中0代表完全透明
  - 用hsla(Hue,Saturation,Lightness,alpha)函數表示
    - 色調、飽和度、亮度、透明度
  - 例子

123456789

<div style="position:absolute;top:0px"> <div style="background-color:gray;">background-color:gray</div> <div style="background-color:#F00;">background-color:#F00</div> <div style="background-color:#ffff00;">background-color:#ffff00</div> <div style="background-color:rgb(255,0,255);">background-color:rgb(255,0,255)</div> <div style="background-color:hsl(120,80%,50%);">background-color:hsl(120,80%,50%)</div> <div style="background-color:rgba(255,0,255,0.5);">background-color:rgba(255,0,255,0.5)</div> <div style="background-color:hsla(120,80%,50%,0.5);">background-color:hsla(120,80%,50%,0.5)</div></div>

內部樣式表
- 當單個頁面需要設置樣式時，就應該使用內部樣式表。
- 使用?<style></style>標簽在文檔<head></head>里面定義內部樣式表

12345

<head><style type="text/css" >p{color:red;}</style></head>

從外部引入到樣式分為兩種：（注意寫在head標簽里面）
當樣式需要應用于很多頁面時，就需要用到外部樣式表，首先需要創建一個css文件，然后引用到我們的頁面中。
Link樣式表式：?<link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路徑)>
Html式：?<style type="text/css">@import url("css.css");></style>

內聯樣式表（優先級高）
- 寫在標簽里面的樣式
- 如：<p style="color:red;"></p>
表示給p標簽里面的文字顏色設置為紅色
區別：外鏈樣式與導入樣式
- link標簽是屬于xhtml范疇，而@import則是css2.1中特有的。link標簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS了。
- 加載的順序的區別，link加載的css時，是一種并行(沒有嘗試是否是這樣)加載CSS方式，而@impor則在整個頁面加載完成后才加載。
- 兼容性的區別，因@import``CSS2.1才特有的，所以對于不兼容CSS2.1的瀏覽器來說，無效。
- 在樣式控制上(比如動態改變網頁的布局時,使用javascript操作DOM)的區別，此時@import就無能為力了。

樣式的優先級補充
- 相同權值情況下，CSS樣式的優先級總結來說，就是——就近原則（離被設置元素越近優先級別越高）：
  - 內聯樣式表（標簽內部）?>?嵌入樣式表（當前文件中）>?外部樣式表（外部文件中）
權值不同時，瀏覽器是根據權值來判斷使用哪種css樣式的，哪種樣式權值高就使用哪種樣式
層疊優先級是:
- 瀏覽器缺省<?外部樣式表?<?內部樣式表?<?內聯樣式
其中樣式表又有:類選擇器?<?類派生選擇器<ID選擇器?<?ID派生選擇器
派生選擇器以前叫上下文選擇器，所以完整的層疊優先級是:
- 瀏覽器缺省?<外部樣式表?<?外部樣式表類選擇器?<?外部樣式表類派生選擇器<?外部樣式表ID選擇器<?外部樣式表ID派生選擇器<?內部樣式表?<?內部樣式表類選擇器?<?內部樣式表類派生選擇器?<?內部樣式表ID選擇器?<?內部樣式表ID派生選擇器?<?內聯樣式…共12個優先級
另外，如果同一個元素在沒有其他樣式的作用影響下，其Class定義了多個并以空格分開，其優先級順序為：
- 一個元素同時應用多個class，后定義的優先（即近者優先），加上!important者最優先！

第九章 css選擇器(上)

css選擇器：
- class類選擇器可以重復利用
- id選擇器唯一
標簽選擇器
- 什么是選擇器：css選擇器就是要改變樣式的對象
選擇器{屬性:值;屬性:值;}
標簽選擇器：頁面中所有的標簽都是一個選擇器?p{color:red;}
ID選擇器
- 選擇id命名的元素以?#?開頭?#p1{color:#0f0;}
類選擇器
- class選擇器，選擇clas命名的元素以.開頭?.first{color:#00f;}
css代碼寫完后上線前要經過壓縮處理
本地和服務器分兩個css版本（備份）
壓縮后注釋都清除，空間體積減少
群組選擇器
- 選擇多個元素,以逗號隔開?#main,.first,span,a,h1{color:red;}
包含選擇器
- 選擇某元素的后代元素，也稱后代選擇器，父類與子類間以空格隔開p
  - span{color:red;}
屬性選擇器
- 選擇包含某一屬性的元素
- a[title]{color:red;}?選擇包含title的a標簽
- a[title][href]{color:red;}?選擇包含title和href的a標簽
>?+?選擇器子類選擇器：只選擇子元素（只選擇兒子）（相當于包含元素）
- p > span{color:red;}
相鄰兄弟選擇器：只選擇后面的相鄰兄弟元素
- p + span{color:red;}

第十章 css選擇器(下)

<a>偽類選擇器
- a:link {color:#FF0000;}?/?未訪問的鏈接?/ （只用于a標簽）
- a:visited {color:#00FF00;}?/?已訪問的鏈接?/ （只用于a標簽）
- a:hover {color:#FF00FF;}/* 鼠標移動到鏈接上
- */（可和其他標簽結合一起用）
- a:active {color:#0000FF;}?/?選定的鏈接?/
- 注意
  - 偽類選擇器的排序很重要，a:link?a:visited?a:hover?a:active，記作lvha
輸入偽類選擇器（針對表單）
- input:focus{color:red;}?/?鍵盤輸入焦點?/
其他偽類選擇器
- p:first-child{color:red;}?/* 第一個p */
- :before?在元素之前添加內容。
- :after?在元素之后添加內容。
css優先規則
- 內聯樣式表->?ID?選擇器—>?Class?類選擇器->標簽選擇器

第十一章背景屬性

背景屬性：
- 背景的添加：
- 背景顏色的添加:
  - background:red;
  - backgronnd-color:red;
- 背景圖片的添加：
  - background:url(“images/1.jpg”);
  - backgronnd-image:url(“images/1.jpg”);
- 背景的平鋪
- 什么是平鋪？平鋪就是圖片是否重復出現
  - 不平鋪：background-repeat:no-repeat;
  - 水平方向平鋪：background-repeat:repeat-x;
  - 垂直方向平鋪：background-repeat:repeat-y;
  - 完全平鋪：默認為完全平鋪
- 背景圖片的定位
  - 背景圖片的定位就是可以設置顯示背景圖片的位置，通過屬性background-position來實現
  - background-position的取值可為英文單詞或者數值和百分值。
  - background-positon的英文單詞取值
  - top left
  - top center
  - top right
  - center left
  - center center
  - center right
  - bottom left
  - bottom center
  - ottom right
- background-positon的數值取值
  - background-position:x y;
- positon的百分值取值
  - background-position:x% y%;
- 背景圖片的大小
  - 背景圖片的大小可以通過屬性background-size來設置background-size的取值可為數值和百分值。
- background-size的數值取值
  - background-size:x y;

總結

以上是生活随笔為你收集整理的2020-08-18 前端html与css学习笔记总结篇(超详细)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： android打印doc文件,安卓系统A
下一篇：前端页面实现扫码

HTML

2020-08-18 前端html与css学习笔记总结篇(超详细)

第一部分 HTML

第一章 職業規劃和前景

第二章 html基本結構

第三章 html基本標簽

第四章 img圖片標簽與路徑

第五章 三種列表的講解

第六章 表單元素(上)

第七章 表單和表格(下)

第二部分 CSS

第八章 css基礎知識

第九章 css選擇器(上)

第十章 css選擇器(下)

第十一章 背景屬性

總結

第一章職業規劃和前景

第五章三種列表的講解

第六章表單元素(上)

第七章表單和表格(下)

第十一章背景屬性