w3cschool-html

ytmaylover發表於2019-01-17

基礎元素

文字格式化

加粗字型 / 斜體 / 大號字型 / 小號字型 / 下標 / 上標 / 插入字 / 刪除字 計算機輸出標籤:code/kbd/samp/var/pre 引用,引文,標籤定義 abbr/address/dbo/q/blockquote/cite/dfn

  • 格式字型
<b>加粗字型</b>
<i>斜體<i>
---------------

<strong>加粗字型</strong>
<em>斜體文字</em>

<big>字型放大</big>
<small>字型縮小</small>

<sub>下標</sub>
<sup>上標</sup>
複製程式碼
  • 預格式文字
<pre>
演示使用pre標籤。 這裡的空格 
回車
會保留輸出
</pre>
複製程式碼
  • 計算機輸出文字標籤
1.這些標籤常用於顯示計算機/程式設計程式碼

<code>計算機輸出格式</code>

<kbd>鍵盤輸入格式</kbd>

<tt>打字機文字</tt>

<samp>計算機程式碼樣本</samp>

<var>計算機變數</var>
 
複製程式碼
  • address 標籤
<adress>
 Written by <a href="#">Jon Doe</a>.<br> 
 Visit us at:<br>
 Example.com<br>
 Box 564, Disneyland<br>
 USA
</adress>
複製程式碼
  • 縮寫 /首字母縮寫
1.滑鼠移入縮略語上,title會展示全部的文字

<abbr title="etcetera">etc.</abbr>

<acronym title="world wide web">www</acronym>

複製程式碼
  • 文字顯示方向
1.下面的文字右向左顯示
<p>
<bdo>
我的文字是從右向左顯示的
</bdo>
</p>
複製程式碼
  • 塊飲用
<p>
這是外面的文字
  <q>
	 這是內部引入的文字
  </q>
<p>
複製程式碼
  • 標記刪除的文字/新替換的文字
1.del 標籤標識刪除 ins標識替換的內容
<p>
世界上最偉大的語言是<del>Swift</del> <ins>PHP</ins>
</p>
複製程式碼

a標籤連結

href / target / id 描述

  • href 指向的地址
1.href='/index.html' 指向本網站的一個頁面
2.href='https://wwww.xxx.com' 指向一個外部網址連結
3.href='#' 一個空連結

<a href='/index.html'>內部其他頁面</a>
<a href='http://www.may.com'>外部網址</a>
<a href='#'>空地址</a>
複製程式碼
  • target視窗開啟方式
1.預設是空,可以設定為_blank/_top
2.空本標籤頁開啟 _blank 是新開視窗開啟
3._top 情況下 如果網址是根目錄,並且返回最頂部
  
<a href='https://www.baidu.com' target=''>訪問連結1</a>
<a href='https://www.baidu.com' target='_blank'>訪問連結1</a>
<a href="http://www.w3cschool.cn/" target="_top">點選這裡!</a> 
複製程式碼
  • id 用於建立書籤,跳轉到一個ID相同元素位置
1.已經存在一個id為tips 的元素
2.三種方式跳轉到上面元素的位置
2.1 a標籤內 id='tips'
2.2 a href='#tips'
2.3 a href='//www.w3cschool.cn/html_links.html#tips'
複製程式碼
  • 傳送郵件
1.電子郵件連結 mailto:  
2.單詞之間的空格使用%20代替 以確保瀏覽器可以正常顯示
<p>下面的是電子郵件連結<p>
<a href='mailto:ytxinana@163.com?Subject=Hellow%20email' target='_top'>點選傳送郵件<a/>


3.更復雜的電子郵件 mailto:收件人?cc=抄送人&bcc=密送人&subject=主題&body=正文

<p>
這是另一個電子郵件連結:
	<a href="mailto:someone@example.com?
	cc=someoneelse@example.com&
	bcc=andsomeoneelse@example.com&
	subject=Summer%20Party&
	body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">傳送郵件!</a>
</p>
複製程式碼

頭部 heade 標籤

可以在頭部區域新增的元素標籤:title/base/meta/style/link/script/noscript

  • base 定義所有連結的URL
1.在head中配置 base 標籤 該標籤指定了所有的連結的預設url
2.在body中img標籤 設定的是相對地址,base中設定了URL,所有能正常訪問
3.在body中的a 標籤 ,設定了絕對地址,但是沒有設定taget跳轉方式,base標籤中設定了,點選連結,新開介面跳轉
<head>
	<base href="http://www.w3cschool.cn/statics/images/w3c/" target="_blank">
</head>
<body>
<img src='logo.png'>
<a href='http://www.baidu.com'>點選連結跳轉</a>
</body>
複製程式碼
  • meta 描述 html 文件的描述/關鍵詞/作者/字符集
1. 單標籤 格式是name='' content=''

<meta name='keywords' content='html,css,xmk.js'>

<meta name='description' content='html and css'>

<meta name='auton' content='HH'>

<!--美30秒重新整理當前頁面-->
<meta http-equiv='refresh' content='30'>
複製程式碼
  • link 元素

定義了文件與外部資源的關係 通常連結到樣式css

<head>
<link rel='stylesheet' type='text/css' href='mystyle.css'>
</head>
複製程式碼
  • style元素

定義了html文件的樣式檔案引用地址 在style 中定義css樣式

  • script元素

用於載入指令碼檔案 javascript

CSS百科及常用嵌入方式

內聯樣式 / 內部樣式 / 外部樣式

img影像

必須要有的兩個屬性 src / alt; width/height 寬高可選; w3cschool-html 是空標籤,包含屬性,並且沒有閉合標籤 <img src='url' alt='some_text'>

  • src屬性 可以是資料夾地址,可以是網路地址

  • alt屬性;替換文字; 圖片無法載入的時候,替換文字會告知資訊

  • width/height 設定影像的高度/寬度

  • align 文字和影像對其方式

1. align值可選 top/ bottom / middle / 預設是底部對其
2. html5 之後已經廢棄

<p>這是一些文字。 <img src="/statics/images/course/smiley.gif" alt="Smiley face" align="middle" width="32" height="32">這是一些文字。</p>
複製程式碼
  • float:left 圖片浮動的方式
1. style="float:right"
2. html5已經廢棄
<p>
<img src="/statics/images/course/smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> 一個帶圖片的段落,圖片浮動在這個文字的右邊。
</p>
複製程式碼
  • 建立圖片映像 分別監聽圖片點選的某一部分
1.原圖 usemap='#planemap'
2.<map> 定義影像地圖
3.<area> 定義影像地圖中可以點選區域
4. area 的屬性 alt/shanpe/coords/target/href/
 - rect 的時候 coords ='x1,y1,x2,y2' 
 - circ 的時候 coords ='x,y,radius'
 

<p>點選太陽或其他行星,注意變化:</p>
<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
  <area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
  <area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>

複製程式碼

table 表格

html表格結構
1.<table></table> 定義表格
   <thead></thead> 頭部
   <tbody></tbody> 內容
2.<tr></tr> 定義行
3.<th></th> 定義列  標題欄的列
4.<td></td> 定義列  普通的列

5.常用的標籤
table	定義表格   
th		定義頭
tr		定義行
td 		定義列
caption	表格的標題
colgroup 定義表格列的組
col 	定義列的屬性
thead	表格的頁首
tbody	表格主體
tfoot	表格的頁尾
複製程式碼
  • 表格邊框屬 boder='1'
  • 表頭 th
1.在th標籤中定義
2.設定主要的公共屬性 align / dir / width / height
<tr>
	<th>Header 1</th>
	<th>Header 2</th>
</tr>
複製程式碼
  • 設定沒有邊框的表格
    • 預設是沒有邊框的,或者<table border='0'>
  • 帶標題的表格 <caption>
  • 合併行/和並列 colspan='2' rowspan='2'
1.合併列 colspan="2"  th佔了2個列的位置,所以之後的tr中td 會多出來
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

2.合併行 rowspan="2" 合併2列 相當於和 下一行的 第一列合併在一起,所以下一行的td少一個
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>
複製程式碼
  • 表格內的標籤 一個td中 可以有 p標籤;可以ul/li;也可以巢狀一個table
<table border="1">
<tr>
  
  <td>
	   <p>這是一個段落</p>
	   <p>這是另一個段落</p>
  </td>
  
  <td>
	  這個單元格包含一個表格:
	   <table border="1">
		   <tr>
		     <td>A</td>
		     <td>B</td>
		   </tr>
		   <tr>
		     <td>C</td>
		     <td>D</td>
		   </tr>
	   </table>
  </td>
</tr>

<tr>
  <td>這個單元格包含一個列表
	   <ul>
		    <li>apples</li>
		    <li>bananas</li>
		    <li>pineapples</li>
	   </ul>
  </td>
  
  <td>HELLO</td>
</tr>
</table>
複製程式碼
  • 單元格邊距 cellpadding="10"
<table border='1' cellpadding='10'>
複製程式碼
  • 單元格間距 cellspacing='10'
1. border 設定table 和td 的border 都是1
2. 預設cellspacing是1,就是td之間 和table 之間 間距離 是1
3. 設定 cellspacing 為0 之後,border 會重疊顯示
<h4>沒有單元格間距:</h4>
<table border="1">
	<tr>
	  <td>First</td>
	  <td>Row</td>
	</tr>
	<tr>
	  <td>Second</td>
	  <td>Row</td>
	</tr>
</table>

<h4>單元格間距="0":</h4>
<table border="1" cellspacing="0">
	<tr>
	  <td>First</td>
	  <td>Row</td>
	</tr>
	<tr>
	  <td>Second</td>
	  <td>Row</td>
	</tr>
</table>

<h4>單元格間距="10":</h4>
<table border="1" cellspacing="10">
	<tr>
	  <td>First</td>
	  <td>Row</td>
	</tr>
	<tr>
	  <td>Second</td>
	  <td>Row</td>
	</tr>
</table>
複製程式碼

html列表 ul/ol (無序列表/有序列表)

1.無序列表 `ul/li`
  無序索引樣式 預設是disc / circle / square / none
  style='list-style-type:disc'
  style='list-style-type:circle'
  style='list-style-type:square'
2.有序列表 `ol/li` `start="50"`
  有序的索引預設 是number 可設定大些字母/小寫字母/大寫阿拉伯數字/小寫阿拉伯數字
   type='A' type='a' type='I' type='i'
3.自定義列表 dl dt dd 

4.總結列表標籤
ol		定義有序列表
ul		定義無序列表
li		定義列表項
dl		自定義列表
dt		自定義列表專案
dd		定義自定義列表的描述
複製程式碼
  • 自定義列表一二級
1.dt一級 dd二級
2.<dt><dd> 在其中數量不限、對應關係不限
<dl>
	
	<dt></dt>
	<dd></dd>
	
	<dt></dt>
	<dd></dd>
</dl>
複製程式碼
  • 巢狀列表
1最外層 預設是disc 
2層樣式是circle
3層樣式是square

<ul>
	<li>咖啡</li>
	<li><ul>
			<li>紅茶</li>
			<li>綠茶
				<ul>
					<li>中國</li>
					<li>歐洲</li>
				<ul>
			</li>
		</ul>
	</li>
	<li>牛奶</li>
</ul>
複製程式碼

html表單 form

from 屬性 action

1.表單本身看不見,文字框預設是20位元組寬度
2.表單是包含表單元素的區域,允許再表單中輸入內容,文字域 下拉選單,單選框,核取方塊
3.input 輸入標籤輸入型別 有 type='text' / type='password' / type='radio' / type='checkbox' / type='submit'
 
4.總結標籤
form		定義一個使用者輸入的表單
input		定義輸入域
textarea	定義文字域
lable		定義input元素的標籤,一般為輸入的標題
filedset	定義一組相關的表單元素,用外框包含起來
legend		定義了fieldset元素的標題
select		定義下拉選項列表
optgroup	定義選項組
option		定義下拉選單的選項
button		定義點選按鈕
datalist	執行預先定義的輸入空間選項列表
keygen		定義表單的金鑰生成器
output 		定義一個計算結果
複製程式碼
  • 輸入框表單 內容輸入
<form action=''>

Name:<input type='text' name='name'> <br>
Age:<input type='text' name='age'> <br>

Username:<input type='text' name='user'> <br>
Password:<input type='password' name='passw'> <br>

<input type='radio' name='sex' value='male'>
<input type='radio' name='sex' value='female'>

<input type='checkbox' name='vehicle' value='Bike'> I have a bike <br>
<input type='checkbox' name='vehicle' value='car'> i have a car

</form>
複製程式碼
  • 輸入框表單 推薦按鈕

點開submint 時 會講user='33232' 通過get方式傳入到php 檔案中,action.php 通過get方法獲取到傳入值



<form name='input' action='html_form_action.php' method='get'>
Username:<input type='text' name='user'>
<input type='submit' value='submit'>
</form>
複製程式碼
  • 下拉選單 select/option

預設選擇第一個,如果需要指定第三個,在第三個option中 寫入屬性selected

<form>
	<select name='cars'>
		<option value='volvo'>Volvo</option>
		<option value='saab'>Saab</option>
		<option value='fiat' selected>Fiat</option>
	</select>
</form>
複製程式碼
  • 文字域
1.cols 列數 控制一行顯示字數
2.rows 行數,控制最多顯示多少行。超出了之後scroll。
<form>
	<textarea rows='40' cols='80' >
		文字域很多內容ss..d,s.d.sdm.,f.f
	</textarea>
</form>
複製程式碼
  • 帶邊框的表單 fieldset
<form action=''>
	<fieldset>
		<legend>Personal Information:</legend>
		Name:<input type='text' size='30'><br>
		E-mail:<input type='text' size='30'><br>
		Data of Birth:<input type='text' size='10'>
	</fieldset>
</form>
複製程式碼
  • 用表單傳送電子郵件
<form action='mallto:someine@example.com' method='post' enctype='text/plain'>
	Name:<br>
	<input type='text' name='name' value='your name'><br>
	
	E-mail:<br>
	<input type='text' name='mail' value='your email'><br>
	
	Comment:<br>
	<input type='text' name='comment' value='your comment' size['50'><br>
	
	send-time:<br>
	<select name='time'>
		<option value='2016'>2016</option></br>
		<option value='2017'>2017</option></br>
		<option value='2018'>2018</option></br>
	<select>
	
	<input type=''submit value='Send'>
	<input type='reset' value='Reset'>
	
</form>
複製程式碼

html框架 iframe

內聯框架 一個文件中鑲嵌另一個文件,<iframe src='url'></iframe>

  • 語法:URL指向不同的網頁

  • 設定寬高 width / height

  • 移除邊框 frameborder='0'

  • 巢狀例項 a標籤重新整理 iframe

1.因為 a 標籤的 target 屬性是名為 iframe_a 的 iframe 框架,所以在點選連結時頁面會顯示在 iframe框架中
2.標準屬性
 - class	元素的類名
 - id 		規定元素的唯一地址
 - style	規定元素的行內樣式
 - title 	規定元素的額外資訊

<iframe src='/staic/demosource/demo.iframs.html' name='iframe_a'></iframe>
<p>
	<a href='https://www.baidu.com' target='iframe_a'>這是一個連結,taget指向上面的iframe<a/>
</p>
複製程式碼

html顏色 RGB

1.web 安全色216種 適應256色調色盤
2.顏色名 141 宗,(17標準顏色 加上124)
3.17種標準色:黑色,藍色,水,紫紅色,灰色,綠色,石灰,栗色,海軍,橄欖,橙,紫,紅,白,銀,藍綠色,黃色,
複製程式碼

html 指令碼 JavaScript

JavaScript 是可以插入的HTML頁面的程式設計程式碼 JavaScript 使HTML頁面具有更強的動態和互動性

  • script標籤
1.script 既可以包含指令碼語言,也可以用src屬性指向外部指令碼檔案
  - 如果使用src 屬性,則script是必須是空的
複製程式碼
  • noscript標籤
1.不支援 JavaScript 的瀏覽器會使用 noscript 元素中定義的內容(文字)來替代。
<noscript>抱歉,你的瀏覽器不支援 JavaScript!</noscript>
複製程式碼

html字元實體

某些字型是預留的 不能使用包含這些字元的文字 連結

比如 大於號,空格 結合音標符等

  • 列出常用的字元實體
顯示結果	描述			實體名稱		實體編號
 		空格			&nbsp;		&#160;
<		小於號		&lt;		&#60;
>		大於號		&gt;		&#62;
&		和號			&amp;		&#38;
"		引號			&quot;		&#34;
'		撇號 		&apos; (IE不支援)&#39;
¢		分			&cent;		&#162;
£		鎊			&pound;		&#163;
¥		人民幣/日元	&yen;		&#165;
€		歐元			&euro;		&#8364;
§		小節			&sect;		&#167;
©		版權			&copy;		&#169;
®		註冊商標		&reg;		&#174;
™		商標			&trade;		&#8482;
×		乘號			&times;		&#215;
÷		除號			&divide;	&#247;
複製程式碼

html URL

  • url 是一個網址 IP地址,dns解析
  • url 統一資源定位符
scheme + '://' + host + '.' + domain  + :port + path + filename
1.scheme  定義因特網服務的型別 http
2.host	 定義域主機 www
3.domain	因特網域名 mayt.cn
4.:port		埠:8080
5.path		定義伺服器上的檔案路徑 如果省略 文件必須位於網站的根目錄
6.filename  定義文件/資源的名稱
複製程式碼
  • URL 字元編碼
1.URL 只能使用 ASCII字符集
2.URL 編碼 使用%其後跟隨的16進位制來替換非ASCII字元
3.不能包含空格
複製程式碼

html速查列表


1.基本文件

<!DOCTYPE html>
<html>
<head>
<title>文件標題</title>
</head>
<body> 可見文字... </body>
</html>

2.基本標籤(Basic Tags)

<h1>最大的標題</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的標題</h6>
 
<p>這是一個段落。</p>
<br> (換行)
<hr> (水平線)
<!-- 這是註釋 -->

3.文字格式化(Formatting)

<b>粗體文字</b>
<code>計算機程式碼</code>
<em>強調文字</em>
<i>斜體文字</i>
<kbd>鍵盤輸入</kbd> 
<pre>預格式化文字</pre>
<small>更小的文字</small>
<strong>重要的文字</strong>
 
<abbr> (縮寫)
<address> (聯絡資訊)
<bdo> (文字方向)
<blockquote> (從另一個源引用的部分)
<cite> (工作的名稱)
<del> (刪除的文字)
<ins> (插入的文字)
<sub> (下標文字)
<sup> (上標文字)


4.連結(Links)

普通的連結:<a href="連結地址">連結文字</a>
影像連結: <a href="http://www.example.com/"><img src="URL" alt="替換文字"></a> 
郵件連結: <a href="mailto:webmaster@example.com">傳送e-mail</a>
書籤: <a id="tips">
提示部分</a> <a href="#tips">跳到提示部分</a>

5.圖片(Images)

<img src="URL" alt="替換文字" height="42" width="42">

6.表格(Tables)

<table border="1">
	<tr>
		 <th>表格標題</th>
		 <th>表格標題</th>
	</tr>
	<tr>
		 <td>表格資料</td>
		 <td>表格資料</td>
	</tr>
</table>

7.表單(Forms)

<form action="demo_form.php" method="post/get">
	<input type="text" name="email" size="40" maxlength="50"> 
	<input type="password"> 
	<input type="checkbox" checked="checked"> 
	<input type="radio" checked="checked"> 
	<input type="submit" value="Send"> 
	<input type="reset"> 
	<input type="hidden"> 
	
	<select> 
		<option>蘋果</option> 
		<option selected="selected">香蕉</option> 
		<option>櫻桃</option> 
	</select>
	
	<textarea name="comment" rows="60" cols="20">
	</textarea> 
</form>

8.實體(Entities)

&lt; 等同於 <
&gt; 等同於 >
&copy; 等同於 ©
複製程式碼

html媒體(Media)

音效 音樂 視訊 動畫

HTML外掛object/embed

  • object 元素
1.定義了嵌入的物件
2.具有區域性屬性 data type. height width usemap name form 
3.用於插入(java小程式 PDF閱讀器 Flash 播放器)

// 嵌入動畫
<object width='400' height='500' data='bookmark.swf'></object>

嵌入html
<object width="100%" height="100px" data="/statics/demosource/snippet.html"></object>

嵌入圖片
<object data='apic.png'></object>
複製程式碼
1.embed  和object標籤一樣
複製程式碼

HMTL 音訊(Audio)

多媒體標籤 
embed   定義內嵌物件 HTML4不支援 html5支援
object  內嵌物件
param   定義物件的引數 
audio   定義聲音
video   定義視訊
source  定義media元素的多媒體元素
track   規定media元素的字幕或其他包含文字的檔案 歌詞?
複製程式碼
  • 使用embed
1.embed在HTML4中無效
2.不同的瀏覽器對音訊格式的支援也不同。
3.如果瀏覽器不支援該檔案格式,沒有外掛的話就無法播放該音訊。
4.如果使用者的計算機未安裝外掛,無法播放音訊。
5.如果把該檔案轉換為其他格式,仍然無法在所有瀏覽器中播放

<embed height='50' width='300' src='horse.mp3'>
複製程式碼
  • 使用object
1.不同的瀏覽器對音訊格式的支援也不同。
2.如果瀏覽器不支援該檔案格式,沒有外掛的話就無法播放該音訊。
3.如果使用者的計算機未安裝外掛,無法播放音訊。
4.如果把該檔案轉換為其他格式,仍然無法在所有瀏覽器中播放
<object height='50' width='300' data='horse.mp3'></object>
複製程式碼
  • 使用Audio
1. <audio> 標籤來描述 MP3 檔案(Internet Explorer、Chrome 以及 Safari 中是有效的), 
2. 同樣新增了一個 OGG 型別檔案(Firefox 和 Opera瀏覽器中有效).如果失敗,它會顯示一個錯誤文字資訊:

<audio controls>
    <source src='horse.mp3' type='audio/mp3'>
    <source src='horse.ogg' type='audio/ogg'>
    Your browser does not support this audio format
</audio>
複製程式碼
  • 相容性解決辦法
1.html5 audio 會先嚐試以mp3 ogg 來播放音樂,如果失敗,將使用<embed>
<audio controls width='100' height='100'>
    <source src='horse.mp3' type='audio/mpeg'>
    <source src='horse.mp3 type=''audio/ogg'>
    <embed height='50' width='100' src='horse.mp3'>
</audio>
複製程式碼
  • 使用超連結
1.如果網頁只指向媒體檔案,大多數瀏覽器會使用輔助應用程式來播放檔案
<a href='horse.mp3'> click play the sound<a>
複製程式碼

HMTL 視訊(videos)

1.可以使用 embed object video 標籤

<video controls width='320' height='240'>
    <source src='movie.mp4' type='video/mp4'>
    <source src='movie.ogg' type='video/ogg'>
    <source src='movie.webm' type='video/webm'>
    
    <object data='movie.mp4'  width='320' height='240'>
    <object src='movie.swf'  width='320' height='240'>
    
</video>

2.ogg:帶有 Theora 視訊編碼和 Vorbis 音訊編碼的 Ogg 檔案
3.mp4:帶有 H.264 視訊編碼和 AAC 音訊編碼的 mp4 檔案 
4.webm:帶有 VP8 視訊編碼和 Vorbis 音訊編碼的 webm 檔案 
複製程式碼

html 擴充套件閱讀