HTML基礎全薈

時間 2019-11-20

標籤 html 基礎欄目 HTML 简体版

原文原文鏈接

第一講 html概述

1、認識HTML

<! DOCTYPE html>html

<html>ajax

<head><title></title></head>安全

<body>服務器

<h1></h1>框架

//post

<p></p>url

</body>spa

</html>orm

2、圖片路徑

怎麼加載圖片主要是寫路徑

<../ images/002.jpg>

幾層幾個../

<../../../201.gif>

這種指的是把鏈路地址跳出來

Alt 彈出框、

屬性：寬高背景透明度內邊距外邊距

爲了保持圖片的天然比例通常只改變寬度或者高度

不要寫屬性默認的單位

Title屬性能夠表示題目能夠表示鼠標放在圖片時所顯示的文本

也能夠表示彈出title=」小姐姐」

圖片中的路徑問題

相對路徑：參照自身的位置定義的路徑

絕對路徑：在計算機裏面的路徑

3、行內元素、塊元素、行內塊元素的比較

塊元素：p <br/> h1~h6 li ol dl dd dt div <hr/> form

行內塊級元素 img input button

行內元素 <b></b> <strong></strong> <i></i> lable <em ></em> sup sub

第二講標籤的使用

HTML文字排版標記

1、常見的標籤：

<p></p> 雙標記元素

<br/> 單標記標籤

<h1>~<h6> 雙標記元素

列表

<ul></ul> 無序列列表

<ol></ol> 有序列表

<li></li> 列表項

<dl></dl> 定義列表定義列表至少有一條說明

<dt></dt> 代表術語要說明的對象

<dd></dd> 三個都是雙標記元素

2、標籤屬性

Ul 的屬性type=square能夠把小圓點變成實心的方形

Ul 的屬性type=circle能夠把小圓點變成空心的小圓點

Ul 的屬性type=none能夠把前綴去掉

<strong></strong> <b></b> 都是加粗，可是第一個具備強調的意思

<div></div>是一個塊級元素，

3、元素之間的嵌套

標籤和標籤的嵌套：塊級元素裏面能夠嵌套任何的元素

塊級元素裏能夠嵌套塊級元素 <div><h3></h3></div>

塊級元素能夠嵌套行內元素 <div><strong></strong></div>

塊級元素裏面能夠嵌套行內塊級元素 <div><img src=」」/></div>

行內元素能夠嵌套任何元素，除了塊級元素。

行內元素嵌套行內元素 <b><i></i></b>

行內元素能夠嵌套行內塊級元素 <a href=」#」 ></a>

<hr/>是一個水平線

4、<div></div>

1. 是一個塊級元素

2. 佔據一行

3. 高度、行高、外邊距和內邊距均可以控制

4. 寬度始終與瀏覽器同樣，與內容無關

5. 沒有自帶樣式

5、<span></span>

1. 行內元素

2. 與其餘元素在一行上、

3. 高、行高以及外邊距內邊距均可以改變、

4.. 寬度只與內容有關

5. 沒有自帶的樣式是行內元素之容納文本或者其餘行內元素

6. 表現性元素

6、特殊標籤和結束標籤

< sup></sup> 上標

<sub></sub> 下標

H4被淘汰的標籤：center、 font 、 big、small\

特殊文字符號的使用

空格

< <

> >

第三講連接的使用

一、超連接

1）超連接概述

a超練級的 href屬性值是url路徑

Target 目標在新窗口中打開用屬性值 _blank

Title(標題）鼠標放在超連接上的時候顯示的文超連接了；裏面沒有#的話表示刷新本頁面

任何標籤均可以有id 可是id的值是惟一的

回到哪一個地方就是#ID 錨點

2）僞類

僞類： a:link:

a:visited

a:hover:

a:active:

LOVE HATE 愛恨原則

3）href的值

Href的值

1、另外一個頁面的值相對路徑和絕對路徑

2、錨點 #ID 或者是 # name

3、值爲空刷新本頁面

4）target的屬性

Target 的屬性目標

1、_blank 在新窗口中打開

2、_top 在窗口頂部打開

4、-self 本身窗口打開

5、 _parrent 後三種在窗口中都是吧原來的窗口覆蓋了

鼠標放在超連接上面顯示的文本 title

全部的標籤均可以加的屬性：id

ID 惟一的

Style 行內樣式值是由冒號引出值是由多個屬性名和屬性值構成的，用分好個跨

使用電子郵件連接

網頁中圖片的分類

一、內容圖片

二、修飾圖片

三種格式

1. Gif 動圖支持透明修飾類

2. Jpg jpeg ---色彩多不支持動圖也不支持透明，是網頁內容圖片的首選

3. Png 內容或者修飾支持透明效果最好（考點）

2、熱區的創建<map>和<area> 難點要點

1）爲圖片的特定區域創建連接

Shape的取值

Circle

Rect

Poly

</map>

2）Map 必須有的屬 id name

Map 必須有的屬 id name

3）Area 必須有三個屬性

肯定形狀 Shape

肯定位置 coords

肯定連接 href

3、框架的使用

1）行內框架

在body裏面

2）框架集

只要用框架集不要再用body 或者不要在body裏面寫內容

</frameset>

<frameset cols =」20%, * 」> 剩多少 *就是多少

</frameset>

不加邊框不加滾動條不可移動

</frameset>

第四講軟件和表格

一、Sublime軟件的安裝和快捷方法

1）快捷方法

生成html文檔點擊純文本選擇html 按英文的歎號 + tab

生成單個標籤標籤名字+Tab

生成多個標籤標籤名*個數 + tab

註釋：選中要註釋的內容 control+/

瀏覽的話就點擊右鍵會有在瀏覽器中打開或者找路徑

生成id爲top的元素 <div id=」top」></div> div#top + tab

生成後代元素用父元素名>子標籤 + tab <div><a href=""></a></div>

Div*3>a tab

Div>a*3 tab

<div>

</div>

有漢字用大括號

Div*3>a{hello}

<ul>

<li><a href="">hello</a></li>

</ul>

Ul>li*3>a{hello$} TAB

<ul>

<li><a href="">hello1</a></li>

<li><a href="">hello2</a></li>

<li><a href="">hello3</a></li>

</ul>

注意光標在最後面所有是英文

倒序

Td*3>{hello$@-}

<tr>

<td>world5</td>

<td>world4</td>

<td>world3</td>

<td>world2</td>

<td>world1</td>

</tr>

Th*3>{hello$$$} tab

回顧內容

超連接的屬性 href的三個值相對路徑錨點值爲空

Target的值

Title

全部的標籤均可以加屬性

嵌入式樣式

1）Sublime Text 3 快捷鍵精華版

Ctrl+X：刪除當前行

Ctrl+N：新建窗口

Ctrl+K+B：開關側欄

Ctrl+/：註釋當前行

Ctrl+Shift+/：當前位置插入註釋

F11：全屏

Shift+F11：全屏免打擾模式，只編輯當前文件

Alt+F3：選擇全部相同的詞

Ctrl+Z 撤銷。r

Ctrl+Y 恢復撤銷。

2、表格

1）表格的基本結構

定義表格的基本框架

定義表格的行

定義表格中行內的單元格

定義表格中行內的單元格（標題），自動將文本加粗，居中對齊

2）合併單元格

Colspan rowspan

3）完整的表格標記

定義表頭部分

定義表格腳註

定義表格主體

注意：<thead>和<tfoot>的內容要用<tr><td>要表示，不推薦直接表示

屬性：

表格默認沒有border 邊框若是要有的話就border

Cellspacing 單元格與單元格之間的距離

Th默認樣式加粗水平居中垂直居中

Td默認樣式是左對齊豎直方向垂直居中

Cellpadding 內邊距

border

align

Bgcolor

Alig n left center right

Valign top/ middle/bottom

第五講表單的的綜合使用

Class不惟一用 .

Div 惟一用#

若是文本居中的話用 text-align:center

若是一塊居中的話用 margin-right:auto;

Margin-left:auto;

1、表單

1）表單的概念及做用（重難點）

表單是用來採集用戶輸入的數據，而後將數據提交給服務器

2）一個表單有三個基本組成部分：

表單標籤：這裏麪包含了處理表單數據所用程序的URL以及數據提交到服務器的方法。 Action 屬性定義明文仍是密文

表單域：包含了文本框、密碼框、隱藏域、多行文本框、複選框、單選框、下拉選擇框和文件上傳框等。

表單按鈕：

包括提交按鈕（提交到服務器）、復位按鈕（重置）和通常按鈕（通常是沒有東西

能夠自定義）

表單標籤 <from></from>

定義採集數據的範圍

全部的標籤都寫到form表單裏面

Url通常是服務器上面的某一個接口

action=「」服務器地址

method=「」 get / post

Get提交密碼用戶名都是明文不安全大小有限制（ajax)

Post 是密文

高都是行內塊級元素

<!-- action 是服務器上的某一個地址表單要提交的路徑

method 表單提交的方式值：get post

get 不安全大小有限制

post 安全大小無限制

placehoder 默認的提示

type="text" 表示的文本類型

maxlength="3" 限制輸入文本的長度單位是字數

size 表示大小不用瞭解

form是塊級元素

其餘的能夠加寬和高都是行內塊級元素

name具備記憶功能

寫提交按鈕的時候 value的值最好寫上，不一樣的軟件顯示不同

關於method的不同地址欄會顯示不同的內容 get會有顯示 post則不具備

-->

表單域對象

包含文本框多行文本框登

文本框

文本框是一種讓訪問本身輸入內容的表單對象，一般被用來填寫單個字或者簡短的回答，如姓名、地址等。

代碼格式：

＜input type="text" name="..." size="..." maxlength="..." value="..."＞

多行文本框

也是一種讓訪問者本身輸入內容的表單對象，只不過能讓訪問者填寫較長的內容。

代碼格式：＜textarea name="..." cols="..." rows="..." ＞＜/textarea＞

密碼框

是一種特殊的文本域，用於輸入密碼。當訪問者輸入文字時，文字會被星號或其它符號代替，而輸入的文字會被隱藏。

代碼格式：＜input type="password" name="..." size="..." maxlength="...「/＞

隱藏域

隱藏域是用來收集或發送信息的不可見元素，對於網頁的訪問者來講，隱藏域是看不見的。當表單被提交時，隱藏域就會將信息用你設置時定義的名稱和值發送到服務器上。

代碼格式：＜input type="hidden" name="..." value="..."＞

複選框

複選框容許在待選項中選中一項以上的選項。每一個複選框都是一個獨立的元素，都必須有一個惟一的名稱。

代碼格式：＜input type="checkbox" name="..." value="..."＞

單選框

當須要訪問者在待選項中選擇惟一的答案時，就須要用到單選框了。

代碼格式：＜input type="radio" name="..." value="..."＞

必須寫上相同的name值才能每次選中一個

文件上傳框

有時候，須要用戶上傳本身的文件，文件上傳框看上去和其它文本域差很少，只是它還包含了一個瀏覽按鈕。訪問者能夠經過輸入須要上傳的文件的路徑或者點擊瀏覽按鈕選擇須要上傳的文件。

代碼格式：＜input type="file" name="..." size="15" maxlength="100"＞

下拉選擇框

下拉選擇框容許你在一個有限的空間設置多種選項。

代碼格式：

＜select name="..." size="..." multiple＞

＜option value="..." selected＞...＜/option＞

...

＜/select＞

表單按鈕表單按鈕控制表單的運做

提交按鈕提交按鈕用來將輸入的信息提交到服務器。

代碼格式：＜input type="submit" name="..." value="..."＞

復位按鈕復位按鈕用來重置表單。

代碼格式：＜input type="reset" name="..." value="..."＞

通常按鈕通常按鈕用來控制其餘定義了處理腳本的處理工做。

代碼格式：＜input type="button" name="..." value="..." onclick="..."＞

3）Post和get概述

Post 大小無限制安全

Get大小有限制不安全

相關標籤/搜索

每日一句

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

HTML基礎全薈

第一講 html概述

1、認識HTML

2、圖片路徑

3、行內元素、塊元素、行內塊元素的比較

第二講 標籤的使用

1、常見的標籤：

2、標籤屬性

3、元素之間的嵌套

4、<div></div>

5、<span></span>

6、特殊標籤和結束標籤

第三講 連接的使用

一、超連接

1）超連接概述

2、熱區的創 建<map>和<area> 難點要點

1）爲圖片的特定區域創建連接

2）Map 必須有的屬 id name

3）Area 必須有三個屬性

3、框架的使用

1）行內框架

2）框架集

第四講 軟件和表格

一、Sublime軟件的安裝和快捷方法

1）Sublime Text 3 快捷鍵精華版

2、表格

1）表格的基本結構

2）合併單元格

3）完整的表格標記

第五講 表單的的綜合使用

Class不惟一 用 .

1、表單

1）表單的概念及做用 （重難點）

3）Post和get概述

第二講標籤的使用

第三講連接的使用

2、熱區的創建<map>和<area> 難點要點

第四講軟件和表格

第五講表單的的綜合使用

Class不惟一用 .

1）表單的概念及做用（重難點）