您的位置：首页 > Web前端 > HTML5

HTML5与CSS3基础（四）

2016-03-27 23:07 585 查看

15列表

15.1:创建有序列表和无序列表

有序列表：定义方法

<ol>

<li> </li>

......

</ol>

无序列表：定义方法

<ul>

<li> </li>

......

</ul>

无序列表的应用更加广泛

提示：使用列表标记链接时，大多数情况下均可以使用无序列表。对于面包屑导航则应该使用有序列表（当顺序是有意义的情况下就要使用有序列表）

15.2选择标记：

创建列表的时候，不管是有序列表还是无序列表都可以选择出现在列表项目左侧的标记类型。

1选择标记

在样式表中，输入list-style-type：marker

这里的marker可以是一下熟悉里的任意一项

Disc(圆点)

Circle(圆圈)

Square(方块)

Decimal(数字)

Upper-alpha(大写字母)

Upper-roman(大写罗马数字)

Lower-roman(小写罗马数字)

15.3使用定制的标签

Outline：属性

实例

设置 4 个边框的样式：

p

{

outline:#00FF00 dotted thick;

}

浏览器支持

所有浏览器都支持 outline 属性。

注释：如果规定了 !DOCTYPE，则 IE8 支持 outline 属性。

定义和用法

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

注释：轮廓线不会占据空间，也不一定是矩形。

outline 简写属性在一个声明中设置所有的轮廓属性。

可以按顺序设置如下属性：

outline-color

outline-style

outline-width

如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。

默认值：	invert none medium
继承性：	no
版本：	CSS2
JavaScript 语法：	object.style.outline="#0000FF dotted thin"

可能的值

值	描述
outline-color	规定边框的颜色。参阅：outline-color 中可能的值。
outline-style	规定边框的样式。参阅：outline-style 中可能的值。
outline-width	规定边框的宽度。参阅：outline-width 中可能的值。
inherit	规定应该从父元素继承 outline 属性的设置。

TIY 实例

在元素周围画线

本例演示使用 outline 属性在元素周围画一条线。

设置自定义样式：

1：清除默认样式：list-style:none;

2:清除内外边距:margin:0;padding:0

3：在CSS里设置background：URL（图片的地址） no-repeat 0 0；//不重复位置为 0 0（x-offset y-offset）

4：对li元素设置内边距的值即可

15.4选择列表的其实编号

1 设置整个列表编号的初始值

在<ol>里输入 start=n,这里的n指的是列表的初始值

2设置有序列表中某列项目的编号

在li元素内输入value=“n”这里的n代表该列表的项目值

提示：value的值会取代start的值

15.5标记控制的位置

通常标记都是在文本块的外面，我们可以通过一些属性对其进行设置使它缩进到文本框里面

Ul{

List-style-position:inside;

}

15.6同时设置所有的列表样式属性

Ul{

List-style:circle inside;

}

取消列表的通常设置是：list-style:none；

15.7设置嵌套列表的样式

设置嵌套列表样式的步骤

先设置最外层的列表样式

设置第2层

第一层第二层{}

设置第n层

1 ... 第n-1层第n层{}

15.8创建描述列表

步骤：

17:视屏、音频和其他多媒体

17.2视屏文件格式

HTML5支持三种视屏文件格式（即编解码器）

1：ogg theora 拓展名为.Ogg或者.ogv

2：MP4 拓展名：.mp4 .m4v

3：webM 拓展名为: .webm

什么时候编解码器：

使用压缩算法对数据的数字流行编码和解码，使之更加适合播放的计算机程序

编解码器的目的是能保证音频和视屏能所达到的最高质量的情况下减少文件尺寸

设置MIME类型

如果浏览器中没有正确的设置正确的MIME类型，媒体文件就不会播放

17.3 在网页中添加单个视屏

使用HTML5中最新的元素<video>,浏览器会计算视屏的尺寸，并在加载文件后计算出视屏的尺寸

Video属性：

如果浏览器不支持某种类型的格式

他会只出现播放控件或者出现一大片空白的区域

17.7使用多种来源的视屏和备用文本

就要用到source元素

步骤

1：获取视屏资源

2：输入<video control>开始video元素

3输入<source src=”” type=”video/视屏类型”>

4：输入<source src=”” type=”video/视屏类型”>第二种类型的视屏源文件

5：输入备用链接或者文本信息

6:结束</video>

17.8提供可访问性

去了解WebVTT

17.10：在网页中添加带控件的单个音频文件

提供多个音频源和视屏源一样都是使用source属性

步骤

1：获取音频资源

2：输入<audio control>开始video元素

3输入<source src=”” type=”audio/音频类型”>

4：输入<source src=”” type=”audio/音频类型”>第二种类型的视屏源文件

5：输入备用链接或者文本信息

6:结束</audio>

为音频添加备用FLASH的步骤

1：获取音频资源

2：输入<audio control>开始video元素

3输入<source src=”” type=”audio/音频类型”>

4：输入<source src=”” type=”audio/音频类型”>第二种类型的视屏源文件

5：输入备用链接或者文本信息

6:结束</audio>

7:输入<script>(视屏的话就在选择器里填写video)

$(‘audio’).mediaelementplayer();

</script>

什么是SVG（可缩放矢量图形）

18表格

18.1 结构化表格

从基本层面来看，table元素是由行组成的，行又是由单元格组成的，每个行（tr）都包括标题单元格（th）或数据单元格（td），或者同时包含行或者列

控制行列标题单元格通过属性 scope=“”；col 列； row行；

结构化语句：通过<thead> <tbody> <tfoot> 结构化标签把

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="../css/3.27.css" rel="stylesheet">
</head>
<body>
<div>
<main role="main">
<article role="article">
<p class="nav">Read More</p>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>

</article>
</main>
</div>
<div>
<article>
<nav role="navigation">
<h1> the great USA</h1>
<ol>
<li>introduactor
<ol>
<li>boy's childhood</li>
<li>girl's childhood</li>
</ol>
</li>
<li>Development
<ol>
<li>B meet G</li>
<li>B and G fall in love</li>
<li>B and G have fight</li>
</ol>
</li>
<li>Climax
<ol>
<li>B give G
<ol>
<li>G don't believe her ear</li>
<li>B don't love G anymore</li>
</ol>
</li>
</ol>
</li>
<li>Break</li>
<li>Ending</li>
</ol>
</nav>
</article>
</div>
<dl>
<dt>sectionA</dt>
<dd>1</dd>
<dd>2</dd>
<dd>3
<dl>
<dt>3-1</dt>
<dd>3.1.1</dd>
<dd>3.1.2</dd>
<dd>3.1.3</dd>
<dt>3-2</dt>
<dd>3.2.1</dd>
<dd>3.2.2</dd>
<dd>3.2.3</dd>
</dl>
</dd>

<dt>sectionB</dt>
<dd>1</dd>
<dd>2</dd>
<dd>3</dd>
</dl>
<article>
<table>
<caption>this is a normal demo</caption>
<thead>
<tr>
<th scope="col">Quarter</th>
<th scope="col">1962</th>
<th scope="col">1963</th>
<th scope="col">1964</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Q1</th>
<td>$145</td>
<td>$146</td>
<td>$147</td>
</tr>
<tr>
<th scope="row">Q2</th>
<td>$167</td>
<td>$168</td>
<td>$169</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">totle</th>
<td>$</td>
<td>$</td>
<td>$</td>
</tr>
</tfoot>
</table>
</article>
</body>
</html>

<caption>this is a normal demo</caption>

可以输入caption对表格进行描述

让单元格跨越两个或两个以上：借助rowspan=”n”或者colspan=“n”属性

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航