ホームページ >ウェブフロントエンド >htmlチュートリアル >フロントエンドの基本の最初の紹介 HTML_html/css_WEB-ITnose
フロントエンドの基本の最初の紹介 HTML_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:29:261310ブラウズ
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 > <!-- 小于 大于号--> <!-- 换行-->
---表示効果は次のとおりです:
---
段落、改行
<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>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 までご連絡ください。