前端HTML回顧
<html>標簽:定義HTML文檔
<body>標簽:定義文檔主體
<h1> - <h6> 標簽:定義HTML標題
<hr> 標簽:創建水平線
<!-- 這是一個註釋 --> 註釋
<p> 標簽:段落
<br />標簽:換行
HTML 鏈接
<a> 標簽:鏈接
默認情況下,鏈接將以以下形式出現在瀏覽器中:
一個未訪問過的鏈接顯示為藍色字體並帶有下劃線。
訪問過的鏈接顯示為紫色並帶有下劃線。
點擊鏈接時,鏈接顯示為紅色並帶有下劃線。
(1)href屬性:來描述鏈接的地址
<a href="url">鏈接文本</a>
(2)target 屬性:定義被鏈接的文檔在何處顯示
例:target="_blank": 鏈接將在新窗口打開
(3)id屬性:在一個HTML文檔書簽標記
例:插入ID <a id="tips">文字</a>
文檔中創建一個鏈接到ID部分 <a href="#tips">文字</a>
創建一個鏈接到其它文檔ID部分<a href="http://www.baidu.com/html-links.html#tips">文字</a>
註釋: 請始終將正斜杠添加到子文件夾。
例:href="http://www.baidu.com/html/
HTML <head> 元素
頭部區域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>
<title> 標簽:定義了不同文檔的標題
定義了瀏覽器工具欄的標題
當網頁添加到收藏夾時,顯示在收藏夾中的標題
顯示在搜索引擎結果頁面的標題
<base> 標簽:描述了基本的鏈接地址/鏈接目標,該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:
<base href="http://www.baidu.com/images/" target="_blank">
<link> 標簽:鏈接到樣式表(CSS)
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style> 元素:直接添加CSS樣式來渲染 HTML 文檔
<head><style type="text/css">body {background-color:yellow}p {color:blue}</style></head>
<meta> 標簽:提供了元數據不顯示在頁面上,但會被瀏覽器解析。
為搜索引擎定義關鍵詞:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
為網頁定義描述內容:
<meta name="description" content="免費 Web & 編程 教程">
定義網頁作者:
<meta name="author" content="Runoob">
每30秒中刷新當前頁面:
<meta http-equiv="refresh" content="30">
<script>標簽:用於加載腳本文件,如: JavaScript
HTML 圖像- 圖像標簽( <img>)和源屬性(Src)
<img> 是空標簽,只包含屬性,沒有閉合標簽。
<img src="url" alt="some_text">
(1)src 屬性: "source"源屬性的值是圖像的 URL 地址
(2)alt 屬性:用來為圖像定義一串預備的可替換的文本。
(3)height(高度) 與 width(寬度)屬性:用於設置圖像的高度與寬度。
HTML 表格
<table> 標簽:表格
<tr> 標簽:行
<th> 標簽:表頭
<td> 標簽:單元格
colspan="2":鏈接行的兩個段元格
<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <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>
HTML 列表
<ul> 標簽:無序列表
<ol> 標簽:有序列表
<li> 標簽:每個列表項的開始
<ul><li>Coffee</li><li>Milk</li></ul><ol><li>Coffee</li><li>Milk</li></ol>
<dl>標簽:自定義例表
<dl><dt>自定義列表項</dt><dd>自定義列表項的定義<dd><dt>自定義列表項</dt><dd>自定義列表項的定義<dd></dl>
HTML 區塊
<div> 元素:塊級元素,可用於組合其他 HTML 元素的容器。
<span> 元素:內聯元素,可用作文本的容器。
<table> 元素:作用是顯示表格化的數據。
塊級元素(block-level):在瀏覽器顯示時,通常會以新行來開始(和結束)。例: <h1>, <p>, <ul>, <table>
內聯元素(inline):在顯示時通常不會以新行開始。例: <b>, <td>, <a>, <img>
HTML 布局
<div>塊級元素或是<table>表格化的數據
HTML 表單和輸入
<form>標簽:表單
<input>標簽:輸入
文本域(Text Fields):缺省寬度是20個字符
<form>First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname"></form>
密碼字段:<input type="password">——密碼不會顯示,以星號或圓點替代
<form>Password: <input type="password" name="pwd"></form>
單選按鈕:<input type="radio">
<form><input type="radio" name="sex" value="male">Male<br><input type="radio" name="sex" value="female">Female</form>
復選框:<input type="checkbox">
<form><input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car </form>
提交按鈕:<input type="submit">
<form name="input" action="html_form_action.php" method="get">Username: <input type="text" name="user"><input type="submit" value="Submit"></form>
HTML 框架
<iframe>框架:在同一個瀏覽器窗口中顯示不止一個頁面。
iframe語法:<iframe src="URL"></iframe>
height 和 width 屬性:用來定義iframe標簽的高度與寬度。——屬性默認以像素為單位,
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
frameborder 屬性:是否顯示邊框——屬性值為 "0" 移除iframe的邊框
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
例:點擊鏈接,鏈接地址頁面顯示在iframe框架中
<iframe src="demo_iframe.htm" name="iframe_a"></iframe><p><a href="http://www.baidu.com" target="iframe_a">baidu.com</a></p>
註:name和target名字相同。
前端HTML回顧