HTML總結

什麼是HTML

是超文本標籤語言,

標籤

標籤有分單標籤雙標籤

單標籤: <br />

雙標籤: <b></b>

h1 ~ h6 : 標題h1最大

<title></title>: 瀏覽器標題

<br />換行

hr : 水平線

<p></p>: 段落

<b></b>,<strong></strong>: 文字加粗

<i></i>, <em></em>: 文字斜體

<s></s>, <del></del>: 加刪除線

<u></u>,<ins></ins>: 加下劃線

<div></div>, <span></span>: “方塊”,“盒子”, 用於佈局

• width: 設置寬
• height: 設置高

<img\ src="地址 " />: 圖片

• src: 設置地址
• alt:文本, 當圖片不顯示時顯示該文本
• title文本, 當鼠標停靠時顯示該文本

<a href=“地址”></a>: 超鏈接

• href: 超鏈接的地址, 當寫#或void(0)時不跳轉
  
  

<ul><li></li></ul> 無序列表

<ol><li></li></ol> 有序列表


<table><tr><td><td></tr></table>: 表格

• border: 邊框
• cellspacing: 單元格與單元格之間空白的距離
• cellpadding: 單元格與內容的空白距離
• width: 設置表寬
• height: 設置表高
• align: 設置位置
• left: 靠左邊
• center: 居中
• right: 靠右邊
• rowspan: 跨行合併
• colspan: 跨列合併
• caption: 表格標題
• <table><caption>這是表格的標題</caption></table>

字符集

<meta\ charset=“UTF-8”>

目前最常用的字符集是 UTF-8, 常用的有gbk和gb2312

gb2312 簡單中文 包括6763個漢字

BIG5 繁體中文 港澳臺等用

GBK包含全部中文字符 是GB2312的擴展，加入對繁體字的支持，兼容GB2312

UTF-8則包含全世界所有國家需要用到的字符

表單標籤

input 控件

​ type:

• text: 單行文本輸入框
• password: 密碼輸入框
• radio: 單選 按鈕
• checkbox:複選框
• button: 點擊按鈕
• submit: 提交按鈕
• reset: 重置按鈕
• mage: 圖片形式的提交按鈕
• name: 由用戶自己定, 控件的名字
• value: 由用戶自己定, 控件默認的文本
• size: 正數,控件在頁面顯示的大小
• checked: 定義複選框默認在那個選框
• maxlength:整數, 輸入框輸入的最大個數

textarea: 文本域

• <textarea>文本</textarea>

<select><option>1</option><option>2</option><option>3</option></select>下拉菜單

​ 至少需要在select內寫一對option,否則沒有效果

​ selected=“selected” 默認選中該項

表單域:

<form action="url地址" method="提交方式" name="表單名稱">
  各種表單控件
</form>

action: 指定傳遞給那個服務器的地址(要傳到那就寫那的地址)

method: 提交的方式, GET 或 POST

name: 表單的名字

H5的新特性

文檔類型設定

• document
  • HTML:
  • XHTML:
  • HTML5

字符設定

• ：HTML與XHTML中建議這樣去寫
• ：HTML5的標籤中建議這樣去寫

常用新標籤

• header：定義文檔的頁眉
• nav：定義導航鏈接的部分
• footer：定義文檔或節的頁腳
• article：標籤規定獨立的自包含內容
• section：定義文檔中的節（section、區段）
• aside：定義其所處內容之外的內容

常用新屬性

屬性****	用法****	含義****
placeholder****		佔位符提供可描述輸入字段預期值的提示信息
autofocus****		規定當頁面加載時 input 元素應該自動獲得焦點
multiple****		多文件上傳
autocomplete****		規定表單是否應該啓用自動完成功能
required****		必填項
accesskey****		規定激活（使元素獲得焦點）元素的快捷鍵

新增的type屬性值：

類型****	使用示例****	含義****
email****		輸入郵箱格式
tel****		輸入手機號碼格式
url****		輸入url格式
number****		輸入數字格式
search****		搜索框（體現語義化）
range****		自由拖動滑塊
time****
date****
datetime****
month****
week****