HTML学習
1. HTML入門(とにかく理解する)
HTML (Hyper Text Markup Language):
HTMLはHyper Text Markup Languageの略で、最も基本的なWebページ言語です
HTMLのバージョン:
2.0 (IETF)、3.0 (W3C)、4.01 (W3C)、5.0 (W3C)
IETF: Internet Engineering Task Force
W3C: World Wide Web Consortium
HTML の特徴:
タグとコードによって定義される言語ですはタグで定義されており、コードは大文字と小文字を区別する必要はありません
で始まり で終わります
ヘッダー部分
の 2 つの部分で構成されます。そしてボディ部分
ヘッダー部分はHTMLページに補助情報や属性情報を追加する部分であり、その中のコンテンツが最初にロードされます
ボディ部分はページデータが実際に保存される場所です
HTML タグ:
ほとんどのタグには、開始タグ と 終了タグ があります。例:
段落 段落
単一の機能しか持たない、または変更するコンテンツがないため、
タグ内で終わる可能性があります。 。例: line Break
分割線
スラッシュは省略可能です
HTMLタグの属性:
タグ より豊富な操作を行うには、タグ内の属性を使用します
属性値を変更することで、より多くの効果オプションが追加されます
属性名と属性値を接続するには、「=」を使用します
属性値には二重引用符、一重引用符を使用できます 引用符、引用符なし、通常は二重引用符 (または社内規定の記述基準)
ヘッダー タグ
ページのタイトル <p class="sycode"> <br> </p> <p class="sycode"> <base> </p> 基本属性 <p class="sycode"> href: ページ上のすべてのハイパーリンクはデフォルトでこのパスから始まります <br /> ターゲット: content=" Java,.Net,Android,iOS"> <br>スパイダーによるクロールは検索エンジンのSEOに関係しています<br> </p> > に通知します。このページのコンテンツ、タイプ、エンコードのブラウザ<p class="sycode"> http-equiv="refresh" content="3;url=http://www.maomao.com"> 3 秒以内にページを更新します <br> </p> <p class="sycode"> <br> 3. フォント<font><br> <strong> フォントタグ<font>: </strong> 単純な色を直接書き込んで対応させることができます 英語杂の複雑な色は16進数で表現され、表現形式#FF0000は赤、緑に応じたグループです、青の配列:#FF0000 は赤を意味し、#00FF00 は緑を意味します <br> <br> </p> <p class="sycode"> </p> & &; h1>, <h2>: <h2> h1><dd></h2> <p class="sycode"> ラベルなし: <br> XE <strong> 型属性変更プロジェクトシンボル (A 1 i) </strong> <strong> </strong> <br> <br> <br> </p> <p class="sycode"> <br> </p> & & gt; リスト項目 <p class="sycode"> タイプ属性プロジェクト シンボルを変更します) <br> <br> </p>
<pre name="code" class="sycode"><span style="font-size:14px;"> <dl> <dt>公司部门</dt> <dd>软件研发部</dd> <dd>财务部</dd> <dd>行政部</dd> <dl> <ol type="i"> <li>软件研发部</li> <li>财务部</li> <li>行政部</li> </ol> <ul type="square"> <li>软件研发部</li> <li>财务部</li> <li>行政部</li> </ol></span></pre> レンダリング <br> <h2> </h2> <p class="sycode"> <br> </p>
<h2>5、超链接<a></h2> <p class="sycode"> 链接标签<a>： <br> </p>
<pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span> <span style="font-size:18px;"> <a href="http://www.maomao.com" target="_blank">猫猫学编程</a></span></span></pre> href：要链接的地址 <br> target：显示位置 <br> <pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><a name="mark" /></span></pre> 在页面的某个位置做出标记 <br> <pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><a href="#mark">跳转到标记</a></span></pre> 点击链接跳转到标记位置 <br> <h2>6、图像<image></h2> <p class="sycode"> 图像标签<img>： <br> </p>
<pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><img src="1.jpg" align="right" border="3" alt="图片说明文字" /> </span></pre> src: 图片路径 <br> align: 对齐方式 <br> border: 边框粗细 <br> <p class="sycode"> 图像地图<map>： <br> 在<img>标签中使用usemap属性，指定图像可以用作地图 <br> 使用<map>及<area>标签可以把图像的一部分作为超链接 <br> </p> <p class="sycode"> </p>
<pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><img src="Sunset.jpg" alt="图片说明文字" usemap="#Map" /> <map name="Map"> <area shape="rect" coords="50,59,116,104" href="1.html" /> <area shape="circle" coords="118,203,40" href="2.html" /> </map></span></pre> <br> <h2>7、框架<frameset></h2> <p class="sycode"> 框架集合标签<frameset>： <br> <frameset>中可以放入多个<frame>框架，把页面分成几个部分 <br> <frameset>不能放在body中 <br> </p>
<pre name="code" class="sycode"><span style="font-size:14px;"><frameset rows="20%,*"> <frame src="1.html" name="top" /> <frameset cols="20%,*"> <frame src="2.html" name="left" /> <frame src="3.html" name="right" /> </frameset></frameset></span></pre> rows：框架集合每行的高度 <br> cols：框架集合每列的宽度 <br> src：框架中显示的页面 <br> name：框架的名字，可用做超链接的target <p class="sycode"> <br> </p> <p class="sycode"> 内联框架<iframe>： </p>
<pre name="code" class="sycode"><span style="font-size:14px;"><span style="white-space:pre"> </span><iframe src="1.html">抱歉,您的浏览器无法显示iframe标签</iframe> <iframe src="2.html">抱歉,您的浏览器无法显示iframe标签</iframe></span></pre> 可以在页面中嵌入另一个页面 <br> src：要嵌入的页面 <br> innerHTML：如果浏览器无法显示iframe，则会显示该文本 <br> <h2>8、表格<table></h2> <p class="sycode"> 表格标签<table>： <br> <caption> 标题 <br> <tr> 表格中的一行 <br> <td> 放在<tr>中代表一个单元格 <br> <th> 类似<tr>通常用在第一行或最后一行 <br> </p>
<pre name="code" class="sycode"><span style="font-size:14px;"><table border="1" width="40%" > <!-- 40%会岁窗体大小变化 --> <caption>表格标题</caption> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr algin=”center”> <td>张三</td> <td>23</td> </tr></table></span></pre> <br> <p class="sycode"> 多行多列<td>： <br> colspan属性：控制一个单元格占多列 <br> rowspan属性：控制一个单元格占多行 </p> <p class="sycode"> <thead>、<tbody>、<tfoot>： <br> 三个标签都是放在table下，内部可以放tr标签 <br> <thead> 表头，通常用在第一行 <br> <tbody> 表体，表格中间的内容，可以有多个 <br> <tfoot> 表脚，通常用在最后一行 <br> <br> <br> </p> <h2>9、表单<form>重要<input></h2> <p class="sycode"> 表单标签<form>： <br> 内部可以包含文本框、单选、多选、下拉列表等表单项 <br> 可以把用户在页面中的输入和选择提交到一个地址 <br> 常用属性： <br> action：提交地址 <br> method：提交方式 </p> <p class="sycode"> </p>
<pre name="code" class="sycode"><span style="font-size:14px;"><form action="要提交的地址" method="get"> <input type="text" name="username"> <input type="password" name="password"> </form></span></pre> <br> <p class="sycode"> 输入项<input>： <br> 通过指定type属性可以定义不同的输入项： <br> text：普通文本框 <br> password：密码框 <br> radio：单选按钮 <br> checkbox：多选按钮 <br> file：文件 <br> hidden：隐藏字段 <br> submit：文本提交按钮 <br> image： 图片提交按钮 <br> reset：重置按钮 <br> button：普通按钮 <br> </p> <p class="sycode"> 下拉列表<select> <br> 默认为单选，multipe属性指定是否为多选 <br> size属性指定显示个数 <br> 内部用<option>标签指定其中选项 <br> </p> <p class="sycode"> 文本域<textarea> <br> rows属性指定行数 <br> cols属性指定列数 <br> 标签<label> <br> 可以用来方便点击或者设置快捷键 <br> <label><input type="radio"> 男</label> <br> <label for="user" accesskey="u">用户名(u)</label> <br> <input type="text" id="user" /> <br> </p>
<pre name="code" class="sycode"><span style="font-size:14px;"> <form action="success.html" method="get"> <table width="50%" border="1" cellpadding="10" cellspacing="0"> <tr> <td>用户名：</td> <td><input id="user" name="username" type="text"></td> </tr> <tr> <td>密码：</td> <td><input name="password" id="pass"type="password"> </td> </tr> <tr> <td colspan="2" align="center"> <label><input type="radio" name="gender" value="male">男</label> <label><input type="radio" name="gender" value="female">女</label> </td> </tr> <tr> <td colspan="2" align="center"> <label><input type="checkbox" name="interest" value="smoke">抽烟</label> <label><input type="checkbox" name="interest" value="drink">喝酒</label> <label><input type="checkbox" name="interest" value="tangtou">烫头</label> </td> </tr> <tr> <td colspan="2" align="center"> <input type="file" name="portrait "> </td> </tr> <tr> <td>城市</td> <td> <select name="city"> <!--multiple="multiple" size="10" --> <option>-请选择城市-</option> <option value="bj">-北京-</option> <option>-广州-</option> <option>-成都-</option> <option>-上海-</option> </select> </td> </tr> <tr> <td>自我介绍</td> <td> <textarea name="rusume" rows="10" cols="30"> </textarea> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="注册"> <input type="image" src="../image/reg.gif"> <input type="reset" value="重填"> <input type="button" value="普通按钮" onclick="alert('你好！')"> </td> </tr> <label accesskey="u" for="user"></label><!-- 快捷键到指定id 仅ie支持 --> </table> <input type="hidden" name="xxx" value="ssss"> </form></span></pre> <br> <br> <br> <h2>10、注释<!-- --> 特殊字符</h2> <p class="sycode"> 特殊字符： <br> 一些特殊符号，比如< > & 等，在代码中会被浏览器识别并解释 <br> 所以用一些特殊的方式来表示 </p> <p class="sycode"> <br> </p> <p class="sycode"> </p> <p class="sycode"> 注释用<!-- 注释内容--> </p> <p class="sycode"> </p>
<h2> </h2> <br> </div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="(10) ng-inlude ディレクティブで page_html/css_WEB-ITnose の読み込みに失敗する原因と解決策" href="https://m.php.cn/ja/faq/275002.html">(10) ng-inlude ディレクティブで page_html/css_WEB-ITnose の読み込みに失敗する原因と解決策</a></span><span>次の記事：<a class="dBlack" title="(10) ng-inlude ディレクティブで page_html/css_WEB-ITnose の読み込みに失敗する原因と解決策" href="https://m.php.cn/ja/faq/275004.html">(10) ng-inlude ディレクティブで page_html/css_WEB-ITnose の読み込みに失敗する原因と解決策</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="https://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ja/faq/348757.html" title="HTMLの知識のまとめ" class="aBlack">HTMLの知識のまとめ</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/348804.html" title="HTMLを早く学ぶ方法" class="aBlack">HTMLを早く学ぶ方法</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/348873.html" title="html xhtml xml の違い" class="aBlack">html xhtml xml の違い</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/348884.html" title="src 属性と href 属性の違い" class="aBlack">src 属性と href 属性の違い</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/348902.html" title="HTML5とCSSの置き換え利用について" class="aBlack">HTML5とCSSの置き換え利用について</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p></div><div class="footermid"><a href="https://m.php.cn/ja/about/us.html">私たちについて</a><a href="https://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="https://m.php.cn/ja/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>
