HTML小結

来源:http://www.cnblogs.com/Royall/archive/2016/10/12/5953361.html
-Advertisement-
Play Games

一、HTML 二、最基本的HTML結構 三、最常用的HTML標簽 a、佈局標簽 div標簽定義文檔中的分區或節（division/section），可以把文檔分割為獨立的、不同的部分，主要用於佈局。 aside標簽的內容可用作文章的側欄，html5新增標簽。 header標簽定義頁面的頭部（介紹信息 ...


一、HTML

  1. 網頁編程語言。Html之所以能展現出各種各樣的效果，是瀏覽器的功能。
  2. HTML(HyperText Markup Language)就是描述網頁長什麼樣子、有什麼內容的一個文本。查看網頁的描述內容（HTML）的方式：使用IE瀏覽器的話，在網頁上點擊右鍵，選擇“查看源文件”
  3. B/S(Browser/ Server)：瀏覽器-伺服器，客戶端只需要一個瀏覽器
  4. C/S(Client/Server)：客戶端必須安裝對應的軟體。比如：QQ、MSN、FoxMail

二、最基本的HTML結構

 1 <!-- <!DOCTYPE> 是HTML5聲明，<!DOCTYPE> 必須是 HTML 文檔的第一行，位於 <html> 標簽之前。<!DOCTYPE>是指示 web 瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。-->
 2 <!DOCTYPE html>
 3 <html>
 4 <!-- head標簽是所有頭部元素的容器。head標簽內的元素可包含腳本、樣式表和提供頁面的元信息等等。以下標簽都可以添加到 head 部分：title、base、link、meta、script 以及style。頭部的內容不會顯示在瀏覽器的。 -->
 5 <head>
 6 <!-- 設置字元集，如果字元集不對，可能導致亂碼。一般建議utf-8國際編碼 -->
 7 <meta http-equiv="Content-Type" content="text/html; charset=gb2312或utf-8或gbk" />
 8 <!-- 定時自動跳轉 -->
 9 <meta http-equiv="refresh" content="10;URL=http://www.leixuesong.cn" />
10 <!-- SEO相關標簽，title定義文檔的標題,百度建議一般不要超過32位,meta定義頁面關鍵詞和頁面的描述-->
11 <title>網頁標題</title>
12 <meta name="keywords" content="PHP程式員,技術博客,個人博客" />
13 <meta name="description" content="我的博客記錄了Linux學習，PHP開發與編程，Web前端開發，MySQL學習和教程，NoSQL資料庫教程以及個人的人生經歷和觀點。" />
14 <link rel="stylesheet" type="text/css" href="main.css" />
15 <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
16 </head>
17 <!-- 正文部分，所有在瀏覽器上可見的內容必須寫在body標簽內部 -->
18 <body>
19 </body>
20 </html>

三、最常用的HTML標簽

a、佈局標簽

  • div標簽定義文檔中的分區或節（division/section），可以把文檔分割為獨立的、不同的部分，主要用於佈局。
  • aside標簽的內容可用作文章的側欄，html5新增標簽。
  • header標簽定義頁面的頭部（介紹信息），html5新增標簽。
  • section標簽定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分，html5新增標簽。
  • footer 標簽定義文檔或節的頁腳，通常包含文檔的作者、版權信息、使用條款鏈接、聯繫信息等等，html5新增標簽。
  • article標簽規定文章獨立的其他內容，比如：標題、內容、評論，html5新增標簽。

b、文本標簽

  • h1-h6標簽可定義標題（h1最大，h6最小）
  • p標簽定義段落
  • b/strong標簽加粗
  • em標簽來表示強調的文本，斜體
  • strong標簽表示重要文本
  • u標簽下劃線
  • s標簽刪除線
  • br標簽表示回車換行
  • hr標簽表示水平線
  • span標簽被用來組合文檔中的行內元素。
  • blockquote標簽表示塊引用
  • pre標簽可定義預格式化的文本，保持原有格式的一種標簽。
  • sub標簽下標，
  • sup>標簽上標
  • &nbsp;表示一個空格
  • &copy;表示版權符
  • &lt;表示<
  • &gt;表示>

c、a標簽定義超鏈接

  • 指定頁面間的跳轉，鏈接可以指向外部鏈接或者頁面內部id錨點，可以在當前頁面打開，新開視窗。 
    <a href="指向的鏈接地址或者網址#ID名" target="_blank|_self|_top|_parent">百度</a>
  • 超級鏈接 
    <a href="http://www.yahoo.com" target="_self" title="去美國雅虎">雅虎</a>
  • 圖片超鏈接 
    <a href="http://www.microsoft.com"><imgborder="0" src="1.jpg"/></a>
  • 相對URL
    相對URL表示相對於當前文檔的資源;
    “/”表示網站根目錄，“../”表示父目錄;
    “../../”表示父目錄的父目錄，“./”或者不寫任何斜線表示相對於當前路徑的目錄
    站內引用最好用相對URL，這樣功能變數名稱改變了、目錄改變了都不受影響。 
    <img src="../images/csharp1.jpg" />
<img src="/images/csharp1.jpg" />
  • 將<a>的target屬性設定為"_blank"就可以在新視窗中打開超鏈接。
    國情：國內的網站很多都是預設在新視窗中打開。target的取值範圍：
    _blank :在新視窗中打開
    _self :在自己的視窗中打開
    _parent :父視窗中打開
    _top :表示在頂級視窗打開
    框架名稱：在指定框架中打開。
  • 錨記：用name屬性為<a> 起名字：<aname="Last">這裡是最後</a>。這樣可以通過<a href="#Last">轉到平臺</a>來跳轉到超鏈接的部分。

d、多媒體標簽

  • img標簽主要在網頁中插入圖像，可以定義圖片替換文本、顯示寬度和高度、是否帶邊框，建議等比例設置，否則圖像會變形。

　　　<img src=“a.jpg”/>註意圖片是鏈接的，不是插入的，所以如果src指向的文件不存在了，就看不了了。alt屬性為圖片無法顯示時的顯示文本，滑鼠方式去也會有懸浮提示“點擊查看大圖”；title用來顯示當滑鼠放到圖片上時顯示的文字；border屬性指定邊框，border="0"不顯示邊框；width、height屬性指定圖片的顯示大小，如果不指定則是圖片的原始大小。

  • <img src="圖片地址" alt="替換文本，圖片打不開的時候顯示" width="圖片寬度" height="高度" border="0" />
  • audio標簽定義聲音，比如音樂或其他音頻流。html5新增標簽。 
    <audio src="someaudio.wav">您的瀏覽器不支持 audio 標簽。</audio>
  • video標簽定義視頻，比如電影片段或其他視頻流。html5新增標簽。 
    <video src="movie.ogg" controls="controls">您的瀏覽器不支持 video 標簽。</video>

e、序列化標簽

  • ul和li無序列表標簽。 
    <ul>
<li>HTML</li>
<li>JS</li>
<li>PHP</li>
</ul>
  • ol和li有序列表標簽，可以使用type屬性規定有序列表符號的類型。1 按數字有序排列，為預設值，（1、2、3、4）；a 按小寫字母有序排列，（a、b、c、d）；A 按字母大寫有序排列，（A、B、C、D）。i 按小寫羅馬字母有序，（i, ii, iii, iv）；I 按小寫羅馬字母有序，（I, II, III, IV）。 
    <ol>
<li>HTML</li>
<li>JS</li>
<li>PHP</li>
</ol>
  • dl標簽定義了定義列表（definition list），dl標簽用於結合 dt（定義列表中的項目）和 dd（描述列表中的項目）。 
    <dl>
<dt>電腦</dt>
<dd>用來計算的儀器 ... ...</dd>
</dl>

f、表格標簽

  • <table></table>為表格，在內部通過<tr>創建行，<tr>內部通過<td>創建單元格。可以將table的border屬性設為0來隱藏表格線。
  • cellpadding內容和表格邊線之間的距離
  • cellspacing單元格之間的間距。
  • rowspan(跨行)、colspan（跨列）進行單元格的合併<td rowspan colspan>,是td的屬性。 
     1 <table width="100%" height="193" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" bgcolor="#000000" background="">
 2 <tr>
 3     <th>標題</th>
 4     <th>標題</th>
 5 </tr>
 6 <tr>
 7     <!-- 合併橫向單元格 -->
 8     <td colspan="2" nowrap="nowrap">&amp;nbsp;</td>
 9 </tr>
10 <tr>
11     <td></td>
12     <!-- 合併縱向單元格 -->
13     <td rowspan="2"> </td>
14 </tr>
15 <tr>
16     <td height="16"> </td>
17 </tr>
18 </table>

g、表單標簽

  • form標簽定義提交方式、提交地址、表單字元集以及如何對其進行編碼，需要提交的表單一定要放在form標簽內。 
    <form id="form1" name="form1" method="post|get" enctype="multipart/form-data" action="提交到的地址"></form>
  • input標簽用於搜集用戶信息 
     1 <input name="userName" type="text" maxlength="5" size="100" value="asdfasdfasfd" />
 2 <!-- 密碼，輸入的字元會被掩碼（顯示為星號或原點） -->
 3 <input name="pwd" type="password" maxlength="5" size="100" value="" />
 4 <!-- 文件類型的表單，上傳文件時，form表單一定要設置為enctype="multipart/form-data" -->
 5 <input type="file" name="file" />
 6 <!-- 隱藏表單 -->
 7 <input type="hidden" name="country" value="China" />
 8 <!-- 提交 -->
 9 <input type="submit" name="Submit" value="提交" disabled="disabled" />
10 <!-- 重置 -->
11 <input type="reset" name="Submit2" value="重置" />
12 <!-- radio單選 -->
13 <input name="sex" type="radio" value="1" />男
14 <input name="sex" type="radio" value="2" checked="checked" />女
15 <!-- checkbox多選 -->
16 <input name="skill" type="checkbox" value="1" checked="checked" />PHP
17 <input name="skill" type="checkbox" value="2" />前端
18 <input name="skill" type="checkbox" value="2" />資料庫

    註：checked=”checked”可以簡寫成checked

  • label標簽為input元素定義標註，如果您點擊label元素文本，就會觸發此input控制項。

  • textarea標簽，設置文本區內的可見行數和寬度

　　禁止拉伸屬性：style="resize:none" 

  • <textarea name="content" cols="30" rows="10">大段文本輸入框</textarea>
  • button標簽定義一個按鈕 
    1 <!-- 提交按鈕 -->
2 <button type="submit" value="提交">提交</button>
3 <!-- 重置按鈕 -->
4 <button type="reset" value="重置">重置</button>
  • select標簽和option標簽下拉列表 
     1 <!-- 單選菜單列表框 -->
 2 <select name="user">
 3 <option value="1">ray</option>
 4 <option value="2" selected="selected">raykaeso</option>
 5 </select>
 6 <!-- 多選列表下拉框，shift加滑鼠單擊，可以連續選擇多個選擇，CTRL+滑鼠點擊，可以點擊多個。-->
 7 <select name="user" size="10" multiple="multiple">
 8 <option value="1">雷雪松</option>
 9 <option value="2" selected="selected">ray</option>
10 <option value="3">raykaeso</option>
11 </select>

    註:selected=”selected”可簡寫成selected，表示選中

四、其他HTML事項

  1. HTML標簽和屬性是不區分大小寫的，建議HTML標簽和屬性都小寫，屬性值必須用雙引號包圍。
  2. HTML標簽都是以開始標簽起始，以結束標簽終止。大部分HTML標簽都是成對出現的，稱為雙標簽，比如：p標簽、div標簽，也有的HTML標簽在開始標簽中結束的標簽，稱為單標簽，比如：hr標簽、br標簽。大多數 HTML 元素可擁有屬性，文本內容都是寫在開始標簽與結束標簽之間。
  3. HTML標簽之間儘量縮進與換行，每行代碼不要過長，方便閱讀和維護。
  4. HTML標簽使用必須符合標簽嵌套規則。禁止a標簽嵌套a標簽，p標簽嵌套div標簽。
  5. 建議不使用HTML已經廢棄的或者不贊成使用的標簽，少使用table佈局、iframe框架嵌套以及flash播放器。

五、表格、表單實例

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <title>Examples</title>
 7 <meta name="description" content="">
 8 <meta name="keywords" content="">
 9 <link href="" rel="stylesheet">
10 </head>
11 <body>
12     <form method="POST" action="1.php" enctype="multipart/form-data">
13         <table border="1" bordercolor="#F4F4F4" width="560" align="center" cellpadding="5" rules="all">
14             <caption>個人中心</caption>
15             <tr bgcolor="#F9F9F9">
16                 <td colspan="3"><b>1.會員登錄名和密碼</b></td>
17             </tr>
18             <tr>
19                 <td align="right">用戶名：</td>
20                 <td><input type="text" name="username" maxlength="15" disabled="disabled" value="Admin"></td>
21                 <td><input type="submit" value="檢測用戶名"><font color="#0E9EFF" size="1"> 5-15位</font></td>
22             </tr>
23             <tr>
24                 <td align="right">密碼：</td>
25                 <td><input type="password" name="password" maxlength="15"></td>
26                 <td><font color="#0E9EFF" size="1"> 密碼5-15位</font></td>
27             </tr>
28             <tr>
29                 <td align="right">確認密碼：</td>
30                 <td><input type="password" name="repassword" maxlength="15"></td>
31                 <td><font color="#0E9EFF" size="1"> 必須與密碼一致</font></td>
32             </tr>
33             <tr bgcolor="#F9F9F9">
34                 <td colspan="3"><b>2.基本信息</b></td>
35             </tr>
36             <tr>
37                 <td align="right">性別：</td>
38                 <td><input type="radio" name="sex" value="man" checked="checked">男<input type="radio" name="sex" value="woman">女</td>
39             </tr>
40             <tr>
41                 <td align="right">愛好：</td>
42                 <td>
43                     <input type="checkbox" name="like[]" value="游戲" checked="checked" />游戲
44                     <input type="checkbox" name="like[]" value="殺人" />殺人
45                     <input type="checkbox" name="like[]" value="放火" />放火
46                     <input type="checkbox" name="like[]" value="看書" />看書<br>
52                 </td>
53                 <td></td>
54             </tr>
55             <tr>
56                 <td align="right">學歷：</td>
57                 <td>
58                     <select name="edu">
59                         <option value="小學">小學</option>
60                         <option value="初中">初中</option>
61                         <option value="高中">高中</option>
62                         <option value="大學" selected="selected">大學</option>
63                         <option value="研究生">研究生</option>
64                     </select>
65                 </td>
66                 <td></td>
67             </tr>
68             <tr bgcolor="#F9F9F9">
69                 <td colspan="3"><b>3.自我介紹</b></td>
70             </tr>
71             <tr>
72                 <td algi="right">個性簽名：</td>
73                 <td><textarea name="qianming" cols="40" rows="10"  style="resize:none" ></textarea></td>
74                 <td></td>
75             </tr>
76             <tr>
77                 <td align="right">上傳頭像：</td>
78                 <td>
79                     <input type="file" name="touxiang">
80                     <input type="hidden" name="uid" value="90">
81                 </td>
82                 <td></td>
83             </tr>
84             <tr
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • HTML5CSS3特效-上下跳動的小球-遁地龍卷風
    (-1)寫在前面 我用的是chrome49，這個idea是我在stackoverflow上回答問題時看到了，多謝這位同行，加深了我對很多技術點的理解，最近剛到北京，忙碌了一兩天，在後續的日子里，會被安排面試，學習計劃只能按工作流走了，做完這個要看一個特別酷的效果，好激動! (0)效果演示 （1）實現 ...
  • 2016 Google host
    https://yunpan.cn/cvxaNNCE4xK7T （提取碼：639e） ...
  • JavaScript中的正則表達式
    首先正則表達式是什麼？ 正則表達式是一個自定義規則的表達式，用來匹配符合定義的規則的字元串。什麼意思？比如這是一個正則表達式：/\d/，\d的意思就是任意一個數字，所以這個正則表達式的意思就是匹配一個任意數字。大概明白了吧！ ...
  • oncopy="document.selection.empty()"跟oncopy="return false"什麼區別？
    實現效果一樣，禁止複製。 區別： oncopy="document.selection.empty()" 沒禁止，只是把它複製的內容，變成空了； oncopy="return false"是禁止複製。 ...
  • WEB前端工程師(實踐)製作天氣預報難度:簡單
    需要準備:jQuery Bootstrap 天氣預報API(本文中使用API可能會失效請靈活運用) CSS樣式可以你自己去寫這裡只提出jQuery 請求數據和解析JSON數據 上面是要用到的JSON數據格式 搭建界面略過 根據JSON中數據添加到HTML中 解析數據到HTML中 其中一定要註意 跨域 ...
  • KnockoutJS 3.X API 第五章 template綁定
    目的 template綁定(模板綁定)使用渲染模板的結果填充關聯的DOM元素。 模板是一種簡單方便的方式來構建複雜的UI結構 。 下麵介紹兩種使用模板綁定的方法: 本地模板是支持foreach，if，with和其他控制流綁定的機制。 在內部，這些控制流綁定捕獲元素中包含的HTML標記，並將其用作模板... ...
  • RegExp類型exec()方法的返回值說明
    之前看別人寫的插件經常會用到RegExp對象來驗證輸入，並且獲取一些那時我並不曉得是什麼東西的數組，來取值進行自定義的邏輯處理。今天學習了一下RegExp類型。終於有了一個初步的瞭解，至少不會看一會就感覺蒙圈了，記錄分享一下 ECMAScript通過RegExp類型來支持正則表達式 語法如下 其中 ...
  • jQuery div 下拉框焦點事件
    這章與上一張《jQuery input 下拉框焦點事件》類似 這章講述div的焦點事件如何使用 div的焦點事件與input的焦點事件區別在於 需要多添加一個屬性：tabindex; (Safari可能不支持) 這個屬性是可以讓鍵盤獲取到焦點事件，當然，我們只是用這個屬性來讓div有焦點而已；為了不 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類