经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
【HTML】HTML5学习笔记
来源：cnblogs　　作者：双份浓缩馥芮白　　时间：2021/6/28 9:12:22　　对本文有异议

?HTML

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。


?课程

https://www.bilibili.com/video/BV1x4411V75C


?学习笔记

我的第一个网页

  1. <!--!DOCTYPE 告诉浏览器使用什么规范-->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <!--head 网页头部-->
  5. <head>
  6. <!--    meta 描述性标签 描述网页信息-->
  7. <!--    meta 一般用来做SEO-->
  8.     <meta charset="UTF-8">
  9.     <meta name="keywords" content="IU">
  10.     <meta name="description" content="Test">
  11. <!--    title 网页标题-->
  12.     <title>Hello World</title>
  13. </head>
  14. <!--body 网页主题-->
  15. <body>
  16.     Hello World
  17. </body>
  18. </html>

基本标签

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>基本标签</title>
  6. </head>
  7. <body>
  8. <!--标题标签-->
  9. <h1>一级标签</h1>
  10. <h2>二级标签</h2>
  11. <h3>三级标签</h3>
  12. <h4>四级标签</h4>
  13. <h5>五级标签</h5>
  14. <h6>六级标签</h6>
  16. <!--段落标签-->
  17. <p>设计模式（Design Pattern）是前辈们对代码开发经验的总结，是解决特定问题的一系列套路。它不是语法规定，而是一套用来提高代码可复用性、可维护性、可读性、稳健性以及安全性的解决方案。</p>
  18. <p>1995 年，GoF（Gang of Four，四人组/四人帮）合作出版了《设计模式：可复用面向对象软件的基础》一书，共收录了 23 种设计模式，从此树立了软件设计模式领域的里程碑，人称「GoF设计模式」。</p>
  20. <!--换行标签-->
  21. <p>设计模式（Design Pattern）是前辈们对代码开发经验的总结，是解决特定问题的一系列套路。它不是语法规定，而是一套用来提高代码可复用性、可维护性、可读性、稳健性以及安全性的解决方案。</p>
  22. <br>
  23. <p>1995 年，GoF（Gang of Four，四人组/四人帮）合作出版了《设计模式：可复用面向对象软件的基础》一书，共收录了 23 种设计模式，从此树立了软件设计模式领域的里程碑，人称「GoF设计模式」。</p>
  25. <!--水平线标签-->
  26. <hr/>
  28. <!--字体样式标签-->
  29. <h1>字体样式标签</h1>
  30. <strong>粗体</strong>
  31. <em>斜体</em>
  33. <br>
  34. <!--特殊符号-->
  35. <!--空格-->
  36. 空&nbsp;格
  37. &gt;
  38. &lt;
  39. &copy;
  41. </body>
  42. </html>

图像标签

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>图像标签</title>
  6. </head>
  7. <body>
  8. <!--src图片地址（必填） alt图片名字（必填）-->
  9. <img src="../resources/image/IU_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">
  11. <a href="4.%20链接标签.html#down"> 底部</a>
  13. </body>
  14. </html>

链接标签

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>链接标签</title>
  6. </head>
  8. <!--a标签-->
  9. <!--href（必填）表示跳转到哪个页面-->
  10. <!--target 表示窗口在哪里打开-->
  11. <!--    _blank 新标签打开-->
  12. <!--    _self 本页面打开-->
  14. <!--块元素-->
  15. <!--无论内容多少，该元素独占一行(p、h1-h6...)-->
  16. <!--行内元素-->
  17. <!--内容撑开宽度﹐左右都是行内元素的可以在排在一行( a . strong . em ... )-->
  20. <body>
  22. <a name="top">顶部</a>
  24. <a href="1.%20我的第一个网页.html" target="_blank">点击跳转我的第一个网页</a>
  25. <a href="https://www.baidu.com" target="_self">点击跳转百度</a>
  27. <br>
  29. <a href="1.%20我的第一个网页.html">点击跳转我的第一个网页
  30.     <img src="../resources/image/IU_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">
  31. </a>
  38. <!--锚链接-->
  39. <!--1. 需要一个锚标记-->
  40. <!--2. 跳转到标记-->
  42. <!--<a href="1.%20我的第一个网页.html">点击跳转我的第一个网页-->
  43. <!--    <img src="../resources/image/IU_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">-->
  44. <!--</a><a href="1.%20我的第一个网页.html">点击跳转我的第一个网页-->
  45. <!--    <img src="../resources/image/IU_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">-->
  46. <!--</a><a href="1.%20我的第一个网页.html">点击跳转我的第一个网页-->
  47. <!--    <img src="../resources/image/IU_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">-->
  48. <!--</a><a href="1.%20我的第一个网页.html">点击跳转我的第一个网页-->
  49. <!--    <img src="../resources/image/IU_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">-->
  50. <!--</a><a href="1.%20我的第一个网页.html">点击跳转我的第一个网页-->
  51. <!--    <img src="../resources/image/IU_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">-->
  52. <!--</a><a href="1.%20我的第一个网页.html">点击跳转我的第一个网页-->
  53. <!--    <img src="../resources/image/IU_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">-->
  54. <!--</a>-->
  57. <!--功能性链接-->
  58. <!--邮箱链接-->
  59. <!--QQ推广链接-->
  60. <a href="mailto:666@163.com">mailto</a>
  62. <a href="#top">回到顶部</a>
  63. <a name="down">底部</a>
  65. </body>
  66. </html>

列表

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>列表</title>
  6. </head>
  7. <body>
  8. <!--有序列表-->
  9. <ol>
  10.     <li>Java</li>
  11.     <li>Python</li>
  12.     <li>C</li>
  13.     <li>C++</li>
  14.     <li>PHP</li>
  15. </ol>
  16. <hr/>
  17. <!--无序列表-->
  18. <ul>
  19.     <li>Java</li>
  20.     <li>Python</li>
  21.     <li>C</li>
  22.     <li>C++</li>
  23.     <li>PHP</li>
  24. </ul>
  25. <hr/>
  26. <!--自定义列表
  27. dl：标签
  28. dt：标题
  29. dd：内容-->
  30. <dl>
  31.     <dt>title1</dt>
  32.     <dd>1</dd>
  33.     <dd>2</dd>
  34.     <dd>3</dd>
  36.     <dt>title2</dt>
  37.     <dd>1</dd>
  38.     <dd>2</dd>
  39.     <dd>3</dd>
  40. </dl>
  42. </body>
  43. </html>

表格

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表格</title>
  6. </head>
  7. <body>
  9. <!--表格table
  10. 行 tr
  11. 列 td-->
  13. <table border="1px">
  14.     <tr>
  15. <!--        跨列-->
  16.         <td colspan="5">跨5列</td>
  17.     </tr>
  18.     <tr>
  19. <!--        跨行-->
  20.         <td rowspan="2">跨2行</td>
  21.         <td>2</td>
  22.         <td>3</td>
  23.         <td>4</td>
  24.         <td>5</td>
  25.     </tr>
  26.     <tr>
  27.         <td>1</td>
  28.         <td>2</td>
  29.         <td>3</td>
  30.         <td>4</td>
  31. <!--        <td>5</td>-->
  32.     </tr>
  33. </table>
  35. <hr/>
  37. <table border="1px">
  38.     <tr>
  39.         <td colspan="3">表格测试</td>
  40.     </tr>
  41.     <tr>
  42.         <td rowspan="2">跨2行</td>
  43.         <td>语文</td>
  44.         <td>100</td>
  45.     </tr>
  46.     <tr>
  47.         <td>数学</td>
  48.         <td>100</td>
  49.     </tr>
  50.     <tr>
  51.         <td rowspan="2">跨2行</td>
  52.         <td>语文</td>
  53.         <td>100</td>
  54.     </tr>
  55.     <tr>
  56.         <td>数学</td>
  57.         <td>100</td>
  58.     </tr>
  59. </table>
  61. </body>
  62. </html>

媒体元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>媒体元素</title>
  6. </head>
  7. <body>
  8. <!--<video src="源" controls控制条 autoplay自动播放/></video>-->
  9. <audio src="../resources/audio/IU,SUGA%20-%20??(Prod.&Feat.%20SUGA%20of%20BTS).flac" controls autoplay>
  11. </audio>
  12. </body>
  13. </html>

页面结构分析

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>页面结构分析</title>
  6. </head>
  7. <body>
  9. <p>header 标题头部区域的内容(用于页面或页面中的一块区域)</p>
  10. <p>footer 标记脚部区域的内容（用于整个页面或页面的一块区域)</p>
  11. <p>section Web页面中的一块独立区域</p>
  12. <p>article 独立的文章内容</p>
  13. <p>aside 相关内容或应用(常用于侧边栏)</p>
  14. <p>nav 导航类辅助内容<p/>
  18. <header><h1>网页头部</h1></header>
  19. <header>网页头部</header>
  20. <hr>
  21. <section><h1>网页主体</h1></section>
  22. <section>网页主体</section>
  23. <hr>
  24. <footer><h1>网页脚部</h1></footer>
  25. <footer>网页脚部</footer>
  27. </body>
  28. </html>

内联框架

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>内联框架</title>
  6. </head>
  7. <body>
  8. <!--ifram内联框架-->
  9. <iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
  10. <!--<iframe src="https://www.baidu.com" width="300px" height="300px"></iframe>-->
  11. <iframe src="" name="baidu" width="1000px" height="800px"></iframe>
  13. <a href="https://www.baidu.com" target="baidu">点击跳转</a>
  15. </body>
  16. </html>

表单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表单</title>
  6. </head>
  7. <body>
  8. <!--表单form
  9. action 表单提交的位置 网站/请求处理地址
  10. method post get 提交方式
  11.     get方式提交 可以在url中看到提交的信息 不安全 高效
  12.     post方式提交 比较安全 传输大文件
  13. -->
  15. <p>type 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和button，默认为 text</p>
  16. <p>name 指定表单元素的名称</p>
  17. <p>value 元素的初始值。type为radio时必须指定一个值</p>
  18. <p>size 指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位</p>
  19. <p>maxlength type为text或 password时，输入的最大字符数</p>
  20. <p>checked type为radio或checkbox时，指定按钮是否是被选中</p>
  22. <p>readonly 只读</p>d
  23. <p>disable  禁用</p>
  24. <p>hidden   隐藏 -> 传递默认值</p>
  26. <h1>注册</h1>
  27. <form action="1.%20我的第一个网页.html" method="get">
  28. <!--    文本输入框-->
  29.     <p>用户名 <input type="text" name="username" value="初始值" maxlength="8" size="30"></p>
  30.     <p>用户名 <input type="text" name="username" value="readonly" readonly maxlength="8" size="30"></p>
  31. <!--    密码框-->
  32.     <p>密&nbsp;&nbsp;码 <input type="password" name="passwd"></p>
  33.     <p>密&nbsp;&nbsp;码 <input type="password" name="passwd" hidden></p>
  35. <!--    单选框-->
  36. <!--    name相同为同一组-->
  37.     <p>性&nbsp;&nbsp;别
  38.         <input type="radio" value="boy" name="sex" checked/>男
  39.         <input type="radio" value="boy" name="sex" checked disabled/>男
  40.         <input type="radio" value="girl" name="sex"/>女
  41.     </p>
  43. <!--    多选框-->
  44.     <p>爱好
  45.         <input type="checkbox" value="sleep" name="hobby">睡觉
  46.         <input type="checkbox" value="code" name="hobby" checked>coding
  47.         <input type="checkbox" value="chat" name="hobby">聊天
  48.         <input type="checkbox" value="game" name="hobby">游戏
  49.         <input type="checkbox" value="girl" name="hobby">girl
  50.     </p>
  52. <!--    按钮-->
  53.     <p>
  54.         <input type="button" name="btn1" value="按钮">
  55. <!--        <input type="image" src="../resources/image/IU_16x10.png">-->
  56.     </p>
  57.     <p>
  58.         <input type="submit">
  59.         <input type="reset" value="清空表单">
  60.     </p>
  62. <!--    下拉框 列表框-->
  63.     <p>下拉框
  64.         <select name="列表名称">
  65.             <option value="111">选项一</option>
  66.             <option value="222">选项二</option>
  67.             <option value="333" selected>选项三</option>
  68.             <option value="444">选项四</option>
  69.             <option value="555">选项五</option>
  70.         </select>
  71.     </p>
  73. <!--    文本域-->
  74.     <p>textarea
  75.         <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
  76.     </p>
  78. <!--    文件域-->
  79.     <p>
  80.         <input type="file" name="files">
  81.         <input type="button" value="上传" name="upload">
  82.     </p>
  84. <!--    邮件验证-->
  85.     <p>邮箱
  86.         <input type="email" name="email">
  87.     </p>
  89. <!--    URL验证-->
  90.     <p>URL
  91.         <input type="url" name="url">
  92.     </p>
  94. <!--    数字验证-->
  95.     <p>商品数量
  96.         <input type="number" name="number" max="100" min="0" step="10">
  97.     </p>
  99. <!--    滑块-->
  100.     <p>音量
  101.         <input type="range" name="voice" min="0" max="100" step="10">
  102.     </p>
  104. <!--    搜索-->
  105.     <p>搜索
  106.         <input type="search" name="search">
  107.     </p>
  109. <!--    增强鼠标可用性-->
  110.     <p>
  111.         <label for="mark">点我聚焦位置</label>
  112.         <input type="text" id="mark">
  113.     </p>
  115.     <p>
  116.         <input type="submit" disabled>
  117.     </p>
  118. </form>
  119. </body>
  120. </html>

表单验证

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表单验证</title>
  6. </head>
  7. <body>
  8. <!--表单form
  9. action 表单提交的位置 网站/请求处理地址
  10. method post get 提交方式
  11.     get方式提交 可以在url中看到提交的信息 不安全 高效
  12.     post方式提交 比较安全 传输大文件
  13. -->
  15. <p>placeholder  提示信息</p>
  16. <p>required  非空判断</p>
  17. <p>pattern  正则表达式</p>
  20. <form action="1.%20我的第一个网页.html" method="get">
  21. <!--    文本输入框-->
  22.     <p>用户名 <input type="text" name="username" placeholder="请输入用户名" required></p>
  23. <!--    密码框-->
  24.     <p>密&nbsp;&nbsp;码 <input type="password" name="passwd" placeholder="请输入密码"required></p>
  27. <!--    正则表达式验证-->
  28.     <p>正则表达式验证<input type="text" required name="test" pattern="[A-z]{3}" title="只能包含三个字母的文本字段（数字或特殊字符）"></p>
  30.     <p>
  31.         <input type="submit">
  32.     </p>
  33. </form>
  34. </body>
  35. </html>

?转载请注明出处

本文作者：双份浓缩馥芮白

原文链接：https://www.cnblogs.com/Flat-White/p/14939352.html

版权所有，如需转载请注明出处。

原文链接：http://www.cnblogs.com/Flat-White/p/14939352.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号