2016.6.10-2016.6.17-html教程-PHP中文网

首页

web前端

html教程

2016.6.10-2016.6.17

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 20, 2016 am 08:42 AM

说在前面：

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

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

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>

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

 <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>

音频文件为什么不响？

这周处理的一个技术问题是：我引入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>

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

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。

HTML，CSS和JavaScript的角色：核心职责Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML容易为初学者学习吗？Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML中起始标签的示例是什么？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。