HTML學習筆記(一)

HTML標籤

常用標籤

  • 標題:<h1></h1>...<h6></h6>
  • 段落:<p></p>
  • 換行:<br/>
  • 分割線:<hr/>
  • 格式化標籤:如下表格:
標籤 描述
<b> 定義粗體文本。
<big> 定義大號字。
<em> 定義着重文字。
<i> 定義斜體字。
<small> 定義小號字。
<strong> 定義加重語氣。
<sub> 定義下標字。
<sup> 定義上標字。
<ins> 定義插入字。
<del> 定義刪除字。
<s> 不贊成使用。使用 <del>代替。
<strike> 不贊成使用。使用 <del> 代替。
<u> 不贊成使用。使用樣式(style)代替。
  • 計算機輸出標籤:
標籤 描述
<code> 定義計算機代碼
<kbd> 定義鍵盤碼
<samp> 定義計算機代碼樣本
<tt> 定義打字機代碼
<var> 定義變量
<pre> 定義預格式文本
<html>
	<body>
		<pre>
			this is 
			pre tag
		</pre>
	</body>
</html>
  • 引用和術語定義
標籤 描述
<abbr> ect.
<acronym> WWW
<address>
定義地址
<bdo> 定義文字方向 方向
<blockquote>
定義長的引用(瀏覽器通常會對 <blockquote> 元素進行縮進處理。)
<q> 定義短的引用(瀏覽器通常會爲 <q>元素包圍引號)
<cite> 定義引用,引證
<dfn> 定義一個定義項目
  • 鏈接:<a>鏈接</a>示例

    • target 屬性:使用 Target 屬性,你可以定義被鏈接的文檔在何處顯示。

    • name 屬性:name 屬性規定錨(anchor)的名稱。當使用命名錨(named anchors)時,我們可以創建直接跳至該命名錨(比如頁面中某個小節)的鏈接,這樣使用者就無需不停地滾動頁面來尋找他們需要的信息了。

      <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
      
      <a href="#C4">查看 Chapter 4。</a>
      <h2><a name="C4">Chapter 4</a></h2>
      
  • 圖像:<img></img>

    • src:src 指 “source”。源屬性的值是圖像的 URL 地址;
    • alt:alt 屬性用來爲圖像定義一串預備的可替換的文本。替換文本屬性的值是用戶定義的,在瀏覽器無法載入圖像時,替換文本屬性告訴者她們失去的信息;
    • map:定義圖像地圖;
    • area:定義圖像地圖中的可點擊區域。
    <body background="/i/eg_background.jpg">#背景圖片
    <h2>未設置對齊方式的圖像:</h2>
    
    <p>圖像 <img src ="/i/eg_cute.gif"> 在文本中</p>
    
    <h2>已設置對齊方式的圖像:</h2>
    
    <p>圖像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>
    
    <p>圖像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>
    
    <p>圖像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>
    
    <p>請注意,bottom 對齊方式是默認的對齊方式。</p>
    <p>
    <img src ="/i/eg_cute.gif" align ="left"> 
    帶有圖像的一個段落。圖像的 align 屬性設置爲 "left"。圖像將浮動到文本的左側。
    </p>
    
    <p>
    <img src ="/i/eg_cute.gif" align ="right"> 
    帶有圖像的一個段落。圖像的 align 屬性設置爲 "right"。圖像將浮動到文本的右側。
    </p>
    <img src="/i/eg_mouse.jpg" width="50" height="50">
    
    <br />
    
    <img src="/i/eg_mouse.jpg" width="100" height="100">
    
    <br />
    
    <img src="/i/eg_mouse.jpg" width="200" height="200">
    
    <p>通過改變 img 標籤的 "height" 和 "width" 屬性的值,您可以放大或縮小圖像。</p>
    
    <p>
    您也可以把圖像作爲鏈接來使用:
    <a href="/example/html/lastpage.html">
    <img border="0" src="/i/eg_buttonnext.gif" />
    </a>
    </p>
    
    <p>請點擊圖像上的星球,把它們放大。</p>
    
    <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>
    
    <p><b>註釋:</b>img 元素中的 "usemap" 屬性引用 map 元素中的 "id" 或 "name" 屬性(根據瀏覽器),所以我們同時向 map 元素添加了 "id" 和 "name" 屬性。</p>
    
  • 表格:<table><tr><td></td></tr></table>

    • 表格由<table> 標籤來定義。每個表格均有若干行(由<tr>標籤定義),每行被分割爲若干單元格(由<td>標籤定義)。字母 td 指表格數據(table data),即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
    • border:設置表格邊框大小
    • th:表頭
    • colspan:設置跨列數
    • rowspan:設置跨行數
    • cellpadding:創建單元格內容與其邊框之間的空白
    • cellspacing:增加單元格之間的距離
    • frame:控制圍繞表格的邊框(box,above-線在上方,below-線在下方,hsides-現在左右兩側,vsides-現在上下兩側)
      在這裏插入圖片描述
  • 列表:

    • 無序列表:無序列表是一個項目的列表,此列項目使用粗體圓點(典型的小黑圓圈)進行標記。無序列表始於 <ul> 標籤。每個列表項始於 <li>
    • 有序列表:有序列表始於<ol>標籤。每個列表項始於 <li>標籤
    • 自定義列表:自定義列表以<dl>標籤開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始
    <ul>
      <li>咖啡</li>
      <li>茶
        <ul>
        <li>紅茶</li>
        <li>綠茶</li>
        </ul>
      </li>
      <li>牛奶</li>
    </ul>
    
    <dl>
       <dt>計算機</dt>
       <dd>用來計算的儀器 ... ...</dd>
       <dt>顯示器</dt>
       <dd>以視覺方式顯示信息的裝置 ... ...</dd>
    </dl>
    

    在這裏插入圖片描述

  • div 和 span

    • div:HTML<div>元素是塊級元素,它是可用於組合其他 HTML 元素的容器,<div>元素沒有特定的含義。除此之外,由於它屬於塊級元素,瀏覽器會在其前後顯示折行。
    • span:<span>元素是內聯元素,可用作文本的容器。<span> 元素也沒有特定的含義

使用 HTML5 的網站佈局

HTML5 提供的新語義元素定義了網頁的不同部分:

HTML5 語義元素
在這裏插入圖片描述

標籤屬性

應該避免使用下面這些標籤和屬性:

標籤 描述
<center > 定義居中的內容。
<font> 和 <basefont> 定義 HTML 字體
<s> 和 <strike> 定義刪除線文本
<u> 定義下劃線文本
屬性 描述
align 定義文本的對齊方式
bgcolor 定義背景顏色
color 定義字體顏色
  • class:對 HTML 進行分類(設置類),使我們能夠爲元素的類定義 CSS 樣式。爲相同的類設置相同的樣式,或者爲不同的類設置不同的樣式

    <!DOCTYPE html>
    <html>
    <head>
    <style>
      span.red {color:red;}
    </style>
    </head>
    <body>
    
    <h1>My <span class="red">Important</span> Heading</h1>
    
    </body>
    </html>
    
  • style屬性
    提供了一種改變所有 HTML 元素的樣式的通用方法。
    樣式是 HTML 4 引入的,它是一種新的首選的改變 HTML 元素樣式的方式。通過 HTML 樣式,能夠通過使用 style 屬性直接將樣式添加到 HTML 元素,或者間接地在獨立的樣式表中(CSS 文件)進行定義。

  • 文本常用屬性介紹

    • font-family:定義元素中文本的字體系列
    • color :定義文本顏色
    • font-size :定義文本大小
    <html>
    	<body>
    		<h1 style="font-family:arial;color:red;font-size:24px">一級標題</h1>
    		<p style="background-color:red">這是段落</p>
    		<h2 style="text-align:center">二級標題</h2> 	<!-- 淘汰了align屬性-->
    	</body>
    </html>
    
  • 背景

    • 背景顏色:background-color / bgcolor
    • 背景:background

CSS 樣式

通過使用 HTML4.0,所有的格式化代碼均可移出 HTML 文檔,然後移入一個獨立的樣式表。

如何使用樣式

當瀏覽器讀到一個樣式表,它就會按照這個樣式表來對文檔進行格式化。有以下三種方式來插入樣式表:

內部樣式表

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

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

外部樣式表

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

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

內聯樣式

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

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

佈局

div

<!DOCTYPE html charset="utf-8">
<html>
	<head>
		<style type="text/css">
			#header{
				background-color:black;
				text-align:center;
				color:white;
				padding:5px;
				margin:0px;
			}
			#nav{
				line-height:30px;
				background-color:#eeeeee;
				height:100%;
				width:100px;
				float:left;
				padding:5px;
			}
			#section{
				width:300px
				float:left;
				padding-left:10px;
			}
			#footer{
				background-color:black;
				color:white;
				clear:both;
				text-align:center;
				padding:5px;
			}
		</style>
	</head>
	<title>div佈局</title>
	<body style="background-color:red; padding:0px;">
		<div id="header">
			<h1>City Gallery</h1>
		</div>
		<div id="nav">
		London<br>
		Paris<br>
		Tokyo<br>
		</div>
		<div id = "section">
			<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>
			<p>
			Standing on the River Thames, London has been a major settlement for two millennia,
			its history going back to its founding by the Romans, who named it Londinium.
			</p>
		</div>
		<div id ="footer">
		Copyright ? W3Schools.com
		</div>
	</body>
</html>
<! DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			header{
				background-color:black;
				padding:10px;
				color:white;
				font-size:32;
				text-align:center;
			}
			nav{
				background-color:#eeeeee;
				width:100px;
				height:100%;
				line-height:30px;
				padding-left:10px;
				color:black;
				font-size:20;
				float:left;
			}
			section{
				width:100px;
				height:100%;
				background-color:red;
				float:left;
				padding-left:10px;
			}
			footer{
				background-color:black;
				padding:10px;
				color:white;
				font-size:24;
				text-align:center;
				clear:both;
			}
		</style>
	</head>
	<title>HTML語義佈局</title>
	<body>
		<header>標題</header>
		<nav>
			導航1</br>
			導航2</br>
			導航3</br>
		</nav>
		<section>
			<h1>章節目錄</p>
			<p>
				這是一個段落
			</p>
		</section>
		<footer>頁腳</footer>
	</body>
</html>

框架

通過使用框架,你可以在同一個瀏覽器窗口中顯示不止一個頁面。

實例

  • 垂直框架
<html>

<frameset cols="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

</html>
  • 水平框架
<html>

<frameset rows="25%,50%,25%">

  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">

</frameset>

</html>

標籤

框架結構標籤(<frameset>

  • 框架結構標籤(<frameset>)定義如何將窗口分割爲框架
  • 每個 frameset 定義了一系列行或列 rows/columns
  • rows/cols 的值規定了每行或每列佔據屏幕的面積

框架標籤(Frame)

基本的注意事項 - 有用的提示

假如一個框架有可見邊框,用戶可以拖動邊框來改變它的大小。爲了避免這種情況發生,可以在 標籤中加入:noresize=“noresize”。
爲不支持框架的瀏覽器添加 標籤。

內聯框架

示例:

<iframe src="URL"></iframe>
URL 指向隔離頁面的位置。
<html>
	<head></head>
	<title>內聯框架</title>
	<body>
		<h1>一級標題</h1>
		<iframe name = "frame" src="div_layout1.html" width="100px" height="100px" frameborder="0"></iframe>
		<hr>
		<p>
			<a href="https://www.baidu.com/" target="frame">測試內聯框架</a>
		</p>
	</body>
</html>

常用屬性:

  • width:設置寬度
  • height:設置高度
  • frameborder:設置邊框大小,0表示去除邊框

HTML表單

form表單

HTML 表單用於收集用戶輸入。<form> 元素定義 HTML 表單:

<form>
	for elements
</form>

form 屬性

  • action:action 屬性定義在提交表單時執行的動作。向服務器提交表單的通常做法是使用提交按鈕。

  • method:method 屬性規定在提交表單時所用的 HTTP 方法(GET 或 POST)

    	<form action="" method="GET">
    		#如果表單提交是被動的(比如搜索引擎查詢),並且沒有敏感信息
    		#當您使用 GET 時,表單數據在頁面地址欄中是可見的
    	</form>
    	或
    	<form action="" method="POST">
    		#如果表單正在更新數據,或者包含敏感信息(例如密碼)
    		#POST 的安全性更加,因爲在頁面地址欄中被提交的數據是不可見的。
    	</form>
    

form表單屬性列表
在這裏插入圖片描述

表單元素

如果要正確地被提交,每個輸入字段必須設置一個 name 屬性。

input

<input> 元素是最重要的表單元素。根據屬性 type不同可區分爲不通的類型。

<input type="text"/> #文本輸入

根據其type屬性可區分成不同的類型

  • text:文本輸入框

  • radio:單選按鈕

    		<h2>單選按鈕</h2>
    		<input type="radio" value="男"/>男<br/>
    		<input type="radio" value="女"/>女
    
  • submit:提交按鈕

  • password:輸入顯示內容爲密碼

  • 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> 
    

    在這裏插入圖片描述

  • button:等價於<button>,按鈕

HTML5新增輸入類型

  • color:選擇顏色值
  • date:選擇日期
  • datatime:選擇日期時間
  • datetine-local:選擇日期時間,無時區
  • email:輸入郵箱
  • month:選擇月份
  • number:輸入只能是數字
  • range:輸入自定義範圍
    在這裏插入圖片描述
  • search
  • tel:輸入電話
  • time:輸入時間
  • url:輸入url地址
  • week:選擇周

input屬性

  • value:規定輸入的初始值

  • readonly:輸入字段爲只讀

    <input type="text" name="firstname" value="John" readonly>
    
  • disabled:禁用

    <input type="text" name="firstname" value="John" disabled>
    <br>
    
  • size:輸入字段尺寸,以字符計算

  • maxlength:字段最大長度

HTML5 屬性
HTML5 爲 <input> 增加了如下屬性:

  • autocomplete

  • autofocus
    autofocus 屬性是布爾屬性。
    如果設置,則規定當頁面加載時 元素應該自動獲得焦點。

    First name:<input type="text" name="fname" autofocus>
    
  • form

  • formaction

  • formenctype

  • formmethod

  • formnovalidate

  • formtarget

  • height 和 width

  • list :list 屬性引用的 <datalist> 元素中包含了 <input> 元素的預定義選項。

  • min 和 max
    min 和 max 屬性規定 元素的最小值和最大值。
    min 和 max 屬性適用於如需輸入類型:number、range、date、datetime、datetime-local、month、time 以及 week。

  • multiple:文件選擇

    Select images: <input type="file" name="img" multiple>
    
  • pattern (regexp)

  • placeholder :placeholder 屬性規定用以描述輸入字段預期值的提示(樣本值或有關格式的簡短描述)

  • required

  • step

select元素(下拉列表)

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

在這裏插入圖片描述

textarea 文本域

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

在這裏插入圖片描述

button

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

datalist

<datalist> 元素爲 <input> 元素規定預定義選項列表。

用戶會在他們輸入數據時看到預定義選項的下拉列表。

<input> 元素的 list 屬性必須引用 <datalist> 元素的 id 屬性。

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

在這裏插入圖片描述

HTML 事件

詳見 W3school

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章