html基礎學習

時間 2019-12-11

標籤 html 基礎學習欄目 HTML 简体版

原文原文鏈接

1. 什麼是html

　　hyper text markup language 超文本標記語言：一門使用標記和瀏覽器交流溝通的語言，用文本的形式來技術。css

2. html頁面結構

　　<!DOCTYPE html> 文檔聲明標記html

　　<html> 網頁的起始瀏覽器

　　<head> 網頁的頭部服務器

　　<title> 網頁標題標記工具

　　　　放顯示在瀏覽器標題欄的內容學習

　　</title>字體

　　</head>fetch

　　<body>網頁的主體內容優化

　　</body>網站

　　</html>網頁的結束

3. 開發者工具查看頁面結構

　　在瀏覽器上右鍵找到「檢查（審查元素、檢查元素）」，能夠查看該頁面的結構代碼。

4. html標籤學習

4.1 標籤中屬性語法

　　標籤屬性：描述標籤特徵的東西

　　語法：

　　　　1.必需要寫在標籤裏，開始標籤裏

　　　　2.屬性名=」屬性的值」

　　　　3.當有多個屬性的時候用空格隔開

4.2 h系列標籤（heading標題標籤）

　　標籤：h1 - h6

　　用法：<h1>內容</h1>

　　特色：能夠將文字設置爲標題，效果爲加粗，字體大小從h1到h6依次變小，h4的字體和普通文本同樣大，h系列標籤在html中有特殊語義。

4.3 font標籤（字體標籤）

　　用法：<font color=」gray」 size=」2」 face=」宋體」 >內容</font>

　　屬性：color：設置文字顏色

　　 size：設置文字大小，範圍是1-7，正常爲3

　　 face : 指定文本的字體

4.4 hr標籤(Horizontal Rule 水平線標籤)

　　用法：<hr />

4.5 p標籤（paragraph 段落標籤）

　　用法：<p>內容</p>

　　特色：讓文字成爲段落，佔據一行，而且上下有明顯間距

4.6 br標籤（break 換行標籤）

　　用法：<br />

　　做用：讓標籤兩邊的文字換行顯示

4.7 strong、ins、em、del和b、u、i、s標籤

標籤	用法	效果	被棄用的相同效果
strong	<strong></strong>	加粗	b
em	<em></em>	斜體	i
ins	<ins></ins>	下劃線	u
del	<del></del>	刪除線	s

4.8 img標籤(image)

　　用法：<img src=」圖片路徑」 />

　　屬性：src=」圖片的路徑」指定圖片標籤裏須要顯示的圖片

　　　　 alt=」圖片加載異常時顯示的文字」

　　　　 title=」鼠標停留在圖片上的時候顯示的提示」

4.9 a標籤（anchor 超連接）

1：在頁面之間跳轉：

　　<a href=」跳轉到其餘頁面的相對路徑」>這裏必需要有內容</a>

　　屬性：herf=」跳轉的目標地址」

　　　　　title=」鼠標停留時的提示」

　　　　　target=」跳轉的方式」

2.使用a標籤在頁面上定位標籤

　　2.1 要準備一個被a標籤訂位的標籤，要有id屬性

　　2.2 a標籤的href屬性的值是#+目標標籤的id

3.實現下載功能

　　注意：

　　　　1.這種方式當下已經不多使用

　　　　2.若是瀏覽器認識這種文件，會直接在瀏覽器中打開

4.10 base標籤

　　用法：寫在head標籤裏

　　做用：統一設置當前頁面上的a標籤（未設置target屬性）的跳轉方式

4.11 無序列表ul(unordered list)

　　用法：

　　<ul>

　　　　...

　</ul>

4.12 有序列表ol (ordered list)

　　用法：

　　<ol>

　　　　...

　</ol>

4.13 自定義列表dl（definition list）

　　用法：

　　<dl>

　　　　...

　　　　...

　　</dl>

4.14 table（表格標籤）

　　用法：

　　<table>

　　<thead>

　　　　<tr>

　　　　　　...

　　　　</tr>

　　</thead>

　　<tbody>

　　　　<tr>

　　　　　　...

　　　　</tr>

　　　　...

　　</tbody>

　　<tfoot>

　　　　<tr>

　　　　　　...

　　　　</tr>

　　</tfoot>

　　</table>

　　屬性：border：控制邊框的粗細

　　 cellspacing：控制單元格的間距

　　 width: 控制表格的寬度

　　　　 align：控制的是對齊方式，若是給table設置，控制表格對於瀏覽器而言的對齊，若是是給td,tr,tbody..控制內容的對齊方式

　　 colspan/rowspan：控制td合併多少個單元格顯示

4.15 input系列標籤

1 輸入框

　　屬性：placeholder：提示的文字，當咱們輸入內容的時候，會消失

　　　　　value：設置輸入框的默認值

　　　　　maxlength：設置容許輸入的最大長度

2 密碼框

3 單選框

　　name屬性：可讓一堆的單選框成爲互斥的一組

　　checked屬性：設置某個單選框默認選中

4 按鈕

5 多選框

　　屬性checked：設置多選框默認選中

6 提交按鈕

　　做用：把表單裏的數據提交到服務器

7 重置按鈕

　　做用：把表單裏的數據恢復默認

　　注意點：重置按鈕必須放在表單裏才能起效果

8 圖片提交

　　做用：提交數據

9 文件上傳按鈕

　　做用：上傳文件

4.16 textarea文本域

　　屬性：cols：控制寬度，而且是可縮放的最小寬度

　　　　　rows：控制高度，而且是可縮放的最小高度

4.17 select（下拉框）

　　用法：

　　　　...

　　</select>

　　設置某一個選項默認被選中：selected=」selected」

4.18 form表單

　　用法：

　　<form>

　　　　在這裏放表單控件

　　</form>

　　表單：用來收集用戶信息，用來裝表單控件

　　表單控件：給用戶輸入或者交互用的標籤

　　action屬性：指定數據上交的地址

　　method屬性：提交數據的方式

4.19 meta標籤

1 設置頁面的編碼格式

2 設置頁面的關鍵詞

　　作搜索引擎優化

3 設置頁面的描述

　　作搜索引擎優化

4.20 link標籤

1 引入網站的圖標

2 引入css文件

3 dns預解析

　　只有特別大的網站才須要作dns預解析。

4.21 script和style標籤

　　script：寫js代碼的

　　style：寫css的

4.22 特殊字符

　　在瀏覽器中許多特殊字符需用對應的代碼來表示。

　　如：&nbsp；爲空格，&lt；爲小於號等。

5. 什麼是http協議

　　超文本傳輸協議（HyperText Transfer Protocol）

　　規定了瀏覽和服務交互的數據格式。

6. URL

　　統一資源定位器（Uniform Resoure Locator）

　　協議名+服務器ip+端口+目標資源的路徑

7. 什麼是SEO

　　搜索引擎優化(Search Engine Optimization)：讓頁面對搜索引擎更加友好

　　目的：讓網站符合搜索引擎的排名需求，提升網站在搜索引擎中的排名，提升訪問量從而提升收益。

8. HTML語義化

8.1 什麼是HTML語義化

　　每個標籤都有語義，這個語義是相對於瀏覽器和搜索引擎的，須要在合適的地方用合適的標籤。

8.2 兩個沒有語義化的標籤

　　<div></div> 都是容器

　　div是一個佔據一整行的容器

　　span是一個自適應內容多少的容器

相關標籤/搜索

每日一句

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