整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、選中去除文本框文字，離開后顯示原有文字：
?<input name="key" type="text" id="key" value="關鍵詞" size="30" ??
? ? ? ? ? onmouseover=this.focus();this.select(); ?
? ? ? ? ? onclick="if(value==defaultValue){value='';this.style.color='#000'}" ??
? ? ? ? ? onBlur="if(!value){value=defaultValue;this.style.color='#999'}" style="color:#999" />
2、選中后方可編輯：
<input type="checkbox" name="tpbox" value="1" onclick="if(this.checked) {txtNo.disabled=false}else{txtNo.disabled=true}">你一定要幸福，我會好好的！
你的姓名：<input type="text" name="txtNo" size="20" value="選中前面的選項方可編輯" disabled>
3、點擊鏈接后方可編輯：
<a href="#" onclick="username.readOnly=false;alert('你好，歡迎使用！')">先點擊我哦！</a>
你的姓名：<input id="username" value="--請輸入--" size="30" readOnly>
4、輸入框從中間輸入：從中間輸入：
<input type="text" name="mid"style="text-align:center;">
5、輸入框變色：輸入框改變變色：
<input type="text" size="20" style="background-color:#FFFFFF"
? ? ? ? ? ? onfocus="style.backgroundColor='#FFFF00'"
? ? ? ? ? ? onblur="style.backgroundColor='#FFFFFF'">
6、輸入框只能輸入數字（用的是正則表達式）：你 的年齡：
<input onkeyup="value=value.replace(/[^\d]/g,'') "
? ? ? ? onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
7、輸入框只能輸入中文（用的是正則表達式）：你的中文名：
<input onkeyup="value=value.replace(/[ -~]/g,'')" onkeydown="if(event.keyCode==13)event.keyCode=9">
8、只能輸入英文和數字（用的是正則表達式）：
你 的昵稱：<input onkeyup="value=value.replace(/[\W]/g,'') "
? ? ? ? onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"
? ? ? ? onkeydown="if(event.keyCode==13)event.keyCode=9">
9、輸入框不能編輯，但表單可以獲得輸入框內的值：
<input type="text" value="afreon" onclick="alert('總和不能編輯！');" onfocus="this.blur()" />
<input type="text" value="afreon" onclick="alert(this.value);" readonly />
<input value="不可修改" ?readonly= "true" type="text"/>//:字體顏色為黑體
10、輸入框不能編輯，并且表單不能獲得輸入框內的值
<input value="不可修改" disabled="disabled" ?type="text"/>//:字體顏色為灰體
11、輸入框禁止輸入法：
<input onpaste="return false" style="ime-mode:disabled">
學習一門編程語言之前，了解它的特性，帶著對特性的好奇和疑問去學習是最快最好的學習方法。就像你知道某個地方有很多寶藏，帶著藏寶圖去尋找寶藏，你一定會大有收獲的。
編程語言就是人與計算機進行溝通的語言，在現實生活中，見什么人說什么話我們都很清楚，那在與計算機溝通的世界中，做什么事用什么編程語言溝通也是同樣的道理，前提就是我們要了解這些編程語言，在你需要選擇的時候做出正確的判斷，這也正是我寫此篇文章的意義。
HTML的英文全稱是 Hyper Text Marked Language，中文意思為超文本標記語言。
什么是超文本標記語言？我們先對超文本標記這五個字進行一一的拆分，然后去更好的理解它的意思。在理解超文本時，我們先來理解一下文本在我們的日常生活中代指的是什么東西?
文本包含了比如說你新建的一個Word文檔，一個txt文件，甚至一個Html文件。這三個文件有相同的地方， 也有不同的地方。
相同的地方在于不論是Word文檔，還是txt文件或者是Html文件，我們都能編寫文本的內容。Word文檔的不同在于我們可以在Word文檔中設置一些超鏈接，放一些圖片等操作。
txt文件就有一定的局限性，比如你放一張圖片或者設置超鏈接等這些行為都是不行。在Html文件中，可以存放文本、圖片、音頻、視頻等，甚至在網頁中見到的一些很炫酷的小游戲，都可以在Html文件中去編寫。
那接下來解釋下超文本。我們在Html文件中編寫代碼，其實編寫的是超文本。所謂超文本，大家應該能聯想到超，即超出文本，超文本比文本更高一級，它包含了我們常見的音頻、視頻以及超鏈接等。
這些被我們稱為超文本，在Html文件里面既能存放這些內容，也能存放文本內容，甚至是文章里的一級標題、二級標題、列表、選項等，都可以通過HTML代碼去編寫，這些內容我們就稱為超文本。
那么這些內容到底用哪些來去展現或展示呢？標記。
什么是標記呢？
用百度官網來分析一下“標記”，在網頁頁面上存放很多的內容，有超鏈接、圖片、輸入框等。我們先看看右上角的新聞字樣，這是一個超鏈接，我們看下源碼，打開后的樣子是這樣的：
我們把藍色的新聞部分，也就是我用紅框標記的部分復制一下，其他代碼刪除：
“新聞”被左邊和右邊的“a”包裹起來了，這就構成了超鏈接，這就像我們常見的書名號。如果我們單是輸出紅樓夢字樣，就是一個文本，但如果用《》書名號包裹起來，《紅樓夢》，大家都能知道這是一本書。
把包裹在“新聞”兩邊的a標簽對應包裹在紅樓夢兩邊的書名號來看很類似。用書名號這個標記把紅樓夢給包裹起來，就叫做書名，同理，用帶尖括號的a這個標記把新聞這個文本內容給包裹起來，在網頁中稱為超鏈接，這對帶尖括號的a就叫做標記。
標記是用HTML自己的語法規則把文本內容給包裹起來，這就叫做標記。這種標記的書寫也非常簡單，包裹在文本左邊的叫開始標記，包裹在文本右邊的叫結束標記。我們看到的網頁中顯示的一級標題、二級標題、超鏈接、圖片、音頻等內容其實學習它們所對應的標記就可以了。
接著我們來看下HTML從最原始到現在至今整個HTML語言的歷史發展過程。
HTML5的誕生，標記著互聯網時代的發展。比如在HTML5里面誕生的音頻、視頻、圖像、動畫等都做了新的標準，它對于瀏覽器的兼容也是得到了一定的處理，由此可見，HTML的整個歷史發展目前為止我們所使用的版本主要是99年誕生的HTML 4.01以及2014年誕生的HTML5。
時代在進步，科技在發展，這個超文本標記語言從HTML1.0版本發展到如今的HTML5版本，已經有了極大的改善。
在以前的HTML版本中，常用的是對文本的編輯、超鏈接、圖片等，其用途很廣泛，許多公司用來創建和發布消息，比如布告、技術手冊、各種信函等，都能用它來描述。
HTML是一門嚴謹的編程語言，有組織性、模塊化、規范化的。不過對于開發者而言，不同瀏覽器HTML的兼容性是考慮的問題。隨著HTML5的誕生，我們迎來了一個新的網絡世紀，各種動畫、音頻、視頻、圖像等炫酷的東西都可以做。還有各種小程序、小游戲以及App的開發應用數不勝數，其兼容性也得到了很大的改善，這意味著對前端的需求以及重視程度都有了極大的改變。
HTML是前端很重要的一環，我們學好它才能在前端大軍中齊頭并進，在各種應用小程序的使用中游刃有余，未來的美好生活就掌握在你的手中。
【END】大家在瀏覽網頁的時候，是否思考過這樣一個問題：怎樣才能制作出一個網頁呢？制作出一個網頁是很簡單的，只要知道什么是HTML并掌握HTML的基礎知識就可以制作出一個簡單的網頁，今天我就為講解HTML的入門及結構組成。
一、什么是HTML?
1、在我們開始學習HTML之前我們需要知道什么是HTML？
HTML的全稱為Hyper Text Markup Language，中文名稱為超文本標記語言，閱覽方式為網頁瀏覽器，同時HTML也被稱為網頁。
2、一個簡單的HTML文檔
二、HTML編輯器
我們在可以使用TXT文本文檔或者專業的HTML編輯器來編輯HTML。
1、記事本
① 創建一個TXT文本
② 輸入HTML代碼
③ 點擊文件—另存為—輸入名稱+“html”的后綴名即可得到你的第一個HTML文件。
④ 然后雙擊這個文件運行。
運行結果
2、專業編輯器
① Sublime Text
② HBuilder
③ Adobe Dreamweaver
④ CoffeeCup HTML Editor
這其中我比較推薦HBuilder這款編輯器，界面簡單，編輯起來很快。
三、HTML的組成部分
在上面的案例中我們可以看到HTML是由頭部（head）和身體（body）所組成的。
1、頭部（head）
通常包含標題（title），也就是一個網頁的名稱
網頁標題
2、身體（body）
body的部分是整個網頁的重要內容部分，讓人一眼就瀏覽到這個網頁的內容，可以插入文本、圖片、多媒體等內容。
四、HTML元素
l HTML元素是指以開始標簽起始，以結束標簽終止的元素：元素內容即為開始標簽與結束標簽之間的內容。
l <head></head>、<body></body>、<p></p>、<h1></h2>等這些都是HTML元素，在上面的案例中就有六個元素。
l 也有部分元素只有開始標簽，例如<br>,以開始標簽的結束而結束。
五、HTML的屬性
l 一般來說HTML的屬性就是HTML元素的屬性，屬性可以在元素中添加附加信息。
l 屬性總是以名稱/值對的形式出現，比如：name=”value”。
l 屬性一般描述于開始標簽。
l style中會有更多的屬性。
六、HTML格式化
HTML可定義很多供格式化輸出的元素，比如粗體字和斜體字。
HTML文本格式化標簽
標簽 | 描述 |
<b> | 定義粗體文本 |
<em> | 定義著重文字 |
<i> | 定義斜體字 |
<small> | 定義小號字 |
<strong> | 定義加重語氣 |
<sub> | 定義下標字 |
<sup> | 定義上標字 |
<ins> | 定義插入字 |
<del> | 定義刪除字 |
運行結果示意圖
HTML“計算機輸出”標簽
標簽 | 描述 |
<code> | 定義計算機代碼 |
<kdd> | 定義鍵盤碼 |
<samp> | 定義計算機代碼樣本 |
<var> | 定義變量 |
<pre> | 定義預格式文本 |
HTML引文、引用及標簽定義
標簽 | 描述 |
<abbr> | 定義縮寫 |
<address> | 定義地址 |
<bdo> | 定義文字方向 |
<blockquote> | 定義長的引用 |
<q> | 定義短的引用語 |
<cite> | 定義引用、引證 |
<dfn> | 定義一個定義項目 |
七、HTML超鏈接
超鏈接可以是圖片、文字、多媒體也可以是一個網址
示例：
結果：
點擊帶有下劃線的兩個字就可以進入某度的網站
八、HTML CSS
1、CSS是一種層疊樣式表，可以修飾html元素的樣式并可以精確地進行排版
2、CSS有三種方式：
l 內部樣式，在HTML元素中使用“style”屬性
l 內部樣式表，在頭部<head>區域使用<style>元素來包含CSS
l 外部引用，引用帶有后綴css的文件，示例：
html文檔
css文檔
如果你看到了這里，就說明你已經打開了制作網頁的大門啦~
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
