html第一个网页
----------我的第一个网页----------
<!DOCTYPE html> <html> <head> <title>我的第一个网页</title> </head> <body> <!-- h1~h6是标题标签,字体都会加粗,字号依次从大变小 --> <h1>Hello World</h1> <!-- 生成一条水平线 border:5px solid/double/dashed/dotted red solid: 实线, double: 双线 dashed: 虚线, dotted: 点状线 --> <hr style="border:5px solid red"/> Hello HTML!<br/> Hello HTML!<br/> Hello HTML!<br/> </body> </html>
----------页面插入图片----------
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图像和超链接标签</title> </head> <body> <!-- 引入一幅图像 D:\JavaDevelop\HBuilderProjects\CGB-HTMLCSS-01/img/meinv01.jpg D:\JavaDevelop\HBuilderProjects\CGB-HTMLCSS-01/img/meinv02.jpg --> <img src="./img/meinv01.jpg" width="40%"/> <img src="img/meinv02.jpg" width="40%"/> <hr/> <a href="http://www.baidu.com" target="_blank">
<!-- target="_blank" 意思是是以新的页面弹窗-->
百度一下,你就知道 </a> <br/><br/> <a href="http://www.baidu.com"> 百度一下,你就不知道 </a> </body> </html>
----------表格标签----------
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格标签</title> <!-- style标签内部用于书写css样式、css注释 --> <style> table,td,th{ /* 选中所有名字为table和td的元素 */ border:2px solid red; /* 设置表格边框和单元格边框合并 */ border-collapse: collapse; } table{ /* 设置背景 */ background: pink; /* 设置宽度 */ width: 80%; /* 设置左右外边距自适应(始终保持相等) */ margin-left: auto; margin-right: auto; } td,th{ /* 设置内边距（元素边框和内容之间的距离） */ padding:5px; } h1{ /* 设置元素内容居中（left,center,right） */ text-align:center; /* border: 2px solid blue; */ } </style> </head> <body> <h1>这是一个表格</h1> <!-- 创建一个 3*3 的表格 --> <table> <tr> <!-- 合并11和12单元格 colspan="2": 设置当前单元格横跨两列 --> <th colspan="2">11</th> <th>13</th> </tr> <tr> <td>11</td> <td>12</td> <td>13</td> </tr> <tr> <!-- 让21和31单元格合并 --> <td rowspan="2">21</td> <td>22</td> <td>23</td> </tr> <tr> <!-- <td>31</td> --> <td>32</td> <td>33</td> </tr> </table> </body> </html>
----------注册表单页面----------
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>欢迎注册</title> <!-- style标签内部用于书写css样式、css注释 --> <style> *{ /* 选中所有元素 */ /* font-family: "微软雅黑"; */ } table,td,th{ /* 选中所有名字为table和td的元素 */ border:2px solid red; /* 设置表格边框和单元格边框合并 */ border-collapse: collapse; } table{ /* 设置背景 */ background: lightgray; /* 设置左右外边距自适应(始终保持相等) */ margin-left: auto; margin-right: auto; } td,th{ /* 设置内边距（元素边框和内容之间的距离） */ padding:5px; } h1{ /* 设置元素内容居中（left,center,right） */ text-align:center; /* border: 2px solid blue; */ } </style> </head> <body> <h1>欢迎注册</h1> <!-- #:做一个占位,将来知道地址怎么写,再把#号换成url地址 --> <form action="#"> <table> <tr> <td>用户名:</td> <td><input type="text" name="user"/></td> </tr> <tr> <td>密码:</td> <td><input type="password" name="psw"/></td> </tr> <tr> <td>性别:</td> <td> <input type="radio" checked name="gender" value="male"/>男 <input type="radio" name="gender" value="female"/>女 </td> </tr> <tr> <td>爱好:</td> <td> <input type="checkbox" name="like" value="basketball"/>篮球 <input type="checkbox" checked name="like" value="football"/>足球 <input type="checkbox" name="like" value="volleyball"/>排球 </td> </tr> <tr> <td>城市:</td> <td> <select name="city"> <option>北京</option> <option value="shanghai">上海</option> <option selected>广州</option> <option>深圳</option> </select> </td> </tr> <tr> <td>自我描述:</td> <td> <!-- textarea标签内部不要敲空格和换行,否则不显示提示 --> <textarea name="desc" cols="30" rows="5" placeholder="请输入描述信息..."></textarea> </td> </tr> <tr> <td colspan="2" style="text-align:center;"> <input type="submit" value="提交"/> </td> </tr> </table> </form> </body> </html>
----------表格标签----------
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> hr{ border:2px solid red; background:red; width:50%; /* 设置左外边距为0 */ margin-left:0px; } audio{ /* 获取所有的audio元素 */ width: 300px; height: 30px; border: 2px solid blue; /* 设置圆角边框 */ border-radius: 20px; } /* 匹配获得焦点的audio、video元素 */ audio:focus,video:focus{ /* 设置元素的外围（包在边框外的线） */ outline: none; } video{ width:50%; border:2px solid red; border-radius: 20px; } </style> </head> <body> <h1>达内云音乐</h1> <hr/> 沙漠骆驼:<br/> <audio controls src="audio/沙漠骆驼_展展与罗罗.mp3"> 如果您看到这段内容,则说明您的浏览器不支持此标签 </audio> <br/> Marry You:<br/> <audio controls src="audio/Marry_You.mp3"></audio> <br/> Something Just Like This:<br/> <audio controls src="audio/Something_Just_Like_This.mp3"></audio> <h1>云视频</h1> <hr/> <video autoplay controls src="video/小拳拳.mp4"></video> <video controls src="video/谢谢你的爱_四川方言版.mp4"></video> <video controls src="video/小芳_李荣浩版.mp4"></video> </body> </html>
