国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

360奇舞特訓營（一）：HTML

lingdududu / 2756人閱讀

摘要：昨天上課的老師是超厲害的趙文博老師，主要內容是相關。下面是對昨天課程的總結趙文博老師什么是前端開發使用標準技術開發網頁或應用通常運行在瀏覽器可交互根據設計圖還原成頁面，參考產品經理的需求，再做成頁面。拼寫檢查，不是布爾值。

昨天去上了第一節360奇舞前端培訓的第一節課，見著了仰慕已久的月影大大，心里超級超級激動。昨天上課的老師是超厲害的趙文博老師，主要內容是HTML相關。以前一直覺得HTML自己學得還好，昨天上完課后就感覺自己還有很多地方不足，特別是很多細節方面的把控，以及很多經驗層面上技術的缺失。下面是對昨天課程的總結：

12-03 HTML 趙文博老師

什么是Web前端開發

使用web標準技術

開發網頁或web應用

通常運行在瀏覽器

可交互

根據設計圖還原成頁面，參考產品經理的需求，再做成頁面。交互：使用HTTP接口。

前端：功能、設計（界面）、兼容性、安全性、性能（打開的快不快）、用戶體驗（做一個前端就是做一個用戶體驗）、可用性（無障礙性，做出來的產品對于所有的人都能很順利的訪問到，包括有疾病的人，比如色盲、盲人、手腳不便的人。設備性：可能在電腦上訪問正常，手機上訪問不正常，比如國內瀏覽器省流量的模式，很多圖片不能下載）

屬性和API一定要背會

瀏覽器：chrome,firefox,safari,opera,ie

基本的瀏覽器結構：

UI Backend：和操作器系統相關的如何繪制頁面
瀏覽器引擎：

殼瀏覽器（沒有做自己的渲染引擎和JavaScript引擎，IE內核）
：360瀏覽器（急速模式：webkit,其他模式:lE引擎），UC瀏覽器，QQ瀏覽器，搜狗瀏覽器，一般都是雙內核
URL：結構：

編輯器：Atom,Visual studio code,vim,sublime text

HTML:簡介和文本

HTML：使用標簽來描述頁面的內容和結構。HyperText Markup Language。

Doctype:1.指定HTML頁面使用的標準和版本，2、瀏覽器根據 doctype 來決定使用哪一種渲染模式。渲染模式：怪異模式Quirks Mode，準標準模式Almost Standard Mode（比較嚴苛？當時每太聽清，也沒找到相應的資料，找到了再補充），標準模式Standard Mode。不寫doctype就到怪異模式。

XHTML 1.0,2000：用XML語法重新定義HTML，語法嚴格要求。

XHTML 2.0：不兼容歷史（舊的頁面在瀏覽器中完全不能用），去除樣式類標簽。去除img、a，徹底修改Form，開發者不歡迎，瀏覽器不支持。

HTML5：

HTML5設計思想：1、兼容已有內容，2、避免不必要的復雜性，3、解決現實的問題（支持實現復雜的交互，比如定位，locals），4、優雅降級（比如，可以在canvas中寫html，如果瀏覽器中不支持canvas，就執行canvas中的html代碼，支持就忽略繼續執行。），5、尊重事實標準，6、用戶》開發者》瀏覽器廠商》標準制定者》理論完美。

HTML5中的變化：doctype、meta，新增語義化標簽和屬性，去掉純展示性標簽，canvas、video、audio、離線、本地存儲、拖拽等

HTML5中的語法：標簽不區分大小寫，推薦小寫；空標簽可以不閉合，比如input、meta；屬性可以不用引號，推薦雙引號

標簽分類：流式元素、可交互內容、段落內容、標題內容、章節內容

HTML中的文本標簽：

p、h1~h6（讀附加的文章，會影響SEO）、hr段落級別的話題切換（在一個section中講一個時期，前面幾段是一個主題，后面是一個主題，在兩個主題中間加一個

語義，展示出來是一個橫線）;

列表：有序列表（ol,ol中有一個start屬性，從幾開始）、無序列表（ul）、列表嵌套（默認的一級、二級前面的圖標不一樣）、定義列表（dl，用來描述鍵值對，dt,dd，一個dt可以對應多個dd，多個dt可以對應一個dd）;嵌套規則。

引用：

長段落引用；短引用，比較短，只提到書名、電影名之類的；;
cite和q的區別：cite表示這塊東西的來源、標題，書名，第一章之類。q引用一句話，包括的一句內容。

預格式化文本：pre（p中的標簽會把多個空格、換行合為一個空格）：保留代碼中的原格式，包括換行，空格

代碼：code .短代碼…，長代碼

…

figure：可以用來表示圖表，也可以做其他用途。
對figure的標題

網頁總體結構：

內容劃分：header、nav、main、article、aside（附加的內容，去掉能看懂，如果看不懂應該放入main中）、footer

我因為用什么標簽？

強調：strong: 重要性、嚴重性和緊急性（比如醫院中是否要找一個醫生嗎？是，立即，馬上。）；em：從一句話中突出某個詞語（比如是否需要找一個醫生？不，要一個護士。護士用em，強調一個詞）；b：將詞語從視覺上和其他部分區別，比如一篇論文摘要中的關鍵詞；i：換一種語調去說一句話時，比如其他語言翻譯，對話中的旁白

定義與縮寫：dfn 定義；abbr 縮寫，title屬性做進一步的解釋。比如：

HTML是HyperText Markup Language的簡稱，一種用戶創建網頁的標記語言



HTML
標準由W3C
制定和修改。

代碼：code；var 描述變量；需要kbd 用戶操作鍵盤時可以用；samp 用例的輸出。

上標和小標：sup；sub

mark：和用戶當前行為相關的突出，比如在所示結果中匹配到的詞，或者在一部分內容需要在后面引用時。

插入和刪除：ins 插入；del 刪除

換行控制（盡量避免）：br 手動控制內容換行；wbr 在展示的時候，需要換行時，會在wbr出現的地方做一個換行的處理

div和span：找不到其他標簽用的時候

實體（Entity）字符：&?<>:?￥

HTML：鏈接

省略協議： 現在是什么協議就會跳轉成什么協議，比如當前現在是http，跳轉后是http。可以節省一點字節，如果在https中引用了http的資源，瀏覽器時不會讓引用的，但是如果省略協議，瀏覽器就可以跳轉成HTTPS，就可以用了。
省略協議和host： 會自動補齊協議和host.

$0 當前選中的東西。 Chrome控制器中的

相對路徑和絕對路徑：

  絕對路徑  host省略，從跟目錄寫起，這個用的比較多。

  相對路徑
  相對路徑

頁面內鏈接（錨點）：

     到test

鏈接目標：

     當前窗口打開
     新窗口打開
     自定義abc方式

HTML：圖片

”替代文字” alt必須寫，比如盲人在用讀屏設備，就讀alt中的文字。圖片未加載，可以通過alt來表明圖片內容。width和height建議在html中寫。Html中的width和height不能寫單位，默認為px

指定圖片寬高：
不指定高寬：原圖大小顯示；指定寬度：按比縮放到指定寬度；指定高度：按比例縮放到指定高度；指定寬高

常用圖片格式：
1、Jpg：照片，顏色種類比較多；2、Png：色彩較少時使用，png24可以辦透明；3、Gif:：適合色彩較少時，無法半透明，可以多幀做動畫；4、Webp：google新出的，照片和色彩較少的都可以使用，而且大小會比jgp和png小一些，但是有部分瀏覽器不支持，所以有兼容性問題。

HTML：表格

table, 只要被認為是表頭都可以用th


列組（colgroup）可以一列一列的來定義樣式


表格標題，caption 必須是table的第一個元素，對盲人讀屏軟件來說要先知道這個表格做什么的

可以用css來繪制表格，有什么區別呢？1、用css描寫，會把表格給固定了，要調整位置很麻煩，會要把html重寫2、性能問題，如果用css，要把html加載后，再加載樣式3、語義化

HTML：表單

使用form獲取讓用戶提供數據

action：在用戶提交數據后，希望提交到哪個URL。

GET vs. POST
1、get從服務器獲取，get是一個比較安全的操作，不會對服務器的數據有改動；post向服務器提交數據，會對服務器的數據有一些改動；2、緩存上，get有可能是緩存的，post永遠不會緩存；3、數據傳輸的方式，get請求會把每一個字段都放在url中，可以一次性把請求都發給服務器，POST不會把數據放在url中，而是會進行編碼，然后把編碼后的數據存在http的body中，再發送給服務器。數據發送時分兩撥，先發送head，服務器同意后再發送body。

URL encode（編碼）

HTTP method:
GET、POST、HEAD：不會返回http內容，只返回http head、PUT、DELETE、OPTIONS：用來返回HTTP有哪些head選擇，常用在跨域中

單行文本框：

placeholder：

autofocus：焦點focus到要輸入的地方

密碼：

多行文本框：

輸入驗證：required：必填的；想要更好的提示語句在js中寫，原生的驗證及時性不是很好.

type：
search,email,url，在可用性上做一些輔助，對讀屏軟件來說有區別，在手機上有區別，鍵盤的布局會不一樣，在手機上如果是search，go會變成搜索。而且有輸入驗證，比如email，會驗證郵箱格式。

novalidate：
不實現驗證，在。如果要自己實現驗證，不用默認的就寫這個：

radio：單選框

checkbox:復選框

laber：
關聯文字，使點擊文字也可以點擊到。以及讀屏軟件可以同label知道輸入的是什么。兩種方式：

select：
實現多選：加一個 multiple 屬性；size屬性，決定露出來幾個選項，默認1個

分組： optgroup

hidden：
不在界面上展示出來，隱藏。type=”hidden”

文件選擇：multipart/form-data：把提交的file分為幾段
同時選擇多個文件：;對選擇的文件進行一個篩選： // 只能選擇圖片;可以不用原生的上傳，使用js

date & time：

datetime-local
month
week
number &range：
input type=”number” min=”0.5” max=”2.5” step=”0.01” name=”height” value=””
input type=”rage”
元素：對用戶輸入的輸出結果 output for=”weight”
color:

button：
type屬性：submit,button（沒有默認行為，要用js來實現）,reset。默認值是submit
回車提交：？？？
只要有input，按下回車后就會提交，瀏覽器自動觸發？？

觸發控件：
disabled, readonly：對readonly來說會提交到服務器，但是只讀。disabled不能提交到服務器
表單設計：
幫助用戶不出錯（能讓選的就不讓填，對填的可以進行一些輔助，比如輸入郵箱的時候提示補全）
盡早提示錯誤
擴大選擇/點擊區域
空間較多時要分組
分清主要動作和次要動作
傳統上，用p把input包裹起來比較多。

HTML：擴展知識
全局屬性：（幾乎所有的元素都可以擁有的屬性）
1、accesskey & tabindex
accesskey 可以給每個元素指定一個key，當用戶在鍵盤上按下ctrl+alt+這個key，就相當于點擊了這個元素。如何告訴給用戶可以這樣按呢？有的插件當按下Ctrl時，會在旁邊顯示。
tabindex 通過table鍵可以控制頁面元素。如果做得不是很好，會出什么問題呢？
2、id,class,style
3、contenteditable & spellcheck
contenteditable : 頁面是可以被修改的，而是是html的，是富文本的，不是text的。
spellcheck：拼寫檢查，不是布爾值。這樣寫spellcheck=””
4、語言lang & dir
lang：在大網站有多語言版本時，很有用。
dir：文字書寫方向，默認是從左到右的書寫順序。從右到坐時：dir=”rtl”
5、title
鼠標放上去，可以看見解釋或者完全的文字。體驗不是很好，因為有延遲。所以一般自己做
6、hidden

一般用于暫時隱藏，等待一個時機顯示出來。和display:none類似，但是在恢復元素的時候，要考慮是block，還是inline-block。使用hidden屬性還有一個是有利于讀屏軟件。
7、無障礙性
8、web開發者應該做的事情
WCAG（比較老，更多的關注的是內容上的規范）
ARIA（Accessible Rich Internet Applications）對Web的富應用做了一個可用性的規范，不管用什么標簽來實現這個功能，可以加上aria屬性，來告訴輔助性軟件這個標簽是做什么的
9、ARIA
指定role


  • 10、提升無障礙性
    為img提供alt屬性
    noscript：HTML標簽，對于不支持JavaScript的瀏覽器，給予一個替代性的方案或者一個提示
    input和label對應
    圖形驗證碼與語音驗證碼
    文字和背景有足夠對比度
    鍵盤可操作
    11、語義化
    HTML中的元素、屬性及屬性值都擁有某些含義
    開發者應該遵循語義來編寫HTML
    12、為什么語義化很重要？
    提升代碼可讀性、可維護性
    搜索引擎優化
    提升無障礙性
    13、擴展HTML
    meta標簽：對整個頁面相關的一般都寫在meta中
    data-*屬性：來存儲自定義的屬性， $0.dataset可以用語獲取自定義屬性的值
  • apple


  • banana


    microdata：告訴瀏覽器，這個實體是一個什么東西。Itemscope itemtype itemprop，一個實體
    HTML5中的一個規范
    在HTML中通過屬性嵌入格式化數據
    提供給搜索引擎、瀏覽器（插件）使用。比如在搜索引擎中搜索一個飯館，可以在搜索頁面中，看見提取出來的信息：

    JSON-LD：
  把上面的代碼結合到js中

    HTML編碼規范：html valid..
    推薦兩個工具：emmet,markdown
    caniuse.com

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50266.html

相關文章

  • FISCO BCOS WorkShop | 區塊鏈開發特訓營，開課啦！

    摘要：是完全開源的聯盟區塊鏈底層技術平臺，由金融區塊鏈合作聯盟深圳簡稱金鏈盟成立開源工作組通力打造。我們鼓勵機構成員開發者等社區伙伴參與開源共建事業，有你在一起，會更了不起。 FISCOBCOS是完全開源的聯盟區塊鏈底層技術平臺，由金融區塊鏈合作聯盟(深圳)(簡稱金鏈盟)成立開源工作組通力打造。開源工作組成員包括博彥科技、華為、深證通、神州數碼、四方精創、騰訊、微眾銀行、亦筆科技和越秀金科等...

    yuanxin 評論0 收藏0

  • 【面試篇】2017騰訊IMWeb前端秋招特訓營思考題

    摘要：月日思考題題一站點是否應該出現在標簽中題二是否應該支持面試題什么是盒子模型答標準盒和怪異盒簡述和的區別答從外部引入資源，將頁面導向外部資源簡述同步和異步的區別答同步當前進程執行完后，下一個進程才能執行異步當前進程的執行不影響下一個進程的執行 7月12日 思考題 題一：站點Logo是否應該出現在標簽中? 題二:是否應該支持IE6? 面試題 什么是盒子模型?答：margin,bord...

    darkerXi 評論0 收藏0

  • 【面試篇】2017騰訊IMWeb前端秋招特訓營思考題

    摘要：月日思考題題一站點是否應該出現在標簽中題二是否應該支持面試題什么是盒子模型答標準盒和怪異盒簡述和的區別答從外部引入資源，將頁面導向外部資源簡述同步和異步的區別答同步當前進程執行完后，下一個進程才能執行異步當前進程的執行不影響下一個進程的執行 7月12日 思考題 題一：站點Logo是否應該出現在標簽中? 題二:是否應該支持IE6? 面試題 什么是盒子模型?答：margin,bord...

    littlelightss 評論0 收藏0

  • 【面試篇】2017騰訊IMWeb前端秋招特訓營思考題

    摘要：月日思考題題一站點是否應該出現在標簽中題二是否應該支持面試題什么是盒子模型答標準盒和怪異盒簡述和的區別答從外部引入資源，將頁面導向外部資源簡述同步和異步的區別答同步當前進程執行完后，下一個進程才能執行異步當前進程的執行不影響下一個進程的執行 7月12日 思考題 題一：站點Logo是否應該出現在標簽中? 題二:是否應該支持IE6? 面試題 什么是盒子模型?答：margin,bord...

    Keven 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<