HTML基礎 HTML重點知識總結
HTML
1、HTML概念
HTML：Hyper Text Mark-up Language超文字標記語言，是一種用於建立網頁的標準標記語言。通過元素標籤的形式建立Web站點，通過瀏覽器進行解析。
2、HTML基本語法結構
開始標籤 屬性 屬性值 內容 結束標籤；
<h1 id = "h1">hello world 1</h1>3、HTML文件結構
所用的HTML網頁檔案都是由<html></html>、<head></head>、<title></title>、<body></body>
<html> <head> <meta charset = "utf - 8"> <title>標題測試</title> </head> <body> <h1 id = "h1">hello world 1</h1> <h2>hello world 2</h2> <h3>hello world 3</h3> <h4>hello world 4</h4> <h5>hello world 5</h5> <h6>hello world 6</h6> </body> </html>
小結:
<html>…</html>標識網頁檔案的開始與結束，所有的Html元素，都要放在這對標記中;
<head>…</head>標識網頁檔案的頭部資訊，如標題、搜尋引擎關鍵字等;
<title>…</title>標識網頁檔案的標題;
<body>…</body>標識網頁檔案的主體部分;
4、HTML文件的註釋結構
<!--註釋的內容-->
5、HTML元素塊級元素、內聯元素
塊級元素(block):每一個塊級元素預設佔據一行，緊跟的塊級元素分配在下一行，可以自己定義寬高、邊距；常見的HTML
內聯元素(span):在同一行內可以有多個內聯元素，緊跟第一個內聯元素的後面，不可以自己定義寬高、邊距，要靠內容撐起來；常見的HTML內聯元素有:<a>、<b>、<img>、<input>、<select>、<strong>、<span>、<option>、<em>、<textarea>等；
6、HTML常用元素
a) html標題（<h1>到<h6>,數字越大，級數越小）
<html>
<head>
<meta charset = "utf - 8">
<title>標題測試</title>
</head>
<body>
<h1>hello world 1</h1>
<h2>hello world 2</h2>
<h3>hello world 3</h3>
<h4>hello world 4</h4>
<h5>hello world 5</h5>
<h6>hello world 6</h6>
</body>
</html>b) html水平線
<html>
<head>
<meta charset = "utf - 8">
<title>標題測試</title>
</head>
<body>
<h1>hello world 1</h1>
<hr></hr><!--水平線-->
<h2>hello world 2</h2>
</body>
</html>c) html註釋
<html>
<head>
<meta charset = "utf - 8">
<title>標題測試</title>
</head>
<body>
<h1>hello world 1</h1>
<hr></hr><!--水平線-->
<h2>hello world 2</h2>
<!--<h3>hello world 3</h3>為三級標題-->
</body>
</html>d) html段落<p>及段落換行<br/>
<html>
<head>
<meta charset = "utf - 8">
<title>標題測試</title>
</head>
<body>
<p>你好！中國</p>
<hr></hr>
<p>hello world</p>
<br/><!--空一行-->
<p>大家好<p/>
</body>
</html>e) html文字格式化
<html>
<head>
<meta charset = "utf - 8">
<title>標題測試</title>
</head>
<body>
<h1>hello world</h1>
<hr></hr>
<b>hello world 定義粗體文字</b>
<hr></hr>
<big>hello world 定義大號文字</big>
<hr></hr>
<em>hello world 定義著重文字</em>
<hr></hr>
<i>hello world 定義斜體文字</i>
<hr></hr>
<small>hello world 定義小號文字</small>
<hr></hr>
<strong>hello world 定義加重語氣</strong>
<hr></hr>
<sub>hello world 定義下標文字</sub>
<hr></hr>
<sup>hello world 定義上標文字</sup>
<hr></hr>
<ins>hello world 定義插入文字</ins>
<hr></hr>
<del>hello world 定義刪除文字</del>
<hr></hr>
</body>
</html>f) html超連結
<html>
<head>
<meta charset = "utf - 8">
<title>標題測試</title>
</head>
<body>
<a href = "http://www.baidu.com">百度</a>
</body>
</html>注意:<a>比較重要的屬性有兩個，分別是href、target；href指定超連結地址；target指定開啟方式；_blank 新頁面開啟；
g) html影象<img>
<html>
<head>
<meta charset = "utf - 8">
<title>標題測試</title>
</head>
<body>
<img src = "圖片的相對路徑"/>
</body>
</html>h) html表格<table>
<html>
<head>
<meta charset="utf-8"/>
<title>員工表</title>
</head>
<body>
<div class="emp_contaner">
<h3>員工資訊表</h3>
<table id="tab">
<tr>
<th>全選<input type="checkbox" id="allcheckbox" onclick="allCheckboxOne()"/></th>
<th>員工編號</th>
<th>員工名稱</th>
<th>員工部門</th>
<th colspan="2">操作</th>
</tr>
<tr>
<td><input type="checkbox" name="checkbox" onclick="selectSingle();"/></td>
<td>1001</td>
<td>張三</td>
<td>財務部</td>
<td><a href="#">刪除</a></td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox" onclick="selectSingle();"/></td>
<td>1002</td>
<td>李四</td>
<td>人事部</td>
<td><a href="#">刪除</a></td>
<td><a href="#">修改</a></td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox" onclick="selectSingle();"/></td>
<td>1003</td>
<td>王二</td>
<td>人事部</td>
<td><a href="#">刪除</a></td>
<td><a href="#">修改</a></td>
</tr>
</table>
</div>
</body>
</html>i) html列表<ul><ol>
<html>
<head>
<meta charset = "utf - 8">
<title>標題測試</title>
</head>
<body>
<h1 id = "h_list">列表演示</h1>
<hr>無序列表</hr>
<ul id = "list">
<li><a href = "department_全選框.html" target = "iframe">全選框</a></li><br/>
<li><a href = "Customer.html" target = "iframe">客戶註冊</a></li><br/>
<li><a href = "marray.htm" target = "iframe">婚禮承辦</a></li><br/>
<li><a href = "floatImage.htm" target = "iframe">浮動佈局</a></li><br/>
<li><a href = "TestJavaScript.htm" target = "iframe">練習Javascript</a></li><br/>
</ul>
<hr>有序列表</hr>
<ol>
<li><a href = "department_全選框.html" target = "iframe">全選框</a></li><br/>
<li><a href = "Customer.html" target = "iframe">客戶註冊</a></li><br/>
<li><a href = "marray.htm" target = "iframe">婚禮承辦</a></li><br/>
<li><a href = "floatImage.htm" target = "iframe">浮動佈局</a></li><br/>
<li><a href = "TestJavaScript.htm" target = "iframe">練習Javascript</a></li><br/>
</ol>
</body>
</html>瀏覽器顯示:
j) html表單<form>
<form>中的屬性：
action：後面加url 指定當提交表單時向何處傳送表單資料
method：get/post兩個值，get為明文 post為加密
name：指定表單的名稱
target：_blanket _self _parent _top 指定網頁開啟方式
<from>標籤中較為常用的標籤有<input> <select> <label> <button>
<fieldset> 標籤可以將表單內的相關元素分組。 會在相關表單元素周圍繪製邊框。
name 規定fieldset的名稱
form 值：form_id 規定fieldset所屬的表單
<legend> 定義了 <fieldset> 元素的標題。
<input>中最為常用的幾個屬性:
form 後面跟所屬form的id。規定所屬的form
required 值：required 規定必需在提交表單之前填寫輸入欄位。
disabled 值： disabled disabled 屬性規定應該禁用的 <input> 元素。
type:決定輸入型別
text 文字域
radio 單選按鈕
checkbox 複選框
submit 提交按鈕
password 密碼輸入
reset 重置
color 設定拾色器 html5
number 定義用於輸入數字的欄位（您可以設定可接受數字的限制）
range 定義用於精確值不重要的輸入數字的控制元件（比如 slider 控制元件）。您也可以設定可接受數字的限制
name:input元素的名稱
value：input元素的值
size：輸入欄位的寬度
pattern 規定用於驗證 <input> 元素的值的正則表示式。pattern 屬性適用於下面的 input 型別：text、search、url、tel、email 和 password
list 值為datalist的id 該屬性引用 <datalist> 元素，其中包含 <input> 元素的預定義選項。
autofocus 該屬性是一個 boolean 屬性，讓頁面載入後，input自動獲得焦點
<datalist> html5中的新特性 標籤規定了 <input> 元素可能的選項列表。<datalist> 標籤被用來在為 <input> 元素提供"自動完成"的特性。
使用者能看到一個下拉列表，裡邊的選項是預先定義好的，將作為使用者的輸入資料。與<option>標籤配合使用
<button> 定義一個點選按鈕
form 所屬的form表單
name button名稱
type
button 該按鈕是可點選的按鈕
reset 該按鈕是重置按鈕
submit 該按鈕是提交按鈕
<label>標籤為 input 元素定義標註（標記）
label 元素不會向用戶呈現任何特殊效果。不過，它為滑鼠使用者改進了可用性。如果您在 label 元素內點選文字，就會觸發此控制元件。
就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制元件上
for 值為某個元素的id 規定 label 與哪個表單元素繫結。
form form_id
<textarea>
name 規定textarea的名稱
form form_id 規定從屬的表單
cols 規定可見列數
rows 規定可見行數
<select>使用<option>標籤定義下拉列表的可用選項.常見的屬性：
name：指定select名稱
multiple：規定可選擇多個選項
<optgroup> 用於把相關的選項組合在一起。
label 為選項組規定描述。
<option> 常見的屬性：
value：指定送往伺服器的選項值
selected：只有一個值--selected 預設選項
<keygen> 定義了表單的金鑰對生成器欄位
form 所屬的表單名稱
name 名稱
keytype 使用的加密演算法
rsa 預設的演算法
dsa
es
<html>
<head>
<title>客戶資訊表</title>
<style>
table,td{
margin-top:50px;
border-collapse:collapse;
margin-left : auto;
margin-right : auto;
}
#tr1,#tr3,#tr5,#tr7,#tr9,#tr11,#tr13{
background-color:#F0F8FF;
}
div{
margin-left:50px;
}
a{
color:red;
}
</style>
</head>
<body>
<form action = "http://www.baidu.com" method = "post">
<table border = "1" >
<tr id = "tr1">
<td align = "right" width = "300" >客戶型別:</td>
<td align = "left" width = "800"><select id = "s1" value = ""/>
<option>大客戶</option>
<option>小客戶</option>
</td>
</tr id = "tr2">
<tr>
<td align = "right"><a>*</a>姓 名:</td>
<td align = "left"><input type = "text" value = "" id = "n1"/>
</td>
</tr>
<tr id = "tr3">
<td align = "right">性 別:</td>
<td align = "left"><select id = "sex" value = ""/>
<option>男</option>
<option>女</option>
</td>
</tr>
<tr id = "tr4">
<td align = "right">出生年月:</td>
<td align = "left"><input type = "text" value = "" id = "d"/></td>
</tr>
<tr id = "tr5">
<td align = "right">所屬公司:</td>
<td align = "left"><input type = "text" value = "" id = "c"/></td>
</tr>
<tr id = "tr6">
<td align = "right">職務:</td>
<td align = "left"><input type = "text" value = "" id = "j"/></td>
</tr>
<tr id = "tr7">
<td align = "right">電話:</td>
<td align = "left"><input type = "text" value = "" id = "T"/></td>
</tr>
<tr id = "tr8">
<td align = "right">地址:</td>
<td align = "left"><input type = "text" value = "" id = "a"/></td>
</tr>
<tr id = "tr9">
<td align = "right"><a>*</a>郵箱:</td>
<td align = "left"><input type = "text" value = "" id = "m"/></td>
</tr>
<tr id = "tr10">
<td align = "right">業務往來情況:</td>
<td align = "left"><input type = "textarea" value = "" id = "s"/></td>
</tr>
<tr id = "tr11">
<td align = "right">客戶照片:</td>
<td><input type = "file" value = "瀏覽...." id = "b"/></td>
</tr>
<tr id = "tr12">
<td align = "right">事件提醒:</td>
<td align = "left"><input type = "text" value = "" id = "t"/></td>
</tr>
<tr id = "tr13">
<td align = "right"></td>
<td align = "left"><input type = "submit" value = "提交" id = "sub"/><input type = "reset" value = "重置" id = "r"/></td>
</tr>
</table><br/>
<div>注意:名稱前面有<a>*</a>的為必填項</div>
</form>
</body>
</html>
相關推薦
HTML基礎 HTML重點知識總結
HTML 1、HTML概念 HTML：Hyper Text Mark-up Language超文字標記語言，是一種用於建立網頁的標準標記語言。通過元素標籤的形式建立Web站點，通過瀏覽器進行解析。 2、HTML基本語法結構 開始標籤 屬性 屬性值 內容 結束標籤； <
HTML基礎建站知識
不重復 鼠標 名稱 itl 表格 顏色 2個 type -a 目前互聯網上的網站在展現給用戶的界面都是需要用到HTML框架。html應用範圍很廣泛，不管是WEB前端還是後臺都需要懂得HTML的基礎；在HTML中經常要接觸到的就是標簽；那
Java基礎知識精華部分：javaSE重點知識總結
Java基礎知識精華部分 寫程式碼： 1，明確需求。我要做什麼？ 2，分析思路。我要怎麼做？1,2,3。 3，確定步驟。每一個思路部分用到哪些語句，方法，和物件。 4，程式碼實現。用具體的java語言程式碼把思路體現出來。 學習新技術的四點： 1，該技術是什麼？ 2，該技術有什麼特點
Java基礎概念性的知識總結
java開發 本地 關註 不包含 ava jre 操作 kit 計算機 屬於個人的所學的知識總結，不是全面的 1.JDK、JRE和JVM三者的區別 01.JDK：(Java Development ToolKit)Java開發工具包，是整個Java的核心。包括了Java
linux重點知識總結
重點總結第1章 計算機的組成cpu 硬盤 內存 電源第2章 內存內存是臨時存放文件的，斷電後數據丟失程序：將數據寫入到磁盤進程：正在運行的程序 在內存中讀取守護進程：一直運行著的程序第3章 提高用戶體驗大並發數據 首先數據寫入到內存存入磁盤 在磁盤中讀取小用戶 首先把數據存入磁盤從內存中讀取數據第
C++重點知識總結----字串
一、C風格字串 1、 C++通常通過char*型別的指標來操縱C風格字串，直到到達結束符null為止 2、指向同一個字串的指標可做算術運算 3、strlen()計算字元陣列的字元數，以’\0’為結束標誌，計算不為’\0’的陣列元素個數 4、printf語句在輸出字串時，將’\0
C++重點知識總結----陣列
記憶體分割槽： 堆：手動分配釋放，malloc，new來分配，free，delete來釋放 棧：編譯器自動分配釋放，存放函式的引數值、區域性變數的值等 全域性（靜態）儲存區：存放全域性變數和靜態變數，包括DATA段（全域性初始化區，存放初始化的全部變數和靜態變數）與BSS段（全域性未初
ZooKeeper重點知識總結
1.ZooKeeper的概念及特點 概念：ZooKeeper是一個典型的分散式資料一致性的解決方案，分散式應用程式可以基於它實現諸如資料釋出/訂閱、負載均衡、命名服務、分散式協調/通知、叢集管理、Master選舉、分散式鎖和分散式佇列等功能。 特點： 1.順序一致性：從同一個客戶端發
對《軟體測試》的重點知識總結
《軟體測試》——軟體測試綜述 目錄 - 第1章 軟體測試背景 軟體缺陷 本書講符合下列5個規則才能才叫軟體缺陷： 1.軟體未達到產品說明書表明的功能。 2.軟體出現了產品說明書指明不會出現的錯誤。 3.軟體功能超出產品說明書指
Java語言程式設計（基礎篇）知識總結
1. Java java的特點：簡單的、面向物件的、分散式的、解釋型的、健壯的、安全的、可移植的、高效能的、多執行緒的和動態的。 軟體的生命週期：需求、設計、編碼、測試、實施、運維（執行和維護） Java語言命名規則： 必須是由字母、數字、下劃線、或
SpringMVC重點知識總結
SpringMVC總結 1. SpringMVC簡介 MVC即模型-檢視-控制器（Model-View-Controller） Spring Web MVC是一種基於Java的實現了Web MVC設計模式的請求驅動型別的輕量級Web框架，即使用了MVC架構模式的思想，將web層進行職責解耦，基於請求驅動指的就
HTML基礎知識總結
博客園 arc 隱藏域 下拉列表框 後臺 羅馬 number control navigator HTML基礎知識總結 轉載文章- 原文地址：http://www.cnblogs.com/46ly/ 經過這段時間的學習，對於html的一些基礎知識有了一定的了解
html+css基礎知識總結2
一、css簡介 css---層疊樣式表（Cascading Style Sheets） 二、css特點 css實現了結構與表現相分離 三、樣式表的建立 內聯樣式（行間樣式，行內樣式）、內部樣式（嵌入式樣式）、外部樣式 1.內聯樣式 通過style屬性直接將樣式寫在標籤上 <h1 styl
HTML基礎知識總結——基礎標籤1
HTML的中文含義：超文字標記語言。HTML語言不是程式語言，而是標記語言 標記的基本要求 通常成對出現，但也有個別但標記 單詞應該小寫（大寫不會錯，但不規範） 養成縮排的習慣 標籤基本組成：<標籤名 屬性名=“屬性值”></標籤名> 標籤在
【HTML】HTML基礎知識總結
1.HTML概念 HTML，全稱HyperTextMarkupLanguage，超文字標記語言，是一種描述網頁的語言，而非程式語言，HTML使用標記標籤來描述網頁。 2.HTML常用標籤 html文件：<html></html> 文件頭部
HTML基礎知識個人總結
引號 使用 搜索 -c 微軟雅黑 span .cn 版本 dex 【學習的網站是主要是W3school，還加上一些其他搜索學習到的內容，僅在博客做個人整理】 一、標簽——尖括號圍成的關鍵詞，成對出現。 ※使用時必須符合標簽嵌套
html基礎知識
meta seo submit 情況 錨點 style 出現 設置 編程 目錄 什麽是html html的文檔結構 html的常用標簽 1.什麽是html html是超文本標記語言(HyperText Markup Language)。超文本表示可以鏈接文本 、圖片
HTML基礎知識（未完待續）
表示 部分 round sub 常用 內部 換行 jquery 頁面 一、HTML編輯工具：Sublime Text 二、HTML實體字符：1、（ 空格）： ； 2、（<） <； 3、（>）>； 4、（&）&
HTML 基礎知識
黃色 正常 body 無序列表 特殊符號 控件 黃色背景 tar 簽到 一、HTML 概述： 1.HTML 是一種 “超文本‘’ 標記語言，‘超文本’ 就是指頁面可以包含圖片、鏈接，甚至音樂、程序等非文字元素。 2. html 不是一種編程語言； 3.h
UI自動化（1）---HTML基礎知識
shortcut 直接 hold 拼搏 寂寞 方式 lis thread 尖括號 一、HTML基礎 1、HTML（超文本標記語言） html代碼實際上就是一套能夠被瀏覽器所識別的規則代碼，由一個個標簽組成。html代碼就是一大長串字符串，而這種字符串的格式正好能夠被瀏覽器所