我爱编程

html学习

2015-08-12  本文已影响82人  ClarkWang_001

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>声明有助于浏览器中正确显示网页。

  2. html标题 ，<h1>..<h6>
    段落 <p></p>
    链接 <a href="**"> **</a>
    Pic <image src="" >

  3. 有些标签元素有空内容，这样的标签在开始标签中关闭；
    <br> 更可靠的写法是<br/>
    所有的元素尽量都必须被关闭；消除潜在的隐患；

  4. html 属性
    属性一般都是名称/值对成对出现 name="value"出现在开始标签；
    <a href="baidu.com">this is a link </a>
    value一般用双引号，如果属性值本身有双引号，必须使用单引号；
    name =' jone "hello " ckalr'

  5. 注释： ``
    水平线 <hr/>
    标题 仅用来构建标题，被搜索引擎编制索引；<h1>****</h1>
    段落 <p>**</p>
    换行 <br/>

  6. 链接
    <a href ="http://www.baidu.com" target="_blank"> tesbaidu</a>
    id 属性用来创建一个html书签标记；
    <a id="tips">useful tips section</a>
    <a href="#tips">go to usetip</a>

  7. head 头部

  1. 如何使用css
<style> 定义文本样式
<link> 定义资源引用地址
  1. 图像
<img src="hello" alt="替换文字（图片加载失败时）" width="10" height="10" border="0"/>

创建图片链接

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

html 图片热区 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     // 表格内嵌套其他元素
     <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. 区块
    <div></div>
    没有特殊含义，与css搭配，用来设置大的内容块的样式；另外可用于文档布局；
    <span></span>内联元素，没特殊含义；与css搭配，用来为文本设置样式
  2. 布局
    可用div布局或者table布局，不建议使用table来布局，不是布局标签；
  3. 表单
    表单元素，允许用户在表单中输入内容；
<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 href="http://www.baidu.com" 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

上一篇 下一篇

猜你喜欢

热点阅读