我的遺漏知識的回顧-HTML

時間 2019-11-13

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

原文原文鏈接

經常使用的一些快捷鍵：php

Windows + e 個人電腦
Ctrl + Tab 網頁間不一樣頁面切換
F2 重命名
Ctrl+Shift+S 另存爲css

前端的一些常識：
前端意義：將效果圖生成網頁
網頁組成：文字、圖片、輸入框、視頻、音頻、超連接
Web標準：Html 結構標準；Css 表現標準；Js 行爲標準html

瀏覽器內核
-----------------IE----谷歌/歐朋----火狐----蘋果
渲染引擎 trident blink gecko webkit
渲染引擎是兼容性問題出現的根本緣由前端

經常使用前端編輯器
包含（嵌套關係）、並列關係
Dw 歷史悠久，設計師使用
Sublime 輕量級，插件好用
Webstorm 重量級，智能html5

Sublime經常使用鍵web

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 超文本標記語言服務器

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

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

dom

**單標籤：

<br /> 換行標籤

<hr /> 水平線標籤

**雙標籤

<p></p> 段落標籤。上下自動生成空白行

<h123456></h123456> 標題標籤。seo搜索優化

<font></font> 文本標籤

**文本格式化標籤

加粗 <strong></strong><b></b> 儘可能用strong

傾斜 <em></em><i></i> 儘可能用em

刪除線 <del></del><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
<     小於      &lt
>     大於      &gt
&     和        &amp
￥    人民幣    &yen
?     版權      &copy
?     註冊商標 &reg
℃   攝氏度    &deg
±    正負號    &plusmn
×    乘        &times
÷     除       &divide
2     平方      &sup2
3     立法      &sup3
#上標 2<sup>3</sup> 2的三次方
#下標 H<sub>2<sub>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>

**音樂標籤
<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一直滾下去

**超連接
<a href="XXX.html" title="圖片標籤" target="_self"></a>
href 去往的路徑(跳轉頁面)。必寫
titlr 提示文本。鼠標放到連接上顯示的文字
target="_self" 默認值。在自身頁面打開
Target="_blank" 打開新頁面

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

**網頁編碼
<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站點製做做者

-設定網頁被爬取權限
<meta name="Robots" contect="all|none|index|noindex|follow|nofollow">
all:文件將被檢索，頁面上連接能夠被查詢
none:文件將不被檢索，且頁面上連接不能夠被查詢
index:文件將被檢索
noindex:文件將不被檢索，但頁面上連接能夠被查詢
follow:頁面上的連接能夠被查詢
nofollow:文件將不被檢索，但頁面上連接能夠被查詢

**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小圖標

**表格
展現數據，對網頁重構的補充
<table border="1" width="500" height="300" cellspacing="20" cellpadding="10" align="center" bgcolor="yellow">
<tr align="center">
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
border="1" 邊框粗細
bordercolor="red" 邊框顏色
cellspacing="20" 單元格與單元格的距離
cellpadding="10" 內容距邊框的距離
align="left/right/center"
若是直接給表格用align="center" 表格劇中
若是給tr/td使用，tr或者td內容居中

**表格的標準結構
<table>
<caption><caption> 表頭
<thead></thead>
<tbody>
<tr>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td rowspan="2"></td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
colspan="2" 合併同一行的2個單元格
rowspan="2" 合併同一列的2個單元格

直接建立一個3*3的表格
table>tr*3>td*3 + 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

相關標籤/搜索

每日一句

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