微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程
游戏教程 自媒体 新闻
首页 > 博客列表 > html小结
博主信息
博文 32
粉丝 0
评论 0
访问量 29753
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
html小结
培(信仰)
原创
1282人浏览过

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 页面可编辑属性
批改老师：PHPzPHPz

批改状态：合格

老师批语：用心了，如果能在标签内加入具体的内容就更加完美了
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录