前端開發工程師 - 01.頁面製做 - 第3章.HTML

時間 2019-11-18

標籤前端開發工程師頁面製做 html 欄目 HTML 简体版

原文原文鏈接

第3章--HTML

HTML簡介

Hyper Text Markup Language：超文本標記語言--用於標記網頁的內容php

history：css

html(1991)雛形 -> html4.01(1999) -> w3c:xhtml1.0(2000)-xhtml2.0(2005) 但xhtml不被瀏覽器廠商看好html

w3c也意識到xhtml的方向不對，因而跟廠商合做推出html5草案 -> html5(2014正式發佈）html5

HTML文檔：web

HTML文檔聲明：首行、頂格 <!DOCTYPE> 告訴瀏覽器如何解析文檔：html5--<!DOCTYPE html>canvas

HTML文檔頭部：segmentfault

<head>描述文檔的基本屬性後端

<title>...</title>app

HTML文檔主體：見下

HTML標籤

語法：閉合 (有的是自閉合)；可包含一個或多個屬性值；可嵌套；註釋

書寫規範 name convention：標籤和屬性名：小寫；屬性值：雙引號；嵌套：縮進

經常使用屬性：

id：規定了元素的id (unique)

class：規定了元素的類名，頁面中具備統一的樣式或功能的元素可歸爲同一個類，供js和css使用

style：控制css樣式，但將表現和樣式混雜在一塊兒，不利於後期維護。

title：規定了元素額外的信息，當鼠標停留在該元素上時會顯示

標籤：

文檔章節：表示頁面的章節結構

html5以前通常使用div標籤分隔的

<body> 頁面內容的容器

<header> 頁面頭部、章節頭部

<nav> 導航區

<aside> 與主要內容不相關的區域（好比側邊欄、工具性內容、廣告等）

<article> 獨立的正文，可嵌套（如博客評論article標籤可嵌入博客文章article標籤中）

<section> 標題組（帶有一個標題），相鄰section是有聯繫的

<footer> 尾部

<hx> 標題<h1>--<h6> 差異：重要性

文本標籤：

<a></a> 超連接：

建立指向另外一個文檔的連接 (點擊時跳轉到另外一個文檔 href="url", target="_self"//同一窗口(default) ；

target="_blank"//新窗口；target="inner"，並使用iframe標籤：同一頁面內部顯示）

建立一個文檔內部的錨點 href="#flag"; <div id="flag">

連接到Email地址 href="mailto:email" (手機裏鏈接到撥打電話 href="tel:number")

<-em> <strong> 強調：

<-em> 語義上的強調 italic

<strong> 更強調 bold

<span> 無語義，結合class等屬性用css給予樣式

<br> 換行

<cite> <q> ：引用

cite：引用的出處

q: 做品中的一段文字等

code: 代碼

格式化：

b：粗體但不想強調（好比關鍵字、產品名等）

i：斜體但不想強調（如技術術語等）

組合內容：

<div>：用於分區，做爲其餘標籤的容器

<p>：段落

<ol>：有序列表：<ol> <li>...</li> ... </ol>；屬性type="a"/start="2"以abc順序，從b開始

<dl>：自定義列表：i.e. <dt>：列表的項；<dd>對該項的描述；dd有縮進，每一個dt可有多個dd描述

<dl>
    <dt>做者</dt>
    <dd>Cbuck Musciano</dd>
    <dd>Bll Kennedy</dd>
    <dt>出版年</dt>
    <dd>2007-4</dd>
</dl>

<pre> <blockquote> ：組合內容

<pre> 若內容是須要格式化的，須要放在pre裏，會保留換行符和空格等

i.e. <code>中的代碼

<blockquote> 大塊的引用；屬性cite="url引用出處"

嵌入資源：

<img> 嵌入圖片，自閉合 src="url"，alt="圖片含義"，當圖片顯示出錯時，會顯示圖片含義

<object type="application/x-shockwave-flash">
    <param name="movie" value="http://pdfReader.swf">
    <param name="flashvars" value="http://book.pdf">
</object>

<video> 嵌入視頻（高版本瀏覽器）autoplay 頁面加載時視頻自動播放，loop循環播放

controls顯示播放器的控制條 poster插入視頻的封面；track引入字幕

瀏覽器的兼容問題：須要多個source文件，瀏覽器自動選擇。

src資源的地址，type資源類型；若只有一個source，可將url放在video的src屬性中

<video controls="controls" poster="/img/poster.jpg">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    <source src="movie.ogg" type="video/ogg">
    <track kind="subtitles" src="video.srt" label="English">
    您的瀏覽器不支持video標籤
</video>

<audio> 和video標籤相似

<canvas> <svg> 圖形

<canvas> 基於像素繪製圖像，提供了繪製函數，可以使用腳本繪製（對於性能要求高、場景複雜好比實時數據展現、遊戲，可以使用canvas）

<map> <area> 熱點區域：點擊不一樣區域會跳轉到不一樣頁面

<img src="url" alt="sport" width="1090 height="995" usemap="#Map2">
<map name="Map2">
    <area shape="rect" coords="669,75,1075,682 href="url" target="_blank">
    <area shape="rect" coords="26,93,391,337 href="url" target="_blank">
    ...
</map>

(usemap = map name)

表格 <table>

<caption> 標題

<thead> 表頭

<tbody> 表格內容

<tfoot> 表格尾部

<tr> 每一行

<th> 表頭單元格

<td> 普通單元格

屬性colspan/rowspan="number"：合併行/列

表單 <form>

i.e. 登錄窗口

<form action="/login.php" method="post">
    <fieldset>
        <legend>照片選擇</legend>
        <label for="file">選擇照片</label>
        ...
    </fieldset>
    <fieldset>
        <legend>綜合設置</legend>
        <div>選擇尺寸：</div>
        ...
    </fieldset>
    ...
</form>

action：表單提交的後臺地址/接口

method：表單提交方式，經常使用post

fieldset 分區，legend標題

<input>

<form ...>
    <input type="file name="file>　　// upload file
    <input type="checkbox" name="size" value="5">　　// multi-choice, disable property:禁止用戶選中
    <label for="cb_0">5寸</label>
    <input type"radio" name="material" value="fushi">　　// single-choice
    <label for="rd_0">富士</label>
    <input type="text" name="desc">　　// default，placeholder顯示提示信息，value自動填充的默認信息，readonly，hidden

</form>

name: 提交給後端的variable name

<input type="submit"> // submit button

<input type"reset"> // reset button

但通常使用<button>標籤：

<button type="submit">提交</button> // submit button

<button type"reset">重置</button> // reset button

<select> 下拉選擇框：

<label for="delivery">shipping method</label>　　// prompt for select, use "for" property to link to select id
<select id="delivery>
    <option value="0">Express</option>
    <option value="1">EMS</option>
</select>