大数据分析师HTML+CSS培训

银河统计HTML练习教程

目录	HTML & CSS代码刷新
HTML练习教程 HTML基本标签介绍文档结构文本格式化预格式文本计算机输出标签地址标题段落链接锚点图片无序列表有序列表表格表单内联框架 HTML媒体什么是HTML媒体视频格式音频格式致爱丽丝（音频格式mid） My Heart Will Go On（音频格式MP3） My Heart Will Go On（视频格式MP4）音乐和视频欣赏 HTML表格设计基本表格带标题的表格带CSS样式的HTML表格开口式统计表单元格跨行、跨列 HTML其它设计列表嵌套（二级目录）列表嵌套（三级目录）图文混排定向链接
HTML显示

<form name="mycs" action="html_form_action.asp" method="get">
<b>命令按钮 (Buttons)</b> <input type="button" name="firstname" value="执行命令" onclick="setValue()">
<br/>
<b>文本行 (Text field)</b><br/>
名：<input type="text" name="firstname" id="firstname"/>
<br/>
姓：<input type="text" name="lastname" id="lastname"/>
<p/>
<b>密码 (Password)</b><br/>
密码：<input type="password" name="password"/>
<p/>
<b>单选按钮（Radio Buttons）</b><br/>
<input type="radio" name="sex" value="male" /> Male
<br/>
<input type="radio" name="sex" value="female" /> Female
<p/>
<b>复选框（Checkboxes）</b><br/>
<input type="checkbox" name="bike"/>
I have a bike
<br/>
<input type="checkbox" name="car"/>
I have a car
<p/>
<b>表单的动作属性（Action）和确认按钮</b><br/>
Username: 
<input type="text" name="user"/>
<input type="submit" value="Submit"/>
<p/>
<b>下拉列表（Select）</b><br/>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
<p/>
<b>创建命令按钮（Button）</b><br/>
<input type="button" value="Hello world!" onclick="alert('Hello world!')">
<p/>
<b>表单集合框（Fieldset）</b><br/>
  <fieldset style="width:220px; text-align:center;">
    <legend>健康信息</legend>
    身高：<input type="text" /><br/>
    体重：<input type="text" />
  </fieldset>

<p>如果表单周围没有边框，说明您的浏览器太老了。</p>
<b>文本域（Textarea）</b><br/>
<p>
This example cannot be edited
because our editor uses a textarea
for input,
and your browser does not allow
a textarea inside a textarea.
</p>
<textarea rows="10" cols="30">
The cat was playing in the garden.

<iframe src="html/colorTable.html" width="1200" height="500"></iframe> <h1>HTML 多媒体</h1> <div> <p><strong>Web 上的多媒体指的是音效、音乐、视频和动画。</strong></p> <p><strong>现代网络浏览器已支持很多多媒体格式。</strong></p> </div> <div> <h2>什么是多媒体？</h2> <p>多媒体来自多种不同的格式。它可以是您听到或看到的任何内容，文字、图片、音乐、音效、录音、电影、动画等等。</p> <p>在因特网上，您会经常发现嵌入网页中的多媒体元素，现代浏览器已支持多种多媒体格式。</p> <p>在本教程中，您将了解到不同的多媒体格式，以及如何在您的网页中使用它们。</p> </div> <div> <h2>浏览器支持</h2> <p>第一款因特网浏览器只支持文本，而且即使是对文本的支持也仅限于单一字体和单一颜色。随后诞生了支持颜色、字体和文本样式的浏览器，图片支持也被加入。</p> <p>不同的浏览器以不同的方式处理对音效、动画和视频的支持。某些元素能够以内联的方式处理，而某些则需要额外的插件。</p> <p>您将在下面的章节学习更多有关插件的知识。</p> </div> <h2>多媒体格式</h2> <p>多媒体元素（比如视频和音频）存储于媒体文件中。</p> <p>确定媒体类型的最常用的方法是查看文件扩展名。当浏览器得到文件扩展名 .htm 或 .html 时，它会假定该文件是 HTML 页面。.xml 扩展名指示 XML 文件，而 .css 扩展名指示样式表。图片格式则通过 .gif 或 .jpg 来识别。</p> <p>多媒体元素元素也拥有带有不同扩展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。</p> <h2>视频格式</h2> <p>MP4 格式是一种新的即将普及的因特网视频格式。HTML5 、Flash 播放器以及优酷等视频网站均支持它。</p> <table border=1 style="width:800px;"> <tr> <th style="width:14%;">格式</th> <th style="width:10%;">文件</th> <th>描述</th> </tr> <tr> <td>AVI</td> <td>.avi</td> <td>AVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式，但非 Windows 计算机并不总是能够播放。</td> </tr> <tr> <td>WMV</td> <td>.wmv</td> <td>Windows Media 格式是由微软开发的。Windows Media 在因特网上很常见，但是如果未安装额外的（免费）组件，就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放，因为没有合适的播放器。</td> </tr> <tr> <td>MPEG</td> <td> <ul> <li>.mpg</li> <li>.mpeg</li> </ul> </td> <td>MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的，得到了所有最流行的浏览器的支持。</td> </tr> <tr> <td>QuickTime</td> <td>.mov</td> <td>QuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式，但是 QuickTime 电影不能在没有安装额外的（免费）组件的 Windows 计算机上播放。</td> </tr> <tr> <td>RealVideo</td> <td> <ul> <li>.rm</li> <li>.ram</li> </ul> </td> <td>RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下（在线视频、网络电视）的视频流。由于是低带宽优先的，质量常会降低。</td> </tr> <tr> <td>Flash</td> <td> <ul> <li>.swf</li> <li>.flv</li> </ul> </td> <td>Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。</td> </tr> <tr> <td>Mpeg-4</td> <td>.mp4</td> <td>Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上，YouTube 推荐使用 MP4。YouTube 接收多种格式，然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4，将其作为 Flash 播放器和 HTML5 的因特网共享格式。</td> </tr> </table> <h2>声音格式</h2> <table border=1 style="width:800px;"> <tr> <th style="width:14%;">格式</th> <th style="width:10%;">文件</th> <th>描述</th> </tr> <tr> <td>MIDI</td> <td> <ul> <li>.mid</li> <li>.midi</li> </ul> </td> <td> <p>MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备（比如合成器和声卡）的格式。MIDI 文件不含有声音，但包含可被电子产品（比如声卡）播放的数字音乐指令。</p> <p>因为 MIDI 格式仅包含指令，所以 MIDI 文件极其小巧。上面的例子只有 23k 的大小，但却能播放将近 5 分钟。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。</p> </td> </tr> <tr> <td>RealAudio</td> <td> <ul> <li>.rm</li> <li>.ram</li> </ul> </td> <td>RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流（在线音乐、网络音乐）。由于是低带宽优先的，质量常会降低。</td> </tr> <tr> <td>Wave</td> <td>.wav</td> <td>Wave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器（除了 Google Chrome）都支持它。</td> </tr> <tr> <td>WMA</td> <td>.wma</td> <td>WMA 格式 (Windows Media Audio)，质量优于 MP3，兼容大多数播放器，除了 iPod。WMA 文件可作为连续的数据流来传输，这使它对于网络电台或在线音乐很实用。</td> </tr> <tr> <td>MP3</td> <td> <ul> <li>.mp3</li> <li>.mpga</li> </ul> </td> <td>MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它。</td> </tr> </table> 致爱丽丝<br/> <embed height="100" width="300" src="media/mid/Elise.mid"></embed> <p><b>注释：</b>浏览器可能需要安装插件以后，才能播放该文件。</p> 我心依旧（My Heart Will Go On）<br/> <embed height="100" width="300" src="media/mp3/myHeartWillGoOn.mp3"></embed> <p><b>注释：</b>浏览器可能需要安装插件以后，才能播放该文件。</p> 我心依旧（My Heart Will Go On）<br/> <embed height="300" width="500" src="media/mp4/myhertgoon.mp4"></embed> <p><b>注释：</b>浏览器可能需要安装插件以后，才能播放该文件。</p> <b>音乐和视频欣赏</b><br/> <select id="myChoose" onchange="setMusic()" style="width:400px;"> <option>My Heart Will Go On（音频格式MP3）</option> <option selected="selected">My Heart Will Go On（视频格式MP4）</option> <option>致爱丽丝（音频格式mid）</option> <option>星(日本歌曲 - 邓丽君演唱，mp4）</option> <option>再回首_标清（视频格式avi）</option> <option>索朗旺姆—《天路》（视频格式flv）</option> <option>《教父》主题曲speak softly love柔声倾诉（视频格式MP4）</option> <option>上海滩 - 叶丽仪 - 粤语（视频格式MP4）</option> <option>角斗士MV（视频格式flv）</option> <option>角斗士MV（视频格式mp4）</option> <option>勇敢的心 - BraveHeart（音频格式MP3）</option> </select><br/> <div id="myBox"> <embed height="300" width="400px" src="media/mp4/myhertgoon.mp4"></embed> </div> <p><b>注释：</b>浏览器可能需要安装插件以后，才能播放该文件。</p> <table border=1 cellspacing=0 cellpadding=5 width="100%"> <tr><th>姓名</th><th>民族</th></tr> <tr><td>张三</td><td>汉族</td></tr> <tr><td>李四</td><td>回族</td></tr> </table> <table border=5 width=300> <caption>我的标题</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> <table border=1 cellspacing=0 cellpadding=5 style="width:100%; color:#ff6666; text-align:center;"> <tr style="background-color:#aaaaff;"> <th>姓名</th><th>民族</th><th>籍贯</th></tr> <tr><td>张三</td><td>汉族</td><td>长春</td></tr> <tr><td>李四</td><td>回族</td><td>大连</td></tr> </table> <table border=0 cellspacing=0 cellpadding=5 width="100%" style="border-top:2px solid #000000; border-bottom:2px solid #000000;"> <tr> <th style="border-right:1px solid #000000;"> 产量 </th> <th style="border-right:1px solid #000000;"> 人数 </th> <th>累计人数</th> </tr> <tr> <td style="border-top:1px solid #000000; border-right:1px solid #000000;">4 </td> <td style="border-top:1px solid #000000; border-right:1px solid #000000;">8 </td> <td style="border-top:1px solid #000000;">8 </td> </tr> <tr> <td style="border-right:1px solid #000000;">5 </td> <td style="border-right:1px solid #000000;">22 </td> <td>30</td> </tr> <tr> <td style="border-right:1px solid #000000;">6 </td> <td style="border-right:1px solid #000000;">42 </td> <td>72</td> </tr> <tr> <td style="border-right:1px solid #000000;">7 </td> <td style="border-right:1px solid #000000;">38 </td> <td>110</td> </tr> <tr> <td style="border-right:1px solid #000000;">8 </td> <td style="border-right:1px solid #000000;">17 </td> <td>127</td></tr> <tr> <td style="border-right:1px solid #000000;">9 </td> <td style="border-right:1px solid #000000;">3 </td> <td>130</td> </tr> <tr> <td style="border-top:1px solid #000000; border-right:1px solid #000000;">合计 </td> <td style="border-top:1px solid #000000; border-right:1px solid #000000;">130 </td> <td style="border-top:1px solid #000000;">*** </td> </tr> </table> <table border=0 cellspacing=0 cellpadding=5 width="100%" style="border-top:2px solid #000000; border-bottom:2px solid #000000;"> <tr> <th rowspan=2 style="border-right:1px solid #000000;"> 产量 </th> <th colspan=2> 人数指标 </th> </tr> <tr> <th style="border-right:1px solid #000000; border-top:1px solid #000000;"> 人数 </th> <th style="border-top:1px solid #000000;"> 累计人数 </th> </tr> <tr> <td style="border-top:1px solid #000000; border-right:1px solid #000000;">4 </td> <td style="border-top:1px solid #000000; border-right:1px solid #000000;">8 </td> <td style="border-top:1px solid #000000;">8 </td> </tr> <tr> <td style="border-right:1px solid #000000;">5 </td> <td style="border-right:1px solid #000000;">22 </td> <td>30</td> </tr> <tr> <td style="border-right:1px solid #000000;">6 </td> <td style="border-right:1px solid #000000;">42 </td> <td>72</td> </tr> <tr> <td style="border-right:1px solid #000000;">7 </td> <td style="border-right:1px solid #000000;">38 </td> <td>110</td> </tr> <tr> <td style="border-right:1px solid #000000;">8 </td> <td style="border-right:1px solid #000000;">17 </td> <td>127</td></tr> <tr> <td style="border-right:1px solid #000000;">9 </td> <td style="border-right:1px solid #000000;">3 </td> <td>130</td> </tr> <tr> <td style="border-top:1px solid #000000; border-right:1px solid #000000;">合计 </td> <td style="border-top:1px solid #000000; border-right:1px solid #000000;">130 </td> <td style="border-top:1px solid #000000;">*** </td> </tr> </table> <b>哈尔滨商业大学</b>（一级列表） <ul> <li>教学部门</li> <li>行政部门</li> </ul> <p/> <b>哈尔滨商业大学</b>（二级列表） <ul> <li>教学部门 <ul> <li>经济学院</li> <li>基础学院</li> </ul> </li> <li>行政部门 <ul> <li>人事处</li> <li>教务处</li> </ul> </li> </ul> <p/> <b>哈尔滨商业大学</b>（三级列表） <ul> <li>教学部门 <ul> <li>经济学院 <ul> <li><a href="html/tbPage.html">统计学教研室</a></li> <li>西方经济学教研室</li> <li>国贸教研室</a></li> </ul> </li> <li>基础学院 <ul> <li>数学教学部</li> <li>外语教学部</li> </ul> </li> </ul> </li> <li>行政部门 <ul> <li>人事处 <ul> <li>工资科</li> <li>人事科</li> </ul> </li> <li>教务处 <ul> <li>教务科</li> <li>设备科</li> <li>师资科</li> </ul> </li> </ul> </li> </ul> <p/> <center> <table style="width:710px;"><caption><h2>图片居右</h2></caption><tr><td> <img src="img/test2.jpg" style="width:400px; height:300px;" align="right"> 这里是绕排的。国内的VB网站中vbgood以每日更新，资料量丰富，而深受程序爱好者的喜欢。 </td></tr></table><p/> <table style="width:710px;"><caption><h2>图片居左</h2></caption><tr><td> <img src="img/test1.jpg" style="width:400px; height:300px;" align="left"> 这里是绕排的。国内的VB网站中vbgood以每日更新，资料量丰富，而深受程序爱好者的喜欢。 </td></tr></table><p/> <table style="width:410px;"><caption><h2>图片居上</h2></caption><tr><td> <img src="img/test1.jpg" style="width:400px; height:300px;"> 这里是绕排的。国内的VB网站中vbgood以每日更新，资料量丰富，而深受程序爱好者的喜欢。 </td></tr></table><p/> <table style="width:410px;"><caption><h2>图片居下</h2></caption><tr><td> 这里是绕排的。国内的VB网站中vbgood以每日更新，资料量丰富，而深受程序爱好者的喜欢。 <img src="img/test1.jpg" style="width:400px; height:300px;"> </td></tr></table><p/> </center> <a name="A0" id="A0"></a> <b>定向链接</b> <ul> <li><a href="#" onclick="alert(123456789)">作为命令按钮</a></li> <li><a href="html/tbPage.html">转到其它网页</a></li> <li><a href="html/tbPage.html" target="new">原网页保留，打开新网页</a></li> <li><a href="html/tbPage.html" target="myFrame">为内联框架指定打开网页</a></li> <li><a href="#A1">在当前网页内跳转到锚点位置</a></li> </ul> <p/> <iframe id="myFrame" src="html/colorTable.html" width="800" height="500"></iframe> <b>网页标题</b><a name="A1" id="A1"> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6><p/> <a href="#A0">返回顶部</a> <b>目录结构</b>（根目录主文件：myBook.html） <ul> <li>HTML <ul> <li>colorTable.html</li> <li>divPage.html</li> <li>myPage.html</li> <li>tbPage.html</li> <li>test1.html</li> <li>test2.html</li> <li>test3.html</li> </ul> </li> <li>img <ul> <li>test1.jpg</li> <li>test2.jpg</li> </ul> </li> <li>media <ul> <li>avi <ul> <li>再回首_标清.avi</li> </ul> </li> <li>flv <ul> <li>角斗士MV_标清.flv</li> <li>索朗旺姆—《天路》_标清.flv</li> </ul> </li> <li>mid <ul> <li>Elise.mid</li> </ul> </li> <li>mp3 <ul> <li>BraveHeart.mp3</li> <li>myHeartWillGoOn.mp3</li> </ul> </li> <li>mp4 <ul> <li>myhertgoon.mp4</li> <li>怀旧经典：《教父》主题曲speak softly love柔声倾诉--Andy Will[高清版].mp4</li> <li>角斗士MV_标清.mp4</li> <li>上海滩 - 叶丽仪粤语_高清.mp4</li> <li>星(邓丽君演唱的日本歌曲现场版)[标清版].mp4</li> </ul> </li> </ul> </li> <li>myBook.html</li> <li>HTML语言教程(完整版).pdf</li> <li>css样式表—讲座.ppt</li> <li>...</li> </ul> <p/> <p><b>字体大小：“font-size:20pt;”</b></p> <div style="font-size:20pt;">据外交部网站消息，国家主席习近平将于11月29日至11月30日赴法国出席气候变化巴黎大会开幕活动。“气候变化是全球性挑战，任何一国都无法置身事外。”针对全球气候变化议题，习近平主席在多个场合曾阐述中方观点和承诺，并积极推动全球应对气候变化的多边进程。为此，学习路上为读者整理习近平对气候变化议题的重要论述。</div> <p><b>字体样式：“font-style:oblique;(偏斜体)\italic;(斜体)\normal;(正常)”</b></p> <div style="font-style:italic; font-size:20pt;">据外交部网站消息，国家主席习近平将于11月29日至11月30日赴法国出席气候变化巴黎大会开幕活动。“气候变化是全球性挑战，任何一国都无法置身事外。”针对全球气候变化议题，习近平主席在多个场合曾阐述中方观点和承诺，并积极推动全球应对气候变化的多边进程。为此，学习路上为读者整理习近平对气候变化议题的重要论述。</div> <p><b>文字行高：“line-height:24pt;"，或为像素单位“line-height:20px;"</b></p> <div style="line-height:24pt;">据外交部网站消息，国家主席习近平将于11月29日至11月30日赴法国出席气候变化巴黎大会开幕活动。“气候变化是全球性挑战，任何一国都无法置身事外。”针对全球气候变化议题，习近平主席在多个场合曾阐述中方观点和承诺，并积极推动全球应对气候变化的多边进程。为此，学习路上为读者整理习近平对气候变化议题的重要论述。</div> <p><b>文字粗细：“font-weight: bold;(粗体)\lighter;(细体)\normal;(正常)”</b></p> <div style="font-weight: bold;">据外交部网站消息，国家主席习近平将于11月29日至11月30日赴法国出席气候变化巴黎大会开幕活动。“气候变化是全球性挑战，任何一国都无法置身事外。”针对全球气候变化议题，习近平主席在多个场合曾阐述中方观点和承诺，并积极推动全球应对气候变化的多边进程。为此，学习路上为读者整理习近平对气候变化议题的重要论述。</div> <p><b>大小写： “text-transform:capitalize;(首字母大写)\uppercase;(大写)\lowercase;(小写)\none;(无)”</b></p> <pre style="text-transform:capitalize;"> near...far... wherever you are i believe that the heart does go on once more you open the door and you're here in my heart and my heart will go on and on </pre> <pre style="text-transform:uppercase;"> near...far... wherever you are i believe that the heart does go on once more you open the door and you're here in my heart and my heart will go on and on </pre> <p><b>文字修饰：“text-decoration:underline;(下划线)\overline;(上划线)\line-through;(删除线)\blink;(闪烁)”</b></p> <div style="text-decoration:underline;">据外交部网站消息，国家主席习近平将于11月29日至11月30日赴法国出席气候变化巴黎大会开幕活动。“气候变化是全球性挑战，任何一国都无法置身事外。”针对全球气候变化议题，习近平主席在多个场合曾阐述中方观点和承诺，并积极推动全球应对气候变化的多边进程。为此，学习路上为读者整理习近平对气候变化议题的重要论述。</div> <p><b>常用字体：“font-family:Courier New;\Courier;\monospace;\Times New Roman;\Times;\serif;\Arial;\Helvetica;\sans-serif;\Verdana;\Comic Sans MS;”</b></p> <pre style=" font-family:Comic Sans MS;"> Near...far... Wherever you are I believe That the heart does go on Once more you open the door And you're here in my heart And my heart will go on and on </pre> <p><b>前景颜色：“color:#ff0000;”。更多代码颜色参考颜色对照表</b></p> <pre style="color:#ff0000;"> Near...far... Wherever you are I believe That the heart does go on Once more you open the door And you're here in my heart And my heart will go on and on </pre> <p><b>背景颜色：“background-color:#00ffff;”。更多代码颜色参考颜色对照表</b></p> <pre style="background-color:#00ffff;"> Near...far... Wherever you are I believe That the heart does go on Once more you open the door And you're here in my heart And my heart will go on and on </pre> <p><b>文字间距：“letter-spacing:20px;”</b></p> <div style="letter-spacing:20px;">据外交部网站消息，国家主席习近平将于11月29日至11月30日赴法国出席气候变化巴黎大会开幕活动。“气候变化是全球性挑战，任何一国都无法置身事外。”针对全球气候变化议题，习近平主席在多个场合曾阐述中方观点和承诺，并积极推动全球应对气候变化的多边进程。为此，学习路上为读者整理习近平对气候变化议题的重要论述。</div> <p><b>单词间距：“word-spacing:20px;”，适用于英文</b></p> <pre style="word-spacing:20px;"> Near...far... Wherever you are I believe That the heart does go on Once more you open the door And you're here in my heart And my heart will go on and on </pre> <p><b>文字对齐：“text-align: justify;(两端对齐)\left;(左对齐)\right;(右对齐)\center;(居中)”</b></p> <div style="text-align:right;">据外交部网站消息，国家主席习近平将于11月29日至11月30日赴法国出席气候变化巴黎大会开幕活动。“气候变化是全球性挑战，任何一国都无法置身事外。”针对全球气候变化议题，习近平主席在多个场合曾阐述中方观点和承诺，并积极推动全球应对气候变化的多边进程。为此，学习路上为读者整理习近平对气候变化议题的重要论述。</div> <p><b>文字缩进：“text-indent:36px;”</b></p> <div style="text-indent:36px;">据外交部网站消息，国家主席习近平将于11月29日至11月30日赴法国出席气候变化巴黎大会开幕活动。“气候变化是全球性挑战，任何一国都无法置身事外。”针对全球气候变化议题，习近平主席在多个场合曾阐述中方观点和承诺，并积极推动全球应对气候变化的多边进程。为此，学习路上为读者整理习近平对气候变化议题的重要论述。</div> <p><b>垂直对齐：“vertical-align: baseline;(基线)\sub;(下标)\super;(上标)\top;\text-top;\middle;\bottom;\text-bottom;”</b></p> X<span style="vertical-align:super">2</span> <p><b>边框样式：“border-style: dotted;(点线)\dashed;(虚线)\solid;\double;(双线)\groove;(槽线)\ridge;(脊状)\inset;(凹陷)\outset;”</b></p> <div style="border-style: dotted;">据外交部网站消息，国家主席习近平将于11月29日至11月30日赴法国出席气候变化巴黎大会开幕活动。“气候变化是全球性挑战，任何一国都无法置身事外。”针对全球气候变化议题，习近平主席在多个场合曾阐述中方观点和承诺，并积极推动全球应对气候变化的多边进程。为此，学习路上为读者整理习近平对气候变化议题的重要论述。</div> <p><b>边框宽度：“border-width:5px;”</b></p> <div style="border-width:5px; border-style:solid;">据外交部网站消息，国家主席习近平将于11月29日至11月30日赴法国出席气候变化巴黎大会开幕活动。“气候变化是全球性挑战，任何一国都无法置身事外。”针对全球气候变化议题，习近平主席在多个场合曾阐述中方观点和承诺，并积极推动全球应对气候变化的多边进程。为此，学习路上为读者整理习近平对气候变化议题的重要论述。</div> <p><b>边框颜色：“border-color:#ff6666;”</b></p> <div style="border-color:#ff6666; border-width:5px; border-style:solid;">据外交部网站消息，国家主席习近平将于11月29日至11月30日赴法国出席气候变化巴黎大会开幕活动。“气候变化是全球性挑战，任何一国都无法置身事外。”针对全球气候变化议题，习近平主席在多个场合曾阐述中方观点和承诺，并积极推动全球应对气候变化的多边进程。为此，学习路上为读者整理习近平对气候变化议题的重要论述。</div> <p><b>边框属性：“border:1px solid #ff6666;(四边宽度1像素、实线、颜色代码)\border-left:1px solid #000000;(左边线)\border-right:1px solid #000000;(右边线)\border-top:1px solid #000000;(上边线)\border-bottom:1px solid #000000;(下边线)”</b></p> <div style="border:1px solid #ff6666;">据外交部网站消息，国家主席习近平将于11月29日至11月30日赴法国出席气候变化巴黎大会开幕活动。“气候变化是全球性挑战，任何一国都无法置身事外。”针对全球气候变化议题，习近平主席在多个场合曾阐述中方观点和承诺，并积极推动全球应对气候变化的多边进程。为此，学习路上为读者整理习近平对气候变化议题的重要论述。</div> <p><b>列表属性：“list-style-type:disc;(圆点)\circle;(圆圈)\square;(方块)\decimal;(数字)\lower-roman;(小罗码数字)\upper-roman;\lower-alpha;\upper-alpha;</b></p> <ul style="list-style-type:circle;"> <li>基本表格</li> <li>带标题的表格</li> <li>带CSS样式的HTML表格></li> <li>开口式统计表</li> <li>单元格跨行、跨列</li> </ul> <p><b>内边距：“padding:10px;(四边距)\padding-left:10px;(左边距)\padding-right:10px;(右边距)\padding-top:10px;(上边距)\padding-bottom:10px;(下边距)</b></p> <div style="padding:10px;; border:1px solid #ff6666;">据外交部网站消息，国家主席习近平将于11月29日至11月30日赴法国出席气候变化巴黎大会开幕活动。“气候变化是全球性挑战，任何一国都无法置身事外。”针对全球气候变化议题，习近平主席在多个场合曾阐述中方观点和承诺，并积极推动全球应对气候变化的多边进程。为此，学习路上为读者整理习近平对气候变化议题的重要论述。</div> <p><b>外边距：“margin:10px;(四边距)\margin-left:10px;(左边距)\margin-right:10px;(右边距)\margin-top:10px;(上边距)\margin-bottom:10px;(下边距)</b></p> <div style="padding:10px;; border:1px solid #ff6666; width:50%;">据外交部网站消息，国家主席习近平将于11月29日至11月30日赴法国出席气候变化巴黎大会开幕活动。“气候变化是全球性挑战，任何一国都无法置身事外。”针对全球气候变化议题，习近平主席在多个场合曾阐述中方观点和承诺，并积极推动全球应对气候变化的多边进程。为此，学习路上为读者整理习近平对气候变化议题的重要论述。</div> <div style="margin-top:50px; padding:10px;; border:1px solid #ff6666; width:50%;">据外交部网站消息，国家主席习近平将于11月29日至11月30日赴法国出席气候变化巴黎大会开幕活动。“气候变化是全球性挑战，任何一国都无法置身事外。”针对全球气候变化议题，习近平主席在多个场合曾阐述中方观点和承诺，并积极推动全球应对气候变化的多边进程。为此，学习路上为读者整理习近平对气候变化议题的重要论述。</div> <p><b>绝对定位：“position:absolute;\left:100px;\top:100px;</b></p> <div style="position:absolute; left:400px; top:300px; width:300px;">设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。</div> <p><b>相对定位：“position:relative;\left:100px;\top:100px;</b></p> <div style="width:300px;">据外交部网站消息，国家主席习近平将于11月29日至11月30日赴法国出席气候变化巴黎大会开幕活动。“气候变化是全球性挑战，任何一国都无法置身事外。”针对全球气候变化议题，习近平主席在多个场合曾阐述中方观点和承诺，并积极推动全球应对气候变化的多边进程。为此，学习路上为读者整理习近平对气候变化议题的重要论述。</div> <div style="position:relative; left:50px; top:50px; width:300px;">定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。</div> <p><b>浮动：“float:left;\right;</b></p> <div style="float:right; width:300px;">浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。</div> <p style="cursor:auto;">梦之都 XHTML 教程,auto正常鼠标</p> <p style="cursor:crosshair;">梦之都 CSS 教程,crosshair十字鼠标</p> <p style="cursor:default;">梦之都 XHTML 教程,default默认鼠标</p> <p style="cursor:pointer;">梦之都 CSS 教程,pointer鼠标</p> <p style="cursor:move;">梦之都 XHTML 教程,move移动鼠标</p> <p style="cursor:e-resize;">梦之都 CSS 教程,e-resize鼠标</p> <p style="cursor:ne-resize;">梦之都 XHTML 教程,ne-resize鼠标</p> <p style="cursor:nw-resize;">梦之都 CSS 教程,nw-resize鼠标</p> <p style="cursor:n-resize;">梦之都 XHTML 教程,n-resize鼠标</p> <p style="cursor:se-resize;">梦之都 CSS 教程,se-resize鼠标</p> <p style="cursor:sw-resize;">梦之都 XHTML 教程,sw-resize鼠标</p> <p style="cursor:s-resize;">梦之都 CSS 教程,s-resize鼠标</p> <p style="cursor:w-resize;">梦之都 XHTML 教程,w-resize鼠标</p> <p style="cursor:text;">梦之都 CSS 教程,text文字鼠标</p> <p style="cursor:wait;">梦之都 XHTML 教程,wait等待鼠标</p> <p style="cursor:help;">梦之都 CSS 教程,help求助鼠标</p> <p style="cursor:progress;">梦之都 XHTML 教程,progress过程鼠标</p> A.oPageLink {FONT-SIZE:14pt;COLOR:#6666ff; FONT-STYLE:normal; TEXT-DECORATION:none;}<p/> A.oPageLink:hover {FONT-SIZE:14pt;COLOR:#333333; FONT-STYLE:normal; TEXT-DECORATION:none;}<p/> A.oPageLink:active {FONT-SIZE:14pt; COLOR:purple; FONT-STYLE:normal; TEXT-DECORATION:underline;} <p/> a:link {<br/> font-size: 12pt;<br/> color: #0000cc;<br/> font-family: 宋体;<br/> text-align: left;<br/> text-decoration: underline;<br/> TEXT-DECORATION:none;<br/> }<br/> //链接平常样式<br/> <p/> a:visited {<br/> font-size: 12pt;<br/> color: #ff00cc;<br/> font-family: 宋体;<br/> text-align: left;<br/> text-decoration: underline;<br/> TEXT-DECORATION:none;<br/> }<br/> //链接访问后样式<br/> <p/> a:hover {<br/> color: #000000;<br/> text-decoration: underline;<br/> TEXT-DECORATION:none;<br/> } //鼠标放到链接上样式 <p/> a:active { color: #00ff33; text-decoration: none; } //链接被按下时样式 <p><b>内联样式</b></p> <p><b>内联样式是直接在html标签上定义该标签的css样式，如：</b></p> <xmp><div style="width:300px;">浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。</div></xmp></p> <p><b>内部样式</b></p> <p>内部样式是写在html文件中，且包含在<xmp><style></style></xmp>代码块中，style写在head里面如：</p> <xmp> 　　<style> 　　div{color;#ff0000} 　　</style> 　　<div>内部样式</div> </xmp> <div style="color:#ff0000;">内部样式</div> <div class="myFL">内部calss类选择器</div> <div id="myID">内部id类选择器</div> <p><b>外部样式</b></p> <p>外部样式是通过在html中引用外部css文件来控制样式，如：html文件中写入引用语句， <xmp> 　　<link href="css/style1.css" rel="stylesheet" media="screen"/></p> </xmp> <div class="myFL1">外部calss类选择器</div> <div id="myID1">外部id类选择器</div> <span><span>无欲无忧</span></span>