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的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解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。

See all articles