HTML基础标签

最新推荐文章于 2024-07-16 15:26:34 发布

三浮

最新推荐文章于 2024-07-16 15:26:34 发布

阅读量686

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_47604225/article/details/108134621

版权

html5基础标签

1.HTML标题

HTML标题是通过 h1-h6标签来定义的。

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

2.HTML段落

HTML 段落是通过标签 p 来定义的。

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

3.HTML 链接

HTML 链接是通过标签 a 来定义的。

<a href="https://www.runoob.com">这是一个链接</a>

4.HTML 图像

HTML 图像是通过标签 img来定义的。

<img src="/images/logo.png" width="258" height="39" />

5.定义注释

HTML 注释标签

<!--这是一个注释，注释在浏览器中不会显示-->
 
<p>这是一个段落</p>

6.HTML <!DOCTYPE> 声明

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>文档标题</title>
</head>
 
<body>
文档内容......
</body>
 
</html>

7.HTML abbr标签

The<abbr title="World Health Organization">WHO</abbr> was founded in 1948.

8.HTML address 标签

<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

9.HTML area 标签

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
 
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

10.HTML article 标签

<article>
  <h1>Internet Explorer 9</h1>
  <p> Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>
</article>

11.HTML aside 标签

<p>My family and I visited The Epcot center this summer.</p>
 
<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

12.HTML audio 标签

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

13.HTML b 标签

<p>这是一个普通的文本- <b>这是一个加粗文本</b>。</p>

14.HTML base 标签

<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
 
<body>
<img src="logo.png" width="24" height="39" alt="Stickman">
<a href="http://www.runoob.com">runoob.com</a>
</body>

15.HTML basefont 标签 - HTML5 不支持

<head>
<basefont color="red" size="5" />
</head>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

16.HTML bdi 标签

<ul>
 <li>用户 <bdi>hrefs</bdi>: 60 分</li>
 <li>用户 <bdi>jdoe</bdi>: 80 分</li>
 <li>用户 <bdi>إيان</bdi>: 90 分</li>
</ul>

17.HTML bdo 标签

<p>该段落文字从左到右显示。</p>  
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>

18.HTML blockquote 标签

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>

19.HTML body 标签

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
 
<body>
文档内容......
</body>
 
</html>

20.HTML br

<p> 
使用 br 元素<br>在文本中<br>换行。 
</p>

21.HTML button 标签

<button type="button">点我!</button>

22.HTML canvas 标签

<canvas id="myCanvas"></canvas>
 
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

23.HTML caption 标签

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

24.HTML cite 标签

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

25.HTML code 标签

<code>一段电脑代码</code>

26.HTML col 标签

<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

27.HTML colgroup 标签

<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

28.HTML command 标签

<menu>
<command type="command" label="Save" onclick="save()">Save</command>
</menu>

29.HTML datalist 标签

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

30.HTML dd 标签

<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

31.HTML del 标签

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

32.HTML details 标签

<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

33.HTML dfn 标签

<dfn>定义项目</dfn>

34.HTML dialog 标签

<table border="1">
<tr>
  <th>January <dialog open>This is an open dialog window</dialog></th>
  <th>February</th>
  <th>March</th>
</tr>
<tr>
  <td>31</td>
  <td>28</td>
  <td>31</td>
</tr>
</table>

35.HTML div 标签

<div style="color:#0000FF">
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>

36.HTML dl 标签

<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

37.HTML dt 标签

<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

38.HTML em 标签

<em>强调文本</em>

39.HTML embed 标签

<embed type="image/jpg" src="https://static.runoob.com/images/runoob-logo.png" width="258" height="39">

40.HTML fieldset 标签

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form>

41.HTML figcaption 标签

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>

42.HTML figure 标签

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>

43.HTML font 标签 - HTML5 不支持

<font size="3" color="red">这是一些文本!</font>
<font size="2" color="blue">这是一些文本!</font>
<font face="verdana" color="green">这是一些文本!</font>

44.HTML footer 标签

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p><time pubdate datetime="2012-03-01"></time></p>
</footer>

45.HTML form 标签

<form action="demo_form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
</form>

46.HTML head 标签

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
 
<body>
文档内容......
</body>
 
</html>

47.HTML header 标签

<article>
    <header>
        <h1>Internet Explorer 9</h1>
        <p><time pubdate datetime="2011-03-15"></time></p>
    </header>
    <p> Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的</p>
</article>

48.HTML hgroup 标签

<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>

<p>The rest of the content...</p>

49.HTML hr 标签

<h1>HTML</h1>
<p>HTML 是用于描述 web 页面的一种语言。</p>

<hr>

<h1>CSS</h1>
<p>CSS 定义如何显示 HTML 元素。</p>

50.HTML i标签

<p>He named his car <i>The lightning</i>, because it was very fast.</p>

51.HTML iframe 标签

<iframe src="http://www.runoob.com"></iframe>

52.HTML img 标签

<img src="smiley-2.gif" alt="Smiley face" width="42" height="42">

53.HTML input 标签

<form action="demo_form.asp">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
</form>

54.HTML ins 标签

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

55.HTML label 标签

<form action="demo_form.php">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br><br>
  <input type="submit" value="提交">
</form>

56.HTML legend 标签

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text" size="30"><br>
    Email: <input type="text" size="30"><br>
    Date of birth: <input type="text" size="10">
  </fieldset>
</form>

57.HTML li 标签

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

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

58.HTML link 标签

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

59.HTML5 mark 标签

<p>Do not forget to buy <mark>milk</mark> today.</p>

60.HTML meter 标签

<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>

61.HTML nav标签

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

62.HTML ol 标签

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
 
<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

三浮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础标签

html5基础1.HTML标题HTML标题是通过-标签来定义的。<h1>这是一个标题</h1><h2>这是一个标题</h2><h3>这是一个标题</h3>2.HTML段落HTML 段落是通过标签来定义的。<p>这是一个段落。</p><p>这是另外一个段落。</p>3.HTML 链接HTML 链接是通过标签来定义的。<a href="https://ww
复制链接

扫一扫