Community Learn Tools Library Leisure
search
English
Home > List of blog posts > head与body中常用标签
Blogger Information
Blog 10
fans 0
comment 0
visits 9508
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
head与body中常用标签
Tyrrell
Original
814 people have browsed it

一、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>：用于在页面中开辟一块空间来连接一个子页面
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post