2016.6.10～2016.6.17

前にこう言いました:

うーん...このブロガーは現在新入生で、少し前に脳腫瘍と診断され、学習プロセスを記録するために技術ブログを開設したいと考えていました。

フロントエンドを学ぶ必要があるのはなぜですか?それは、お金持ちになり、美しい女性と結婚する道を歩むことだけです。この数週間でフロントエンド開発について学びましたが、(拍手、拍手) とても興味深いものでした。しかし、まだまだ先は長いように感じます。分からないことも増えてきました…でも幸いなことにたくさんの人が助けてくれています、ありがとう。

html+css+js なら、簡単に始めることができます。 Web デザインに関する本を読んだ後も、大丈夫だと感じています。 （顔を止めてください、1ヶ月も苦労しても結果は得られます） 怠惰な癌が私から遠ざかって、ブログを書き続けられることを願っています。

今週から、これまで学んだHTML5とCSSの知識の整理を始めました（今日は重要だと思うタグをいくつか書いていきます）。

---

ヘッダー:

タグ: タグ内で定義されます。 Web ページを定義するために使用される情報。

ここにいくつかの概要があります:

<span style="color: #008080;"> 1</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span> <span style="color: #0000ff;">/>
<span style="color: #008080;"> 2</span>     <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">页面编码信息</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="refresh"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="5"</span><span style="color: #ff0000;">; url</span><span style="color: #0000ff;">="www.baidu.com"</span><span style="color: #0000ff;">/></span>
<span style="color: #008080;"> 4</span>     <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">url被省略时，为刷新本页面</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="expires"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="Sunday 26 October 2016 01:00 GMT"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span>     <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">设置网页缓存过期时间</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="cache-control"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="no-cache"</span><span style="color: #0000ff;">/></span>
<span style="color: #008080;"> 8</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="pragma"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="no-cache"</span><span style="color: #0000ff;">/></span>
<span style="color: #008080;"> 9</span>     <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">禁止缓存</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">10</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="set-cookie"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="Sunday 26 October 2016 01:00 GMT"</span><span style="color: #0000ff;">/></span>
<span style="color: #008080;">11</span>     <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">删除cookie</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">12</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="window-target"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="_top"</span><span style="color: #0000ff;">/></span>
<span style="color: #008080;">13</span>     <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">打开新窗口,top代表打开一个独立页面</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">14</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="enter-equiv"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="revealtrans(duration=3,transition=12)"</span><span style="color: #0000ff;">/></span>
<span style="color: #008080;">15</span>     <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">网页过度效果 用css和javascript代替</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">16</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="keyword"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="网页设计"</span><span style="color: #0000ff;">/></span>
<span style="color: #008080;">17</span>     <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">帮搜索引擎，有的搜索引擎会限制关键字，之间用逗号隔开</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">18</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="description"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="学习网页设计的网站"</span><span style="color: #0000ff;">/></span>
<span style="color: #008080;">19</span>     <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">设置页面描述</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">20</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="generator"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="Adobe Dreamweaver CS3"</span><span style="color: #0000ff;">/></span>
<span style="color: #008080;">21</span>     <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">设置编辑工具</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">22</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="author"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="jingsen_liu"</span><span style="color: #0000ff;">/></span>
<span style="color: #008080;">23</span>     <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">设置作者</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">24</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="robots"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="all"</span><span style="color: #0000ff;">/></span>
<span style="color: #008080;">25</span>     <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">限制搜索方式。。。</span><span style="color: #0000ff;">></span>

</p>
<p>ページタグ: Web ページのテキストレイアウトに使用: </p>
<div class="cnblogs_code">
<pre class="brush:php;toolbar:false"> <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">排版标签</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">页面注释</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>段落标签<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">br</span><span style="color: #0000ff;">/></span>
    <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">换行标签</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">hr </span><span style="color: #ff0000;">width</span><span style="color: #0000ff;">="100"</span><span style="color: #ff0000;"> size</span><span style="color: #0000ff;">="100"</span><span style="color: #ff0000;"> color</span><span style="color: #0000ff;">="#9999ff"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">插入一条水平线,设置水平线的宽度和长度，颜色</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">hr </span><span style="color: #ff0000;">align</span><span style="color: #0000ff;">="center"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">水平线对齐方式，包括center，left，right，默认为center</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">hr </span><span style="color: #ff0000;">noshade</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">去除水平线阴影</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">center</span><span style="color: #0000ff;">></span>居中标签<span style="color: #0000ff;"></</span><span style="color: #800000;">center</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">pre</span><span style="color: #0000ff;">></span>文字<span style="color: #0000ff;"></</span><span style="color: #800000;">pre</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">预设标签，文字按原文档格式显示</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">nobr</span><span style="color: #0000ff;">></span>不折行<span style="color: #0000ff;"></</span><span style="color: #800000;">nobr</span><span style="color: #0000ff;">></span><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">标签内的文字不会自动换行</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">blockquote</span><span style="color: #0000ff;">></span>向右缩进<span style="color: #0000ff;"></</span><span style="color: #800000;">blockquote</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>层标签<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">><br><br></span>
    <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">页面文字</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>标题格式<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">段落标签</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">font </span><span style="color: #ff0000;">face</span><span style="color: #0000ff;">="宋体，隶书"</span><span style="color: #ff0000;"> color</span><span style="color: #0000ff;">="blue"</span><span style="color: #ff0000;"> size</span><span style="color: #0000ff;">="4"</span><span style="color: #0000ff;">></span>文字<span style="color: #0000ff;"></</span><span style="color: #800000;">font</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">设置不同的文字字体，h5中用span代替 </span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">em</span><span style="color: #0000ff;">></span>斜体字<span style="color: #0000ff;"></</span><span style="color: #800000;">em</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>粗体字<span style="color: #0000ff;"></</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">u</span><span style="color: #0000ff;">></span>带下滑线文字<span style="color: #0000ff;"></</span><span style="color: #800000;">u</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">strike</span><span style="color: #0000ff;">></span>删除线文字<span style="color: #0000ff;"></</span><span style="color: #800000;">strike</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">s</span><span style="color: #0000ff;">></span>删除线文字<span style="color: #0000ff;"></</span><span style="color: #800000;">s</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">sub</span><span style="color: #0000ff;">></span>下标<span style="color: #0000ff;"></</span><span style="color: #800000;">sub</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">sup</span><span style="color: #0000ff;">></span>上标<span style="color: #0000ff;"></</span><span style="color: #800000;">sup</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">code</span><span style="color: #0000ff;">></span>等宽标签，多用于英语<span style="color: #0000ff;"></</span><span style="color: #800000;">code</span><span style="color: #0000ff;">></span>
    <span style="color: #ff0000;"> </span>
    <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">空格</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">ruby</span><span style="color: #0000ff;">></span>被标注文字<span style="color: #0000ff;"><</span><span style="color: #800000;">rt</span><span style="color: #0000ff;">></span>标注文字<span style="color: #0000ff;"></</span><span style="color: #800000;">rt</span><span style="color: #0000ff;">></</span><span style="color: #800000;">ruby</span><span style="color: #0000ff;">></span><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">文字标注</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">var</span><span style="color: #0000ff;">></span>x<span style="color: #0000ff;"></</span><span style="color: #800000;">var</span><span style="color: #0000ff;">></span><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">变量声明</span><span style="color: #0000ff;">></span>

音声ファイルが鳴らないのはなぜですか?

今週扱う技術的な問題は、HTML ファイルにインポートしたオーディオ ファイルが鳴らないということです。次のコードでは、プレーヤーにあまり多くの形式を設定していません (コードは正しいです)。結局のところ、私は JavaScript を学習していないので、プレーヤー インターフェイスのサイズを変更することしかできません。

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span> <span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="utf-8"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 4</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 6</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">audio </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>audio player not available.<span style="color: #0000ff;"></</span><span style="color: #800000;">audio</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 8</span>     <span style="color: #0000ff;"><</span><span style="color: #800000;">audio </span><span style="color: #ff0000;">controls</span><span style="color: #0000ff;">="controls"</span><span style="color: #ff0000;"> autoplay</span><span style="color: #0000ff;">="autoplay"</span><span style="color: #ff0000;"> loop</span><span style="color: #0000ff;">="loop"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">source </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="１.mp3"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="audio/mp3"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">audio</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 9</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">10</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>

原因: コンパイラが、導入した音声ファイルの形式を認識しません。音声ファイルの形式が .mp3 であることをコンパイラで確認する必要があります。

---