html はじめに_html/css_WEB-ITnose-htmlチュートリアル-php.cn

HTML は Web 開発の基本言語であり、さまざまな Web ページの要素をカスタマイズするために使用されます。たとえば、入力ボックス、ボタン、テキスト、タイトル、その他の要素はすべて HTML によって定義されます。

まず HTML フレームワークを見てみましょう

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <!--定义网页标签页的内容-->    <title></title></head><body><!--网页的全部内容--></body></html>

ログイン後にコピー

は、このページが HTML コードドキュメントであることをサーバーに伝えます。。これは必須です。他の文書形式もありますが、この書き方が最も互換性があります。

タグは、ページのエンコーディング、更新、ジャンプ、ターゲティング検索エンジン、更新頻度などのページに関するメタ情報を提供します。およびキーワード

ページのエンコーディング (ブラウザにエンコーディングを伝えます)

< meta http-equiv="content-type" content= "text /html;charset=utf-8">

更新してジャンプ

< meta http-equiv="Refresh" Content= “30″ >

🎜>

キーワード

< meta name="keywords" content="StarCraft 2、StarCraft オールドボーイ、インタビュー、F91、Xiaose、JOY" >

説明

例: cnblogs

X-UA -互換

Microsoft の IE6 は、XP や Win2003 などのオペレーティングシステムを通じてリリースされ、多くの Web サイトが開発される際にも主要なデスクトップオペレーティングシステムとして、IE6 の標準に従って開発されています。また、IE6 独自の標準も Microsoft によって内部で定義されています。 IE7 が登場したとき、Microsoft の内部標準と一部の W3C 標準が採用されており、多くの Web サイトを IE7 にアップグレードするには、通常よりも困難な作業が必要でした。 Microsoft の IE8 バージョンに関しては、基本的に Microsoft が独自に定義した標準を放棄し、W3C 標準を完全にサポートしたため、初期の IE8 バージョンでアクセスできた Web サイトは、IE8 バージョンではアクセスできなくなりました。 IE8では正常にアクセスできず、レイアウトの混乱、文字の重複、表示の不完全など、さまざまな互換性エラーが発生します。

Internet Explorer 8 は、以前のブラウザバージョンよりも業界標準をより厳密にサポートします。したがって、古いブラウザ用に設計されたサイトは期待どおりに表示されない可能性があります。問題を軽減するために、Internet Explorer 8 ではドキュメント互換性の概念が導入されており、これにより、サイトがサポートする Internet Explorer のバージョンを指定できるようになります。ドキュメント互換性により、Internet Explorer 8 に新しいモードが追加され、これらのモードはブラウザーに Web サイトの解釈方法とレンダリング方法を指示します。サイトが Internet Explorer 8 で正しく表示されない場合は、最新の Web 標準をサポートするようにサイトを更新するか (推奨される方法)、サイトが Internet Explorer 8 で表示されるのと同じ方法でコンテンツを表示するように強制することができます。ブラウザの古いバージョン。これは、meta 要素を使用して Web ページに X-UA-互換ヘッダーを追加することで実現されます。

Internet Explorer 8 は、X-UA-互換ヘッダーを含まない Web ページに遭遇すると、ディレクティブを使用してページの表示方法を決定します。このディレクティブが欠落しているか、標準ベースのドキュメントタイプが指定されていない場合、Internet Explorer 8 は Web ページを IE5 モード (Quirks モード) で表示します。詳細

タイトル

Web ページのヘッダー情報

リンク

css

< リンク rel="stylesheet" type="text/css" href=" css /common.css" >

アイコン

< link rel="ショートカットアイコン" href="image/favicon.ico">

スタイル

ページにスタイルを書き込みます

例:

< style type="text/css" >

背景色: red; >

}

< /style>

スクリプト

インポートファイル

< スクリプトタイプ="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js">

js コードを書く

< script type="text/javascript" >

コードから、標準の HTML Web ページファイルは主に 2 つの部分

このタグ間の内容は、Web ページのタブバーの内容を定義するために使用されます

ブラウザでファイルを開くと、次のようになります。タブページのタイトル

标签之间的内容就是用来定义页面的内容

再次刷新刚才的页面我们就看到了页面上已经有了文字

常用的标签

p和br标签

p是段落，两行字符之间是有间隔的

p和br都可以是实现字符串换行的效果，但是展示的时候还是有点细微的差别的。

刷新之后的结果如下

a标签

a标签用来定义一个跳转链接

实现的效果如下

另外标签还有一个功能就是定义锚点。也就是我们在网上阅读小说的时候，通过点击标签的链接直接调转到指定的章节。这个需要配置CSS的

标签定义一个指定id名称，然后调用 a标签的href属性指定到

的id上就实现了锚点跳转

H标签

H标签是用来标识段落标题的加大加黑字体显示。并且H标签会占用一行

区别只是字体大小不一样

select标签下拉菜单

运行结果

select还有另一种下拉菜单

运行结果

checkbox多选标签

运行结果

redio 单选框

注意如果单选框的name属性的值都是一样的，则同时只能选择一个选项。如果不指定name属性的值。就可以同时选取多个选项。效果如下：

文本输入框

当type='password'的时候，在框体内输入文字是隐藏的。通过在标签前面使用标签可在框体前面显示框体说明

button按钮

当type="submit"时候配合

标签可以实现表单提交功能。具体实现以后再说~

上传文件按钮

运行结果如下

多行文本输入框

通过CSS的style属性可以设置输入框的宽高尺寸

多级目录标签

运行结果

fieldset标签

运行结果

form表单

运行结果

备注

html语句中常用符号

大于号用 >

小于号用 <

字符之间的空格用

例子如下

其他符号请参考：http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

上面html介绍的各种代码如下

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <!--定义网页标签页的内容-->    <title>网页标签测试</title></head><body>默认的html语言是不支持通过回车换行的<p>带有P标签的第一行</p><p>带有P标签的第二行</p>通过br换行符<br>来分割两行文字<br><br><a href="https:\\www.baidu.com">在当前页面跳转到百度</a><a href="https:\\www.baidu.com" target="_blank">在新页面打开百度网页</a>H 标签<h1>H1</h1><h2>H2</h2><h3>H3</h3><h4>H4</h4><h5>H5</h5><h6>H6</h6>select 标签<br><select>    <option value="1">上海</option>    <option value="2">北京</option>    <option value="3" selected="selected">广州</option></select><select>    <optgroup label="河北省">        <option>石家庄</option>        <option>邯郸</option>    </optgroup>    <optgroup label="山西省">        <option>太原</option>        <option>平遥</option>    </optgroup></select><br><h2>Checkbox</h2><input type="checkbox"><input type="checkbox" checked=""><input type="checkbox" checked="checked"><br><h2>redio</h2>男<input type="radio" value="man">女<input type="radio" value="male">保密<input type="radio" value="no"><br><br>男<input type="radio" name="gender" value="man">女<input type="radio" name="gender" value="male">保密<input type="radio" checked="checked" name="gender" value="no"><br><h2>password</h2><label>显示输入信息<input type="text"></label><br><br><label>隐藏输入信息<input type="password"></label><br><h2>button</h2><input type="button" value="普通按钮"><input type="submit" value="提交按钮"><br><h2>file</h2><input type="file" value="文件上传"><p>提交文件时： enctype='multipart/form-data' method='POST'</p><br><h2>textarea</h2><textarea></textarea><textarea style="width:500px;height: 200px;"></textarea><br><h2>ul ol dl</h2><p>ul</p><ul>    <li>ul.li</li>    <li>ul.li</li>    <li>ul.li</li></ul><p>ol</p><ol>    <li>ol.li</li>    <li>ol.li</li>    <li>ol.li</li></ol><p>dl</p><dl>    <dt>河北省</dt>    <dd>邯郸</dd>    <dd>石家庄</dd>    <dt>山西省</dt>    <dd>太原</dd>    <dd>平遥</dd></dl><br><h2>fieldset</h2><fieldset>    <legend>登录</legend>    <p>用户名：</p>    <p>密码：</p></fieldset><br><h2>form 表单</h2><form method="POST" action="http://www.baidu.com">    <input type="submit" value="post提交"></form><br><br><form method="GET" action="http://www.baidu.com/s">    <input type="text" name="wd">    <input type="submit" value="GET提交"></form><p>文件:enctype='multipart/form-data' method='POST'</p>大于号 &gt;<br>小于号 &lt;<br>字符之间的空格 a b</body></html>

ログイン後にコピー