html學(xué)習(xí)

html 速查表
http://www.w3cschool.cc/html/html-quicklist.html
所有標簽適用范圍
http://www.w3cschool.cc/tags/html-elementsdoctypes.html
參考手冊:
http://www.w3cschool.cc/tags/html-reference.html

所有的標簽語言都是說給瀏覽器、搜索引擎聽的;推薦使用小寫屬性;

  1. <!DOCTYPE html> 在HTML5中也是描述了文檔類型。
    <!DOCTYPE>聲明有助于瀏覽器中正確顯示網(wǎng)頁。

  2. html標題 ,<h1>..<h6>
    段落 <p></p>
    鏈接 <a href="**"> **</a>
    Pic <image src="" >

  3. 有些標簽元素有空內(nèi)容,這樣的標簽在開始標簽中關(guān)閉;
    <br> 更可靠的寫法是<br/>
    所有的元素盡量都必須被關(guān)閉;消除潛在的隱患;

  4. html 屬性
    屬性一般都是名稱/值對成對出現(xiàn) name="value"出現(xiàn)在開始標簽;
    <a href="baidu.com">this is a link </a>
    value一般用雙引號,如果屬性值本身有雙引號,必須使用單引號;
    name =' jone "hello " ckalr'

  5. 注釋: ``
    水平線 <hr/>
    標題 僅用來構(gòu)建標題,被搜索引擎編制索引;<h1>****</h1>
    段落 <p>**</p>
    換行 <br/>

  6. 鏈接
    <a target="_blank"> tesbaidu</a>
    id 屬性用來創(chuàng)建一個html書簽標記;
    <a id="tips">useful tips section</a>
    <a href="#tips">go to usetip</a>

  7. head 頭部

  • <title> 標題
  • <base>默認鏈接地址
  • <meta> 元數(shù)據(jù),描述給搜索引擎用的
  • <style> 樣式引用地址
    <style type="text/css"> h1 {color:yellow;}</style>
  • <script> 加載的腳本文件
  • <link> 定義了一個文檔和外部資源之間的關(guān)系
  1. 如何使用css
  • 外部使用 - 使用外部css文件
    <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head>
  • 內(nèi)部樣式表 -html <title>中區(qū)域使用<style>元素包含css
    <head> <style type="text/css"> body {background-color:yellow;} </style> </head>
  • 內(nèi)聯(lián)樣式 ,元素中使用style屬性
    <p style ="color:bule;margin-left:20px;">hello style</p>
<style> 定義文本樣式
<link> 定義資源引用地址
  1. 圖像
<img src="hello" alt="替換文字(圖片加載失敗時)" width="10" height="10" border="0"/>

創(chuàng)建圖片鏈接

<a href="http://***"><img src=""/></a>

html 圖片熱區(qū) area

<img src="hha.gif" width="200" height="200" alt="" usermap="#planet">
<map name="planet">
 <area shape="rect" coords="0,0,100,100" href="***1">
<area shape="rect" coords="x1,y1,x2,y2" href="***2">
<area shape="circle" coords="x1,y1,r" href="***2">
</map>
  1. table
<table border="1"   cellpadding="10    cellspacing="10">  //padding橫向間距 cellspacing 垂直間距
  <caption>Monthly savings</caption>  // 表格的標題
  <tr>
    <th>Month</th>     // 表格的頭部  table header
    <th>Savings</th>
  </tr>
  <tr>
    <td colspan ="2">January</td>  // 表格橫跨2列
    <td>$100</td>
  </tr>
  <tr>                        //table row
    <td>February</td>          // table body 
    <td rowspan="2">$50</td>    // 表格橫跨2行
   <td>This cell contains a list     // 表格內(nèi)嵌套其他元素
     <ul>
        <li>apples</li>
         <li>bananas</li>
         <li>pineapples</li>
   </ul>
  </td>
  </tr>
</table>
  1. 列表
//list-style-type:disc/circle/square
 <ul style="list-style-type:disc">
  <li>say hi</li>
<li>say heello</li>
<li> say ha</li>
</ul>
<ol start="50" type="A"> //type=''A/a/I/i"
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  1. 區(qū)塊
    <div></div>
    沒有特殊含義,與css搭配,用來設(shè)置大的內(nèi)容塊的樣式;另外可用于文檔布局;
    <span></span>內(nèi)聯(lián)元素,沒特殊含義;與css搭配,用來為文本設(shè)置樣式
  2. 布局
    可用div布局或者table布局,不建議使用table來布局,不是布局標簽;
  3. 表單
    表單元素,允許用戶在表單中輸入內(nèi)容;
<form name="input" action="..php" method="get">
<fieldset>
<legend>Personal information:</legend>
name :<input type="text" name="firstName"><br/>
pass: <input type="password" name="pwd"><br/>

<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
<input type ="checkbox" name="vehicle" value="bike">i hava a bike<br>
<input type= "checkbox" name="vehicle" value="car" checked="checked"> i have a car<br>

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="button" value="Hello world!">

<textarea rows="10" cols="30">
我是一個文本框。
</textarea>

<input type="submit" value="submit">
</fieldset>
</form>
  1. 框架
    通過使用框架,你可以在同一個瀏覽器窗口中顯示不止一個頁面。
<iframe src="url" width =200 height=200 frameborder="0" name="ifamre_a"></iframe>
<p><a  target="ifamre_a">baidu</a></p>
  1. 腳本
<script>document.write("Hello World!")</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript> //腳本不能運行時的顯示

  1. URL 只能使用 ASCII 字符集.

  2. xhtml
    xml+html = xhtml
    是一種更嚴格的html

  • 文檔結(jié)構(gòu)
    XHTML DOCTYPE 是強制性的
    <html> 中的 XML namespace 屬性是強制性的
    <html>、<head>、<title> 以及 <body> 也是強制性的

  • 元素語法
    XHTML 元素必須正確嵌套
    XHTML 元素必須始終關(guān)閉
    XHTML 元素必須小寫
    XHTML 文檔必須有一個根元素

  • 屬性語法
    XHTML 屬性必須使用小寫
    XHTML 屬性值必須用引號包圍
    XHTML 屬性不允許簡寫
    錯誤示例:
    <input checked>
    <input readonly>
    <input disabled>
    <option selected>
    正確示例:
    <input checked="checked">
    <input readonly="readonly">
    <input disabled="disabled">

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 14,118評論 1 92
  • HTML引用 元素定義短的引用,瀏覽器通常會為 元素包圍引號。 元素定義被引用的節(jié),瀏覽器通常會對 元素進...
    做有趣的惡魔閱讀 701評論 0 1
  • 一:HTML塊、類、布局 HTML 和 可以通過 和 將 HTML 元素組合起來。 HTML 塊元素 大多數(shù) HT...
    朝槿123閱讀 442評論 0 0

友情鏈接更多精彩內(nèi)容