个人笔记HTML5
HTML5
World Wide Web Consortium(万维网联盟) 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
W3C标准包括 结构化标准语言(XHTML、XML)
表现标准语言(CSS)
行为标准(DOM、ECMAScript)
基本结构
<!DOCTYPE html> <html lang="en"> <!--head 标签代表网页头部--> <head> <!--mate描述性标签，用来描述我们网站的一些信息--> <!-- mate一般用来做SEO--><meta charset="UTF-8"><meta name ="keywords"content="111111111111"><meta name ="description"content="2222222222"><!--title 网页标题--><title>我的第一个网页</title> </head> <!--body 标签代表网页主体--> <body> Hello wwwwwwwwworld </body> </html>
网页基本标签
标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释和特殊符号
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <!--标题标签--> <h1>一级标签</h1> <h2>二级标签</h2> <!--段落标签--> <p>111</p> <p>222</p> <p>333</p> <p>444</p> <p>555</p> <!--水平线标签--> <hr/> <!--换行标签--> 111<br/> 222<br/> 333<br/> 444<br/> 555<br/> <!--粗体斜体--> <strong>111</strong><br/> <em>222</em><br/> <!--特殊符号--> 空格<br/> 1 1<br/> ><br/><<br/> ©版权所有000<br/> </body> </html>
图像标签
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <!--img标签学习 src:图片地址 相对地址（推荐使用）../ --> <img src="../resource/image/111.jpg" alt="图像" title="悬停文字" width="200" height="200"> <!--<img src="../resource/image/.jpg" alt="图像"> alt:找不到图片的时候会显示--> </body> </html>
链接标签
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>链接标签</title> </head> <body> <!--使用name作为标记--> <a name="top"></a> <!--a标签 href:表示要跳转到那个页面 target: 表示窗口在哪里打开 _blank 新标签页打开 _self 在自己的网页打开（默认） --> <a href="1我的第一个网页.html" target="_blank">点击跳转</a> <a href="https://www.baidu.com">点击跳转百度</a> <br> <a href="1我的第一个网页.html"><img src="../resource/image/111.jpg" alt="图像" title="悬停文字" width="200" height="200"> </a> <p><a href="1我的第一个网页.html"><img src="../resource/image/111.jpg" alt="图像" title="悬停文字" width="200" height="200"> </a></p> <p><a href="1我的第一个网页.html"><img src="../resource/image/111.jpg" alt="图像" title="悬停文字" width="200" height="200"> </a></p> <p><a href="1我的第一个网页.html"><img src="../resource/image/111.jpg" alt="图像" title="悬停文字" width="200" height="200"> </a></p> <p><a href="1我的第一个网页.html"><img src="../resource/image/111.jpg" alt="图像" title="悬停文字" width="200" height="200"> </a></p> <p><a href="1我的第一个网页.html"><img src="../resource/image/111.jpg" alt="图像" title="悬停文字" width="200" height="200"> </a></p> <p><a href="1我的第一个网页.html"><img src="../resource/image/111.jpg" alt="图像" title="悬停文字" width="200" height="200"> </a></p> <p><a href="1我的第一个网页.html"><img src="../resource/image/111.jpg" alt="图像" title="悬停文字" width="200" height="200"> </a></p> <p><a href="1我的第一个网页.html"><img src="../resource/image/111.jpg" alt="图像" title="悬停文字" width="200" height="200"> </a></p> <p><a href="1我的第一个网页.html"><img src="../resource/image/111.jpg" alt="图像" title="悬停文字" width="200" height="200"> </a></p> <p><a href="1我的第一个网页.html"><img src="../resource/image/111.jpg" alt="图像" title="悬停文字" width="200" height="200"> </a></p> <p><a href="1我的第一个网页.html"><img src="../resource/image/111.jpg" alt="图像" title="悬停文字" width="200" height="200"> </a></p> <p><a href="1我的第一个网页.html"><img src="../resource/image/111.jpg" alt="图像" title="悬停文字" width="200" height="200"> </a></p> <p><a href="1我的第一个网页.html"><img src="../resource/image/111.jpg" alt="图像" title="悬停文字" width="200" height="200"> </a></p> <p><a href="1我的第一个网页.html"><img src="../resource/image/111.jpg" alt="图像" title="悬停文字" width="200" height="200"> </a></p> <p><a href="1我的第一个网页.html"><img src="../resource/image/111.jpg" alt="图像" title="悬停文字" width="200" height="200"> </a></p> <p><a href="1我的第一个网页.html"><img src="../resource/image/111.jpg" alt="图像" title="悬停文字" width="200" height="200"> </a></p> <!--锚标签 1需要一个锚标记 跳转到标记 --> <a href="#top">回到顶部</a> <a href="dewn">down</a> <!--功能性链接 邮件链接：mailto --> <a href="mailto:输入邮箱">点击联系</a> </body> </html>
行内元素和块元素
块元素 无论内容多少，该元素独占一行 (p、h1-h6...) 行内元素 内容撑开宽度，左右都是行内元素的可以在排在一行 (a . strong . em ...）
表格
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <!--表格table 行 tr 列 td boeder 边框 colspan 跨列 rowspan --> <table border="1px"><tr><td colspan="4">1-1</td></tr><tr><td rowspan="2">2-1</td><td>2-2</td><td>2-3</td></tr><tr><td>3-1</td><td>3-2</td><td>3-3</td></tr> </table> </body> </html>
媒体元素
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>媒体元素</title> </head> <body> <!--视频和音频 controls 控制开关 autoplqy 自动播放 --> <video src="../resource/video/MP401.mp4" controls autoplay></video> <audio src="../resource/audio/MP301.mp3" controls></audio> </body> </html>
页面结构分析
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <header><h2>网页头部</h2></header> <section><h2>网页主体</h2></section> <footer><h2>网页脚部</h2></footer> </body> </html>
iframe内联框架
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>iframe</title> </head> <body> <!--iframe内联框架 src：地址 width 宽度 height 高度 --> <iframe src="" name="hello" frameborder="0" width="600px" height="400px"></iframe> <a href="https://www.csdn.net/?" target="hello">点击这里</a> </body> </html>
表单语法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>登陆注册</title> </head> <body> <h1>注册</h1><!--表单 action 表单提交的位置，可以是网站也可以是一个请求处理地址 method post，get 提交方式 get方式提交 我们可以在url中看到我们提交的信息，不安全，高效 post方式提交 比较安全，传输大文件 --> <form action="1我的第一个网页.html" method="post"><!--文本输入框 input type = "text"--><p>名字-><input type="text" name="username" ></p><!--密码框 input type = "password"--><p>密码-><input type="password" name="pwd" ></p><p><input type="submit" ><input type="reset" ></p></form> </body> </html>