前端菜鳥筆記 Day-1 HTML&HTML 5

時間 2019-12-07

標籤前端菜鳥筆記 day html&html html 欄目 HTML 简体版

原文原文鏈接

文章大綱來源：【Day 1】HTML & HTML 5javascript

標記語言
XHTML/HTML/HTML 5異同
瞭解doctype
HTML
HTML 5

標記語言

標記語言(ML)即 Markup Language，能夠準肯定義數據信息自己以及和數據相關的信息。css

其中 標記(markup)這個詞，來源於傳統出版業的「標記」手稿，也就是在原稿邊緣加註一些符號來指示打印上的要求（字體段落的要求）。

在這個例子中，原稿自己就是數據信息，加註的指示就是和數據相關的信息。html

HTML/XHTML/HTML 5異同

HTML 簡述

HTML 是超文本標記語言 (HyperType Markup Language) 的簡稱，HTML是用來描述網頁的一種語言。前端

XHTML 簡述

XHTML 是可擴展超文本標籤語言 (EXtensible HyperText Markup Language)的簡稱， XHTML 的目標是用規範化語法結構來取代 HTML ，以 XML 爲根本重構了 HTML 4.01 。java

HTML 5 簡述

HTML 5 的設計目的是爲了在移動設備上支持多媒體。git

新的語法特性被引進以支持這一點，如video、audio和canvas標記 (tag) 。github

HTML 5 將會取代1999年制定的 HTML 4.0一、XHTML 1.0 標準。canvas

三者異同點

HTML 5 和 XHTML 是老版 HTML 的替代
HTML 5 主要用來在移動設備上支持多媒體
XHTML 爲了用來嚴格規範語法結構
HTML/XHTML/HTML 5 僅僅是版本不一樣
目前 HTML 5 是主流

原文引用：vim

HTML、XML、XHTML和HTML 5的異同

拓展閱讀：瀏覽器

英文原文: Jeremy Keith | The Design of HTML 5
翻譯：Web的真諦：HTML 5究竟是什麼意思？
原演講視頻：Jeremy Keith | The Design of HTML 5 | Fronteers 2010

doctype

<!DOCTYPE> 聲明幫助瀏覽器正確地顯示網頁。

<!DOCTYPE> 不是 HTML 標籤。它爲瀏覽器提供一項信息（聲明），即 HTML 是用什麼版本編寫的。

HTML 5 聲明：

<!DOCTYPE html>

HTML 4.01 聲明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0 聲明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

內容引用：HTML <!DOCTYPE>

HTML

基本格式

標準的HTML 5文檔的格式：

<!DOCTYPE html>
<!--文檔類型聲明,不區分大小寫，主要是告訴瀏覽器當前的文檔類型-->
<html>
<!-- 表示html文檔開始 -->
    <head>
    <!-- 包含文檔元數據開始  -->
        <meta charset="UTF-8">
        <!-- 聲明字符編碼 -->
        <title>Title Tag</title>
        <!-- 設置文檔標題 -->
    </head>
    <!-- 包含文檔元數據接受 -->
    <body>
    <!-- 表示html內容部分開始，也就是可見部分 -->
    </body>
    <!-- 表示html內容部分結束 -->
</html>
<!-- 表示html文檔結束 -->

內容引用：HTML 5的基本格式

塊級(block)元素

塊級元素最常使用的是div，其餘的還有hX、p、nav、aside、header、footer、section、article、ul-li、address等等，也能夠對任意元素進行display:block屬性設置。

塊級元素特徵：

設置寬高屬性有效
margin、padding上下左右（水平垂直）均有效
內容會自動進行換行
多個塊狀元素標籤寫在一塊兒，默認排序從上到下

行內(inline)元素

行內元素最常使用的是span，其餘的還有a、code、i、img、input、textarea等等，也能夠對任意元素進行display:inline屬性設置。

行內元素特徵：

設置寬高屬性無效
margin設置僅左右（水平）方向有效，上下（垂直）無效
padding設置上下左右都有效
內容不會自動進行換行

行內塊(inline-block)元素

行內塊元素綜合了二者的特徵，各有取捨，能夠對任意元素進行display:inline-block屬性設置。

行內塊元素特徵：

內容不會自動進行換行
可以識別寬高
多個行內塊元素默認排列方式從左到右

HTML tag

也不用每一個都詳細說一下，後面有時間的話開一個專題挑幾個經常使用的出來詳細說一下。

HTML 參考手冊

語義化

語義化的含義就是用正確的標籤作正確的事情。

HTML語義化就是讓頁面的內容結構化，便於瀏覽器、搜索引擎（機器）理解解析，利於SEO。

內容引用：前端工程師手冊-HTML語義化

script/style/link

<script>標籤用於在 HTML 頁面中插入一段 JavaScript 。

<script type="text/javascript">
document.write("Hello World!")
</script>

script元素既能夠包含腳本語句（如上），也能夠經過src屬性指向外部腳本文件：

<script src=".../filename.js"/></script>

<style>標籤用於爲HTML文檔定義樣式信息。

在style中，能夠規定瀏覽器如何呈現HTML文檔，標籤中type屬性是必須的，定義style元素的內容，惟一可能值是text/css，style元素位於head部分中。

<head>
  <style type="text/css">
    /* ... */
  </style>
</head>

<link>標籤訂義文檔與外部資源的關係，常見的用途是鏈接樣式表，在 HTML 中，<link> 標籤沒有結束標籤。

<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>

HTML 5

初期須要瞭解內容：

新便籤在各瀏覽器的兼容狀況
與媒體相關的標籤
HTML 5 API
Canvas

在後面涉及到的時候再開專題進行介紹。

我的靜態博客：

氣泡的前端日記： https://rheabubbles.github.io

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。