一，最簡單也是最基礎的H5+C3

1.HTML4

文檔標題可見文本...1.基本標簽(Basic Tags)

最大的標題

. . .

. . .

. . .

. . .

最小的標題

這是一個段落。

2.換行標簽(br)3.水平線標簽( hr)4.文本格式化(Formatting)粗體文本計算機代碼強調文本斜體文本鍵盤輸入預格式化文本更小的文本,縮小字體重要的文本，字體加粗5.其他標簽 (縮寫) (聯(lián)系信息) (文字方向) (從另一個源引用的部分) (工作的名稱) (刪除的文本) (插入的文本)(sub)下標文本(sup)上標文本6.鏈接(Links)普通的鏈接：鏈接文本圖像鏈接： 郵件鏈接： 發(fā)送e-mail書簽：提示部分跳到提示部分7.引入圖片(Images)8.樣式/區(qū)塊(Styles/Sections)9.區(qū)塊元素文檔中的塊級元素文檔中的內聯(lián)元素10.無序列表第一項第二項11.有序列表第一項第二項12.定義列表項目 1描述項目 1項目 2描述項目 213.表格(Tables)添加行 添加單元格 加粗字體表格標題表格標題表格數(shù)據(jù)表格數(shù)據(jù)14.框架(Iframe)文本字段密碼域復選框單選按鈕提交按鈕普通按鈕重置按鈕隱藏域16.菜單列表類表單元素內容在表單內部，可以選擇蘋果香蕉櫻桃17.多行文本框18.字符實體(Entities)(); 等同于 >(?); 等同于 ?2.在面試中經(jīng)常會問到H5在H4的基礎上增加了那些新的標簽1，新的語義標簽 定義了文檔的頭部區(qū)域 定義了文檔的尾部區(qū)域定義文檔的導航 定義文檔中的節(jié)(section、區(qū)段) 定義頁面獨立的內容區(qū)域定義頁面的側邊欄內容用于描述文檔或文檔某個部分的細節(jié)標簽包含 details 元素的標題定義對話框，比如提示框2，增強型表單color主要用于選取顏色date從一個日期選擇器選擇一個日期datetime選擇一個日期(UTC 時間)datetime-local選擇一個日期和時間 (無時區(qū))email包含 e-mail 地址的輸入域month選擇一個月份number數(shù)值的輸入域range一定范圍內數(shù)字值的輸入域search用于搜索域tel定義輸入電話號碼字段time選擇一個時間urlURL 地址的輸入域week選擇周和年3， 元素規(guī)定輸入域的選項列表使用 元素的 list 屬性與 元素的 id 綁定提供一種驗證用戶的可靠方法標簽規(guī)定用于表單的密鑰對生成器字段。用于不同類型的輸出比如計算或腳本輸出**HTML5 新增的表單屬性**placehoder 屬性，簡短的提示在用戶輸入值前會顯示在輸入域上。即我們常見的輸入框默認提示，在用戶輸入后消失。required 屬性，是一個 boolean 屬性。要求填寫的輸入域不能為空pattern 屬性，描述了一個正則表達式用于驗證 元素的值。min 和 max 屬性，設置元素最小值與最大值。step 屬性，為輸入域規(guī)定合法的數(shù)字間隔。height 和 width 屬性，用于 image 類型的 標簽的圖像高度和寬度。autofocus 屬性，是一個 boolean 屬性。規(guī)定在頁面加載時，域自動地獲得焦點。multiple 屬性 ，是一個 boolean 屬性。規(guī)定 元素中可選擇多個值。　4，視頻和音頻　　 video audio5，canvas 繪圖6，地理定位 HTML5 Geolocation(地理定位)7，拖放API dragstart：拖動開始drag：拖動中 dragend：拖動結束8，Web Worker9，Web Storage10，WebSocket(雙工通訊的協(xié)議)3.JavaScriptDOM+BOM+ECS5/6**dom**DOM(Document Object Model),文檔對象模型。簡單的說就是一套操作文檔內容的方法。DOM操作的四種基本方法：getElementById(), getElementsByTagname(), getAttribute(), setAttribute()**bom:**BOM簡單的說就是瀏覽器對象模型，對BOM的操作就是對瀏覽器的功能和屬性的操作；BOM的核心是window,它是一個瀏覽器的功能實例，瀏覽器會為HTML文檔創(chuàng)建一個專屬的window對象，并為每一個框架創(chuàng)建額外的window對象。window對象是BOM的頂層，所有其他對象都是通過window對象衍生的；但是在調用子對象的時候并不強制要求聲明DOM的document也是window的子對象之一；以下兩種寫法是相同的:window.document.getElementById("herd")document.getElementById("herd")4.vue+react+angular①.vue號稱是最簡單，最容易上手的框架，同時也是行內的大趨勢，還可以用來開發(fā)最火的小程序。畢竟用這神器，代碼碼的飛快，項目也能快速上線。同時他也是雙向數(shù)據(jù)流。有些人認為Vue是Angular和React的結合，既有Angular的模板語法也有React的組件化體系。②.React這個框架本身比較容易理解，他的結構很清晰，就是由十幾個API組成，然后異步渲染，我們只需要處理好接口和維護就好了，但是很多人反映上手還是有一定的的難度的。React是單向數(shù)據(jù)流，代碼寫起來會較雙向數(shù)據(jù)流的多一些，但是同樣的排查問題時思路清晰很多。③.angular大家眼里比較“叼”的框架，甚至有人說三大框架中只有她能稱的上一個完整的框架，因為他包含的東西比較完善，包含模板，數(shù)據(jù)雙向綁定，路由，模塊化，服務，過濾器，依賴注入等所有功能。對于剛開始學習使用框架的小伙伴們，可以推薦這個框架，學會之后簡直能顛覆之前你對前端開發(fā)的認知。使用 TypeScript能夠提高代碼可維護性，有利于后期重構。雙向數(shù)據(jù)流很方便，但是等業(yè)務復雜之后，你可能就搞不清楚數(shù)據(jù)流了。還有令人不開心的臟值檢查，以及directive的封裝并沒有解決視圖與數(shù)據(jù)關系完全分離，有時候還要用$digist強制觸發(fā)檢測。5.bootstrap+layUIBootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開發(fā)響應式布局、移動設備優(yōu)先的 WEB 項目。layui，是一款采用自身模塊規(guī)范編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到 API 的每一處細節(jié)都經(jīng)過精心雕琢，非常適合界面的快速開發(fā)。layui 首個版本發(fā)布于2016年秋，它區(qū)別于那些基于 MVVM 底層的 UI 框架，卻并非逆道而行，而是信奉返璞歸真之道。準確地說，它更多是為服務端程序員量身定做，開發(fā)者無需涉足各種前端工具的復雜配置，只需面對瀏覽器本身，使得開發(fā)十分便捷。6.前端開發(fā)者常用的工具vscode+svn/git+ps+吸色器

總結

以上是生活随笔為你收集整理的web前端学习文档 电子版_web前端工程师要学习那些内容的全部內容，希望文章能夠幫你解決所遇到的問題。

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