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. Linux主分区，扩展分区，逻辑分区的联系和区别

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

  2. 新鲜出炉的JSON，拿走不谢！

    一.JSON简介 1.JSON全称是JavaScript Object Notation即JavaScript对象标记法. JSON是一种轻量级(Light-Weight).基于文本的(Text-Ba ...

  3. 2017-04-21周C语言学习笔记

    C语言学习笔记:... --------------------------------- C语言学习笔记:学习程度的高低取决于.自学能力的高低.有的时候生活就是这样的.聪明的人有时候需要.用笨的方法 ...

  4. 递归调用里的性能问题(js)

    说明 这是在codewars.com上刷的一道js练习题,在此做个记录 问题描述 The Fibonacci sequence is traditionally used to explain tre ...

  5. 最大流isap模板

    isap+bfs初始化+栈优化,点的编号从0开始: ; ; const int INF = 0x3f3f3f3f; struct Edge { int to, next, cap, flow; }ed ...

  6. Tensorflow开发环境配置及其基本概念

    Tensorflow开发环境配置及其基本概念 1.1. 安装Tensorflow开发环境 1.1.1. 安装pycharm 1.1.2. 安装pythe3.6 1.1.3. 安装Tensorflow ...

  7. C++语法细节笔记

    1.数据类型转换 当赋给无符号类型一个超出它表示范围的值时,结果是初始值对无符号类型表示数值总数取模后的余数. 把负数转换成无符号数类似于直接给无符号数赋一个负值,结果等于这个负数加上无符号数后的模. ...

  8. 常用的十大Python开发工具

    据权威机构统计,Python人才需求量每日高达5000+,但目前市场上会 Python 的程序员少之又少, 竞争小,很容易快速高薪就业.可能你并不太了解常用的十大Python开发工具都有哪些,现在告诉 ...

  9. 用JS制作一个信息管理平台

    首先,介绍一些需要用到的基本知识. [JSON] JSON是数据交互中,最常用的一种数据格式. 由于各种语言的语法都不相同,在传递数据时,可以将自己语言中的数组.对象等转换为JSON字符串. 传递之后 ...

  10. 九九乘法表实现---基于python

    # coding:utf-8"""九九乘法表"""for k in range(1,10):    for i in range(1,k+1 ...