首頁 > web前端 > H5教程 > 小強的HTML5行動開發之路(1)-HTML介紹

小強的HTML5行動開發之路(1)-HTML介紹

黄舟
發布: 2017-01-22 10:17:25
原創
1341 人瀏覽過

HTML是HyperText Markup Language(超文本標記語言)的縮寫,是構成所有所有網頁基本結構的文字及標籤組合。

一、目前市面上流行的瀏覽器

IE/Chrome/firefox/opera

小強的HTML5行動開發之路(1)-HTML介紹

小強的HTML5行動開發之路(1)-HTML介紹

其中Chrome/firefox/opera、

其中Chrome/firefox/opera以及IE 9/10 HTML標籤

html標籤都以「"括號結束

常用的屬性有:id 、class、style、title

id:此屬性為標籤所指物件提供一個名字

class:此屬性為物件提供一個類別名稱

style:此屬性為物件套用一個對應的css樣式

title:為物件賦予一個標題,大多數瀏覽器在滑鼠經過時會提示。

我們在後面的Android開發中,會用到這個標籤,下面來看看標籤的一個使用,也是我們的helloword.

<html>  
    <head>  
        <title>first html</title>  
<!--refresh:刷新-->  
        <meta http-equiv="refresh" content="1;url=http://blog.csdn.net/dawanganban&#39;">  
<!-- 表示每隔1秒向url地址刷新 -->  
        <meta http-equiv="content-type" content="text/html;charset=utf-8">  
<!--引入一个样式文件-->  
        <link rel="stylesheet" type="text/css" href="style.css">  
      
    </head>  
    <body>  
        hello word  
    <body>  
</html>
登入後複製

三、重要標記

(1)連結

target="_black":在新的視窗中開啟連結

target="_selt":預設值,在目前視窗中開啟

(2)圖片連結

<a href="地址" border="0"><img  src="test.jpg" alt="小強的HTML5行動開發之路(1)-HTML介紹" ></a>
登入後複製

border屬性值:為了去除預設邊框。

(3)發郵件

<a href="mailto:739299362@qq.com?subject=hello">发邮件</a>
 (4)锚点(在同一页面进行跳转)
<a name="top">跳到这里</a>
<a href="#top">跳到top</a>
登入後複製

  (5)表格

<table border="1" width="60%" cellpadding="10" cellspacing="0">
<tr><td>表格一</td><td>表格二</td></tr><tr><td>BIAOGE</td><td>BIAOGE</td></tr>
</table>
登入後複製

表格的對齊


align屬性:水平對齊。  值:left(缺省):偏左/rignt/center
valign屬性:垂直對齊。 值:top/bottom(預設)/middle
      不規則表格
colspan屬性:合併水平單元格(合併列)
rowspan屬性:合併垂直單元格(合併行)
      

<table>
<caption>主题</caption>   只能是0个或者1个
<thead>表头</thead>       只能是0个或者1个
<tfoot>表脚</tfoot>
<tbody>表体</tbody>
</table>
登入後複製

(6)表單

<form action="服务器端的一个程序" method="get/post">
<!--input标记-->
<!--非input标记-->
      </form>
      1)input标记:
文本输入框:<input type="text" name="username" value="缺省值"/><!--必须加name-->
提交按钮: <input type="submit" value="确认"/>
密码输入框:<input type="password" name="pwd"/> <!--必须加name-->
单选:<input type="radio" name="gender" value="m"/><!--必须加name和value-->
   <!--同一组name必须相同-->
多选:<input type="checkbox" name="interest" value="fishing"/>
重置:<input type="reset" value="取消"/>
普通按钮:<input type="button" value="点我吧"/>
上传文件:<input type="file" name="file1"/>
隐藏域:<input type="hidden" name="userId" value="123">
      2)非input标记
登入後複製

下拉清單:

<select name="city" multiple="multiple">
<option value="bj">北京</option>
<option value="wh">武汉</option>
<option value="nj">南京</option>
</select>
<!--加上mutiple属性就成为多选了-->
登入後複製

多行文字輸入框:

<textarea name="desc" cols="" rows=""></textarea>
登入後複製

       ( 8)框架

作用是將一個大的視窗分成許多子視窗

<ul>
<li>item1</li>
<li>item2</li>
</ul>
登入後複製

作用是在目前視窗中嵌入一個子視窗

<ol>
<li>item1</li>
<li>item2</li>
<ol>
登入後複製

以上就是 小強的HTML5移動之路(1) ——HTML介紹的內容,更多相關內容請關注PHP中文網(www.php.cn)!


來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板