html小结

html

HTML 指超文本标记语言。

html 文档以各种标签组成

  1. html 大小写无关
  2. 标签有成对的也有不成对的
  4. 1.成对
  1.     <p></p> <h1></h1> <div></div>
  1. 2.不成对
  1.     <br/> <hr/> <link/>

注释

  1. <!--注释内容 可以多行-->

实体字符

  1. &nbsp; <!--空格-->
  2. &gt; <!-->-->
  3. &lt; <!--<-->
  4. &copy; <!--版权符号©-->

html 结构

  1.     <!--第一行 声明文件类型-->
  2.     <!--<!DOCTYPE html>-->
  3.     <!--html文档结构
  4.     <html lang="en"> lang 为html标签的属性 表明语言种类 en英文 zh_cn 中文
  5.         <head>头部标签</head>
  6.         <body>主体标签</body>
  7.     </html>

<head></head>头部标签

  1.     <!--头部标签-->
  2.     <head>
  3.         <!-- meta标签 -->
  4.         <meta charset = "utf-8" />
  5.         <!-- 设置页面字符集 -->
  6.         <!-- http-equiv 告知浏览器行为 -->
  7.         <meta http-equiv="refresh" content="5;url=https://www.baidu.com"/> 
  8.         <!-- 设置5秒后自动跳转到百度 -->
  9.         <meta http-equiv="refresh" content="5"/> 
  10.         <!-- 设置页面5秒刷新一次 -->
  11.         <!-- name 告知浏览器内容 -->
  12.         <meta name="keywords" content="php,html,css,javascript "/> 
  13.         <!-- 设置网站关键字，多个关键字用英文状态下逗号分隔 -->
  14.         <meta name="description" content="描述内容"/> 
  15.         <!-- 设置网站的描述 -->
  16.         <!-- link 标签 
  17.             rel="文档与被链接文档之间的关系"
  18.             type="被链接文档的类型"
  19.             href="被链接文档的地址" -->
  20.         <link rel="icon" type="" href="./favicon.ico" /> 
  21.         <link rel="stylesheet" type="text/css" href="./toc/css/demo.css" /> 
  22.         <!-- 加载外部css样式文件 -->
  23.         <style></style> 
  24.         <!-- 页面css样式 -->
  25.         <script></script> 页面js脚步
  26.         <meta name="viewport" content="initial-scale=2.0,width=device-width" />
  27.         <!-- name = "viewport" 视口的属性 -->
  28.         <!-- initial-scale=2.0 将页面放大两倍 -->
  29.         <!-- width = device-width 告诉浏览器页面的宽度与设备等宽 -->
  30.         <meta name="viewport" content="width=device-width,maximum-scale=3,minimum-scale=0.5" />
  31.         <!-- 允许用户将页面最大放大到设备宽度的3倍，最小缩小至设备宽度的一半 -->
  32.         <meta name="viewport" content="initial-scale=1.0,user-scalable=no" />
  33.         <!-- 禁止用户缩放，可以在混合APP时，为了使html页面更逼真，禁止页面缩放 -->
  34.     </head>

<body></body> 标签

  1.     <p>这是段落标签</p>
  2.     <b>加粗</b>
  3.     <strong>强调</strong>
  4.     <em>强调</em>
  5.     <i>斜体</i>
  6.     <br/> 换行
  7.     <hr /> 水平线
  8.     <del>删除线</del>
  10.     <!--h族标签-->
  11.     <h1>h1标签</h1>
  12.     <h2>h2标签</h2>
  13.     <h3>h3标签</h3>
  14.     <h4>h4标签</h4>
  15.     <h5>h5标签</h5>
  16.     <h6>h6标签</h6>
  17.     <!--h族标签只有h1--到h6-->
  19.     <bdo>覆盖默认的文本方向</bdo>
  20.     <label for="">H<sub>2</sub>O</label>
  21.     <!-- sub下标文本 -->
  22.     <label for="">M<sup>2</sup></label>
  23.     <!-- sup上标文本 -->
  24.     <details>
  25.         <summary>details 自定义标题</summary>
  26.         品名： <br/>价格： <br/>描述：<br/>
  27.     </details>
  28.     <!-- 交互式空间，可见或隐藏补充细节 -->
  29.     <dialog></dialog>
  30.     <!-- 定义对话框或者窗口 -->
  31.     <figure></figure>
  32.     <figure>
  33.         <p>figure 组合</p>
  34.         <img src="./favicon.ico" width="350" height="234" />
  35.     </figure>
  36.     <!-- 用于对元素进行组合。多用于图片与图片描述组合 -->
  38.     <mark>标记文本</mark>

语义化标签

  1.     <div></div>
  2.     <span></span>
  3.     <header></header>
  4.     <footer></footer>
  5.     <nav></nav>
  6.     <address></address>
  7.     <section>标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。</section>
  8.     <article>标签的内容独立于文档的其余部分</article>
  9.     <aside></aside>

列表标签

  1.     <ul>无序列表
  2.         <li>PHP</li>
  3.         <li>html</li>
  4.         <li>css</li>
  5.         <li>javascript</li>
  6.     </ul>
  7.     <ol>有序列表
  8.         <li>PHP</li>
  9.         <li>html</li>
  10.         <li>css</li>
  11.         <li>javascript</li>
  12.     </ol>
  13.     <li>列表中的项目</li>
  14.     <dl> 自定义列表
  15.         <dt>计算机</dt>
  16.         <dd>用来计算的仪器</dd>
  17.         <dt>显示器</dt>
  18.         <dd>用于显示的装置</dd>
  19.     </dl>

超链接标签

  1.     <a></a>
  2.     <a href="./favicon.ico" target="_self"></a>
  3.     <!-- href="" 需要跳转的页面地址
  4.     target="页面打开方式" 常用值： _self默认，当前窗口打开链接 _blank 在新窗口中打开文档 -->

多媒体标签

  1.     <img />
  2.     <map></map>
  3.     <area />
  4.     <audio></audio>
  5.     <source />
  6.     <video></video>
  7.     <embed/>
  8.     <progress></progress>
  9.     <meter></meter>

表格相关标签

  1.     <table>
  2.         <caption>主题</caption>
  3.         <thead>
  4.             <tr>
  5.                 <th>ID</th>
  6.                 <th>Name</th>
  7.                 <th>Score</th>
  8.             </tr>
  9.         </thead>
  10.         <tfoot>
  11.             <tr>
  12.                 <td></td>
  13.                 <td>SUM</td>
  14.                 <td>100</td>
  15.             </tr>
  16.         </tfoot>
  17.         <tbody>
  18.             <tr>
  19.                 <td>1</td>
  20.                 <td>PHP</td>
  21.                 <td>100</td>
  22.             </tr>
  23.         </tbody>
  24.     </table>

表单

  1.    <form action="" method="post">
  2.         <!-- 必须属性：
  3.         action: 浏览者输入数字被传送到的地方，比如一个PHP页面
  4.         method: 数据传送方式
  5.                 get:此方式传递数据量少，但是传递的信息会显示在网址上。
  6.                 post:此方式传递信息多，而且不会把传递的信息显示在网址上。 -->
  7.         <input />
  8.         <!-- 为用户定义需要使用的表单项 
  9.             name:此表单项的名称
  10.             value:此表单项的值
  11.             type:代表一个输入域的现实方式（输入型，选择型，点击型）
  12.         -->
  13.         <input type="text" name="" value="" />
  14.         <!-- 普通文本域 -->
  15.         <input type="password" name="" value="" />
  16.         <!-- 密码域 -->
  17.         <input type="radio" name="" value="" />
  18.         <!-- 单选 -->
  19.         <input type="checkbox" name="" value="" />
  20.         <!-- 复选框 -->
  21.         <label></label>
  22.         <!-- 为input元素定义标注（绑定元素） -->
  23.         <input type="file" name="" value="" />
  24.         <!-- 文件上传 -->
  25.         <input type="submit" name="" value="" />
  26.         <!-- 提交按钮 -->
  27.         <input type="image" src="" title="" alt="" />
  28.         <!-- 用图片代替提交按钮 -->
  29.         <input type="reset" name="" value="" />
  30.         <!-- 重置按钮 -->
  31.         <input type="hidden" name="" value="" />
  32.         <!-- 隐藏域 -->
  33.         <input type="button" name="" value="" />
  34.         <!-- 按钮 -->
  35.         <button></button>
  36.         <button type="submit"></button>
  37.         <!-- 提交按钮 -->
  38.         <button type="button"></button>
  39.         <!-- 普通按钮 -->
  40.         <textarea></textarea>
  41.         <!-- 多行文本输入域 -->
  42.         <select>
  43.             <!-- 下拉列表 -->
  44.             <optgroup>
  45.                 <!-- 下拉列表分组 -->
  46.                 <option>A</option>
  47.                 <!-- 下拉列表项 -->
  48.                 <option>B</option>
  49.             </optgroup>
  50.             <optgroup>
  51.                 <option>AA</option>
  52.                 <option>BB</option>
  53.             </optgroup>
  54.         </select>
  55.         <fieldset>
  56.             <!-- 将表单内的香港元素分组 -->
  57.             <legend>fieldset</legend>
  58.         </fieldset>
  60.         <datalist>
  61.             <!-- 定义可选数据列表 -->
  62.         </datalist>
  64.         <hr/>
  65.         <!-- 新增类型 -->
  66.         <input type="email" name="" value="" />
  67.         <input type="url" name="" value="" />
  68.         <input type="number" name="" value="" />
  69.         <input type="range" name="" value="" />
  70.         <input type="search" name="" value="" />
  71.         <input type="color" name="" value="" />
  72.         <input type="tel" name="" value="" />
  73.         <input type="date" name="" value="" />
  74.         <input type="time" name="" value="" />
  75.         <input type="week" name="" value="" />
  76.         <input type="month" name="" value="" />
  77.         <input type="datetime-local" name="" value="">
  79.         <!-- 表单常用属性 -->
  80.         <!-- readonly  输入域可以选择，但是无法修改
  81.         disabled  输入域无法获取焦点，无法选择，以灰色显示
  82.         selected  为下拉列表定义默认选中
  83.         autofocus 自动获取焦点属性
  84.         placeholder 表单提示信息
  85.         required    用于强制用户必须为该表单赋值
  86.         min     用于设定表单的最小值
  87.         max     用于设置表单的最大值
  88.         multijple   设定当前表单允许同时选中多个文件，适用于input[type=file]
  89.         pattern 用于自定义验证规则（需要配合正则表达式的语法）
  90.         step    设定跳步的数值或者设定2个数值之间的间隔
  91.         novalidate 取消表单验证，适用于form标签
  92.         formaction 用于在提交按钮中修改当前表单的提交页面
  93.         formmethod  用于在提交按钮中修改当前表单的提交方式
  94.         formenctype 用于提交按钮中修改当前表单提交数据编码类型（不用，文件上传时使用）
  95.         tabindex 切换索引属性 -->
  96.     </form>

HTML 全局属性

  1. contenteditable 内容可编辑属性
  2. designmode 页面可编辑属性

更多相关文章

  1. 2021.11.9 作业
  2. 2021年11月9日作业1
  3. 我的第一个作业
  4. 1109标签练习
  5. 前端基础，HTML5常用标签学习总结
  6. 11月9日 走进HTML的世界
  7. HTML常用标签第一天
  8. 大前端1109笔记
  9. h5标签学习

随机推荐

  1. PHP保留类及特殊类
  2. php header是什么意思
  3. php隐藏后缀(.PHP)的方法过程
  4. PHP 引用详解 - 踩坑与妙用
  5. php如何理解面向对象
  6. PHP 源码 — is_array 函数源码分析
  7. php和前端的区别
  8. 三分钟了解PHP 7.4新特性
  9. PHP 底层原理之类和对象
  10. php时间戳转换