search

博客列表 >html小结

html小结

培(信仰)
培(信仰)原创
2021年11月10日 19:30:59694浏览

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 页面可编辑属性
上一条：ES6基本语法，Axios异步网络请求介绍下一条：1109标签练习
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多