经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
010_HTML5 - 清风（学习-踏实）
来源：cnblogs　　作者：清风（学习-踏实）　　时间：2021/2/22 8:40:31　　对本文有异议

目录

初识HTML

什么是HTML

  1. Hyper Text Markup Language
  2. 超文本标记语言
  3. 超文本包括：文字、图片、音频、视频、动画等

HTML发展史

image.png

HTML5的优势

image.png

W3C标准

image.png

常见IDE

image.png

IDEA开发HTML

IDEA创建HTML文件，并用浏览器打开

image.png

配置浏览器

image.png

HTML基础

HTML基本结构

image.png

HTML注释

  1. <!-- HTML注释 -->

网页基本信息

  1. DOCTYPE声明
  2. title标签
  3. meta标签
  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="网站关键词描述">
  10.     <meta name="description" content="网站描述">
  12.     <!-- title网页标题 -->
  13.     <title>我的第一个页面</title>
  14. </head>
  15. <!-- body标签代表网页主体 -->
  16. <body>
  17. Hello World!
  18. </body>
  19. </html>

网页基本标签

  1. 标题标签
  2. 段落标签
  3. 换行标签
  4. 水平线标签
  5. 字体样式标签
  6. 注释和特殊符号
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>基本标签</title>
  6. </head>
  7. <body>
  9.     <!-- 标题标签 -->
  10.     <h1>一级标题</h1>
  11.     <h2>二级标题</h2>
  12.     <h3>三级标题</h3>
  13.     <h4>四级标题</h4>
  14.     <h5>五级标题</h5>
  15.     <h6>六级标题</h6>
  17.     <!-- 段落标签 -->
  18.     <h1>沁园春·雪</h1>
  19.     <p>北国风光，千里冰封，万里雪飘。</p>
  20.     <p>望长城内外，惟余莽莽；大河上下，顿失滔滔。</p>
  21.     <p>山舞银蛇，原驰蜡象，欲与天公试比高。</p>
  22.     <p>须晴日，看红装素裹，分外妖娆。</p>
  23.     <p>江山如此多娇，引无数英雄竞折腰。</p>
  24.     <p>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</p>
  25.     <p>一代天骄，成吉思汗，只识弯弓射大雕。</p>
  26.     <p>俱往矣，数风流人物，还看今朝。</p>
  28.     <!-- 水平线标签 -->
  29.     <hr/>
  31.     <!-- 换行标签 -->
  32.     <h1>沁园春·长沙</h1>
  33.     独立寒秋，湘江北去，橘子洲头。<br/>
  34.     看万山红遍，层林尽染；漫江碧透，百舸争流。<br/>
  35.     鹰击长空，鱼翔浅底，万类霜天竞自由。<br/>
  36.     怅寥廓，问苍茫大地，谁主沉浮？<br/>
  37.     携来百侣曾游。忆往昔峥嵘岁月稠。<br/>
  38.     恰同学少年，风华正茂；书生意气，挥斥方遒。<br/>
  39.     指点江山，激扬文字，粪土当年万户侯。<br/>
  40.     曾记否，到中流击水，浪遏飞舟？<br/>
  42.     <!-- 字体样式标签 -->
  43.     <p>粗体 <strong>样本 hello</strong></p>
  44.     <p>斜体 <em>样本 hello</em></p>
  46.     <!-- 特殊符号 -->
  47.     空 格<br/>
  48.     空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格<br/>
  49.     大于<br/>
  50.     &gt;<br/>
  51.     小于<br/>
  52.     &lt;<br/>
  53.     版权符号<br/>
  54.     &copy;版权所有<br/>
  55. </body>
  56. </html>

图像标签

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>图像标签</title>
  6. </head>
  7. <body>
  8.     <!--
  9.     src：图像地址（必填）
  10.         相对地址（推荐使用），绝对地址
  11.         ../ 上一级目录
  12.     alt：图像名称（必填）
  13.     -->
  14.     <img src="../resources/image/1.jpg" alt="图片名称" title="悬停文字" width="1024" height="577">
  15.     <img src="../resources/image/2.jpg" alt="图片名称" title="悬停文字" width="1024" height="577">
  16. </body>
  17. </html>

链接标签

image.png

  1. 文本超链接
  2. 图像超链接
  3. 页面间链接：从一个页面链接到另一个页面
  4. 锚链接
  5. 页面间链接+锚链接：从一个页面链接到另一个页面的锚点
  6. 功能性链接
    1. 邮件链接
    2. QQ链接：使用QQ推广网站的推广工具

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>链接标签</title>
  6. </head>
  7. <body>
  8.     <p><a name="top" href="#bottom">直达底部</a></p>
  10.     <!--
  11.     a标签
  12.     href：必填，表示要跳转到哪个页面
  13.     target：表示窗口在哪里打开
  14.         _blank 在新标签打开
  15.         _self 默认，在本页打开
  16.     -->
  17.     <a href="1.我的第一个网页.html" target="">默认跳转</a><br>
  18.     <a href="1.我的第一个网页.html" target="_self">本页跳转</a><br>
  19.     <a href="https://www.baidu.com" target="_blank">新标签跳转</a><br>
  21.     <a href="1.我的第一个网页.html">
  22.         <img src="../resources/image/1.jpg" alt="图片名称" title="悬停文字" width="1024" height="577">
  23.     </a>
  24.     <p><a>
  25.         <img src="../resources/image/1.jpg" alt="图片名称" title="悬停文字" width="1024" height="577">
  26.     </a></p>
  27.     <p><a>
  28.         <img src="../resources/image/1.jpg" alt="图片名称" title="悬停文字" width="1024" height="577">
  29.     </a></p>
  30.     <p><a>
  31.         <img src="../resources/image/1.jpg" alt="图片名称" title="悬停文字" width="1024" height="577">
  32.     </a></p>
  34.     <!--
  35.     锚链接：
  36.     1.需要一个锚标记，使用name
  37.     2.跳转到标记
  38.     -->
  39.     <p><a name="bottom" href="#top">回到顶部</a></p>
  40.     <!-- 页面间链接+锚链接：从一个页面链接到另一个页面的锚点 -->
  41.     <p><a href="2.基本标签.html/#bottom" target="_blank">跳转到基本标签页面底部</a></p>
  43.     <!--
  44.     功能性链接：
  45.     邮件链接：mailto
  46.     QQ链接
  47.     -->
  48.     <p><a href="mailto:wl3pb@163.com">点击给我发邮件</a></p>
  49.     <p>
  50.         <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=962307062&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:962307062:53" alt="在线咨询" title="在线咨询"/></a>
  51.     </p>
  52. </body>
  53. </html>

块元素和行内元素

image.png

列表标签

image.png

  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>javascript</li>
  13.     </ol>
  14.     <hr/>
  15.     <!--无序列表-->
  16.     <ul>
  17.         <li>java</li>
  18.         <li>python</li>
  19.         <li>javascript</li>
  20.     </ul>
  21.     <hr/>
  22.     <!--自定义列表
  23.     dl:标签
  24.     dt:列表名称
  25.     dd:列表内容
  26.     -->
  27.     <dl>
  28.         <dt>编程语言</dt>
  29.         <dd>java</dd>
  30.         <dd>python</dd>
  31.         <dd>javascript</dd>
  33.         <dt>武功秘籍</dt>
  34.         <dd>九阳神功</dd>
  35.         <dd>九阴真经</dd>
  36.         <dd>降龙十八掌</dd>
  37.     </dl>
  38. </body>
  39. </html>

表格标签

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表格标签</title>
  6. </head>
  7. <body>
  8.     <!--表格标签table
  9.         行 tr
  10.         列 td
  11.     -->
  12.     <table border="1px">
  13.         <tr>
  14.             <!--colspan 跨列-->
  15.             <td colspan="4">1-1</td>
  16.         </tr>
  17.         <tr>
  18.             <!--rowspan 跨行-->
  19.             <td rowspan="2">2-1</td>
  20.             <td>2-2</td>
  21.             <td>2-3</td>
  22.             <td>2-4</td>
  23.         </tr>
  24.         <tr>
  25.             <td>3-1</td>
  26.             <td>3-2</td>
  27.             <td>3-3</td>
  28.         </tr>
  29.     </table>
  30. </body>
  31. </html>

媒体元素：音频和视频

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>媒体元素</title>
  6. </head>
  7. <body>
  8.     <!--视频和音频
  9.         src 资源路径
  10.         controls 控制条
  11.         autoplay 自动播放
  12.     -->
  13.     <video src="../resources/video/1.mp4" controls autoplay></video>
  14.     <audio src="../resources/audio/1.mp3" controls autoplay></audio>
  15. </body>
  16. </html>

页面结构分析

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>页面结构</title>
  6. </head>
  7. <body>
  8. <header>
  9.     <h1>页面头部</h1>
  10. </header>
  11. <section>
  12.     <h1>页面主体</h1>
  13. </section>
  14. <footer>
  15.     <h1>页面脚部</h1>
  16. </footer>
  17. </body>
  18. </html>

iframe内联框架

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>iframe内联框架</title>
  6. </head>
  7. <body>
  8. <!--iframe内联框架
  9.     src 地址
  10.     w-h 宽度高度
  11. 		name 标识名
  12. -->
  13. <iframe src="https://www.baidu.com" frameborder="1" width="800px" height="500px"></iframe>
  15. <!--点击显示跳转页面嵌入到标识名iframe-->
  16. <iframe src="" name="hello" frameborder="1" width="800px" height="500px"></iframe>
  17. <a href="3.图像标签.html" target="hello">点击显示跳转页面嵌入到标识名iframe</a>
  18. </body>
  19. </html>

表单

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表单</title>
  6. </head>
  7. <body>
  8. <h1>注册</h1>
  9. <!--表单form
  10.     action 表单提交的位置，可以是网站，也可以是一个请求处理地址
  11.     method post，get提交方式
  12.         get方式提交：可以在url中看到我们提交的信息，不安全，高效
  13.         post方式提交：可以传输大文件，比较安全，但可以在Network查看，可以处理为不能查看
  14. -->
  15. <form action="1.我的第一个网页.html" method="post">
  16.     <p><input type="text" name="username"></p>
  17.     <p><input type="password" name="pwd"></p>
  18.     <p>
  19.         <input type="submit"></input>
  20.         <input type="reset">
  21.     </p>
  22. </form>
  23. </body>
  24. </html>

表单元素

image.png

  1. checked 单选框和多选框选中
  2. selected 下拉框选中
  3. readonly 只读
  4. disabled 禁用
  5. hidden 隐藏
  1. <!--单选框 radio
  2.     value 值
  3.     name 表示组
  4. -->
  5. <p>
  6.     <input type="radio" value="boy" name="sex"/>男
  7.     <input type="radio" value="girl" name="sex"/>女
  8. </p>
  9. <!--多选框 checkbox
  10.     value 值
  11.     name 表示组
  12. -->
  13. <p>
  14.     <input type="checkbox" value="1" name="number"/>一
  15.     <input type="checkbox" value="2" name="number"/>二
  16.     <input type="checkbox" value="3" name="number"/>三
  17. </p>
  18. <!--文本域 textarea
  19.     cols 列
  20.     rows 行
  21. -->
  22. <p>反馈
  23.     <textarea name="fankui" cols="20" rows="10">文本内容</textarea>
  24. </p>
  25. <!--文本域 textarea
  26.     cols 列
  27.     rows 行
  28. -->
  29. <p>文件域
  30.     <input type="file" name="files"/>
  31. </p>
  32. <p>数字
  33.     <input type="number" name="num" max="100" min="10" step="5"/>
  34. </p>
  35. <p>滑块
  36.     <input type="range" name="voice" max="100" min="0" step="2"/>
  37. </p>
  38. <p>搜索框，有叉号，可以删除
  39.     <input type="search" name="search"/>
  40. </p>
  41. <!--label标签，增强鼠标可用性，点击文件，文本框获取焦点-->
  42. <p>
  43.   <label for="mark">你点我试试</label>
  44.     <input type="search" name="search" id="mark"/>
  45. </p>

表单的初级验证

  1. placeholder 提示信息
  2. required 非空
  3. pattern 正则表达式

总结

原文链接：http://www.cnblogs.com/wl3pb/p/14427857.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号