從零開始HTML（一 2016/9/19）

来源:http://www.cnblogs.com/Qmelbourne/archive/2016/09/19/5886730.html
-Advertisement-
Play Games

就是準備跟著W3C上的教程過一遍HTML啦，邊看邊記錄更便於理解記憶吧~ 1、屬性 HTML 標簽可以擁有屬性。屬性提供了有關 HTML 元素的更多的信息。屬性總是以名稱/值對的形式出現，比如：name="value"。 屬性總是在 HTML 元素的開始標簽中規定。 屬性例子 1: <h1> 定義標 ...


 就是準備跟著W3C上的教程過一遍HTML啦，邊看邊記錄更便於理解記憶吧~

1、屬性

HTML 標簽可以擁有屬性。屬性提供了有關 HTML 元素的更多的信息。屬性總是以名稱/值對的形式出現，比如：name="value"。

屬性總是在 HTML 元素的開始標簽中規定。

屬性例子 1:

<h1> 定義標題的開始。

<h1 align="center"> 擁有關於對齊方式的附加信息。

屬性例子 2:

<body> 定義 HTML 文檔的主體。

<body bgcolor="yellow"> 擁有關於背景顏色的附加信息。

屬性例子 3:

<table> 定義 HTML 表格。

<table border="1"> 擁有關於表格邊框的附加信息。

 

完整的 HTML 參考手冊提供了每個 HTML 元素可使用的合法屬性的完整列表：

HTML參考手冊：http://www.w3school.com.cn/tags/index.asp

 

2.標題

標題（Heading）是通過 <h1> - <h6> 等標簽進行定義的。<h1> 定義最大的標題。<h6> 定義最小的標題。

<hr /> 標簽在 HTML 頁面中創建水平線。可用於分割元素

 

3.段落

段落是通過 <p> 標簽定義的。

① 使用空的段落標記 <p></p> 去插入一個空行是個壞習慣。用 <br /> 標簽代替它。

② 如果希望在不產生一個新段落的情況下進行換行（新行），使用 <br /> 標簽

 

4.樣式

style 屬性用於改變 HTML 元素的樣式。

style 屬性的作用是提供了一種改變所有 HTML 元素的樣式的通用方法。通過 HTML 樣式，能夠通過使用 style 屬性直接將樣式添加到 HTML 元素，或者間接地在獨立的樣式表中（CSS 文件）進行定義。

background-color 屬性為元素定義了背景顏色，如：<body style="background-color:yellow">

font-family、color 以及 font-size 屬性分別定義元素中文本的字體系列、顏色和字體尺寸。

text-align 屬性規定了元素中文本的水平對齊方式：<h1 style="text-align:center">This is a heading</h1>,可將center改為left,rght實現不同的效果。

 

5.引用

① HTML <q> 元素定義短的引用。瀏覽器通常會為 <q> 元素包圍引號。

<p>WWF 的目標是：<q>構建人與自然和諧共存的世界。</q></p>

② 用於長引用的 HTML <blockquote>，HTML <blockquote> 元素定義被引用的節。瀏覽器通常會對 <blockquote> 元素進行縮進處理。

<p>以下內容引用自 WWF 的網站：</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年來，WWF 一直致力於保護自然界的未來。
世界領先的環保組織，WWF 工作於 100 個國家，
並得到美國一百二十萬會員及全球近五百萬會員的支持。
</blockquote>

③ 用於縮略詞的 HTML <abbr> HTML <abbr> 元素定義縮寫或首字母縮略語。對縮寫進行標記能夠為瀏覽器、翻譯系統以及搜索引擎提供有用的信息。

 

6.CSS樣式引入方式

有以下三種方式來插入樣式表：

① 外部：當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

 

② 內部：當單個文件需要特別樣式時，就可以使用內部樣式表。你可以在 head 部分通過 <style> 標簽定義內部樣式表。

<head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

 

③ 內聯：當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。 使用內聯樣式的方法是在相關的標簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

 

 

7.鏈接

HTML 使用超級鏈接與網路上的另一個文檔相連。幾乎可以在所有的網頁中找到鏈接。點擊鏈接可以從一張頁面跳轉到另一張頁面。

我們通過使用 <a> 標簽在 HTML 中創建鏈接。

有兩種使用 <a> 標簽的方式：

  1. 通過使用 href 屬性 - 創建指向另一個文檔的鏈接
  2. 通過使用 name 屬性 - 創建文檔內的書簽

①  使用 Target 屬性，你可以定義被鏈接的文檔在何處顯示。如果把鏈接的 target 屬性設置為 "_blank"，該鏈接會在新視窗中打開。

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

 

② 鏈接到同一個頁面的不同位置：給該位置的標題加name屬性，然後添加鏈接，註意在添加鏈接時要在name的值前面添加"#",如：

<html>

<body>

<p>
<a href="#C4">查看 Chapter 4。</a>
</p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>

 

 

 8.圖像

圖像標簽（<img>）和源屬性（Src）。在 HTML 中，圖像由 <img> 標簽定義。<img> 是空標簽，意思是說，它只包含屬性，並且沒有閉合標簽。要在頁面上顯示圖像，你需要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。

語法：

<img src="url" />

 

瀏覽器將圖像顯示在文檔中圖像標簽出現的地方。如果你將圖像標簽置於兩個段落之間，那麼瀏覽器會首先顯示第一個段落，然後顯示圖片，最後顯示第二段。

 

① 替換文本屬性（Alt）

alt 屬性用來為圖像定義一串預備的可替換的文本。替換文本屬性的值是用戶定義的。

<img src="boat.gif" alt="Big Boat">

 

在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助於更好的顯示信息，並且對於那些使用純文本瀏覽器的人來說是非常有用的。

② 設置圖片背景

<body background="/i/eg_background.jpg">

 

 

③   align屬性可以設置圖片的位置，如：

<p>
<img src ="/i/eg_cute.gif" align ="left"> 
帶有圖像的一個段落。圖像的 align 屬性設置為 "left"。圖像將浮動到文本的左側。
</p>

 

 

④ height,width屬性設置圖片大小，如：

<img src="/i/eg_mouse.jpg" width="50" height="50">

 

 

⑤ 圖像鏈接：

<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>

 

 

⑥<area>使圖片不同區域鏈接不同網址：

 

map定義圖像地圖，將不同的區域量化

<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />

<map name="planetmap" id="planetmap">

<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />

<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />

</map>

 

 

9.表格

表格由 <table> 標簽來定義。每個表格均有若幹行（由 <tr> 標簽定義），每行被分割為若幹單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

 

下麵是一個兩行兩列的表格：

<table>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

 

① 如果不定義邊框屬性，表格將不顯示邊框。使用屬性border來定義邊框，如：

<table border="1">

 

 

②表格的表頭使用 <th> 標簽進行定義。大多數瀏覽器會把表頭顯示為粗體居中的文本。

<html>

<body>

<h4>表頭：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th>電話</th>
  <th>電話</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>垂直的表頭：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th>電話</th>
  <td>555 77 854</td>
</tr>
<tr>
  <th>電話</th>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

 

 

③空單元格問題：在一些瀏覽器中，沒有內容的表格單元顯示得不太好。如果某個單元格是空的（沒有內容），瀏覽器可能無法顯示出這個單元格的邊框。為了避免這種情況，在空單元格中添加一個空格占位符，就可以將邊框顯示出來，如：

<td>&nbsp;</td>

 

 

10.列表

HTML 支持無序、由序和定義列表

① 無序列表：

無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。

無序列表始於 <ul> 標簽。每個列表項始於 <li>。

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

 

列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。

 

② 有序列表：

同樣，有序列表也是一列項目，列表項目使用數字進行標記。

有序列表始於 <ol> 標簽。每個列表項始於 <li> 標簽。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。

③ 定義列表：

自定義列表不僅僅是一列項目，而是項目及其註釋的組合。

自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

 

 

④ 可以用type來改變每個列表項前面的標記：

<ul type="disc">  實心圓點
<ul type="circle"> 空心圓點
<ol type="A"> A,B,C...
<ol type="i"> 小寫羅馬

 

 

11.塊

大多數 HTML 元素被定義為塊級元素或內聯元素。塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束），內聯元素在顯示時通常不會以新行開始。

 

① <div>

HTML <div> 元素是塊級元素，它是可用於組合其他 HTML 元素的容器。

<div> 元素沒有特定的含義。除此之外，由於它屬於塊級元素，瀏覽器會在其前後顯示折行。

如果與 CSS 一同使用，<div> 元素可用於對大的內容塊設置樣式屬性。

<div> 元素的另一個常見的用途是文檔佈局。它取代了使用表格定義佈局的老式方法。使用 <table> 元素進行文檔佈局不是表格的正確用法。<table> 元素的作用是顯示表格化的數據。

② <span>

HTML <span> 元素是內聯元素，可用作文本的容器。

<span> 元素也沒有特定的含義。

當與 CSS 一同使用時，<span> 元素可用於為部分文本設置樣式屬性。

 

12.類

對 HTML 進行分類（設置類），使我們能夠為元素的類定義 CSS 樣式。

為相同的類設置相同的樣式，或者為不同的類設置不同的樣式。

 

① 分類塊級元素

HTML <div> 元素是塊級元素。它能夠用作其他 HTML 元素的容器。

設置 <div> 元素的類，使我們能夠為相同的 <div> 元素設置相同的類：

實例：

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>

<body>

<div class="cities">
<h2>London</h2>
<p>London is the capital city of England. 
It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>

</body>
</html>

 

 

 

② 分類行內元素，HTML <span> 元素是行內元素，能夠用作文本的容器。設置 <span> 元素的類，能夠為相同的 <span> 元素設置相同的樣式。

實例：

<!DOCTYPE html>
<html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>

<h1>My <span class="red">Important</span> Heading</h1>

</body>
</html>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 原生js封裝的一些jquery方法
    用js封裝一些常用的jquery方法 記錄一下 hasClass：判斷是否有class addClass：增加class removeClass：移除class ...
  • 列表組件抽象（4）-滾動列表及分頁說明
    這是我寫的關於列表組件的第4篇博客。前面的相關文章有： 1. 列表組件抽象（1）-概述 2. 列表組件抽象（2）-listViewBase說明 3. 列表組件抽象（3）-分頁和排序管理說明 本文介紹列表組件中我對滾動列表及滾動分頁的實現思路。 在pc端，通過滾動進行翻頁的需求非常常見；移動端也是，只 ...
  • IE8下 input標簽內padding失效
    在做網頁相容時 發現在ie8下的input內用padding失效 為了達到居中文字的效果 使用line-height可以解決問題 ...
  • 前端工程師如何搞定設計
    前端是一個承上啟下的職位，正因為其位置的特殊性導致其必須瞭解設計和後臺的一些基本知識。本文並非教大家如何取代設計的工作，而是講解前端如何更快更便捷的實現一些簡單的設計任務，在沒有設計師的情況下如何利用工具解決UI呈現的問題，讓工作事半功倍。 Photoshop使用 大多數前端工程師都有過切圖的經歷， ...
  • QRCode.js 生成二維碼
    QRCode.js 是一個用於生成二維碼圖片的插件。 github地址 QRCode.js 是一個用於生成二維碼圖片的插件。 github地址 github地址 github地址 github地址 線上實例 實例預覽 基礎示例 實例預覽 API 介面 使用方法 載入 JavaScript 文件 <s ...
  • 深入理解javascript原生拖放
    [1]拖放源 [2]拖放目標 [3]dataTransfer對象 [4]改變游標 ...
  • css3 偽對象選擇器添加幾何圖形文字的方法
    偽對象選擇器包含三種，分別為： E::selection E::after E::before 其中before和after必須與content結合使用，如果content想用幾何圖形要加 \ 進行轉義，content裡面的內容相當於文字，可以通過color改變顏色，font-size改變大小 等等 ...
  • html, xhtml和xml
    html, xhtml和xml 1.定義及特點： 1) html：Hyper Text Markup Language 超文本標記語言 是最早寫網頁的語言，但編碼不規範，主要用於控制數據的顯示和外觀。語法較為鬆散，不嚴謹的web語言； ① 簡易性：超級文本標記語言版本升級採用超集方式，從而更加靈活方 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類