、HTML基本信息

注釋：<!-- -->

DOCTYPE：就是告訴瀏覽器，我們要使用什么規(guī)范

head：網(wǎng)頁頭部標(biāo)簽

• title：網(wǎng)頁標(biāo)題
• meta：描述性標(biāo)簽，描述網(wǎng)站的信息，用來做SEO
• charset = "UTF-8"
• name = "keyword" content = ""關(guān)鍵詞
• name = "descrisption" content = ""描述

body：代表網(wǎng)頁主題

二、網(wǎng)頁基本標(biāo)簽

標(biāo)題標(biāo)簽

• <h1>一級標(biāo)簽</h1>一直到6級標(biāo)簽

段落標(biāo)簽

• <p>段落標(biāo)簽</p>

換行標(biāo)簽

• <br/> /是閉合的意思，單標(biāo)簽，閉不閉合都行

水平線標(biāo)簽

• <hr/>

字體樣式標(biāo)簽

• <strong>粗體</strong>
• <em>斜體</em>

注釋

• <!-- -->

特殊字符

• 空格 ---->一個空格
• 大于號 >
• 小于號<
• 版權(quán)符號©

特殊符號就是 & xxx ;

三、圖像標(biāo)簽

<img src="path" alt="文字" title="text" width="x" heigth="y" />

• src 圖像地址 必填
• alt 圖像的代替文字(找不到圖片的時候顯示) 必填
• title 鼠標(biāo)懸停提示文字
• width 圖像的寬度
• height 圖像的高度

注意：../ 代表上一級目錄

四、鏈接標(biāo)簽

文本鏈接

<a href="path" target="目標(biāo)窗口位置">鏈接文本或圖像</a>

• href 鏈接路徑，要跳轉(zhuǎn)帶那個位置 必填
• target鏈接在哪個窗口打開：常用值_self 當(dāng)前窗口（默認的）、_blank 新窗口

圖像鏈接：就是嵌套圖片標(biāo)簽

頁面間鏈接

• 從一個頁面鏈接到另一個頁面

錨鏈接

• 第一步需要一個標(biāo)記 使用name做標(biāo)記
• 第二步跳轉(zhuǎn)到標(biāo)記 使用#標(biāo)記
• <a name="top" ></a>
  <a href="#top"></a>
  上面是頁面內(nèi)的跳轉(zhuǎn)
  
  <a name="down"></a>
  <a href="第一個頁面的path#down"></a>
  頁面間的跳轉(zhuǎn)

功能性鏈接

• 郵件鏈接：mailto： <a href="mailto:郵箱"></a>點擊后會打開郵箱
• qq鏈接：在qq推廣工具里面的

五、行內(nèi)元素和塊元素

塊元素

• 無論內(nèi)容多少，該元素獨占一行
• p、h1-h6

行內(nèi)元素

• 內(nèi)容撐開寬度、左右都是行內(nèi)元素的可以排在一起
• a、strong、em...

六、列表

什么是列表：就是一種展示方式

有序列表

• <ol> <li></li> </ol>

無序列表

• <ul> <li></li> </ul>

自定義列表

<dl>
    <dt></dt> 標(biāo)題
    <dd></dd> 選項
    <dd></dd>
    <dd></dd>
</dl>

七、表格

為什么使用表格

• 簡單通用
• 結(jié)構(gòu)穩(wěn)定

基本結(jié)構(gòu)

• 單元格
• 行
• 列
• 跨行
• 跨列

<table border="1px" 邊框>表格標(biāo)簽
    <tr>
        <td></td>列標(biāo)簽
        <td></td>
        <td></td>
    </tr>行標(biāo)簽 這代表一行
</table>

跨列：使用colspan="夸的列數(shù)" <td colspan="4">

跨行：使用rowspan="夸的行數(shù)" <td rowspan="4">

八、視頻和音頻

視頻元素

• video
• <video src="path" controls autoplay></video>
• src:資源路徑
• controls控制條
• autoplay自動播放

音頻元素

• audio
• <audio src="" controls autoplay></audio>

九、頁面結(jié)構(gòu)分析

十、iframe內(nèi)聯(lián)框架

<iframe src="path" name="mainFrame"></iframe>

• src必填
• width
• heigth
• name標(biāo)記
• name的使用
  <iframe src="" name="hello" frameborder="0" width="1000px" heigth="800px"></iframe>
  
  <a href="path" target="hello"></a>
  點擊超連接后，會在內(nèi)聯(lián)框架里顯示這個頁面

十一、表單

表單：form

<form method="post|get" action="result.hetml">
    <input />
</form>

• method 規(guī)定如何發(fā)送表單數(shù)據(jù)常用psot、get
• action 表示向何處發(fā)送表單數(shù)據(jù)，把表單的數(shù)據(jù)發(fā)送給那個地方

get方式提交：我們可以在url中看到我們提交的信息，不安全，但高效

post方式提交：比較安全，可以傳輸大文件

表單元素格式

單選框

• input type="radio"
• value 單選框的值
• name ：表示組，name一樣一次只能選一個，name不一樣可以選多個
• checked默認選中的

多選框

• input type="checkbox"
• value = "sleep"
• name = "hooby"
• checked默認選中的
• <input type="checkbox" name="sleep" value="slppe" checked/>shujiao
  <input type="checkbox" name="sleep" value="slppe"/>shujiao
  <input type="checkbox" name="sleep" value="slppe"/>shujiao
  <input type="checkbox" name="sleep" value="slppe"/>shujiao
  <input type="checkbox" name="sleep" value="slppe"/>shujiao
  <input type="checkbox" name="sleep" value="slppe"/>shujiao
  多選框的結(jié)果是以數(shù)組的形式返回的

按鈕

<input type="button" name="btn1" value="點擊" />普通按鈕
<input type="image" src ="點擊跳轉(zhuǎn)的path"/>圖片按鈕
<input type="submit"/>提交按鈕
<input type="reset"/>重置按鈕

下拉框

<select name="列表名稱">
    <option value="選項的值" select>中國</option>
    <option value="選項的值">中國</option>
    <option value="選項的值">中國</option>
    <option value="選項的值">中國</option>
    <option value="選項的值">中國</option>
</select>
提交的格式就是列表名稱和value

• selected 默認選擇

文本域

<textarea name="name" cols="列數(shù)" rows="行數(shù)">文本內(nèi)容</textarea>

文件域

<input type="file" name="files"/>
<input type="button" value="提交"/>

郵件驗證

<input type="email" name="youjian">

URL

<input type="url" name="url"> 

數(shù)字驗證

<input type="number" name="num" max="100" min="0" step="10">

滑塊

<input type="range" max="100" min="0">

搜索

<input type="search" name="search">

十二、表單的應(yīng)用

隱藏域 hidden

<input type="text" id="mark" hidden>

只讀 readonly

<input type="text" id="mark" readonly>

禁用 disabled

<input type="text" id="mark" disabled>

增強鼠標(biāo)可用性

<label for="mark">點擊</label>
<input type="text" id="mark">

十三、表單初級驗證

為什么要進行表單驗證：緩解服務(wù)器壓力、保證數(shù)據(jù)安全

提示信息

• placeholder="提示信息" 在輸入框上

非空判斷

• required

正則表達式驗證

• pattern
• <input type="text" name="mail" pattern="正則表達式">

高級驗證使用js

么是HTML

Hyper Text Markup Language, 超文本標(biāo)記語言

標(biāo)記又稱為標(biāo)簽(Tag), 一般語法:

<tagName></tagName>

它可以有屬性(Attribute):

<tagName attributeName="value">, 如:

<meta charset="utf-8" />

標(biāo)簽也可以不成對地關(guān)閉:

<tagName />

HTML文檔由瀏覽器解釋并執(zhí)行。

HTML文檔基本結(jié)構(gòu)

<!DOCTYPE html> ----- 告訴瀏覽器用html5的標(biāo)準(zhǔn)來解釋和執(zhí)行該網(wǎng)頁

<html>

<head> ---- 頭部, 可包含meta, title等標(biāo)簽

</head>

<body> ---- 主體, 包含主要內(nèi)容

</body>

</html>

meta

<meta charset="utf-8" /> 用于告訴瀏覽器用什么樣的字符編碼來解釋網(wǎng)頁中的文本.

常見編碼:

iso-8859-1: 純英文編碼

gbk, gb2312: 簡體中文編碼

big5: 大五碼,繁體中文編碼,主要應(yīng)用于臺灣地區(qū)

utf-8: 國際首選編碼,它兼容所有的字符

除此之外, meta還可以通過keywords, description屬性對頁面關(guān)鍵詞及描述信息進行設(shè)置, 以提高搜索引擎的命中.

title

網(wǎng)頁標(biāo)題, 顯示在瀏覽器選項卡的標(biāo)題欄上!

文本排版標(biāo)簽

h1-h6: 內(nèi)容標(biāo)題標(biāo)簽

p: 段落

br: 換行

hr: 水平線

strong: 粗體文本

em: 斜體文本

span: 無任何特殊樣式的文本

pre: 預(yù)格式標(biāo)簽,其中的內(nèi)容在頁面上帶格式渲染

small: 比當(dāng)前字體小的文本

html特殊字符/轉(zhuǎn)義字符

空格

< 小于

> 大于

? 版權(quán)符

" 雙引號

html注釋

<!-- 注釋內(nèi)容 -->

圖像標(biāo)簽

<img

src="圖像地址"

title="鼠標(biāo)懸停提示"

alt="圖像加載錯誤時的替代文本"

width="寬度"

height="高度"

/>

圖像地址分為2種:

1. 相對地址, 如: img/cc.jpg

2. 絕對地址, 如: http://img.bcd.com/2017/1644232421.jpg

超鏈接

<a href="鏈接地址" target="目標(biāo)窗口">文本|圖片</a>

目標(biāo)窗口:

_self: 目標(biāo)頁面在當(dāng)前窗口打開

_blank: 目標(biāo)頁面在新窗口中打開

如果是在頁面具有frameset/frame/iframe的場景下:

_top: 在頂級窗口中打開

_parent: 在父級窗口中打開

_自定義名稱: 在指定的特定窗口中打開

三種用法:

1. 頁面間鏈接

<a href="page/login.html"></a>

2. 錨鏈接

<a href="#help"></a>

help是本頁面中一處id為help的標(biāo)簽, 如: <p id="help">

或者:

help是通過a標(biāo)簽命名的錨記, 如: <a name="help"></a>

3. 功能性鏈接

喚醒本地安裝的外部程序如 outlook/foxmail/qq/msn/aliwangwang...

<a href="mailto:abcdef@qq.com"></a>

div標(biāo)簽

div是一個容器, 常用于頁面的布局

標(biāo)簽的分類:

1. 塊級標(biāo)簽/塊級元素

如: div, h1-h6, p, hr

特征: 獨占容器中的一行, 其寬度是容器的100%

2. 行級標(biāo)簽/行級元素

如: span, img, strong, em, a

特征1: 多個行級元素可以同處一行, 其寬度由內(nèi)容來撐開(auto)

特征2: 大部分行級元素設(shè)置其width/height無效

HBuilder常用快捷鍵

ctrl + D : 刪除當(dāng)前行

ctrl + PgUp : 當(dāng)前行上移

ctrl + PgDown : 當(dāng)前行下移

ctrl + / : 注釋 | 取消注釋

ctrl + shift + F : 整理代碼格式

ctrl + C : 復(fù)制當(dāng)前行

ctrl + X : 剪切當(dāng)前行

ctrl + V : 粘貼

ctrl + Z : 撤消上一步操作

ctrl + S : 保存當(dāng)前文件

ctrl + shift + S : 保存項目中全部文件

ctrl + Enter : 在當(dāng)前行的下方插入新行

ctrl + shift + Enter : 在當(dāng)前行的上方插入新行