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

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

Jan 22, 2017 am 10:17 AM

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="/static/imghw/default1.png"  data-src="test.jpg"  class="lazy"   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)!


本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 中的表格邊框

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

HTML 中的巢狀表

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

在 HTML 中移動文字

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符

See all articles