HTML+CSS複習之HTML基礎篇
一些說明
寫在前面：HTML和CSS，當你瞭解全部規則後，你應該多寫頁面並記錄你出現的問題，這纔是學習HTML和CSS的最佳方法javascript
這是我學習一段時間以後，再次回顧HTML，但願你們也對HTML有不同的認識css
我把HTML標籤分紅兩大類，重要的和不重要的，但願你們都能從衆多標籤中解脫出來！！html
本文的宗旨，簡明扼要！最快入門 HTML (把我給出的代碼不斷地敲，而且適當加點個性化的東西，HTML標記語言你就入門了)html5
溫故而知新java
HTML，超文本標記語言（HyperText Markup Language）只是標記，沒有任何邏輯，學習起來會很快的編程
結構以下：canvas
這裏寫了能夠出如今head內的全部標籤
<!DOCTYPE html> //HTML5的文檔聲明，如今都用這種方式了
<html> //文檔的根
<head> //文檔的頭部信息
<meta charset="utf-8"> //表示該文檔是以UTF-8編碼的
<title>菜鳥教程(runoob.com)</title> //頁面標題
//爲搜索引擎定義關鍵詞:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
//爲網頁定義描述內容:
<meta name="description" content="Free Web tutorials on HTML and CSS">
//定義網頁做者:
<meta name="author" content="Hege Refsnes">
//每30秒中刷新當前頁面:
<meta http-equiv="refresh" content="30">
<style>a{CSS樣式}</style>
<link rel="stylesheet" type="text/css" href="xxx.css">
<script>腳本</script>
<script type="text/javascript" src="xxxx.js"></script>
<noscript></noscript>
//該標籤做爲HTML文檔中全部的連接標籤的默認連接:
<base href="http://www.runoob.com/images/" target="_blank">
</head>
<body> //網頁主題部分
<h1>個人第一個標題</h1>
<p>個人第一個段落。</p>
</body>
</html>
關於文檔聲明：(瞭解便可，沒什麼做用)
HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
tips:註釋長啥樣？<!-- html content-->瀏覽器
直擊主題：HTML標籤
來，咱們來看看HTML的標籤都有哪些ruby
h1 ~ h6 , p , a , img , button , caption , dd , dl ,dt, ul ,li , fieldset , from , iframe , input , label , select , table td ,tr , tbody , tfoot , thead ，hr , html , body head title meta style script ,input , label , legend , div , span 框架
基本上你只要看到這個標籤，懂這個標籤通常是怎麼用的就OK了！
重點掌握的標籤有（一些特別基礎性的標籤不在此以內）
超連接標籤a：只要是a標籤能包含啥，那個被包含的都是超連接
a的經常使用方法以下：
一、<a href = "http://xxxx.xxx" target="_blank"> 二、電子郵件 <a href="mailto:someone@example.com?Subject=Hello%20again" target="_top"> 三、取消連接 <a href="javascript:void(0)"> 四、錨點 <a href="#tips">能夠連接到本頁面id爲tips的元素，用於頁面內跳轉 <a href="javascript:void(0)">hello</a>
<p>圖像標籤img:</p>
img[src,title,alt,width,height]
<img src="xxxx.png" width=300 height=200 title="pic" alt="person">
alt : 當圖片沒法加載時替代圖片，通常都要寫的
一、圖片一個特殊用處(結合map,基本不用)
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<p>表格</p>
通常咱們寫表格的時候，table>tr>td(th)，採用這三層結構
一個完整的表格結構是這樣的
<table>
<caption></caption>
<thead>
<tr>
<th></th>
.....
</tr>
</thead>
<tbody>
<tr>
<td></td>
......
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
......
</tr>
</tfoot>
</table>
屬性注意
<table border=0> //設置整個table的邊框，外框和內框 <table cellpadding="10"> //至關於設置這個表格每一個單元格的 padding 爲 10px <table cellspacing="10"> //至關於設置這個表格每一個單元格的 margin 爲 10px <th colspan="2"> // 這個單元格跨了兩列 tr也能夠用 <th rowspan="2"> //這個單元格跨了兩行 tr也能夠用
列表
有序列表
<ol>
<li></li>
<li></li>
...
</ol>
無序列表
<ul>
<li></li>
<li></li>
...
</ul>
無序列表和有序列表，能夠更改前面的標記類型，可是不經常使用，採用圖片或者iconfont居多，能夠採用list-style-image：url("xxx.png) ；來設置，這個在CSS學習筆記中會詳細說明
列表支持嵌套
自定義列表
dl 注意一個dl裏面最好只有一個dt，行業潛規則 原意是解釋名詞， dt 通常一條信息，只解釋一個名詞,也就是一個dt dd dd dd dl
div -- 最具備表明性的塊級標籤
一般用於佈局，很常見的div+css佈局，爲何採用div呢？由於div是一個容器元素，div內部能夠包含不少標籤，
div內部能夠有div的
div是塊級標籤，注意，任何塊級標籤寫在頁面上，寬度都是佔據父容器的百分之百，除非你設置塊級元素的寬度，具體的怎麼排版，請看這篇：HTML+CSS複習之CSS基礎篇
span -- 最具備表明性的行級標籤
span是一個行級標籤，所謂行級標籤的意思是，內容有多大，我在頁面中佔據的位置就有多大（內容+padding）
input --表單
表單的屬性特別多，能夠去W3C看一遍，這裏就不詳細講了，畢竟是寫個入門啦。表單主要用做數據傳遞，因此對錶單的理解，就是要搞明白，表單的那些屬性是怎麼回事
一個表單完整書寫
<form action="url" method="post/get" >
//文本框
<input name="username" type="text" />
//密碼框
<input name="password" type="password" />
//單選框（注意name要相同,是同一類行的選擇，以便後臺拿到數據）
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
//多選框（注意name要相同,是同一類行的選擇，以便後臺拿到數據）
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
//下拉框
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
//這種是爲下拉框分組
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
//文本域
<textarea name="textarea" rows="10" cols="30">
我是一個文本框。
</textarea>
//提交按鈕，下面的提交按鈕，默認提交到action地址
<input type="submit" value="Submit">
<button>submit</button>
//這是另一種形式的表單，注意其中的區別便可，
//fieldset標籤也只會在這種場合使用了
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
//datalist標籤，input的list屬性綁定到datalist的id，就能夠完成這項工做了
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
//注意label標籤 , 經過綁定input的id來實如今label出點擊獲取焦點，有兩種寫法
<label for="name">用戶名</label>
<input id="naem" type="text" size="30">
<label>Hello<input type="text" size="30"></label>
</form>
實例以下：
<label for="name">用戶名 </label><input id="name" type="text" size="30"> <label>Hello <input type="text" size="30"></label>
注意: Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 標籤。
output標籤，顧名思義，輸出標籤，那麼從何處輸入，定義規則是怎麼樣的呢？
form定義規則 ，那麼你可不能夠寫一個升級版的呢？
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 //數據源
+<input type="number" id="b" value="50"> //數據源
=<output name="x" for="a b"></output> //計算出結果
</form>
iframe --通常重要的標籤
經過使用框架，你能夠在同一個瀏覽器窗口中顯示不止一個頁面。
<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0"></iframe> iframe顯示的地址頁面內容，制定高度和寬度，frameborder移除邊框
用iframe來顯示頁面內部連接
<iframe src="www.baidu.com" name="iframe_a"></iframe> <p><a href="http://www.google.com" target="iframe_a">Google</a></p>
全局屬性
這些屬性，基本上不怎麼使用，瞭解便可。
accesskey 規定激活元素的快捷鍵。
一下元素支持accesskey屬性
<a>, <area>, <button>, <input>, <label>, <legend> 以及 <textarea>。 <a href="http://www.w3school.com.cn/html/" accesskey="h">HTML</a> <a href="http://www.w3school.com.cn/css/" accesskey="c">CSS</a>
class 規定元素的一個或多個類名（引用樣式表中的類）。
contenteditable 規定元素內容是否可編輯。
contextmenu 規定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示。
data-* 用於存儲頁面或應用程序的私有定製數據。
dir 規定元素中內容的文本方向。
draggable 規定元素是否可拖動。
dropzone 規定在拖動被拖動數據時是否進行復制、移動或連接。
hidden 規定元素仍未或再也不相關。
id 規定元素的惟一 id。
lang 規定元素內容的語言。
spellcheck 規定是否對元素進行拼寫和語法檢查。
style 規定元素的行內 CSS 樣式。
tabindex 規定元素的 tab 鍵次序。
title 規定有關元素的額外信息。
translate 規定是否應該翻譯元素內容。
空元素標籤
br , hr
HTML5標籤
article, aside , audio , bdi , canvas , datalist , command , details ,dialog , embed ,figcaption ,figure ,footer ,header , keygen , mark , meter , nav , output , process , rp ,rt , ruby , section , source , summary , time , track , video , wbr
這些都是html5的標籤，一眼便能看出，更加語義化了，若是想看html5標籤詳解，請看這裏:[HTML+CSS複習之HTML5基礎篇]()
不重要的標籤
b（定義文本粗體） , i（定義文本斜體） , strong , em , big ,small , sub , sup , ins , del , pre , code , kbd , tt , samp , var , address(定義文檔做者或擁有者的聯繫信息) , abbr(定義縮寫) , acronym（定義只取首字母的縮寫，不支持HTML5） , bdo , blockquote , q , cite , dfn , colgroup , col , center, font , dir(與ul差很少，兼容性不如ul) , frame/frameset(這兩個標籤已經沒人用了，主要是用了這個標籤，交互就作不了)
<code>計算機輸出</code> <br /> <kbd>鍵盤輸入</kbd> <br /> <tt>打字機文本</tt> <br /> <samp>計算機代碼樣本</samp> <br /> <var>計算機變量</var> <br /> <b>註釋：</b>這些標籤經常使用於顯示計算機/編程代碼。 <acronym title="World Wide Web">WWW</acronym> <bdo dir="rtl">該段落文字從右到左顯示。</bdo>
標籤嵌套規則
a標籤不能嵌套a標籤，p標籤不能嵌套塊級標籤
- 1. HTMLCSS學習之CSS基礎
- 2. HTML+CSS複習之CSS基礎篇
- 3. htmlCss----html
- 4. 【複習】HTML基礎
- 5. html基礎複習
- 6. JavaWeb總複習——html基礎
- 7. HTML基礎複習（一）
- 8. HTMLCSS學習筆記（十三）-- HTML5基礎
- 9. HTML基礎篇
- 10. HTML 基礎篇
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • Kotlin學習（二）基本類型
- • Kotlin學習（一）基本語法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. HTMLCSS學習之CSS基礎
- 2. HTML+CSS複習之CSS基礎篇
- 3. htmlCss----html
- 4. 【複習】HTML基礎
- 5. html基礎複習
- 6. JavaWeb總複習——html基礎
- 7. HTML基礎複習（一）
- 8. HTMLCSS學習筆記（十三）-- HTML5基礎
- 9. HTML基礎篇
- 10. HTML 基礎篇