2021-06-12

最新推荐文章于 2024-07-12 20:49:16 发布

杨691

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量151

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/kissing_yang/article/details/117848820

版权

html标签

按个数分可分为双标签和单标

1.双标签如

<html></html>//定义HTML文档
<div></div>//无语意标签
<p></p>//段落标签
<h1></h1>//标题标签

2.单标签

<br>//插入换行符
<hr>//在HTML中插入一条水平线

按类别分

1.块级标签

独占一行会自带还行

<div></div>//无语意

2.行内标签

从左到右不会自动换行

<i></i>//文本倾斜
<em></em>强调文本

3.行内块标签

   <span></span>//行内块无语意

常用标签分类

1书写时常用的标签

<h1></h1>//标题标签
<h2></h2>//标题标签
<h3></h3>//标题标签
<h4></h4>//标题标签
<h5></h5>//标题标签
<h6></h6>//标题标签
<title></title>//定义文档的标题
<p></p>//定义段落
<hr/>//水平线
<br/>//换行符
<bdo dir="rtl"></bdo>//标签可以改变文本流的方向，包含一个属性：dir，取值包括 ltr（从左到右）和 rtl（从右到左）<bdo dir="rtl">床前明月光</bdo>
<acronym></acronym>//标签定义首字母缩写 （h5不支持）
<abbr></abbr>//缩写   （<abbr titile="Hyper Markup Language">HTML</abbr>）
<big></big>//大字体 h5不支持
<small></small>//小字体文本
<strong></strong>//强调文本  文本粗体显示
<em></em>//文本以斜体显示     （XHTML推荐使用）
<i></i>//文本斜体显示
<u></u>//文本以加下划线方式显示
<ins></ins>//文本以加下划线方式显示 （XHTML推荐使用）
<b></b>//定义粗体文本
<s></s>//定义文本以加删除线方式显示   
<del></del>//定义文本以加删除线方式显示 （XHTML推荐使用）
<sup></sup>//定义上标文本
<sub></sub>//定义下标文本
<time></time>//定义日期/时间
<q></q>//标签定义短的引用，浏览器经常在引用的内容周围添加引号
<blockquote></blockquote>//定义块引用，其包含的文本都会从常规文本中分离出来，左右两侧会缩进显示，有时显示为斜体
<code></code>//表示代码字体，显示源代码
<pre></pre>//表示预定义格式的源代码，保留源代码显示中的空格大小
<tt></tt>//标签呈现类似打字机或者等宽的文本效果
<kbd></kbd>// 标签定义键盘文本 标签经常用在于计算机相关的文档和手册中
<dfn></dfn>//标签可标记那些对特殊术语或短语的定义
<var></var>//定义变量 可以将此标签与 <pre> 及 <code> 标签配合使用
<samp></samp>//标签表示一段用户应该对其没有什么其他解释的文本字符,要从正常的上下文抽取这些字符时，通常要用到这个标签 <samp>ae</samp>可能会被转换为 &aelig; 连字字符;字符序列 ae 可能会被转换为 æ 连字字符。
<dir></dir>//<dir> 标签定义目录列表。(不赞成使用)
 <mark>milk</mark>//<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。
<nav>
<a href="index.asp">Home</a>
<a href="html5_meter.asp">Previous</a>
<a href="html5_noscript.asp">Next</a>
</nav>//<nav> 标签定义导航链接的部分

<pre> 文本</pre>//pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体
<progress value="22" max="100"></progress> //<progress> 标签标示任务的进度（进程）。
<style></style>// 标签用于为 HTML 文档定义样式信息

<p>
如果想学习 AJAX，那么您必须熟悉 XML<wbr>Http<wbr>//Word Break Opportunity (<wbr>) 规定在文本中的何处适合添加换行符//

Request 对象。
</p>

<html>
          </head>... ...
          </head>//标签用于定义文档的头部，它是所有头部元素的容器
          <body>
            <header> ......
            </header>//<header> 标签定义文档的页眉（介绍信息）。
             ... ...
            footer>
              ......
            </footer>//文档中的页脚部分
          </body>//文档主体
</html>

2.容器无语意标签

<div></div>//无语意
<span></span>//无语意

3.列表标签

1.有序列表标签：

<ol>

  <li>Coffee</li>//<li>定义列表项
  <li>Tea</li>
  <li>Milk</li>
</ol>

2.无序列表标签：

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

3自定义列表标签：

<dl>
   <dt>计算机</dt>//<dt> 标签定义了定义列表中的项目（即术语部分）。
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>// 在定义列表中定义条目的定义部分
</dl>

4. form表单标签

<form>
  <fieldset>//fieldset 元素可将表单内的相关元素分组;标签将表单内容的一部分打包，生成一组相关表单的字段
    <legend>health information</legend>//<legend> 标签为 fieldset 元素定义标题 分组名：health information
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>

5.table表格标签


<table border="1">//一个简单的 HTML 表格，包含两行两列

<caption>表格标题</caption>//caption 元素定义表格标题；caption 标签必须紧随 table 标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上
  <thead>

  <tr>//列
    <th>Month</th>//表头
    <th>Savings</th>
    <th>Savings</th>
  </tr>
 </thead>//thead 元素用于对 HTML 表格中的表头内容进行分组

 <tfoot>
  <tr>
    <td>January</td>
    <td>$100</td>
     <th>Savings</th>
  </tr>
 </tfoot>//tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组
 <tbody>
<tr>
    <td>January</td>// 标签定义 HTML 表格中的标准单元格
    <td>$100</td>
    
  </tr>
 </tbody>//<tbody> 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容

</table>

5.有链接作用的标签

1.超链接标签

<a href="pref.html" target="view_window">Preface</a>//超链接标签
<base href="http://www.w3school.com.cn/i/" /><base target="_blank" />// 标签为页面上的所有链接规定默认地址或默认目标。

2.音视频标签

 <audio >
 
    <source src="deng.ogg" type="audio/ogg"> <!-- source定义媒体资源 -->
    <source src="deng.mp3" type="audio/mpeg">

    <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
    <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">//<track>标签为诸如 video 元素之类的媒介规定外部文本轨道。(所有浏览器不支持)
</audio>//标签：定义声音，如音乐或音频流等,支持常用的三种格式，分别是：MP3、Wav、Ogg
<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>// 标签定义视频，比如电影片段或其他视频流

3.<img>标签

<img src="/i/eg_tulip.jpg"  alt=" 郁金香" />//img 元素向网页中嵌入一幅图像

4.link标签标签定义文档与外部资源的关系；标签最常见的用途是链接样式表。

<link rel="stylesheet" type="text/css" href="theme.css" />

5.script标签定义外部脚本文件中所使用的字符编码

<script type="text/javascript" src="myscripts.js" charset="UTF-8></script>

6.按钮 ;输入框；下拉选项；多选项标签标签

<button></button>//按钮
<input type="">//输入框
<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>//下面是一个 input 元素，datalist 中描述了其可能的值

<textarea name="textarea"  cols="15" rows="15">默认数据</textarea>//用于输入多行文本的输入框与input不同的是，他是一个双标签 标签内容为默认值
<select>
  <optgroup label="Swedish Cars">//分组名
     <option value ="volvo">Volvo</option>
     <option value ="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
     <option value="opel">Opel</option>
     <option value="audi">Audi</option>
  </optgroup>//通过 <optgroup> 标签把相关的选项组合在一起
</select>//创建带有 4 个选项的选择列表

其它不常用标签

<meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。


<embed src="helloworld.swf" />//<embed> 标签定义嵌入的内容，比如插件
<iframe> 标签 iframe 元素会创建包含另外一个文档的内联框架（即行内框架)

<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />
</frameset>//简单的三框架页面


<embed src="helloworld.swf" />// 标签定义嵌入的内容，比如插件
  <figure>
          <figcaption>图片标题</figcaption>//图片标题
          <img src="../少数派.png" width="350" height="234" />
 </figure>//用作文档中插图的图像，带有一个标题
<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>//Example.com 的联系信息
<applet code="Bubbles.class" width="350" height="350">
Java applet that draws animated bubbles.
</applet>//一个嵌入的 Java applet
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>//带有可点击区域的图像映射
<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>
</article>//<article> 标签规定独立的自包含内容
<aside>
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside>//<aside> 标签定义其所处内容之外的内容,aside 的内容应该与附近的内容相关

<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />//<keygen> 标签规定用于表单的密钥对生成器字段
<input type="submit" />
</form>

<form>
  <label for="male">Male</label>//<label> 标签为 input 元素定义标注（标记)
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

<main>
  <h1>Web Browsers</h1>
  <p>Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。</p>

  <article>
    <h1>Google Chrome</h1>
    <p>Google Chrome 是由 Google 开发的一款免费的开源 web 浏览器，于 2008 年发布。</p>
  </article>

  <article>
    <h1>Internet Explorer</h1>
    <p>Internet Explorer 由微软开发的一款免费的 web 浏览器，发布于 1995 年。</p>
  </article>

  <article>
    <h1>Mozilla Firefox</h1>
    <p>Firefox 是一款来自 Mozilla 的免费开源 web 浏览器，发布于 2004 年。</p>
  </article>//<main> 标签规定文档的主要内容。
 <menu type="toolbar">
 <li>
 <menu label="File">
 <button type="button" onclick="file_new()">New...</button>
 <button type="button" onclick="file_open()">Open...</button>
 <button type="button" onclick="file_save()">Save</button>
 </menu>
 </li>
 <li>
 <menu label="Edit">
 <button type="button" onclick="edit_cut()">Cut</button>
 <button type="button" onclick="edit_copy()">Copy</button>
 <button type="button" onclick="edit_paste()">Paste</button>
 </menu>
 </li>
</menu>//带有两个菜单按钮 （"File" 和 "Edit"） 的工具栏，每个按钮都包含带有一系列选项的下拉列表

<meter value="3" min="0" max="10">十分之三</meter>
<meter value="0.6">60%</meter> //<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。

<frameset cols = "25%, 25%,*">
  <noframes>
  <body>Your browser does not handle frames!</body>
  </noframes>
  <frame src ="venus.htm" />
  <frame src   ="sun.htm" />
  <frame src ="mercur.htm"   />
</frameset>//noframes 元素可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。

<body>
  ...
  ...

  <script type="text/javascript">
    <!--
    document.write("Hello World!")
    //-->
  </script>
  
  <noscript>Your browser does not support JavaScript!</noscript>//noscript 元素用来定义在脚本未被执行时的替代内容（文本）。
  ...
  ...
</body>
 
<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1" 
width="100" height="50">
  <param name="BorderStyle" value="1" />
  <param name="MousePointer" value="0" />
  <param name="Enabled" value="1" />
  <param name="Min" value="0" />
  <param name="Max" value="10" />
</object>//向 HTML 代码添加一个对象

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
   <input type="range" id="a" value="50">100
   +<input type="number" id="b" value="50">
   =<output name="x" for="a b"></output>//<output> 标签定义不同类型的输出，比如脚本的输出;执行计算然后在 <output> 元素中显示结果
</form> 
<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>//<rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容  <rt> 标签定义字符（中文注音或字符）的解释或发音
</ruby>//<ruby> 标签定义 ruby 注释（中文注音或字符）。

杨691

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-06-12

html标签分类按个数分可分为双标签和单标1.双标签如<html></html>//定义HTML文档<div></div>//无语意标签<p></p>//段落标签<h1></h1>//标题标签2.单标签<br>//插入换行符<hr>//在HTML中插入一条水平线按类别分1.块级标签独占一行会自带还行<div></di
复制链接

扫一扫