HTML第三天學習筆記

時間 2019-12-01

標籤 html 第三天學習筆記欄目 HTML 简体版

原文原文鏈接

　　昨天學的超連接，今天深刻學習了下，發現了更多的知識點，並且關於初始新建網頁時，因爲是初學者，因此仍是純手寫代碼~javascript

 1 <html>
 2 <head>
 3     <title>超連接</title>
 4     <meta http-equiv = "content-type" content = "text/html;charset = utf-8">
 5     <script type = "text/javascript"></script>
 6 </head>
 7 <body>
 8     <h2>絕對地址</h2>
 9     <a href = "http://www.baidu.com" target = "_blank">百度</a><br>
10     <a href = "file:///D:\文檔\視頻同步\視頻同步：做業02.html" target = "_blank">視頻同步：做業02</a>
11     <hr>
12     <h2>相對地址</h2>
13     <a href = "視頻同步：項目符號.html" target = "_blank">視頻同步：項目符號</a>
14     <hr>
15     <h2>特殊連接</h2>
16     <a href = "Images\00.zip">下載圖片</a><br>
17     <a href = "mailto:3148113255@qq.com">發送郵件</a><br>
18     <a href = "#" target = "_blank">空連接</a><br>
19     <a href = "javascript:window.close()">關閉窗口</a>
20 </body>
21 </html>

經常使用屬性：
href：目標文件地址的URL，該URL是相對地址，也能夠是絕對地址；
target：目標文件的顯示窗口
  _blank:在新窗口中打開目標文件
  _self:在當前窗口打開目標文件，至關替換；
  _parent:在父級窗口中打開目標文件；
  _top:在最頂級窗口打開目標文件；
其中_parent和_top經常使用於框架網頁中
name:定義錨點連接的名稱;html

絕對地址URL：
  一、遠程的絕對地址
   訪問遠程的文件，老是以域名、主機名開頭。
  二、本地的絕對地址
   訪問本地的絕對地址，是以「file:///」開頭的絕對地址。java

相對地址URL：
  一、當前文件和目標文件是同級文件；
   連接地址直接寫目標文件名；
  二、當前文件與目標文件所在的文件夾同級；
   先找文件夾名，再找文件名；
  三、目標文件位於上一層目錄中；
   上一級文件使用"../"表示
   上兩級文件使用"../../"表示
   以此類推;瀏覽器

特殊連接：
一、下載連接：網頁不能直接打開的文件會提示下載;
二、郵箱連接：
  mailto:(郵箱地址)
三、普通空連接：
四、js連接
  在連接地址中寫#號；
  在火狐window.colse()用不了時使用以下代碼；
  <a href = "javascript:window.open('about:blank','_self').close()">關閉窗口</a>
  或輸入地址 about:config 而後再輸入關鍵字 close_window 修改其布爾值;服務器

============================================================================框架

第二個是關於錨點連接：學習

 1 <html>
 2 <head>
 3     <title>視頻同步：錨點連接</title>
 4     <meta http-equiv = "content-type" content = "text/html;charset = utf-8">
 5     <script type = "text/javascript"></script>
 6 </head>
 7 <body>
 8     <h4>界面的跳轉</h4>
 9     <ul>
10         <li><a href = "視頻同步：做業02.html#this">跳轉界面</a></li>
11     </ul>
12 </body>
13 </html>

錨點連接：
含義：在一個網業的不一樣區域進行跳轉。錨點定義爲「定義記號」；
定義錨點：<a name = "錨點名稱"></a>
  錨點名稱的命名規則：能夠包含字母、數字、下劃線，但只能以字母開頭。
  注意：<a>和</a>之間沒有內容，換句話說，這個記號不是給咱們看的，而是給連接看的。
  例如： <a name = "Top_2"></a>
跳轉到錨點：
  語法： <a href = "文件名#錨點名稱">內容</a>
  文件名：無關緊要，若是是同一網頁的不一樣部分跳轉，不用文件名，有則反之；
  注意：<a>和</a>之間要有內容，不然會沒法進行跳轉。ui

========================================================================================this

第三個知識點是關於meta標記url

1 <html>
2 <head>
3     <title>meta標記</title>
4     <meta http-equiv = "content-type" content = "text/html" charset = "uft-8">
5 </head>
6 <body>
7     
8 </body>
9 </html>

meta的主要做用：
是提供網頁的元信息。好比：指定網頁的搜索關鍵字；
<meta>有兩個屬性：一個是http-equiv和name
一、http-equiv屬性
  功能：模擬http協議文件頭信息，當信息從服務器端傳到客戶端時，告訴瀏覽器如何正確的顯示網頁內容。
  http-equiv屬性通常要與content屬性配合使用。Content屬性指定信息的詳細參數。
  (1)、設置網頁的字符集；
  <meta = http-equiv = "content-type" content = "text/html" charset = "uft-8">
  (2)、網頁自動刷新;
  <meta = http-equiv = "refresh" content = "2">//每隔兩秒鐘刷新網頁一次；
  <meta = http-equiv = "refresh" contrnt = "2" url = "http://www.baidu.com">每隔兩秒跳一次到百度。
二、name屬性
  name屬性主要用於設置網頁的搜索關鍵字、版權信息、做者等
  (1)、設置網頁關鍵字搜索；
  <meta name = "keywords" content = "關鍵字">
  (2)、設置網頁描述信息
  <meta name = "description"> content = "描述">

===================================================================================

第四個知識點是表格的製做

 1 <html>
 2 <head>
 3     <title>Border</title>
 4     <meta http-equiv = "content-type" content = "text/html; charset = tuf-8">
 5 <head>
 6 <body>
 7     <table border = "1" width = "500">
 8         <tr>
 9             <td>&nbsp</td>
10             <td>&nbsp</td>
11             <td>&nbsp</td>
12         </tr>
13         <tr>
14             <td>&nbsp</td>
15             <td>&nbsp</td>
16             <td>&nbsp</td>
17         </tr>
18     </table>
19 </body>
20 </html>

<table>屬性
width:表格寬度，單位能夠是百分比也能夠是固定值。
heigth:表格高度
align：表格水平對齊方式，取值：left、center、right
border:邊框粗細
bordercolor:邊框顏色
bgcolor:表格背景顏色
background:背景圖片URL
cellpadding:單元格邊線到內容間的距離(填充距離)
cellspacing:單元格與單元格之間的距離(間距)
rules:合併單元格邊框線，取值:all
注意：rules兼容性很差，請用CSS取代；

<tr>屬性——行標記
bgcolor:行的背景色
height:行的高度
align:行的文本水平居中
valign:垂直居中，取值：top,middle,bottom

<td>是普通單元格<th>是標題單元格，居中加粗顯示