HTML 4.01+5

1、Html結構：html>head+body

2、Html快捷鍵：!加Tab（在sublime中）

3、雙標籤：

①常用標籤

h1、h2、h3、h4、h5、h6

p、center（廢棄）、

b/strong、i/em/cite/dfn、s/del、u/ins、tt、sub、sup、big、small、address

pre、blockquote

沒有實際意義の標籤：code(郵編)/var/samp/abbr/span/time

②帶屬性標籤

ul>li //type：dise(實心圓)、cirle(空心圓)、square(實心方塊)

ol>li

type：1、a、A、i、I

start：’2’ //從2開始編號

reversed //倒序

liのvalue=’5’ //強制編號

font   //size(0-7)、color、face(字體）

dl>dt+dd

table>(tr+th)+(tr+td)

//tableの屬性：

border(邊框大小，像素)、cellspacing(內線大小)、cellpadding(數據與內線距離)、width、height、align、bgcolor、background

summary(表格描述，不顯示)、bordercolor<廢>、bordercolorlight(上、左側顏色)<廢>、bordercolordark(下、右側顏色)<廢>

rules(設置需要顯示內框線的位置,需要border>0：none(全不)、rows(橫)、cols(豎)、all(全)

frame(設需顯外線：above(上)、below(下)、lhs(左)、rhs(右)、hsides(上下)、vsides(左右)、void(全不)、border/box(全))

//tr、td、thの屬性

width、height、bgcolor、align、nowrap(換行)、colspan(擴展行數)、rowspan(擴展列數)

table>thead+tbody+tfoot //結構化表格

colgroup>col //直列化表格：align、valign、span、width、bgcolor(火狐中不可用)

img //src、alt(注釋、無圖時代顯)、width、height、border、vsapce(圖片與上下段的距離)、hspace(圖與左右)、align(圖片在文字的位置、t/b/l/r/middle)

4、為網址添加圖標：

<link rel='shortcut icon' href='*.ico' type='image/x-icon'>

5、超鏈接格式：

scheme：//host[：post]/path/filename

例：http：//www.163.com

file：///f：/img/pic.jpg

ftp：//192.168.1.1

mailto：//mdpx@163.com

../page/index.html

6、書籤：

建立書籤：<p name='m'>

引用書籤：<a href='#m'>

跳頁引用書籤：<a href='6.html#m'>

7、基準參考點：同DOS的CD命令

<head>

<base href='../../case'>

</head>

8、aの屬性

link：尚未被選 alink：點選未放開 vlink：已被點選

link='red' //尚未被選時是紅色

accesskey='p' //快捷鍵是alt+p

tabindex='2' //tab鍵序

target=’_blank’ //在新窗打開，_parent：父窗；_self：自身(默認)；_top：頂層

9、formの屬性

name、method(=get/post)、action='url'

10、inputの屬性 通用屬性

type：checkbox、radio、text、password、hidden、submit、reset、image、file

name

單屬性：autofocus、disabled

賦值屬性：autocomplacote=’true/false’(是否自動完成)，form=’c’ (掛載到名為c的form上)

10-1、input:text專用屬性

<input type=’text’

list=’m’

maxlength=’10’

pattern=’^[\d]{2,4}’ //正則表達式

placeholder=’輸入提示內容’ //輸入提示

readonly //只讀

disabled //禁用

size=’30’ //文本框寬度

value=’初始值’ //初始值

required > //必须输入一个值

<datalist id=’m’>

<option value=’苹果’>苹果</option>

<option value=’香蕉’ label=’香蕉’>

<option value=’黄梨’>

</datalist>

10-2、<input type=’password’>屬性同text

10-3、<input type=’number’>の屬性

list、readonly、required、value、min=10、max=100、step=2

10-4、<input type=’flie’ accept=’image/jpeg,image/png’ required>

11、下拉窗

<select [multiple] name='name' size='value'>

<option value='value' selected>值</option>

<optgroup label='value'>

<option value='value' selected>值</option>

</optgroup>

</select>

H5屬性：name、disabled、form、size、multiple、autofocus、required

12、文本域

<textarea cols='長度值' rows='寬度值' name=''>

內容

</textarea>

H5屬性：name、form、readonly、disabled、maxlength、autofocus、required、placeholder、wrap

wrap=’soft’ 為默認，hard時，會將換行符提交，而soft則不會。

13、圖像按鈕

按鈕中有圖片 button>img

圖片按鈕 input：image

14、form元件

<form>

<fieldset> //外邊框

<legend>標題</legend> //外邊框標題

//其他form元件

</fieldset>

</form>

禁用表單驗證：

<form action=’’ novalidate></form>

15、框架

frameset>frame

framesetの屬性： cols='' rows='' border=''  frameborder=1/0(是否顯示邊框) framespacing=''(頁面間距大小)

frameの屬性：src、frameborder、noresize(不許改變大小)、scrolling(是否有滾動條,yes、no、auto)

marginheight(窗體內容距頂底的距離)、marginwidth(窗體內容距左右的距離)

16、浮動窗體

<iframe> </iframe>

除了noresize外，與frameset相同

引用用name命名，在用target調用，多了 height和width

17、視頻插入

embedの屬性：<embed> </embed>

src、width、height

wmode：window(默認)、opaque(不透明)、transparent(背景透明)

allowFullScreen='ture/false' //是否允許全屏

objectの屬性： object>param

type：application/x-shockware-flash(flashの)

data：數據路徑

width、height

param用來給屬性賦值

name、value

舉例：

①<embed src="1.mp4" allowFullScreen='true' width="800" height="600" ></embed>

②<object data="1.mp4" width="800" height="500">

<param name="src" value="1.mp4">

<param name="autostart" value="true">

</object>

18、音頻插入

①<embed src="1.mp3" autostart='true' width="800" height="600" ></embed>

//autostart和autoplay的效果一樣

②<object data="1.mp3" width="800" height="500">

<param name="src" value="1.mp4">

<param name="autostart" value="true">

</object>

③背景音樂

<bgsound src='2.mp3' loop='3'> //loop循環次數

19、自動跳轉到指定網頁

<meta http-equiv='fresh' content='5000,http：//www.baidu.com'> //5秒後跳轉到www.baidu.com

20、活動文字

<marquee>文字</marquee>

屬性：

behavior：scroll(滾動)、slide(滾到邊停)、alternate(左右循環)

direction：left/right/down/up

height、width、vspace、hspace

scrollamount：播放速度

21、常用語句

onmouseover='this.stop()'

onmouseout='this.start()'

22、新雙標籤

mark：黃背景、黑色字

<ruby> 滿<rt>mǎn</rt> </ruby> //顯示為

<bdo dir=’rtl’>文字</bdo> //文字從右向左顯示，ltr為默認，從左向右

23、整體插圖

<figure>

<figcaption> 這是圖</figcaption>

<img src=’img.png’>

</figure>

24、文檔標籤

header(頭)、footer(尾)、nav(導航)、section(重要の主題或概念)、article(獨立)、aside(與周邊牽扯少)

hgroup(標題組)

25、進度條

meterの屬性

value=’80’ //顯示值

min=’10’ max=’100’ //邊界

low=’40’ height=’80’ //過高或過低時候，會顯示不同的顏色

optimum=’60’ //最佳值

progressの屬性

value=’50’ max=’100’

26、音視頻

<video [src=’1.mp4’] width=’800’ height=’1000’ muted autoplay controls poster=’1.jpg’ preload=’metadata’>

<source src=’1.mp4’>

<source src=’1.webm’>

<source src=’1.ogg’>

</video>

ps：src：可省，使用source替代，source可以兼容多個瀏覽器

poster：預覽圖

preload：預加載方式，none(啥都不加載，點開再加)、auto(自動加載，不播也加)、metadata(只加載第一幀)

音頻：

<audio autoplay controls preload=’auto’><source src=’1.mp3’></audio>

27、<button type=’submit’></button>の專有屬性

form、formaction、formenctype、formmethod、formtarget、formnovalidate //會替換掉form中的屬性

28、<meta charset=’utf-8’> //聲明字符編碼

自定義名與值（用於瀏覽器檢索）

<meta name=’author’ content=’man’> //作者

<meta name=’description’ content=’這’> //描述

<meta name=’keywords’ content=’a,c’> //關鍵字

<meta name=’generator’ content=’sublime’> //編輯器

模擬http標頭，5秒後自動跳到http://www.man.com

<meta http-equiv=’refresh’ content=’5;http://www.man.com’>

29、全局屬性：

accesskey=’n’ //alt+n獲取焦點

contenteditable=’true’ //可修改

dir=’rtl’ //right to left 從右到左，ltr 從左到右

hidden //隱藏

lang=’en’ //局部設置語言

title=’中華’ //元素の額外提示

tabindex=’1’ //獲取焦點の順序

30、特殊符號：®:® X:× “:" <:< ￥:¥ TIM:™

©:© ÷:÷ ‘:&apos >:> 空格:  &:&

HTML 4.01+5基礎知識的更多相关文章

  1. JavaScript基礎知識

    JavaScript基礎知識 1.標籤組使用 <script charset='utf-8' //設置字元集 defet //使腳本延遲到文檔解析完成,Browser已忽略 language=' ...

  2. CSS1-3基礎知識

    CSS1-3基礎知識 1.css排版 css在html內排版: <style type='text/css'> 標記名{} .類型名{} #ID名{} 標記名,.類型名,#ID名{} &l ...

  3. BootStrap基礎知識

    BootStrap基礎知識 1. .lead //突出 .text-left //文字居左 .text-right //文字居右 .text-center //文字居中 .text-justify / ...

  4. jQuery基礎知識

    jQuery基礎知識 $(function(){}) //jQuery先執行一遍再執行其他函數 $(document).ready(fn) //文檔加載完後觸發 1. 刪除$:jQuery.noCon ...

  5. Python开发 基礎知識 (未完代補)

    一.Python基本知識 1.Python屬高階語言,所編築的是字節碼 2.一般狀態statement 終止於換行,如需使用多數行編寫,可在行末加上 \,以表延續 但在 parentheses ( ) ...

  6. Linux基礎知識 —— open&close

    下面說一下在用戶空間調用open/close/dup跟驅動中的open和release的對應. 下面是測試驅動: #include <linux/module.h> #include &l ...

  7. Python开发 基礎知識 3.類別&方法 (bool & str) (未完待續)

    類別 可使用type()查看 內建 [ 布爾:bool (Boolen) 字串:str (String) 數字:int (Integer) 小數:float 列表:list 元祖:tuple 字典:d ...

  8. Python开发 基礎知識 2.變量 ( *arg, **kwargs )

    變量 *args 和 **kwargs ( *和**為本體,名稱為通俗的名稱約定 ) *args 用於函式定義. 可將不定數量的參數傳遞給一個函數,傳入函式的引數,會先以Tuple物件收集,再設定給參 ...

  9. Python 基礎 - 認識模塊

    什麼是模塊?簡單說就是別人寫好了一堆功能,封裝在一起. 模塊有分二種,一個是之前有提到的 標準庫,就是不需要透過額外的安裝就有的模塊 ,另一個叫 第三方庫,需要另外安裝才能使用的模塊 #!/usr/b ...

随机推荐

  1. 【Maven】构建war包时排除web.xml

    在使用maven构建项目的war包时,有时并不需要src/webapp/WEB-INF/下的一些文件. 这时可以通过maven-war-plugin创建配置来排除这些文件.下面贴出我平时使用的pom. ...

  2. VisualSVN安装图解

    VisualSVN安装教程... ----------------------------------- 参考网址:https://www.visualsvn.com/server/download/ ...

  3. WebGL开发入门

    ­­­Getting started with WebGL development WebGL开发入门 What is Unity WebGL? 什么是Unity WebGL? The WebGL b ...

  4. opencv VideoCapture使用示例

    在centos7下验证VideoCapture功能. 1 opencv处理视频时要使用ffmpeg,这里使用添加源的方式安装,分为3步 1.1 先安装EPEL Release,使用其他的repo源,所 ...

  5. Python初学——窗口视窗Tkinter

    此篇文章是跟着沫凡小哥的视频学习的,附上学习网址:https://morvanzhou.github.io/tutorials/python-basic/ 什么是 tkinter 窗口1.1 什么是 ...

  6. 【详细资料】ICN6211：MIPI DSI转RGB芯片简介

    ICN6211功能MIPI DSI转RGB,分辨率1920*1200,封装QFN48

  7. input[type="button"]与<button>的区别

    <button>标签  浏览器支持  所有主流浏览器都支持<button>标签.  重要事项:如果在HTML表单中使用button元素,不同的浏览器会提交不同的值.IE将提交& ...

  8. RMI和socket详解

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp58   一般来说,基于CS(client-server)软件架构的开发技 ...

  9. pip install python 如何快速安装模块

    之前python安装模块要在网络上下载,从python2.7.9之后,以及python3,python就自带pip 这个命令,能够快速的安装模块 1,  首先打开python的主文件夹 2.在主文件夹 ...

  10. JS查错小工具-三生有幸【推荐】

    H5和CSS语言在开发者官网上都有在线查错工具,同样的,更加复杂的JavaScript也需要一个查错工具,(别指望DreamWeaver了,debug功能做的太垃圾,还不如Firefox自带的强..) ...