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. Python输入函数 raw_input( ) 与 input()

    一. raw_input() 在Python中,获取键盘输入的数据的方法是采用 raw_input 函数,那么这个 raw_input 怎么用呢? 注意: raw_input()的小括号中放入的是,提 ...

  2. Linux主分区，扩展分区，逻辑分区的联系和区别

    主分区,也称为主磁盘分区,和扩展分区.逻辑分区一样,是一种分区类型.主分区中不能再划分其他类型的分区,因此每个主分区都相当于一个逻辑磁盘(在这一点上主分区和逻辑分区很相似,但主分区是直接在硬盘上划分的 ...

  3. 前端UI框架《Angulr》入门

    Angulr 项目的名称为 Angulr,对!没错!就是少个 a,少个 a 就是它正确的拼写. 是一个以 Bootstrap 和 AngularJS 为基础,并使用了大量前端开源组件合成的一个前端UI ...

  4. 23个适合Java开发者的大数据工具和框架

    转自:https://www.yidianzixun.com/article/0Ff4gqZQ?s=9&appid=yidian&ver=3.8.4&utk=6n9c2z37 ...

  5. Spring框架——事务处理（编程式和声明式）

     一. 事务概述 ●在JavaEE企业级开发的应用领域,为了保证数据的完整性和一致性,必须引入数据库事务的概念,所以事务管理是企业级应用程序开发中必不可少的技术. ●事务就是一组由于逻辑上紧密关联而合 ...

  6. css预处理器之一---sass(一)

    慕课学习笔记: CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作. 通俗 ...

  7. 学习js函数--自执行函数

    我在写代码时候经常会在tpl的<script>里写类似的代码: $(function(){ alert("我好饿"); }); 刚开始的时候只知道写了它不需要调用,直接 ...

  8. box-sizing怪异盒子模型在移动端应用

    盒子模型不必多少,公认的盒子模型 总宽度=width + padding(padding-left,padding-right) + border(border-left,border-right) ...

  9. 使用Spring实现读写分离（ MySQL实现主从复制）

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt403 1.  背景 我们一般应用对数据库而言都是"读多写少&quo ...

  10. 正则语言引擎：一个简单LEX和YACC结合运用的实例

    本文先描述了LEX与YACC的书写方法.然后利用LEX与YACC编写了一个简单正则语言的引擎(暂时不支持闭包与或运算),生成的中间语言为C语言. 正则引擎应直接生成NFA或DFA模拟器的输入文件,但在 ...