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

ホームページ

ウェブフロントエンド

htmlチュートリアル

html はじめに_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:57 AM

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

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

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

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

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

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

更新してジャンプ

🎜>

キーワード

説明

例: 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

アイコン

スタイル

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

例:

背景色: red; >

}

スクリプト

インポートファイル

js コードを書く

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

で構成されていることがわかります。 head> このタグ間の内容は、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 id="H">H1</h1><h2 id="H">H2</h2><h3 id="H">H3</h3><h4 id="H">H4</h4><h5 id="H">H5</h5><h6 id="H">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 id="Checkbox">Checkbox</h2><input type="checkbox"><input type="checkbox" checked=""><input type="checkbox" checked="checked"><br><h2 id="redio">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 id="password">password</h2><label>显示输入信息<input type="text"></label><br><br><label>隐藏输入信息<input type="password"></label><br><h2 id="button">button</h2><input type="button" value="普通按钮"><input type="submit" value="提交按钮"><br><h2 id="file">file</h2><input type="file" value="文件上传"><p>提交文件时： enctype='multipart/form-data' method='POST'</p><br><h2 id="textarea">textarea</h2><textarea></textarea><textarea style="width:500px;height: 200px;"></textarea><br><h2 id="ul-nbsp-ol-nbsp-dl">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 id="fieldset">fieldset</h2><fieldset>    <legend>登录</legend>    <p>用户名：</p>    <p>密码：</p></fieldset><br><h2 id="form-nbsp-表单">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>大于号 ><br>小于号 <<br>字符之间的空格 a b</body></html>

声明

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

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は？Apr 05, 2025 pm 01:24 PM

メニューで点線のラインセグメンテーション効果を設計する方法は？メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

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

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、