目次
" >
" > <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!--<meta http-equiv="Refresh" content="5">--> <title></title></head><body>------------------------------------------ <h1>H1标签</h1> <h2>H2标签</h2> <h3>H3标签</h3> <h4>H4标签</h4> <h5>H5标签</h5> <h6>H6标签</h6>------------------------------------------ <h2>块级标签</h2> <div style="background-color: red;">div1</div> <h2>内联标签、行内标签</h2> <a style="background: red;">div1</a>------------------------------------------ <h2>符号</h2> © <!-- copy 符号--> < a > <!-- 小于 大于号--> <!-- 换行-->
ログイン後にコピー
<h2>a标签，href，当前页打开</h2>> <a href="http://www.baidu.com">点我，跳转百度</a> <h2>新页打开</h2>> <a href="http://www.baidu.com" target="_blank">点我，跳转百度</a> <h2>锚mao</h2> <a href="#top1">第一章</a> <a href="#top2">第二章</a> <a href="#top3">第三章</a> <a href="#top4">第四章</a> <a href="#top5">第五章</a> <div style="height: 500px;"></div> <div id="top1" style="height: 100px;">第一章内容</div> <div id="top2" style="height: 100px;">第二章内容</div> <div id="top3" style="height: 100px;">第三章内容</div> <div id="top4" style="height: 100px;">第四章内容</div> <div id="top5" style="height: 100px;">第五章内容</div>
ログイン後にコピー
フロントエンドの基本の最初の紹介 HTML_html/css_WEB-ITnose
HTML
HTML (Hypertext Markup Language) は、WWW の記述言語である Hypertext Markup Language です。 HTML 言語を設計する目的は、あるコンピュータに保存されているテキストまたはグラフィックを別のコンピュータにあるテキストまたはグラフィックと簡単に接続して、有機的な全体を形成することです。特定の情報が現在のコンピュータ上にあるか、他のコンピュータ上にあるかを考慮する必要はありません。ネットワーク上のコンピュータ。マウスを使用してドキュメント内のアイコンをクリックするだけで、インターネットはアイコンに関連するコンテンツに即座に移動し、この情報はネットワーク上の別のコンピューターに保存される可能性があります。 HTML テキストは、HTML コマンドで構成される説明テキストであり、テキスト、グラフィック、アニメーション、サウンド、表、リンクなどを記述することができます。 HTML の構造は、Head と Body の 2 つの部分で構成されます。head にはブラウザが必要とする情報が記述され、body には説明する具体的な内容が含まれます。さらに、HTML はインターネットの世界共通言語であり、シンプルで普遍的な万能マークアップ言語です。これにより、Web ページ制作者はテキストと画像を組み合わせた複雑なページを作成でき、使用するコンピュータやブラウザの種類に関係なく、インターネット上の誰でもこれらのページを閲覧できるようになります。それは魔法ですか? それはまったく魔法ではありません。なぜなら、今あなたが見ているのはこの言語で書かれたページだからです。笑
HTML の基本を学びましょう。ラベル、シンボル
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!--<meta http-equiv="Refresh" content="5">--> <title></title></head><body>------------------------------------------ <h1>H1标签</h1> <h2>H2标签</h2> <h3>H3标签</h3> <h4>H4标签</h4> <h5>H5标签</h5> <h6>H6标签</h6>------------------------------------------ <h2>块级标签</h2> <div style="background-color: red;">div1</div> <h2>内联标签、行内标签</h2> <a style="background: red;">div1</a>------------------------------------------ <h2>符号</h2> © <!-- copy 符号--> < a > <!-- 小于 大于号--> <!-- 换行-->
ログイン後にコピー
---<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!--<meta http-equiv="Refresh" content="5">--> <title></title></head><body>------------------------------------------ <h1>H1标签</h1> <h2>H2标签</h2> <h3>H3标签</h3> <h4>H4标签</h4> <h5>H5标签</h5> <h6>H6标签</h6>------------------------------------------ <h2>块级标签</h2> <div style="background-color: red;">div1</div> <h2>内联标签、行内标签</h2> <a style="background: red;">div1</a>------------------------------------------ <h2>符号</h2> © <!-- copy 符号--> < a > <!-- 小于 大于号--> <!-- 换行-->
ログイン後にコピー
表示効果は次のとおりです:
---
段落、改行
<h2>段落/换行</h2> <p>我们知道两个进程如果需要进行通讯最基本的一个前提能够唯一的标识一个进程协议＋端口号唯一标识网络中的一个进程。</p> <p>我们知道两个进程如果需要进行通讯最基本的一个前提能够唯一的标识</br>一个进程协议＋端口号唯一标识网络中的一个进程。</p>
ログイン後にコピー
<h2>a标签，href，当前页打开</h2>> <a href="http://www.baidu.com">点我，跳转百度</a> <h2>新页打开</h2>> <a href="http://www.baidu.com" target="_blank">点我，跳转百度</a> <h2>锚mao</h2> <a href="#top1">第一章</a> <a href="#top2">第二章</a> <a href="#top3">第三章</a> <a href="#top4">第四章</a> <a href="#top5">第五章</a> <div style="height: 500px;"></div> <div id="top1" style="height: 100px;">第一章内容</div> <div id="top2" style="height: 100px;">第二章内容</div> <div id="top3" style="height: 100px;">第三章内容</div> <div id="top4" style="height: 100px;">第四章内容</div> <div id="top5" style="height: 100px;">第五章内容</div>
ログイン後にコピー
---<h2>a标签，href，当前页打开</h2>> <a href="http://www.baidu.com">点我，跳转百度</a> <h2>新页打开</h2>> <a href="http://www.baidu.com" target="_blank">点我，跳转百度</a> <h2>锚mao</h2> <a href="#top1">第一章</a> <a href="#top2">第二章</a> <a href="#top3">第三章</a> <a href="#top4">第四章</a> <a href="#top5">第五章</a> <div style="height: 500px;"></div> <div id="top1" style="height: 100px;">第一章内容</div> <div id="top2" style="height: 100px;">第二章内容</div> <div id="top3" style="height: 100px;">第三章内容</div> <div id="top4" style="height: 100px;">第四章内容</div> <div id="top5" style="height: 100px;">第五章内容</div>
ログイン後にコピー
表示効果は次のとおりです:
---
タグを選択
<h2>select标签</h2> <select> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> <option>长沙</option> <option>株洲</option> </select> <select multiple="multiple" size="2"> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> <option>长沙</option> <option>株洲</option> </select>
ログイン後にコピー
checkbox: (复选项) <h2>input系列</h2> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" />radio: (单选项) <input name="r1" type="radio" /> <input name="r1" type="radio" />普通输入框： <h2>普通</h2> <h4>password</h4> <input type="text"> <input type="password">上传文件： <h2>上传文件</h2> <input type="file">几种按钮： <h2>按钮</h2> <input type="button" value="按钮"> <input type="submit" > <input type="submit" value="按钮">多行文本框: <h2>多行文本框</h2> <textarea>框中内容</textarea>多行文本框与text文本框区别: <h2>多行文本框与text区别</h2> <input type="text"> <input type="text" value="allen">label 标签： <h2>label标签</h2> <h4>没有应用label，点击姓名字体时没反应</h4> 姓名：<input id="name1" type="text"> 婚否：<input id="marry1" type="checkbox"> <h4>有应用label，点击姓名有反应(for)</h4> <label for="name2">姓名： <input id="name2" type="text"> <label for="marry2">婚否： <input id="marry2" type="checkbox">
ログイン後にコピー
表示効果は次のとおりです:
---
ル、 ol、dl 比較:
<h2>ul,自动在前面加点.</h2> <ul> <li>ul.li</li> <li>ul.li</li> <li>ul.li</li> <li>ul.li</li> </ul>------------------------------------------ <h2>ol,自动排序</h2> <ol> <li>ol.li</li> <li>ol.li</li> <li>ol.li</li> <li>ol.li</li> </ol>------------------------------------------ <h2>dl,列表</h2> <dl> <dt>湖南</dt> <dd>长沙</dd> <dt>河北</dt> <dd>石家庄</dd> </dl>
ログイン後にコピー
表示効果は次のとおりです:
---
table table:
<h2>table 表格，无边框</h2> <table> <tr> <td>主机名</td> <td>IP</td> <td>状态</td> </tr> <tr> <td>baidu1.com</td> <td>1.1.1.1</td> <td>在线</td> </tr> <tr> <td>baidu2.com</td> <td>1.1.1.2</td> <td>down机</td> </tr> </table>------------------------------------------ <h2>table 表格，边框</h2> <table border="1"> <tr> <td>主机名</td> <td>IP</td> <td>状态</td> </tr> <tr> <td>baidu1.com</td> <td>1.1.1.1</td> <td>在线</td> </tr> <tr> <td>baidu2.com</td> <td>1.1.1.2</td> <td>down机</td> </tr> </table>------------------------------------------ <h2>table 表格，边框，表头:将td换成th，同时还自动加粗了</h2> <table border="1"> <tr> <th>主机名</th> <th>IP</th> <th>状态</th> </tr> <tr> <td>baidu1.com</td> <td>1.1.1.1</td> <td>在线</td> </tr> <tr> <td>baidu2.com</td> <td>1.1.1.2</td> <td>down机</td> </tr> </table>------------------------------------------ <h2>table 表格，为了代码看起来更易懂，则分别在表头加了thead 和 tbody，这种方法推荐使用</h2> <table border="1"> <thead> <tr> <th>主机名</th> <th>IP</th> <th>状态</th> </tr> </thead> <tbody> <tr> <td>baidu1.com</td> <td>1.1.1.1</td> <td>在线</td> </tr> <tr> <td>baidu2.com</td> <td>1.1.1.2</td> <td>down机</td> </tr> </tbody> </table>------------------------------------------ <h2>table 表格，合并单元格,列合并，colspan="2",占用两列</h2> <table border="1"> <thead> <tr> <th>主机名</th> <th colspan="2">IP</th> <!--<th>状态</th>--> </tr> </thead> <tbody> <tr> <td>baidu1.com</td> <td>1.1.1.1</td> <td>在线</td> <td>1.1.1.1</td> <td>在线</td> </tr> <tr> <td>baidu2.com</td> <td>1.1.1.2</td> <td>down机</td> <td>1.1.1.2</td> <td>down机</td> </tr> </tbody> </table>------------------------------------------ <h2>table 表格，合并单元格,列合并，colspan="4",占用四列</h2> <table border="1"> <thead> <tr> <th>主机名</th> <th colspan="4">IP</th> <!--<th>状态</th>--> </tr> </thead> <tbody> <tr> <td>baidu1.com</td> <td>1.1.1.1</td> <td>在线</td> <td>1.1.1.1</td> <td>在线</td> </tr> <tr> <td>baidu2.com</td> <td>1.1.1.2</td> <td>down机</td> <td>1.1.1.2</td> <td>down机</td> </tr> </tbody> </table>------------------------------------------ <h2>table 表格，合并单元格,行合并，rowspan="3",占用3行</h2> <table border="1"> <thead> <tr> <th>主机名</th> <th>IP</th> <th>状态</th> </tr> </thead> <tbody> <tr> <td>baidu1.com</td> <td>1.1.1.1</td> <td>在线</td> </tr> <tr> <td rowspan="3">baidu2.com</td> <td>1.1.1.2</td> <td>down机</td> </tr> <tr> <!--<td>baidu2.com</td>--> <td>1.1.1.2</td> <td>down机</td> </tr> <tr> <!--<td>baidu2.com</td>--> <td>1.1.1.2</td> <td>down机</td> </tr> </tbody> </table>
ログイン後にコピー
表示効果は次のとおりです:
---
fieldsetedge Box:
<h2>fieldset 边框</h2> <fieldset> <legend>登录</legend> <p>用户名：</p> <p>密码：</p> </fieldset>------------------------------------------ <h2>form 表单,botton,reset提交按钮默认需要结合js等绑定事件，否则点击不生效，啥也不做，而submit可以直接提交</h2> <form action="/account/login/"> 用户名：<input type="text" name="username"/> 密码：<input type="password" name="pwd"/> 验证码：<input type="password" name="pwd"> <img src="/checkcode/"> <input type="button" value="botton" onclick="alert(1234);"/> <input type="submit" value="submit"/> <input type="reset" value="reset"/> </form> <!--{'username':'allen','pwd':'1234'}-->------------------------------------------ <h2>form 表单,根据关键字向sogou服务器发起请求，从而进行搜索</h2> <form action="http://www.sogou.com/web"> 关键字：<input type="text" name="query"/> <input type="submit" value="submit"/> </form> <!--{'username':'allen','pwd':'1234'}--> ------------------------------------------</body></html>ログイン後にコピー
表示効果は次のとおりです:
---
html 中国語学習 Web サイト: http://www.w3school.com .cn/html/index.asp
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最高のグラフィック設定
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
アサシンのクリードシャドウズ：シーシェルリドルソリューション
1週間前
By DDD
R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
Atomfallのクレーンコントロールキーカードを見つける場所
1週間前
By DDD
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
Mar 12, 2025 pm 04:05 PM
この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
