【學習筆記】HTML語法筆記
阿新 • • 發佈：2018-12-13
基本結構
HyperText Markup Language 超文字標記語言 超文字：通過建立連結，使訪問者簡潔從一頁面跳到另一頁面 標記：對文字進行註釋
<html> <head> //有關這個頁面的一些資訊 <title> This is the Title of the Page </title> </head> <body> <h1> This is the Body of the Page </h1> <p> Anything within the body of a web page is displayed in the main broser window </p> </body>
文字
結構化標籤：描述標題和段落 語義化標籤：表達特定含義（強調，引用，縮寫詞）
- 結構化標記
標題
<h1> This is a MainHeading </h1>
<h2> This is Level 2 heading </h2>
段落
<p> </p>
粗體，斜體，上標，下標
粗體：<b> </b>
斜體：<i> </i>
上標：4<sup>th</sup>
下標：co<sub>2</sub>
空白
當瀏覽器遇到兩個或兩個以上連續空格，或遇一次換行時，會將其看作一個空格（白色空間摺疊）
換行符，水平線
空元素只含有一個標籤
換行符 <br />
水平線 <hr />
- 語義化標記
強調
加強和強調:<strong> </strong>
斜體強調：<em> </em>
引用(對引用內容進行縮排)
<blockquote cite=" ">
<p> hello </p>
</ blockquote>
縮寫詞和首字母縮寫詞
<abbr title="Professor"> Prof </abbr>
引用和定義
引用： <cite> </cite>
定義：<dfn> </dfn>
設計者詳細資訊（內容顯示斜體）
<address>
<p><a href=" ">[email protected] </ a></p>
</address>
內容的修改
<p> It was the <del>worst</del> <ins>best</ins>
idea she had ever had </ p>
不準確卻又不予以刪除
<s> </s>
列表
有序列表
<ol> //建立有序列表
<li> </li>
<li> </li>
<li> </li>
</ ol>
無序列表
<ul>
<li> </li>
<li> </li>
</ul>
定義列表
<dl> //建立定義列表
<dt> </ dt>//定義
<dd> </ dd>//具體解釋
</ dl>
巢狀列表
<ul>
<li> </li>
<li>
<ul>
<li> </ li>
</ ul>
</ li>
</ ul>
連結
指向其他網站
<a href="http://www.empire.com"> Empire </ a>
// href:連結起始標籤， Empire:使用者單擊文字
指向同一網站中其他頁面連結
<a href="index.html">home</ a>
//"index.html":相對URL
EMAIL連結
<a href="mailto:[email protected]">Email</a>
//href特性中的mailto特性值
在新視窗中開啟連結
//target="_blank"
<a href="http:..." target="_blank"> Internet </a >
連結到當前頁面的某個特定位置
<a href="#arc_shot">Arcshot </a >
<h2 id="arc_shot">Arcshot</a>
連結到其他頁面的某個特定位置
<a href="http:/ www.hello.com /# bottom">
影象
新增影象
<img src=" " alt=" " title=" ">
//src:影象源 alt:影象描述 title:影象附加資訊
影象的寬度和高度
<img src=" " alt=" " width="600" height="200" />
圖形和圖形說明
<figure>
<img src=" " alt=" ">
<br />
<figcaption> </ figcaption>
</ figure>
表格
基本表格結構
<table>//建立表格，內容逐行編寫
<tr>//起始標籤(table row)行的開始
<td> </td>//每個單元格
</tr>
</ table>
表格的標題
<th scope="col">Saturday</th>
//scope="col"：表示列標題
scope="row"：表示行標題
跨列
<td colspan="2">hello</td>
//colspan="2":某個單元格跨越多列
跨行
<td rowspan="2">hello</td>
長表格
//<thead> </ thead> 標題
//<tbody> </ tbody>主體
//<tfoot> </ tfoot>腳註
表單
表單結構
<form action=" " method="get">
</ form>
//action：特性值 URL用來在使用者提交表單時接收表單中的資訊
//method：get:表單中的值被附加在由action特性所指定的URL末尾
post:表單中的值被放在HTTP頭資訊中進行傳送（允許使用者上傳檔案、非常長、資料庫操作、敏感資訊）
單行文字框
<form action=" ">
<p> Username:
<input type="text" name="username" size="15" maxlength="30" />
</ p>
</ form>
//name: 控制元件名稱
密碼框
<input type="password" name="password" size="15" maxlength="30" / >
文字域
<textarea name=" " col=" " rows=" "> Enter your comments </ textarea>
單選按鈕
<input type=" radio" name=" " value="rock" checked="checked" / > Rock
複選框
<input type="checkbox" name="service" value="itunes" checked="checked" / >iTunes
下拉列表框
<select name=" ">
<option value="ipod"> ipod </option>
<option value="radio"> Radio </option>
</ select>
多選框
<select name=" " size="3" multiple="multiple">
檔案上傳域
<input type ="file" name=" "/ >
提交按鈕
<input type="submit" name=" " value= "subcribe " / >
//value:按鈕上顯示的文字
影象按鈕
<input type="image" src=" " width="100" height=" " / >
按鈕
<button><img Src="images/add.gif" alt="add" width="10" height="10" / >Add</ button>
//允許文字和影象出現在button中
標籤表單控制元件
<input id="male" type="radio" name="gender" value="m">
<label for="male"> Male </label>
//宣告標籤控制元件標註的是哪個表單控制元件，與id特性相匹配，id特性值對某個元素進行唯一標識
組合表單控制元件
<fieldset>
<legend> Contact details </ legend>//組合表單標題
</ fieldset>
其他標記
註釋
<!-- -->
id特性
<p id=" ">
//用來從頁面上的其他元素中對一個元素進行唯一標識(CSS可以為ID單獨定義樣式)
class特性
<p class=" ">
//css 針對這一元素的規則
塊級元素
顯示時總是另起一行
<h1> <p> <ul> <li>
內聯元素
顯示時總是與他鄰近元素出現在同一行內
<a> <b> <em> <img>
將文字和元素集中在一個塊級元素中
若div元素使用id或class特性，則可建立CSS，指定div元素佔空間，或改變其內部所有元素外觀
<div id=" "> </div>
將文字和元素集中在一個內聯元素中
若包含若干內聯元素，可利用CSS控制元素中內容外觀
<span class=" "> </span>
內聯框架 （inline frame）
分割小視窗看到另一個網頁
<iframe width=" " height=" " src=" "> </iframe>
頁面資訊
<head>
<meta name=" " content=" " / >//空元素
</head>
後記
新人上路，旨在分享交流乾貨經驗，若有錯誤或者不當之處，請大家批評指正！ 更多說明請檢視 Doraengineer’s blog說明