我的遺漏知識的回顧-HTML

時間 2020-02-01

標籤我的遺漏知識回顧 html 欄目 HTML 简体版

原文原文鏈接

經常使用的一些快捷鍵：
Windows + e 個人電腦
Ctrl + Tab 網頁間不一樣頁面切換
F2 重命名
Ctrl+Shift+S 另存爲
前端的一些常識：
前端意義：將效果圖生成網頁
網頁組成：文字、圖片、輸入框、視頻、音頻、超連接
Web標準：Html 結構標準；Css 表現標準；Js 行爲標準
瀏覽器內核
-----------------IE----谷歌/歐朋----火狐----蘋果
渲染引擎 trident blink gecko webkit
渲染引擎是兼容性問題出現的根本緣由
經常使用前端編輯器
包含（嵌套關係）、並列關係
Dw 歷史悠久，設計師使用
Sublime 輕量級，插件好用
Webstorm 重量級，智能
Sublime經常使用鍵
Html:xt+tab Html結構代碼
tab 補全標籤代碼
Ctrl+shift+d 快速複製一行
Ctrl+shift+k 快速刪除一行
Ctrl+鼠標左鍵單擊集體輸入
Ctrl+h 查找替換
Ctrl+/ 註釋
Ctrl+l 快速選中一行
Ctrl+shift+↑（↓）快速上移（下移）一行
查看----佈局
url協議
IIS web服務器提供網頁瀏覽服務
Url地址平時所用網址
url協議：規定url地址格式
協議規定格式：
**scheme://host.domain:port/path/filename
**scheme:定義因特網服務類型。常見http/https
**host:定義域主機（http默認主機值www）
**domain:定義因特網域名好比：w3school.com.cn
**:port 定義端口號（網頁默認端口:80）
**path:網頁所在服務器上路徑
**filename:文件名稱
HTML結構標準
Hyper Text Markup Language 超文本標記語言php

<!doctype html> <!-- 聲明文檔類型 --> 
<html> <!-- 根標籤 --> 
<head> <!-- 頭標籤 --> 
<title></title> <!-- 標題標籤 --> 
</heaed> 
<body></body> <!-- 主體標籤 --> 
</html>

Html與htm是同樣的。後綴名不能決定文件格式，只能決定文件打開方式。 css

**單標籤：

換行標籤
html

水平線標籤

**雙標籤
<p></p> 段落標籤。上下自動生成空白行
<h123456></h123456> 標題標籤。seo搜索優化
<font></font> 文本標籤

**文本格式化標籤
加粗儘可能用strong
傾斜儘可能用em
刪除線 <s></s> 儘可能用del
下劃線 <ins></ins><u></u> 儘可能用ins

**圖片標籤
<img src="XXX.jpg" alt="林志玲" title="個人女神" width="300" height="500" />
alt 替換文本圖片不顯示的時候顯示的文字
title 提示文本
圖片沒有定義寬高的時候，圖片按照百分之百比例顯示，若是隻更改圖片的寬度或者高度，圖片等比例縮放

**路徑
1.相對路徑
文件和圖片（html文檔）在同一個目錄（文件夾），直接寫文件名
文件和圖片在下一級目錄裏，文件夾名稱/圖片（html文件）名稱
圖片在文件的上一級目錄裏，../圖片（html文件）名稱
圖片在文件的上一級的其餘目錄裏，../文件夾名稱/圖片（html文件）名稱
總結：找到下一級目錄的圖片用/
　　　跳出當前目錄用../
2.絕對路徑
src="文件完整路徑" 前端

**特殊字符
空格 &nbsp
< 小於 &lthtml5

     大於      &gt
&     和        &amp
￥    人民幣    &yen
?     版權      &copy
?     註冊商標 &reg
℃   攝氏度    &deg
±    正負號    &plusmn
×    乘        &times
÷     除       &divide
2     平方      &sup2
3     立法      &sup3

上標 2³ 2的三次方

下標 H_{2_{O 元素水}}

**列表
1.無序列表
<ul>
<li></li> 列表項
<li></li>
<li></li>
</ul>
type="square" 小方塊
type="disc" 實心小圈圈
type="circle" 空心小圈圈
2.有序列表
<ol>
<li></li> 列表項
<li></li>
<li></li>
</ol>
type="1,a,A,i,Ⅰ"
start="3" 決定開始的位置
3.自定義列表
<dl>
<dt></dt> 小標題
<dd></dd> 解釋標題
<dd></dd> 解釋標題
</dl> web

**音樂標籤
<embed src="X.mp3" hidden="true"> hidden做隱藏播放器用。ture/false 瀏覽器

**滾動
<marquee behavior="" direction=""></marquee>
中間內容：文字、圖片、程序生成的文字或圖片
height、width、bgcolor、
-behavior設定滾動方式
alternate：表示在兩段之間來回滾動
scroll：表示由一段滾動到另外一端，會重複
slide：表示由一段滾動到另外一端，不會重複
-direction設置滾動方向
down、left、right、up
loop：設置滾動次數。-1一直滾下去安全

**超連接

href 去往的路徑(跳轉頁面)。必寫
titlr 提示文本。鼠標放到連接上顯示的文字
target="_self" 默認值。在自身頁面打開
Target="_blank" 打開新頁面服務器

**錨點（錨連接）
1.先定義一個錨點。如：<p id="sd"></p>
2.超連接到錨點。
**空鏈不肯定連接到哪一個頁面時
**壓縮文件下載不推薦使用
壓縮包
**超連接優化寫法
<base target="_blank"> 讓全部超連接都在新頁面打開 dom

**網頁編碼
<meta charset="UTF-8">
+tab html5標籤結構
charset 編碼
Ascll
Ansi（擴展的ASCII編碼）
Unicode
gb2312 （簡單中文）
GBK （所有中文字符、繁體）
Big5(繁體中文)
Utf-8

**meta標籤
**name
-<meta name="generator" contect="XX">用以說明生成工具

-網頁關鍵字
<meta name="keywords" content="Java培訓...">
keyword關鍵字用於seo優化

-網頁描述
<meta name="description" content="本身網頁在搜索引擎下顯示的描述！">

-網頁製做者
<meta name="Author" contect="你的姓名">告訴SEO站點製做做者

**http-equiv
-網頁重定向
<meta http-equiv="refresh" conten="5;http://www.baidu.com">
不一樣域名之間相互跳轉

**連接外部樣式表文件
<link rel="stylesheet" href="1.css">
<link rel="icon" href="XXXX.ico">每一個網頁擡頭的icon小圖標

**表格
展現數據，對網頁重構的補充

border="1" 邊框粗細
bordercolor="red" 邊框顏色
cellspacing="20" 單元格與單元格的距離
cellpadding="10" 內容距邊框的距離
align="left/right/center"
若是直接給表格用align="center" 表格劇中
若是給tr/td使用，tr或者td內容居中

**表格的標準結構

<caption><caption> 表頭

colspan="2" 合併同一行的2個單元格
rowspan="2" 合併同一列的2個單元格

直接建立一個3*3的表格
table>tr3>td3 + Tab鍵

**表格標題
<th></th>用法同<td>
-內容垂直對齊方式
<td valign="top/middle/bottom"></td>

**表單
表單做用：收集信息
提示信息
表單控件
--表單域
<form action='1.php' method="get">
屬性：action:處理信息
Method="get|post"
Get經過地址欄提供傳輸信息，安全性差
Post經過1.php來處理信息，安全性高
<fieldset> 標籤用於從邏輯上將表單中的元素組合起來

--文本輸入框
用戶名：<input type="text" maxlength="6" readonly="readonly" disabled="disabled" name="username" value="大前端">
maxlength="6" 限制輸入字符長度
readonly="readonly" 將輸入框設置爲只讀狀態（不能編輯）
disabled="disabled" 輸入框爲激活
name="username" 輸入框的名稱
value="XXXX" 將輸入框內容傳給處理文件

--密碼輸入框
密碼：<input type="password" name="pwd">
文本輸入框的全部屬性對密碼輸入框都有效

--單選框
<input type="radio" name="gender" checked="checked">男
只有將name的值設置相同的時候，才能實現單選效果。
checked="checked" 設置默認選中項

--下拉列表
<select>
<option>下拉列表選項</option>
<option>下拉列表選項</option>
<option>下拉列表選項</option>
<option selected="selected">下拉列表選項</option>
</select>
屬性：
multiple="multiple" 將下拉列表設置爲多選項
selected="selected" 設置默認選中項目

2018.03.28
轉載於猿2048:➱《我的遺漏知識的回顧-HTML》