2016.6.10-2016.6.17-HTML Tutorial-php.cn

说在前面：

嗯...博主现在是大一，前段时间犯脑癌想开一个技术博，记录一下学习过程，也是这么做的。

为什么要学前端呢？无非就是为了走在发家致富，迎娶白富美的康庄大道上。那几周来对前端开发已经入门了，（鼓掌，鼓掌）非常有意思。但还是感觉道阻且长。不懂的东西越来越多......不过还好，有好多人帮我呀，ありがとう。

html+css+js，入门很容易。读过网页设计的书也感觉OK。(捂脸，折腾小一个月还是有战果的)，希望懒癌远离我，让我坚持把博客写下去。

从这周开始对学过的HTML5和CSS，开始梳理一下知识点（我觉得重要的标签，今天先写一部分）。

头：

标签：定义在

标签中。用于定义网页的信息。

下面是一些总结：

<span style="color: #008080;"> 1</span>     <span style="color: #0000ff;"><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;"> 2</span>     <span style="color: #0000ff;"><span style="color: #ff00ff;">页面编码信息</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 3</span>     <span style="color: #0000ff;"><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 style="color: #ff00ff;">url被省略时，为刷新本页面</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 5</span>     <span style="color: #0000ff;"><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 style="color: #ff00ff;">设置网页缓存过期时间</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span>     <span style="color: #0000ff;"><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 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 style="color: #ff00ff;">禁止缓存</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">10</span>     <span style="color: #0000ff;"><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 style="color: #ff00ff;">删除cookie</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">12</span>     <span style="color: #0000ff;"><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 style="color: #ff00ff;">打开新窗口,top代表打开一个独立页面</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">14</span>     <span style="color: #0000ff;"><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 style="color: #ff00ff;">网页过度效果 用css和javascript代替</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">16</span>     <span style="color: #0000ff;"><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 style="color: #ff00ff;">帮搜索引擎，有的搜索引擎会限制关键字，之间用逗号隔开</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">18</span>     <span style="color: #0000ff;"><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 style="color: #ff00ff;">设置页面描述</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">20</span>     <span style="color: #0000ff;"><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 style="color: #ff00ff;">设置编辑工具</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">22</span>     <span style="color: #0000ff;"><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 style="color: #ff00ff;">设置作者</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">24</span>     <span style="color: #0000ff;"><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 style="color: #ff00ff;">限制搜索方式。。。</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Copy after login

页面标签：用于网页文字排版：

 <span style="color: #0000ff;"><span style="color: #ff00ff;">排版标签</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #ff00ff;">页面注释</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><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 style="color: #800000;">br</span><span style="color: #0000ff;">/></span>
    <span style="color: #0000ff;"><span style="color: #ff00ff;">换行标签</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><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 style="color: #ff00ff;">插入一条水平线,设置水平线的宽度和长度，颜色</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><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 style="color: #ff00ff;">水平线对齐方式，包括center，left，right，默认为center</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">hr </span><span style="color: #ff0000;">noshade</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #ff00ff;">去除水平线阴影</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><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 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 style="color: #ff00ff;">预设标签，文字按原文档格式显示</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><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 style="color: #ff00ff;">标签内的文字不会自动换行</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><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 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 style="color: #ff00ff;">页面文字</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><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 style="color: #ff00ff;">段落标签</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><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 style="color: #ff00ff;">设置不同的文字字体，h5中用span代替 </span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><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 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 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 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 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 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 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 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 style="color: #ff00ff;">空格</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">ruby</span><span style="color: #0000ff;">></span>被标注文字<span style="color: #0000ff;"><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 style="color: #ff00ff;">文字标注</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><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 style="color: #ff00ff;">变量声明</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Copy after login

音频文件为什么不响？

这周处理的一个技术问题是：我引入HTML文件的音频文件不响。下面的代码没有对播放器的格式进行太多设置（代码是正确的），毕竟没有学javascrit呢，现在只能用CSS改改播放器界面大小。

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><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 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 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 style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #008080;"> 7</span>     <span style="color: #0000ff;"><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 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 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></span></span></span></span></span></span></span></span>

Copy after login

原因：编译器不识别我引入的音频文件的格式，要在编译器里确定音频文件的格式为.mp3。