目标
30分钟内让你明白HTML是什么，并对它有一些基本的了解。一旦入门后，你可以从网上找到更多更详细的资料来继续学习。
什么是HTML
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，它规定了自己的语法规则，用来表示比“文本”更丰富的意义，比如图片，表格，链接等。浏览器（IE,FireFox等）软件知道HTML语言的语法，可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。
HTML是什么样的
简单地来说，HTML的语法就是给文本加上表明文本含义的标签(Tag)，让用户（人或程序）能对文本得到更好的理解。
下面是一个最简单的HTML文档：
点击查看效果
第一个Html文档 欢迎访问
脚本之家!
所有的HTML文档都应该有一个标签，标签可以包含两个部分:
和。
标签用于包含整个文档的一般信息，比如文档的标题（
标签用于包含标题），对整个文档的描述，文档的关键字等等。文档的具体内容就要放在<body>标签里了。</p> <p><a>标签用于表示链接，在浏览器（如IE,Firefox等）中查看HTML文档时，点击<a>标签括起来的内容时，通常会跳转到另一个页面。这个要跳转到的页面的地址由<a>标签的href属性指定。上面的<a href="http://deerchao.net">中，href属性的值就是http://deerchao.net。</p> <h2>HTML文档可以包含的内容</h2> <p>通过不同的标签，HTML文档可以包含不同的内容，比如文本，链接，图片，列表，表格，表单，框架等。</p> 文本 HTML对文本的支持是最丰富的，你可以设置不同级别的标题，分段和换行，可以指定文本的语义和外观，可以说明文本是引用自其它的地方，等等等等。 链接 链接用来指出内容与另一个页面或当前页面某个地方有关。 图片 图片用于使页面更加美观，或提供更多的信息。 列表 列表用于说明一系列条目是彼此相关的。 表格 表格是按行与列将数据组织在一起的形式。也有不少人使用表格进行页面布局。 表单 表单通常由文本输入框，按钮，多选框，单选框，下拉列表等组成，使HTML页面更有交互性。 框架 框架使页面里能包含其它的页面。 <h2>HTML文档格式详细说明</h2> <p>前面介绍了HTML文档的基本格式，下面再做一个详细说明。</p> <p>HTML文档可以用任何文本编辑器（比如记事本，UltraEdit等）创建，编辑，因为它的内容在本质也只是一些文本。</p> <p>在HTML文本中，用尖括号括起来的部分称为标签。如果想在正文里使用尖括号（或者大与号小与号，总之是同一个东西），必须使用字符转义，也就是说转换字符的原有意义。<应该使用<代替，>则使用>，至于&符号本身,则应该使用&替代（不得不说的是有很多HTML文档没有遵循这个规则，常用的浏览器也都能够分析出&到底是一个转义的开始，还是一个符号，但是这样做是不推荐的）。</p> <p>标签本质上是对它所包含的内容的说明，可能会有属性，来给出更多的信息。比如<img>（图片）标签有src属性（用于指明图片的地址），width和height属性（用于说明图片的宽度和高度）。HTML里能使用哪些标签，这些标签分别可以拥有哪些属性，这些都是有规定的，知道了这里说的基本知识之后，学习HTML其实也就是学习这些标签了。本文后面会对常用的HTML标签做出简短的介绍。</p> <p>标签通常有开始部分和结束部分（也被称为开始标签和结束标签），它们一起限定了这个标签所包含的内容。属性只能在开始标签中指定，属性值可以用单引号或双引号括起来。结束标签都以/加上标签名来表示。有时候，有些标签并不包含其它内容（只包括自己的属性，甚至连属性都没有），这种情况下，可以写成类似这样：<img src="logo.gif" />。注意最后的一个空格和一个反斜杠，它说明这个标签已经结束，不需要单独的结束标签了。</p> <p>某些标签包含的内容中还可以有新的标签，新的标签名甚至可能还可以与包含它的标签的名称相同（哪些标签可以包含标签，可以包含哪些标签也是有规定的）。比如：</p> <p> 点击查看效果</p> <p class="sycode"> <div> <br> <div>分类目录...</div> <br> <div>当前分类内容列表...</div> <br> </div> </p> <p>在这种情况下，最后出现的标签应该最先结束。</p> <p>HTML文档里所有的空白符（空格，Tab，换行，回车）会被浏览器忽略，唯一的例外是空格，对空格的处理方式是所有连续的空格被当成一个空格，不管有一个，还是两个，还是100个。之所以有这样的规则是因为忽略空白符能让使用HTML的作者以他觉得最方便的格式来排列内容，比如可以在每个标签开始后增加缩进，标签结束后减少缩进。由于英语文本中空格用得很普遍（用于分隔单词），所以对空格做了这样的特殊处理。如果要显示连续的空格（比如为了缩进），应该用 来代表空格。</p> <h2>常用标签介绍</h2> <h3> 文本</h3> <p>最常用的标签可能是<font>了，它用于改变字体，字号，文字颜色。</p> <p> 点击查看效果</p> <p class="sycode"> <font size="6">6</font> <br> <font size="4">4</font> <br> <font color="red" size="5">红色的5</font> <br> <font face="黑体">黑体的字</font> </p> <p>加粗，下划线，斜体字也是常用的文字效果，它们分别用<b>,<u>,<i>表示：</p> <p> 点击查看效果</p> <p class="sycode"> <b>Bold</b> <br> <i>italic</i> <br> <u>underline</u> </p> <p>还有一些标签，用来指出包含的文本有特殊的意义，比如<abbr>（表示缩写），<em>（表示强调），<strong>（表示更强地强调）,<cite>（表示引用），<address>（表示地址）等等。这些标签不是为了定义显示效果而存在的，所以从浏览器里看它们可能没有任何效果，也可能不同的浏览器对这些标签的显示效果完全不同。</p> <p>一篇很长的文章，如果有合适的小标题的话，就可以快速地对它的内容进行大致的了解。在HTML里，用来表示标题的标签有：<h1>,<h2>,<h3>,<h4>,<h5>,<h6>，它们分别表示一级标题，二级标题，三级标题...</p> <p> 点击查看效果</p> <p class="sycode"> <h1>HTML 30分钟教程</h1> <br> <h2>什么是HTML</h2> <br> ... <br> <h2>HTML是什么样的</h2> <br>... </p> <h3>图片</h3> <p><hr>标签用于在页面上添加横线。可以通过指定width和color属性来控制横线的长度和颜色。</p> <p> 点击查看效果</p> <p class="sycode"> <hr width="90%" color="red" /> </p> <p><img>标签用于在页面上添加图片，src属性指定图片的地址，如果无法打开src指定的图片，浏览器通常会在页面上需要显示图片的地方显示alt属性定义的文本。</p> <p> 点击查看效果</p> <p class="sycode"> <img src="http://www.w3.org/Icons/valid-xhtml10" alt="图片简介" /> </p> <h3>链接</h3> <p>超级链接用<a>标签表示，href属性指定了链接到的地址。<a>标签可以包含文本，也可以包含图片。</p> <p> 点击查看效果</p> <p class="sycode"> <a href="http://deerchao.net">Unibetter大学生论坛</a> <br> <a href="http://validator.w3.org"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="验证HTML" /></a> </p> <h3>分段与换行</h3> <p>由于HTML文档会忽略空白符，所以要想保证正常的分段换行的话，必须指出哪些文字是属于同一段落的，这就用到了标签<p>。</p> <p> 点击查看效果</p> <p class="sycode"> <p>这是第一段。</p> <br><p>这是第二段。</p> </p> <p>也有人不用<p>，而用<br>。<br>只表示换行，不表示段落的开始或结束，所以通常没有结束标签。</p> <p> 点击查看效果</p> <p class="sycode"> 这是第一段。<br> <br>这是第二段。<br /> <br>这是第三段。 </p> <p>有时，要把文档看作不同的部分组合起来的，比如一个典型的页面可能包括三个部分：页头，主体，页脚。<div>标签专门用于标明不同的部分：</p> <p> 点击查看效果</p> <p class="sycode"> <div>页头内容</div> <br><div>主体内容</div> <br><div>页脚内容</div> </p> <h3>テーブル</h3> <p>HTML ドキュメントは通常、ブラウザ内で左から右、上から下に表示され、ウィンドウの右側に到達すると自動的に折り返されます。列効果を実現するために、多くの人がページ レイアウトにテーブル (<table>) を使用します (ただし、HTML でテーブルを提供する本来の目的はレイアウトのためではありません)。 </p> <table> タグには通常、複数の <tr> タグが含まれており、<tr> はテーブル内の行を表します。 <tr> タグには <td> タグが含まれ、各 <td> はセルを表します。 <p> </p> クリックして効果を表示します<p> <tr> </p> <td>2004</td></td> gt;<p class="sycode"> <td><td>北京</td> <br> </table> <br><tr>または</p>
<table> の <tbody> または </tbody>
<tfoot>これらはそれぞれ、テーブルヘッダー、テーブル本体、テーブル脚部を表します。 Web ページを印刷するときに、表が大きすぎて 1 ページに印刷できない場合は、<thead> と </thead>
<tfoot> がすべてのページに表示されます。 <br> <br><th> は <td> とよく似ており、<tr> でも使用されます。違いは、<th> がセルが配置されている行または列のタイトルであることです。 <br> <br> クリックして効果を確認してください<br> <thead> <br> <td></td><td>ニー</td>< ;/tr> <br /> ;/td> <td>アテネ</td></tr> </p> <td>2000</td><td>北京</td></tr> ; <p> </tbody> </table> <p> </p>List<p> </p>Table は 2 次元データ (行、列) を表すために使用されますが、1 次元データはリストで表されます。リストは、順序なしリスト (<ul>)、順序付きリスト (<ol>)、および定義リスト (<dl>) に分類できます。最初の 2 種類のリストはより一般的で、どちらも <li> タグを使用してリスト項目を含めます。 <p class="sycode"> <br>順序なしリストは、間に順序のない、一連の同様の項目を表します。效 看 <br> & lt;/li & gt; <br> & lt;/li & gt; & lt;/li & gt; l & lt;/ul & gt; <br> <br> 順序付きリスト内の項目間の順序は非常に重要であり、通常、ブラウザーはそれらの番号を自動的に生成します。 <br> <br> クリックして効果を確認してください<br> <ol> <br> <li>冷蔵庫のドアを開けます</li> </p> <li>冷蔵庫のドアを閉めます</ li> <h3> </ol> </h3> <p>フレーム</p> <p> 最後に、フレームを使用すると、複数のドキュメントを 1 つのウィンドウに同時に表示できるようになります。メインフレームページには <body> タグはなく、<frameset> に置き換えられます。 </p> <p><frameset> タグの Rows 属性と Cols 属性は、フレームセット (フレームセット) に含まれる行 (列) の数と、各行 (列) の高さ (幅) を指定するために使用されます。 </p> <p class="sycode"> <frameset> タグには <frame> タグを含めることができ、各 <frame> タグはドキュメントのアドレスを指定します。 <br> <br>このようなページは十分に複雑ではないと思われる場合は、<frameset> タグの中に <frameset> タグを含めることもできます。 <br> <br> クリックして効果を確認してください</p>
<p class="sycode"> <frameset rows="15%,*"> <br> <frame src="top.html" name=titlescrolling=no> <br> <framesetcols="20%,*"> src="left.html" name=サイドバー> <br>これまで一度も行ったことのない人々にHTML に触れるのは HTML の予備的な印象なので、多くのことが議論されていません。この記事では、HTML のすべてのタグをリストしたり、リストされたタグのすべての属性を紹介したりするわけではありません。また、言及されていないものとしては、CSS、JavaScript、XHTML、XML、非常に重要だと思う Web 標準、および HTML との関係が挙げられます。ただし、これらを 30 分で学習できるとは考えにくいです。幸いなことに、始めさえすれば、多くのオンライン リソースを使用して学習を続けることができます。もちろん、紙の本があればそれに越したことはありませんが、『HTML と XHTML の決定版』をお勧めします。私が良いと思うオンライン リソースをいくつか紹介します。 <br> <br>HTML 言語リファレンス (英語) <br> </p>HTML チュートリアル<h2> </h2> すでにご存知かと思われるいくつかの用語へのリファレンス <p> テキスト ドキュメント ファイル。通常はデータ (データではなく) を指します。プログラム) ) ファイル</p>
</tfoot>
</tfoot>
</table></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="jquery が ie8 で PNG の不透明度を変更すると、黒いエッジが表示されます。ie6_html/css_WEB-ITnose での PNG 透明度の解決策" href="https://m.php.cn/ja/faq/273310.html">jquery が ie8 で PNG の不透明度を変更すると、黒いエッジが表示されます。ie6_html/css_WEB-ITnose での PNG 透明度の解決策</a></span><span>次の記事：<a class="dBlack" title="jquery が ie8 で PNG の不透明度を変更すると、黒いエッジが表示されます。ie6_html/css_WEB-ITnose での PNG 透明度の解決策" href="https://m.php.cn/ja/faq/273312.html">jquery が ie8 で PNG の不透明度を変更すると、黒いエッジが表示されます。ie6_html/css_WEB-ITnose での PNG 透明度の解決策</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>
