Html 5

时间：2018-12-23 16:47:44 阅读：164 评论：0 收藏：0 [点我收藏+]

标签：ima 结束 app device VID dex 控件注释 c89

什么是HTML?

　　Hyper Text Markup Language（超文本标记语言）

　　简答的来说HTML就是一组浏览器能够识别的标签,是我们和浏览器沟通的必不可少的一种语言;

HTML的优势

　　a) 配置简单,编程成本小

　　 b) 不需要特定SDK的支持,有个浏览器编写个网页就能展示

c) 具有跨平台特性,不管什么操作系统MAC也好windows也好都能很好支持

基本结构

1 <html>
2     <head>
3         <meta charset="utf-8" />
4         <title>我的第一个网页</title>
5     </head>
6     <body>
7         <marquee>Hello,HTML!</marquee>
8     </body>
9 </html>

常用标签

1、 h1-h6标签 : 内容标题标签

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>我的第一个网页</title>
 6     </head>
 7     <body>
 8         <h1>一级标题</h1>
 9         <h2>二级标题</h2>
10         <h3>三级标题</h3>
11         <h4>四级标题</h4>
12         <h5>五级标题</h5>
13         <h6>六级标题</h6>
14     </body>
15 </html>

对应效果：

技术分享图片

2、 标签 : 段落标签

3、 : 换行标签

标签不是成对出现的,而是一个单标签,此处需要注意;像这样的单标签还有一个叫<hr /> 可以在网页上画一条分割线

4、 ,, : 加粗斜体下划线标签

5、注释

<!-- 下面的是分割线 而我是注释(?) -->

6、特殊符号

技术分享图片

HTML-IMG标签

技术分享图片

HTML-A标签

技术分享图片

列表与表格

a) 无序列表

技术分享图片

b) 有序列表

技术分享图片

有序列表和无序列表对比

技术分享图片

代码演示

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <meta name="viewport" content="width=device-width, initial-scale=1">
 6         <title>HTML案例</title>
 7     </head>
 8     <body>
 9         <h1>搜索热点</h1>
10         <ol>
11             <a href="https://www.baidu.com/s?wd=空姐集体睡地板"><li>空姐集体睡地板</li></a>
12             <a href="https://www.baidu.com/s?wd=许家印告贾跃亭"><li>许家印告贾跃亭</li></a>
13             <a href="https://www.baidu.com/s?wd=吴亦凡专辑回榜首"><li>吴亦凡专辑回榜首</li></a>
14             <a href="https://www.baidu.com/s?wd=合肥一化肥厂爆炸"><li>合肥一化肥厂爆炸</li></a>
15             <a href="https://www.baidu.com/s?wd=公交八条防盗暗语"><li>公交八条防盗暗语</li></a>
16         </ol>
17     </body>
18 </html>

结果

技术分享图片

表格

技术分享图片

1 <table border="1">// 表格属性（边框）
2     <tr>
3         <td>Row 1, cell 1</td>
4         <td>Row 1, cell 2</td>
5     </tr>
6 </table>

跨行与跨列合并单元格问题

跨行 : 在td中添加colspan属性即可

技术分享图片

跨列 : 在td上添加rowspan即可

综合练习

技术分享图片

代码实现

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <meta name="viewport" content="width=device-width, initial-scale=1">
 6         <title>HTML案例</title>
 7     </head>
 8     <body>
 9         <table border="1">
10             <tr>
11                 <td colspan="3">学生成绩</td>
12             </tr>
13             <tr>
14                 <td rowspan="2">张三</td>
15                 <td>语文</td>
16                 <td>98</td>
17             </tr>
18             <tr>
19                 <td>数学</td>
20                 <td>95</td>
21             </tr>
22             <tr>
23                 <td rowspan="2">李四</td>
24                 <td>语文</td>
25                 <td>88</td>
26             </tr>
27             <tr>
28                 <td>数学</td>
29                 <td>91</td>
30             </tr>
31         </table>
32     </body>
33 </html>

View Code

音频和视频

视频播放设置

技术分享图片

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

音频播放设置

技术分享图片

audio标签的属性 :

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的音频的 URL。