search

博客列表 >head与body中常用标签

head与body中常用标签

Tyrrell
Tyrrell原创
2022年05月05日 13:42:03815浏览

一、head标签中常用的标签

  1.  <title></title>：设置页面字符串(页面标题)

1. meta 标签

meta 标签

    1. <meta charset="utf-8" />：设置页面字符集(文字解析格式)
    1. <meta http-equiv="refresh" content="5";url="https://www.lmonkey.com" />：设置5秒后自动跳转到目标网址
    2. refresh:刷新
    3. content="5：五秒后
    4. url:跳转到新的网址
    5. 此代码的意思是：网页在五秒后自动刷新并转跳到新的页面
    1. <meta http-equiv="refresh" content="5" />：设置浏览器每5秒自动刷新一次
    2. refresh:刷新
    3. content="5：五秒后

meta标签中的name:属性

    1. <meta name="keywords" content="关键字1,关键字2" />：用于设置网站关键字，用户浏览器搜索时会抓取关键字，多个关键字之间用,分隔
    2. keywords:关键字
    3. content：关键字内容
    1. <meta name="description" content="描述的内容" />用于设置网址的描述
    2. description：描述
    3. content：描述内容

2. link 标签

link：定义两个文档之间的连接关系

    1. rel="表示文档与被连接文档之间的关系"
    2. type="被连接文档的类型"
    3. href="被连接文档的地址"
    1. <link rel="icon" type="" href="" />：加载网页标题栏icon图标
    1. <link rel="stylesheet" type="text/css" href="" />：加载css外部样式
    1. <style></style>：加载css内部样式
    1. <script></script>：加载js脚本

二、body标签中的常用标签

1. 文本与文本格式标签

  1. <p></p>：段落文本标签
  1. <b></b>：文本加粗
  1. <strong></strong>：文本强调(加粗)
  1. <i></i>：文本斜体
  1. <em></em>：文本强调(加斜)
  1. <br></br>：换行
  1. <hr></hr>：水平线
  1. <u></u>：下划线标签
  1. <del></del>：删除线标签
  1. <h1>-<h6>：标题标签
  1. <bdo></bdo>：覆盖文本方向
  2. <bdo dir="ltr">ltr：默认文本方向</bdo>
  3. <bdo dir="rtl">trl：颠倒文本方向</bdo>
  1. <sup></sup>：文本上标
  1. <sub></sub>：文本下标
  1. <details></details>：交互式控件、可见的或者隐藏的补充细节
  1. <summary></summary>：给details定义标题
  1. <dialog></dialog>：定义对话框或窗口
  1. <pre></pre>：原格式输出
  1. <figure></figure>：用于对元素进行组合，多用于图片与图片描述组合
  2. <figure>
  3.     <img src="img.gif" alt="figure标签" title="figure标签" />
  4.     <figcaption>figure的标题</figcaption>
  5. </figure>
  1. <mark></mark>：标记文本,定义带有记号的文本，给要突出的文本加上背景色
  2. <p>给要突出的文本加上<mark>背景色</mark></p>

2. 语义化标签

  1. <div></div>:区块，盒模型，块状元素
  1. <span></span>：用于给文本内容设置锚点，行内元素
  1. <header></header>：代表一个页面的头部
  1. <aside></aside>：代表一个页面的侧边栏
  1. <footer></footer>：代表一个页面的底部
  1. <nav></nav>：导航栏标签
  1. <address></address>：地址标签
  1. <section></section>：在html5中代替了div,代表一个区块
  1. <article></article>：代表一篇文章，一篇文章时可使用

3. 列表标签

  1. <ul></ul>：无序列表
  2. <li></li>：列表项
  1. <ol></ol>：有序列表
  2. <li></li>：列表项
  1. <dl></dl>：自定义列表
  2. <dt></dt>：自定义列表项
  3. <dd></dd>：给自定义列表项添加描述内容

4. 超链接标签

  1. <a href="需要跳转的网址" taiget="页面打开方式"></a>：超链接标签
  2. taiget常用值：
  3. _self：默认，在当前窗口打开链接地址
  4. _blank：在新窗口打开链接地址
  1. 网址内容解析：
  2. https://www.so.com:80/s?ie=utf-8&fr=none&src=360sou_newhome&nlpv=basezc&q=%E7%BE%8E%E5%A5%B3
  3. https://  带有安全加密的协议
  4. www.so.com  域名 网站的名字，绑定的是网站的ip
  5. :80 端口 门牌号
  6. /s：s为文件简写
  7. ?：问号以后的内容就是访问该页面所需要的参数
  8. ie：utf-8    
  9. & ：表示继续传入参数
  1. 绝对路径：从根目录开始查找
  2. 相对路径：相对于自己的位置来查找
  3. 对于相对路径而言：
  4. ../ 代表上一级目录
  5. ./ 代表当前目录

5. 多媒体标签

  1. <img />:图片标签
  2. <img src="图片地址" alt="替换文字" title="图片标题"/>
  3. src=""：图片地址
  4. alt=""：当图片加载失败时，用于显示替换的文字
  5. title=""：鼠标悬停图片时会显示里面的文本内容
  1. <map>：定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。
  2.     <area />：带有可点击区域的图像映射
  3. </map>
  1. <audio src="音频地址">替换文字</audio>：音频播放标签
  2. 常用属性：
  3. autoplay="autoplay"：如果出现该属性，则音频在就绪后马上播放。
  4. controls="controls"：如果出现该属性，则向用户显示控件，比如播放按钮。
  5. loop="loop"：如果出现该属性，则每当音频结束时重新开始播放(循环播放)
  6. muted="muted"：规定视频输出应该被静音。
  7. preload="preload"：如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
  8. sec="音频地址"：要播放的音频的 URL。
  10. 注：当属性名与属性值一样时，光写属性本身即可
  1. <source />:规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择
  2. <audio/video controls>
  3.     <source src="视频/音频地址" type="audio/文件格式">
  4.     <source src="视频/音频    地址" type="audio/文件格式">
  5.     如以上两种类型浏览器均不支持，则显示预先替换文字:
  6.     您的浏览器不支持音频元素 
  7. </audio/video>
  1. <video src="视频地址">替换文字</video>：视频播放标签
  2. 常用属性：
  3. autoplay="autoplay"：如果出现该属性，则视频在就绪后马上播放。
  4. controls="controls"：如果出现该属性，则向用户显示控件，比如播放按钮。
  5. height="高度值":设置视频播放器的高度。
  6. width="宽度值"：设置视频播放器的宽度。
  7. loop="loop"：如果出现该属性，则当媒介文件完成播放后再次开始播放(循环播放)
  8. muted="muted":规定视频的音频输出应该被静音。
  9. poster="图片地址"：规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像(视频封面)
  10. preload="preload"：如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
  11. src="视频地址"：要播放的视频的 URL。
  13. 注：当属性名与属性值一样时，光写属性本身即可
  1. <embed />：多媒体标签，可以播放视频/音频或者flash动画
  1. <progress min="进度条最小值" max="进度条最大值" value="进度条当前值"></progress>：进度条标签
  1. <meter></meter>：度量给定范围内的数据,常用于提示密码强度
  2. 常用属性：
  3. max=""：规定范围的最大值
  4. min=""：规定范围的最小值
  5. high=""：规定范围的最高值
  6. low=""：规定范围的最低值
  7. optimum=""：规定范围的最优值
  8. value=""：当前值(必须)
  10. 注：当"最优值"高于"最高值"时，进度条会显示绿色:
  11. <meter min="0" max="100" low="30" high="80" optimum="100" value="81"></meter>
  12. 当"当前值"低于"最低值时"，进度条会显示红色:
  13. <meter min="0" max="100" low="30" high="80" optimum="100" value="29"></meter>
  14. 当"当前值"在"最高值"与"最低值"之间时，进度条会显示黄色:
  15. <meter min="0" max="100" low="30" high="80" optimum="100" value="50"></meter>

6. 表格相关标签及属性

  1. <table></table>：表格
  2. <table>表格常用标签：
  3. width=""：表格宽度
  4. height=""：表格高度
  5. align="left(左对齐)/center(居中)/right(右对齐)"：表格在页面水平摆放位置
  6. background=""：表格的背景图片
  7. bgcolor=""：表格的背景颜色
  8. border=""表格边框的宽度(默认无边框)
  9. bordercolor=""：表格边框颜色
  10. cellspacing=""：单元格之间的间距
  11. cellpadding=""：单元格内容与单元格边界之间的空白距离大小
  1. <caption></caption>：表格标题
  1. <tr></tr>：行标签
  2. <tr>行常用标签：
  3. height=""：行高
  4. align="left(左对齐)/center(居中)/right(右对齐)"：行内容的水平对齐方式
  5. valign="top(顶部对齐)/middle(默认)/bottom(底部对齐)"：行内容的垂直对齐方式
  6. bgcolor=""：行的背景颜色
  1. <th></th>：表头单元格（加粗单元格里的内容)
  1. <td></td>：单元格(列标签)
  2. <td>单元格常用标签：
  3. width=""：单元格宽度
  4. height=""：单元格高度
  5. align="left(左对齐)/center(居中)/right(右对齐)":设置水平对齐方式
  6. valign="top(顶部对齐)/middle(默认)/bottom(底部对齐)"：设置垂直对其方式
  7. bgcolor=""：单元格的背景颜色
  8. colspan=""：设置单元格跨列
  9. rowspan=""：设置单元格跨行
  1. <thead></thead>:表格头部标签，可以用来包含表格的 头部内容 ，方便区分表格内容
  1. <tbody></tbody>：表格主体标签，可以用来包含表格的 主体内容，方便区分表格内容
  1. <tfoot></tfoot>：表格底部标签，可以用来包含表格的 底部内容，方便区分表格内容

7. 表单相关标签

  1. <form action="" method=""></form>：用于为用户输入创建HTML表单
  2. 必须属性：
  3. action=""：浏览者输入数据被传送到的地方，比如一个PHP页面
  4. method=""：数据被传送的方式
  5.         get：此方式传递数据量少，但是传递的信息会显示在网址上(常用语搜索类)
  6.         post：此方式传递数据量多，且不会把传递的信息显示在网址上(常用于用户输入信息)
  1. <input type="" name="" value="" />：为用户定义需要使用的表单项.
  2.     type=""：代表一个输入域的显示方式(输入型、选择型、点击型)
  3.     name=""：此表单项的名称(上传至服务器的名字)
  4.     value=""：此表单项的值(文本框内默认显示的文本)
  1. <input type="text" name="" value="" />：普通文本域
  1. <input type="password" name="" vlaue="" />：密码域
  1. <input type="radio" name="" value="" />：单选框
  2. 注：
  3. 在有多个单选框的情况下 name属性中的值必须一样才会出现排他效果
  1. <input type="checkbox" name="" value="" />：复选框
  2. 注：
  3. 在有多个复选框的情况下 name属性中的值后面都要加上[]
  1. <label></label>：为input元素定义标注(用于绑定元素)
  2. <label>的两种用法
  3. 用法一：
  4. <label>
  5.     <input type="radio" name="sex" value="man" />男
  6.     </label>
  7.     label 包含input从而起到元素绑定作用
  8. 用法二：
  9. <input type="radio" name="sex" value="man" id="man"/>
  10. <label for="man">男</label>
  11.     label中的for属性的值 要和input中id属性的值对应才能起到元素绑定作用
  1. <input type="file" name="" value="" />：文件上传
  2. 注：
  3. 在表单中，只要有"file"属性的时候，form中的method的值必须为post，且必须指定表单的传输编码格式：enctype="multipart/form-data"，否则服务器是接收不到上传数据的
  4. 例：
  5. <form action="" method="post" enctype="multipart/form-data">
  6.       <input type="file" name="" value="" />
  7. </form>
  8. 加上编码格式的原因是为了让表单以编码的形式进行传输
  1. <input type="submit" name="" value="提交" />：提交按钮
  1. <input type="image" src="图片地址" title="图片标题" alt="图片替换文字" />：用图片代替提交按钮
  1. <input type="reset" name="" value="" />：重置按钮
  1. <input type="hidden" name="" value="" />：隐藏域
  2. 注：
  3. 隐藏域只有在显示源码中可以看到
  1. <input type="button" name="" value="" />：按钮(用于javascript)
  1. <button type="button">按钮</button>：按钮(用于javascript)
  1. <button type="submit">提交按钮</button>：提交按钮
  1. <botton>提交按钮</botton>：提交按钮(简化版)
  2. 简化版，等于=<botton type="submit">提交按钮</botton>
  1. <textarea name="" id="" cols="默认展示列数" rows="默认展示行数"></textarea>：多行文本输入域
  1. <select name="" id="">：下拉列表
  2.     <option value="">下拉列表项1</option>：下拉列表项
  3.     <option value="" checked>下拉列表项2</option>：下拉列表项
  4.     <option value="">下拉列表项3</option>：下拉列表项
  5. </select>：下拉列表
  1. <fieldset></fieldset>：将表单内的相关元素分组
  1. <legend></legend>：为fieldset定义标题
  1. <optgroup></optgroup>：为下拉列表定义分组
  1. <datalist></datalist>：定义可选数据列表

7.1 新增表单控件

  1. <input type="email" name="" value="" />：邮箱输入框,会自带email验证
  1. <input type="url" name="" value="" />：网址输入框,会自带url验证
  1. <input type="number" name="" value="" />：number输入框，会自带number验证
  1. <input type="range" name="" value="" />：滑块验证
  1. <input type="search" name="" value="" />：搜索
  1. <input type="color" name="" value="" />：颜色
  1. <input type="tel" name="" value="" />：电话输入框(没啥区别，就是个普通文本域)
  1. <input type="date" name="" value="" />：日期选择器
  1. <input type="time" name="" value="" />：时间选择器
  1. <input type="week" name="" value="" />：周选择器
  1. <input type="month" name="" value="" />：月选择器
  1. <input type="datetime-local" name="" value="" />：完整的日期时间+时间选择器

7.2 表单中常用的属性

  1. readonly：输入域可以选择，但是无法修改。
  2. disabled：输入域无法获取焦点，无法选择，以灰色显示
  3. checked：单选/复选默认选中
  4. selected：为下拉列表定义默认选中
  5. autofocus：自动获取焦点属性
  6. placeholder=""：表单提示信息
  7. required：用于强制用户必须为该表单赋值，否则提示信息
  8. min：用于设定表单的最小值 
  9. max：用于设定表单的最大值
  10. multiple：设定当前表单允许同时选中多个文件，适用于input[type=file]
  11. pattern：用于自定义验证规则(需要配合正则的语法)
  12. step：设定跳步的数值或者设定2个数值之间的间隔
  13. novalidate：取消表单验证，需要放入form标签中
  14. formaction：用于在提交按钮中修改当前表单的提交页面
  15. formmethod：用于在提交按钮中修改当前表单的提交方式
  16. formenctype：用于在提交按钮中修改当前表单提交数据编码类型(不用，文件上传时适用)
  17. tabindex：切换tab索引属性的顺序

HTML全局属性

  1. contentEditable：内容可编辑属性
  2. designMode：页面可编辑属性

HTML框架标签

  1. <frameset></frameset>代替body标签定义框架页(H5取消)
  2. <frame />定义frameset标签中每个框架页的内容(H5取消)
  1. <iframe></iframe>：用于在页面中开辟一块空间来连接一个子页面
上一条：实例演示：盒模型常用属性、媒体查询以及em,rem用法下一条：PHP实现用户登录、注册、退出
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多