经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
HTML5
来源：cnblogs　　作者：放慢_脚步　　时间：2021/6/28 9:12:27　　对本文有异议

初识HTML

什么是HTML

  • Hyper Text Markup Language（超文本标记语言）

HTML5的优势

  • 世界知名浏览器厂商对HTML5的支持
    • 微软
    • Google
    • 苹果
    • Opera
    • Mozilla
  • 市场需求
  • 跨平台

W3C标准

  • W3C

  • W3C标准包括：

    • 结构化标准语言（HTML、XML）
    • 表现标准语言（CSS）
    • 行为标准（DOM、ECMAScript）
  1. <!-- DOCTYPE:告诉浏览器我们要使用什么规范-->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <!--head代表网页的头部-->
  5. <head>
  6.     <!--meta代表网页的描述-->
  7.     <meta charset="UTF-8">
  8.     <meta name="keyWords" content="小董的网页">
  9.     <meta name="description" content="慎思之、笃行之">
  11.     <!-- title代表网页的标题-->
  12.     <title>我的第一个网页</title>
  13. </head>
  14. <body>
  15. Hello World！
  16. <!--body代表网页的主题-->
  17. </body>
  18. </html>

网页的基本标签

标题标签

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>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>
  16. <!--段落标签-->
  17. <p>两只老虎，两只老虎，</p>
  18. <p>跑得快，跑得快，</p>
  19. <p>一只没有眼睛，一只没有尾巴，</p>
  20. <p>真奇怪！</p>
  21. <p>真奇怪！</p>
  22. <p>两只老虎，两只老虎，</p>
  23. <p>跑得快，跑得快，</p>
  24. <p>一只没有耳朵，一只没有尾巴，</p>
  25. <p>真奇怪！真奇怪！</p>
  26. <!--水平标签-->
  27. <hr/>
  29. <!--换行标签-->
  30. 两只老虎，两只老虎，<br/>
  31. 跑得快，跑得快，<br/>
  32. 一只没有眼睛，一只没有尾巴，<br/>
  33. 真奇怪！<br/>
  34. 真奇怪！<br/>
  35. 两只老虎，两只老虎，<br/>
  36. 跑得快，跑得快，<br/>
  37. 一只没有耳朵，一只没有尾巴，<br/>
  38. 真奇怪！真奇怪！<br/>
  40. <!--字体标签-->
  41. 粗体：<strong> 我是粗体 </strong>
  42. <br/>
  43. 斜体：<em> 我是斜体 </em>
  44. <!--注释和特殊服符号 空格、大于、小于、版权-->
  45. 空格：我 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;拍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;你
  46. <br/>
  47. 大于：&gt;
  48. <br/>
  49. 小于：&lt;
  50. <br/>
  51. 版权所有：&copy;版权所有
  52. <!--
  53. &    ;
  54. 百度
  55. -->
  56. </body>
  57. </html>

图像标签

  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/tang.jpg" alt="米老鼠" title="悬停文字" width="300" height="300">
  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. <!--
  9.     href ：表示网页的地址
  10.     target：表示网页在那个窗口打开
  11.         _blank ：在新的窗口打开网页
  12.         _self ：在当前窗口打开网页
  13. -->
  14. <a name="top">顶部</a>
  16. <a href="1.firstPage.html" target="_blank"> 到第一网页区 </a>
  17. <a href="https://www.baidu.com" target="-_self"> 跳转到百度去 </a>
  18. <br/>
  19. <br/>
  20. <p>
  21.   <a href="1.firstPage.html">
  22.     <img src="../resources/image/tang.jpg" alt="米老鼠" title="悬停文字" width="300" height="300">
  23.   </a>
  24. </p>
  27. <!--锚链接
  28.     1. 需要一个标记 <a name="top">顶部</a>
  29.     2. 跳转到标记
  30. -->
  31. <a href="#top"> 回到顶部 </a>
  33. <a name="down">底部</a>
  35. <!--功能性链接
  36.     邮件链接：mailto
  37.     qq链接
  39. -->
  40. <a href="mailto:45334544@qq.com">点击联系我</a>
  41. <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
  42.   <img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="加我，有好电影" title="加我，有好电影"/></a>
  44. </body>
  45. </html>

行元素和块元素

  • 块元素
    • 无论内容占多少，该元素独占一行
    • （p、h1 - h6）
  • 行内元素
    • 内容撑开宽度，左右都是行内元素的可以在排成一行
    • （a . strong . em）

列表

  • 什么是列表

    • 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息

  • 列表的分类

    • 无序列表
    • 有序列表
    • 定义列表
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>列表学习</title>
  6. </head>
  7. <body>
  9. <ol>
  10.   <li>Java</li>
  11.   <li>Python</li>
  12.   <li>运维</li>
  13.   <li>前端</li>
  14.   <li>C/c++</li>
  15. </ol>
  18. <ul>
  19.   <li>Java</li>
  20.   <li>Python</li>
  21.   <li>运维</li>
  22.   <li>前端</li>
  23.   <li>C/c++</li>
  24. </ul>
  25. <!--自定义列表
  26.     dl：标签
  27.     dt：列表名称
  28.     dd：列表内容
  29. -->
  30. <dl>
  31.   <dt>学科</dt>
  32.   <dd>java</dd>
  33.   <dd>Python</dd>
  34.   <dd>运维</dd>
  35.   <dd>前端</dd>
  36.   <dd>C</dd>
  38.   <dt>国家</dt>
  39.   <dd>中国</dd>
  40.   <dd>德国</dd>
  41.   <dd>美国</dd>
  42.   <dd>俄国</dd>
  43. </dl>
  46. </body>
  47. </html>

表格

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

媒体元素

  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/a.mp4" controls autoplay></video>
  14. <audio src="../resources/a.mp3" controls ></audio>
  16. </body>
  17. </html>

页面结构分析

元素名 描述
header 标题头部区域的内容（用于页面或者页面中的一块区域）
footer 标记脚部区域的内容（用于整个页面或者页面中的一块区域）
section web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或者应用
nav 导航类辅助内容 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>页面结构</title>
  6. </head>
  7. <body>
  8. <header>
  9.   <h2>网页头部</h2>
  10. </header>
  11. <section>
  12.   <h2>网页主题</h2>
  13. </section>
  14. <footer>
  15.   <h2>网页脚部</h2>
  16. </footer>
  17. </body>
  18. </html>

iframe内联框架

  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-d：宽度、长度
  11. -->
  12. <iframe src=""  name="hello" frameborder="0" height="800px" width="1000px"></iframe>
  14. <a href="https://www.cnblogs.com/Running-Man/p/14848232.html" target="hello"> 点击跳转 </a>
  16. </body>
  17. </html>

表单

表单元素格式

type 指定元素的类型：text、password、checkbox、radio、submit、reset、file、hidden、image、button，默认为text
name 指定表单元素的名称
value 元素的初始值，type为radio时，必须指定一个值
size 指定表单元素的初始宽度
maxlength type为text或者password时，输入的最大字符数
checked type为checkbox或者radio时，指定按钮是否是被选中

表单的应用

  • 隐藏 hidden
  • 只读readonly
  • 禁用disabled

表单的初级验证

  • 为啥要验证

  • 常用方式：

    • placeholder ：文本框提示信息
    • required ：必须填写
    • pattern ：正则表达式
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表单学习</title>
  6. </head>
  7. <body>
  8. <h2>注册</h2>
  9. <!--表单：form
  10.     action：表单提交的位置，可以是网站，也可以是一个请求处理的地址
  11.     method：get、post提交方式（显示、隐式）
  12.             get提交方式，可以在url中直接看到，不安全，高效
  13.             post：比较安全，大文件
  14. -->
  15. <form action="1.firstPage.html" method="get">
  16.     <!--文本输出狂：input type="text"
  17.     value="小尼姑" 文本框初始值
  18.     maxlength="8"  最长能写几个字符
  19.     size="20"      文本框的长度
  20.     -->
  21.     <p> 用户：<input type="text" name="userName" placeholder="请输入用户名"></p>
  23.     <!--密码输出狂:input type="password"-->
  24.     <p>密码：<input type="password" name="pwd" value="12345" required></p>
  26.     <!--单选框标签:input type="radio"
  27.         value:单元框的值
  28.         name:表示组
  29.     -->
  30.     <p>性别：
  31.         <input type="radio" value="boy" name="sex">男
  32.         <input type="radio" value="girl" name="sex">女
  33.     </p>
  35.     <p>爱好：
  36.         <input type="checkbox" value="read" name="hobby">读书
  37.         <input type="checkbox" value="game" name="hobby">打游戏
  38.         <input type="checkbox" value="swim" name="hobby">游泳
  39.         <input type="checkbox" value="football" name="hobby">足球
  40.     </p>
  41.     <!--input type="button" 普通按钮
  42.         input type="image" 图片按钮
  43.         input type="submit" 提交按钮
  44.         input type="reset" 重置按钮
  45.     -->
  47.     <p>按钮：
  48.         <input type="button" name="btn1" value="点击一下">
  49. <!--        <input type="image" src="../resources/image/tang.jpg">-->
  50.     </p>
  51.     
  52.     <!--下拉框 -->
  53.     <p>国家：
  54.         <select name="列表名字" id="">
  55.             <option value="China">中国</option>
  56.             <option value="USA">美国</option>
  57.             <option value="Japan">日本</option>
  58.             <option value="Indian">印度</option>
  59.         </select>
  60.     </p>
  61.     
  62.     <!--文本框-->
  63.     <p>反馈：
  64.         <textarea name="textarea" id="1" cols="30" rows="10">文本内容</textarea>
  65.     </p>
  66.     
  67.     <!--文件域-->
  68.     <p>
  69.         <input type="file">
  70.         <input type="button" name="upload" value="上传">
  71.     </p>
  73.     <!--邮件验证-->
  74.     <p>邮箱：
  75.         <input type="email">
  76.     </p>
  78.     <!--URL-->
  79.     <p>url：
  80.         <input type="url">
  81.     </p>
  83.     <!--数字-->
  84.     <p>商品数量：
  85.         <input type="number" name="voice" min="0" max="100" step="10">
  86.     </p>
  88.     <!--滑块-->
  89.     <p>voice：
  90.         <input type="range" name="voice" min="0" max="100" step="2">
  91.     </p>
  93.     <!--搜索框-->
  94.     <p>搜索框：
  95.         <input type="search" name="search">
  96.     </p>
  97.     <!--增强鼠标的可用性-->
  98.     <p>
  99.         <label for="mark"> 你点我试一试</label>
  100.         <input type="text" id="mark">
  101.     </p>
  103.     <p>
  104.         <input type="submit" >
  105.         <input type="reset">
  106.     </p>
  107. </form>
  108. </body>
  109. </html>

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