html5-表格-表单-多媒体-进制代码编程

马不停蹄

html5-表格-表单-多媒体-进制代码编程
特殊字符：

html5-表格-表单-多媒体-进制代码编程

html表格代码如下：

1. <table border="5">
   
2.         <tr>
   
3.         <td>姓名</td>
   
4.         <td>性别</td>
   
5.         <td>年龄</td>
   
6.     </tr>
   
7.     <tr>
   
8.         <td>金黑网络：马不停蹄</td>
   
9.         <td>男</td>
   
10.         <td>22</td>
    
11.     </tr>
    
12.     <tr>
    
13.         <td>任盈盈</td>
    
14.         <td>女</td>
    
15.         <td>18</td>
    
16.     </tr>
    
17.     <tr>
    
18.         <td>任我行</td>
    
19.         <td>男</td>
    
20.         <td>55</td>
    
21.     </tr>
    
22.     <tr>
    
23.         <td>岳不群</td>
    
24.         <td>男</td>
    
25.         <td>50</td>
    
26.     </tr>
    
27. </table>

复制代码

运行效果如图所示：

html5-表格-表单-多媒体-进制代码编程

注意：border这个属性一定加在table标签上，加在td上不生效



表格制作案例二：

1. <table cellspacing="0" cellpading="30" border="5" width="300" height="200">
   
2.         <caption><h3>学生证</h3></caption>
   
3.     <tr>
   
4.             <th align="center" colspan="4">深圳市金黑网络技术有限公司</th>
   
5.     </tr>
   
6.     <tr align="center">
   
7.             <td>姓名</td>
   
8.             <td>班级</td>
   
9.             <td>学号</td>
   
10.             <td rowspan="2">照片</td>
    
11.     </tr>
    
12.     <tr align="center">
    
13.             <td>马不停蹄</td>
    
14.         <td>php开发</td>
    
15.         <td>007</td>
    
16.     </tr>
    
17. </table>

复制代码

运行效果图：

html5-表格-表单-多媒体-进制代码编程

标签语义化

增加了很多标签，在作页面的时候更加具有语义（定义了一些原本没有语义的div模块为有鲜明结构的语义模块）

a) <header>标记定义一个页面或一个区域的头部

b) <nav>标记定义导航链接

c) <article>标记定义一篇文章内容

d) <section>标记定义网页中一块区域

e) <aside>标记定义页面内容部分的侧边栏

f) <footer>标记定义一个页面或一个区域的底部

表单新增常用属性------要求掌握

required：必填

placeholder：输入内容提示

autofocus：自动获取焦点-----自动帮我们将光标点进去

1. <form method="post" action="http://www.baidu.com">
   
2. <!-- required 必填，必须的 -->
   
3. <!-- 自动获取焦点----自动将光标定位到表单中 -->
   
4.         <input type="text" placeholder="请输入用户名" autofocus="autofocus" required="required" />
   
5.     <input type="submit" />
   
6. </form>

复制代码

5.input新增type属性值

a) type="email"，文本框中只能输入email地址

b) type="date"，日期控件

c) type="time"

d) type="month"

e) type="week"

f) type="number"，唤醒数字键盘

g) type="range"，滑块

h) type="color"

多媒体标签

1. <audio src="邓紫棋-喜欢你.mp3" controls autoplay="autoplay"></audio>

复制代码

controls="controls"用来显示控制面板

autoplay="autoplay"用来控制自动播放

loop="loop"用来设置循环播放

多学一招：为了兼容，通常会写多个资源，第一个不能播放就播放第二个，原因是不同的浏览器支持的格式不一样，所以出现了一种兼容写法（前提是准备三种格式的视频文件）

1. <audio controls autoplay>
   
2.         <source src="music/music.mp3">
   
3.     <source src="music/music.ogg">
   
4. </audio>

复制代码

1. <video controls autoplay loop>
   
2.     <source src="邓紫棋_喜欢你.mkv">
   
3.     <source src="邓紫棋_喜欢你.webm">
   
4. </video>

复制代码