HTML5 ゞ 浴缸里的玫瑰 2022-12-06 01:12 180阅读 0赞 * **HTML入门实例:** <!-- DOCTYPE: HTML5规范声明 --> <!DOCTYPE html> <html lang="en"> <!-- 网页头部 --> <head> <!-- meta描述性标签,供机器解读(告诉机器该如何解析这个页面),一般用来做SEO --> <meta charset="UTF-8"> <meta name="keywords" content="java,java教程,HTML,CSS,DOM,JavaScript,jQuery,AJAX,MySQL"> <meta name="description" content="这是一个学习java的网站"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 网页标题 --> <title>index</title> </head> <!-- 网页主体 --> <body> Hello,World! </body> </html> * **标题标签** <body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> </body> * **段落标签** <body> <p>床前明月光,疑是地上霜。</p> <p>举头望明月,低头思故乡。</p> </body> * **换行标签、水平分割线标签、字体样式标签** <body> 床前明月光,疑是地上霜。 <br/> 举头望明月,低头思故乡。 <hr/> <strong>粗体</strong> <em>斜体</em> </body> * **转义符号** 空格符号: 大于号>:> 小于号<:< 版权符号©:© * **图像、链接、图像链接** <body> <!-- 图像 --> <img src="../static/image/1.jpg" alt="1.jpg" title="悬停文字" width="300" height="300"></img> <br> <!-- 链接 --> <a href="https://www.baidu.com" target="_self">百度</a> <br> <!-- 图像链接 --> <a href="https://www.baidu.com" target="_blank"> <img src="../static/image/1.jpg" alt="1.jpg" width="300" height="300"></img> </a> <!-- 锚链接 --> <a href="#top">回到顶部</a> <!-- 功能性链接 --> <a href="mailto:22771177@qq.com">我的邮箱</a> </body> * **行内元素与块元素** 块元素独占一行: <p></p> <h1></h1> 行内元素宽度由内容决定: <a></a> <strong></strong> * **列表** <!-- 有序列表 --> <ol> <li>Java</li> <li>Python</li> <li>JavaScript</li> </ol> <!-- 无序列表 --> <ul> <li>Java</li> <li>Python</li> <li>JavaScript</li> </ul> <!-- 自定义列表 --> <dl> <!-- 列表名称 --> <dt>学科</dt> <!-- 列表元素 --> <dd>Java</dd> <dd>Python</dd> <dd>JavaScript</dd> <dt>位置</dt> <dd>南京</dd> <dd>上海</dd> <dd>重庆</dd> </dl> ![在这里插入图片描述][20200912173203691.png_pic_left] * **表格** <table border="1px"> <tr> <td colspan="4">th</td> </tr> <tr> <td>11</td> <td>12</td> <td>13</td> <td>14</td> </tr> <tr> <td rowspan="2">21</td> <td>22</td> <td>23</td> <td>24</td> </tr> <tr> <td>32</td> <td colspan="2">33</td> </tr> </table> ![在这里插入图片描述][2020091217434661.png_pic_left] * **视频和音频** <video src="video/a.mp4" controls autoplay></video> <audio src="audio/a.mp3" controls autoplay></audio> * **页面结构分析** header 头部区域 footer 脚部区域 section 独立区域 article 文章区域 aside 侧边栏区域 nav 导航栏 * **iframe内联框架** <body> <iframe src="https://player.bilibili.com/player.html?aid=55200553&bvid=BV1S4411N7T9&cid=96524184&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe> <iframe src="https://www.baidu.com" width="300px" height="300px"></iframe> </body> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70_pic_left] * **表单** <form action="b.html" method="POST"> <p>用户名:<input type="text" name="username" value="BLU" size="60" placeholder="请输入用户名" required></p> <p>密码:<input type="password" name="password" maxlength="16" placeholder="请输入密码" required></p> <p>性别(单选): <!-- radio单选框,一组单选框的name必须相同 --> <input type="radio" name="gender" value="boy" checked> 男 <input type="radio" name="gender" value="girl"> 女 </p> <p>爱好(多选): <!-- checkbox多选框,一组多选框的name必须相同 --> <input type="checkbox" value="sleep" name="hobby"> 睡觉 <input type="checkbox" value="study" name="hobby" checked> 学习 <input type="checkbox" value="game" name="hobby" checked> 游戏 </p> <p> 下拉框(国家): <select name="list"> <option value="1">中国</option> <option value="2">美国</option> <option value="3" selected>日本</option> </select> </p> <p>文本域:<textarea name="textarea" cols="40" rows="10" required></textarea></p> <p>普通按钮:<input type="button" name="btn1" value="Click Me"></p> <p> 上传文件: <input type="file" name="myfile" id=""> <input type="button" name="btn2" value="点击上传"> </p> <p> <input type="submit" value="提交"> <input type="reset" value="重置"> </p> </form> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70_pic_left 1] <form action="b.html" method="POST"> <p>邮箱:<input type="email" name="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"></p> <p>URL:<input type="url" name="url"></p> <p>数字:<input type="number" name="number" min="0" max="100" step="5"></p> <p>滑块:<input type="range" name="range" min="0" max="100"></p> <p>搜索:<input type="search" name="search"></p> <p>只读域:<input type="text" value="hello" readonly></p> <p>隐藏域:<input type="text" value="hello" hidden></p> <p>性别(单选): <input type="radio" name="gender" value="boy" disabled> 男(禁选) <input type="radio" name="gender" value="girl" checked> 女 </p> <p> <label for="mark">点我编辑(增强鼠标可用性)</label> <input type="text" id="mark"> </p> <p><input type="submit" value="提交(禁用)" disabled><input type="reset" value="重置"></p> </form> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70_pic_left 2] [20200912173203691.png_pic_left]: /images/20221123/e1666fc554d44b4f95044b9f33df58d8.png [2020091217434661.png_pic_left]: /images/20221123/54e5408b0a04431486caa189f91642df.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70_pic_left]: /images/20221123/116790d058c74f9d8a2a41590f412eef.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70_pic_left 1]: /images/20221123/9a4ea67e905f4fcbbce7f3ee20d9c479.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70_pic_left 2]: /images/20221123/7f0624fd4db9443fbb29352f31be1b79.png
相关 HTML5 正在上传…重新上传取消 知识总结 ctrl + / 表示注释行快捷键,table 快速生成整体标签 body 网页主体 head 网页搜索标题 meta ﹏ヽ暗。殇╰゛Y/ 2023年10月10日 14:22/ 0 赞/ 51 阅读
相关 HTML5 HTML5入门(一) HTML5中的新特性 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 新的特殊内容元素,比 柔情只为你懂/ 2023年03月01日 05:47/ 0 赞/ 11 阅读
相关 HTML5 HTML入门实例: <!-- DOCTYPE: HTML5规范声明 --> <!DOCTYPE html> <html lang="e ゞ 浴缸里的玫瑰/ 2022年12月06日 01:12/ 0 赞/ 181 阅读
相关 html5简介_HTML5简介 html5简介 ![htmlcss2thumb][] The following is an extract from our book, [HTML5 & CSS3 fo 左手的ㄟ右手/ 2022年12月03日 09:43/ 0 赞/ 349 阅读
相关 HTML5 HTML5是什么 HTML5 是继HTML4.01 和XHTML1.0 之后的超文本标记语言的最新版本。它是由一群 自由思想者组成的团队设计出来,并最终实现多媒体支持 灰太狼/ 2022年08月23日 00:34/ 0 赞/ 174 阅读
相关 HTML5 HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。 一、新特性 拖拽释放(Drag and d ╰半夏微凉°/ 2022年07月15日 08:51/ 0 赞/ 173 阅读
相关 HTML5 此篇收录HTML5的关键知识点, 也是常见的面试题 HTML5是什么 HTML5新增了哪些内容 Web Storage是什么cooki £神魔★判官ぃ/ 2022年07月12日 23:48/ 0 赞/ 244 阅读
相关 HTML5 HTML5 了解HTML5 HTML5 是 HTML 标记语言的一个最新版本 HTML5 制定了web应用开发的一系列标准, 成为第一个将web作为应用 小咪咪/ 2022年06月12日 06:18/ 0 赞/ 242 阅读
相关 HTML&HTML5 HTML&HTML5 学习笔记 职坐标网上视频课程 ![这里写图片描述][SouthEast] ![这里写图片描述][SouthEast 1] ![这里写图片描述 梦里梦外;/ 2022年06月05日 07:46/ 0 赞/ 396 阅读
还没有评论,来说两句吧...