html是web前端的基礎知識，初學者們真的學對了嗎？

智雲程式設計發表於2019-10-21
HTMLWeb前端

html是web前端的基礎知識，初學者們真的學對了嗎？

html

  • 概念
  • 前端最核心的技術 HTML + CSS + javascript
  • HTML - 結構 - 骨架
  • CSS - 樣式 - 效果
  • JAVASCRIPT - (使用者)行為 - 做的事情
  • 超文字標記語言
  • 超文字
  • 文字(txt檔案) - 瀏覽器可以直接開啟
  • 如果具有中文，可能出現亂碼問題
  • 標記
  • 語法結構 - <標籤名>
  • 注意 - 瀏覽器解析標記（規定的標記內容）
  • 注意
  • HTML是不嚴格的語言
  • 允許不用編寫所有內容
  • 標籤名沒有明確的規定(大小寫)
  • 建議標籤名使用小寫
  • XHTML
  • 解釋為嚴格意義的HTML

html是web前端的基礎知識，初學者們真的學對了嗎？

HTML結構

HTML結構

<!DOCTYPE html> - 宣告:當前頁面使用的是哪個HTML版本

<html>- 根標籤:有且僅有一個

<head>- 用於設定當前頁面的資訊

<meta charset="UTF-8"> - 設定當前頁面的編碼

<title>Title</title> - 當前頁面的標題

</head>

<body>- 用於顯示在瀏覽器中

</body>

</html>

宣告

  • 注意 - 必須在HTML文件的 0 行 0 列
  • 記住 - HTML5的宣告<!DOCTYPE html>
  • 作用 - 告訴瀏覽器當前HTML頁面使用的版本
  • 不同的HTML版本支援不同的標記(標籤)內容

根標籤

  • <html></html>
  • 除宣告以外，所有內容全部被包含在根標籤中
  • 注意 - 有且僅有一個
  • 標記（標籤）
  • 起始標籤 - 有開始，有結束
  • 開始標籤 - <標籤名>
  • 結束標籤 - </標籤名>
  • 空標籤 - 只有開始標籤
  • <br/>- 換行標籤
  • 注意 - 建議使用小寫

<meta>元素

  • 第一個作用 - 設定當前HTML頁面的編碼格式
  • <meta charset="UTF-8">
  • 第二個作用 - 設定當前HTML頁面的關鍵字
  • <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
  • 第三個作用 - 設定當前HTML頁面的描述(很少)
  • <meta name="description" content="Free Web tutorials on HTML and CSS">
  • 第四個作用 - 設定當前HTML頁面的作者
  • <meta name="author" content="King">

HTML屬性

  • 出現在標籤中的開始標籤中，而不是結束標籤
  • 格式
  • 屬性名=屬性值
  • 屬性值 - 必須使用雙引號包裹

HTML頁面被搜尋引擎抓取

  • <title>元素 - 頁面的標題
  • <meta name="keywords">元素 - 頁面的關鍵字
  • <h1>元素 - 標題

分類

  • 私有屬性 - 當前標籤獨有的屬性
  • 標準屬性 - 幾乎所有標籤都有的屬性
  • 事件屬性 - 標準事件(瞭解)

HTML標題

  • <h1> ~ <h6> - 從最大到最小
  • 並不關心標題顯示的效果 - 可以透過 CSS 完成
  • 關心標題的 語義化
  • 語義化 - 當前標籤的含義

HTML列表

  • 有序列表

<ol>

<li></li>

</ol>

  • 預設情況下 - 1,2,3,4,5...
  • 無序列表

<ul>

<li></li>

</ul>

  • 預設情況下 - 黑點
  • 定義列表

<dl>

<dt>列表名稱</dt>

dd>列表項</dd>

</dl>

  • HTML連結

<a href="地址"></a>

連結元素<a>

  • 作用
  • 用於從當前頁面跳轉到另一個(指定)頁面
  • 實現錨點效果
  • 實現回到頂部效果
  • 實現傳送郵件功能(瞭解)
  • href="mailto:郵件地址"
  • 路徑(地址)
  • 絕對路徑 - 查詢的開始位置是固定
  • 相對路徑 - 查詢的開始位置是變化
  • 在實際開發中，使用更多
  • 完整的地址
  • http:// localhost : 8080 /day02 #name
  • 網路協議 IP地址 埠號 相對路徑 錨點
  • localhost - 等價於 127.0.0.1 - 表示本機
  • 網路訪問 - 透過網際網路
  • http://192.168.10.165:63342/D...
  • file:///C:/0507/DAY02/CODE/00.html

C:\0507\DAY02\CODE\00.html

  • 本地訪問 - 和網路無關

html是web前端的基礎知識，初學者們真的學對了嗎？

圖片元素

  • <img> - 空標籤，沒有結束標籤
  • 必要屬性 - src屬性

可選屬性

  • width
  • height
  • 單位
  • 畫素值
  • 百分值

HTML表格

  • 概念 - 具有行和列（單元格）
  • 行 - 表示水平方向（多個單元格）
  • 列 - 表示垂直方向（多個單元格）
  • HTML表格
    • 表示為表格
  • 作用
  • 表格的語義化 - 配合 CSS 可以實現漂亮的表格效果
  • 利用表格的行和列的概念 - 實現頁面元素的佈局
  • HTML表單
  • <form>標籤
  • 語義化 - 表示為表單
  • 容器元素 - 瀏覽器中不會有任何顯示效果
  • 檔案的編碼格式 - UTF-8
  • HTML頁面的編碼格式 - UTF-8
  • <meta charset="UTF-8">
  • 設定當前HTML頁面的編碼格式
  • 在瀏覽器執行當前HTML頁面時，告訴瀏覽器當前的編碼格式
  • 字符集
  • 概念 - 存放所使用的所有的字元（漢字）

分類

  • ANSI - 美國
  • ISO-8859-1 - 歐洲
  • GBK - 中國
  • GB2312
  • Unicode - 萬國碼
  • UTF-8 - 主要使用
  • UTF-16
  • 計算機的儲存方式
  • 利用二進位制方式 - 1和0
  • 中國
  • 儲存 - 將漢字 "中國" 轉換成 二進位制 進行儲存 - GBK
  • 讀取 - 將 二進位制 轉換成 "中國" 進行顯示 - UTF-8

自己是一個6年的前端開發工程師

這裡推薦一下我們的前端學習交流群：784783012 ，裡面都是學習前端的，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴。2019最新技術，從企業招聘人才需求 到怎麼學習前端開發，和學習什麼內容都有免費系統分享。好友都在裡面學習交流，每天都會有大牛定時講解前端技術!

點選：


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2660815/，如需轉載，請註明出處，否則將追究法律責任。

相關文章