ホームページ ウェブフロントエンド H5 チュートリアル Xiaoqiang の HTML5 モバイル開発への道 (1) - HTML 入門

Xiaoqiang の HTML5 モバイル開発への道 (1) - HTML 入門

Jan 22, 2017 am 10:17 AM

HTMLとはHyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略称で、すべてのWebページの基本構造を構成するテキストとタグの組み合わせです。

1.現在市場で人気のあるブラウザ

IE/Chrome/firefox/opera

Xiaoqiang の HTML5 モバイル開発への道 (1) - HTML 入門

Xiaoqiang の HTML5 モバイル開発への道 (1) - HTML 入門

その中で、Chrome/firefox/operaとIE 9/10はすべてHTML5

2と非常に互換性があります。 HTML タグ

html タグはすべて「」括弧で終わります

一般的に使用される 属性は次のとおりです: id、class、style、title

id: この属性は、label が指すオブジェクトの名前を提供します

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>
ログイン後にコピー

3. 重要なマーク

(1) リンク

target=" _black": リンクを新しいウィンドウで開きます

target="_selt": デフォルト値、現在のウィンドウで開きます

(2) 画像リンク

<a href="地址" border="0"><img  src="/static/imghw/default1.png"  data-src="test.jpg"  class="lazy"   alt="Xiaoqiang の 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 (デフォルト): left/rignt/center

valign 属性: 垂直方向の配置。 値: 上/下 (デフォルト)/中央

不規則なテーブル
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>
ログイン後にコピー

(7) リスト

順序なしリスト:


<ul>
<li>item1</li>
<li>item2</li>
</ul>
ログイン後にコピー

順序付きリスト:

<ol>
<li>item1</li>
<li>item2</li>
<ol>
ログイン後にコピー

( 8) 関数フレーム

は、大きなウィンドウを多数のサブウィンドウに分割することです

<frameset rows="200,300,*">  <!--划分为三个窗口-->
<frameset rows="20%,*">  <!--按照百分比划分-->
<frame src="top.html"/>
<frameset cols="30%,*"/>
<frame src="left.html"/>
<frame src="right.html"/>
</frameset>
</frameset>
<iframe>
ログイン後にコピー

その機能は、現在のウィンドウにサブウィンドウを埋め込むことです

<iframe src="some.html" width="" height="">
</iframe>
ログイン後にコピー

上記はXiaoqiangのHTML5モバイル開発パスです( 1 )——HTML の紹介コンテンツ。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。


このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

See all articles