html常用标签合集

最新推荐文章于 2024-08-23 20:21:54 发布

BUGes

最新推荐文章于 2024-08-23 20:21:54 发布

阅读量212

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/gooutworkhard/article/details/104886704

版权

HTML标签大全

html基本格式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>我这里里面写网页标题</title>
    <style type="text/css" media="screen">
    我这里面放样式，但是如果太多的话，都是外部引入文件
</style>
<script >我这里面放js的内容</script>
</head>
<body>
</body>
</html>

html标签

标题标签

<h1>定义最大的标题<h6>定义最小的标题
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

换行标签

<!-- 换行符，属于单标签 -->
<br>

水平线

<!-- 在 HTML 页面中创建一条水平线,属于单标签 -->
<hr>

段落标签

<p>我是段落</p>

文字标签

<!-- 文字标签，功能加粗 -->
<p><b>我加粗了</b></p>
<!-- 文字标签，功能斜体 -->
<p><i>我变成斜体了</i></p>
<!-- 文字标签，功能添加下划线 -->
<p><u>我的下面有条线</u></p>
<p><em>我是强调，我和斜体长得很像</em></p>
<p><strong>我也是强调，我和粗体长得很像</strong></p>
<p><dfn>我是一个项目,我和斜体挺像，但是我的使用很少，常被用于索引和术语表</dfn></p>
<del>已被删除的文本</del>
<p><ins>已被修正的文本，我和下划线长得很像</ins></p>
<p>测试<sub>我是下标</sub></p>
<p>测试<sup>我是上标</sup></p>

超链接，跳转

<a href="https://www.w3school.com.cn/tags/tag_a.asp" title="">点击我跳转页面</a>

块级标签

<header id="header" class="">
通常放在页面顶部
</header><!-- /header -->
<footer>
通常放在页面底部
</footer>

块级元素

<p>盒子，块级元素，大部分的内容都用这个包装一下</p>
<div>
盒子，块级元素
</div>
<p>行内元素</p>
<span>我是行内元素</span><span>我是行内元素</span>

多行输入文本框

<textarea name=" "></textarea>

按钮

<button type=""></button>

图片标签

<img src="" alt="">

输入框

<input type="" name="">

组合标签

定义一个列表

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

定义有序列表

<ol>
  <li>打开冰箱门</li>
  <li>把大象放进去</li>
  <li>关上冰箱门</li>
</ol>

定义无序列表

<ul>
  <li>雪碧</li>
  <li>可乐</li>
  <li>凉茶</li>
</ul>

下拉框

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

下拉框,有点像搜索的

<input list="cars" />
<datalist id="cars">
    <option value="BMW">
    <option value="Ford">
    <option value="Volvo">
</datalist>

下拉框分组

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

表格

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

表单

<form >
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

单选框

<form action="" method="get">
您最喜欢水果？<br/>
<label><input name="Fruit" type="radio" value="" />苹果 </label>
<label><input name="Fruit" type="radio" value="" />桃子 </label>
<label><input name="Fruit" type="radio" value="" />香蕉 </label>
<label><input name="Fruit" type="radio" value="" />梨 </label>
<label><input name="Fruit" type="radio" value="" />其它 </label>
</form>

复选框

<form action="" method="get">
您喜欢的水果？<br /><br />
<label><input name="Fruit" type="checkbox" value="" />苹果 </label>
<label><input name="Fruit" type="checkbox" value="" />桃子 </label>
<label><input name="Fruit" type="checkbox" value="" />香蕉 </label>
<label><input name="Fruit" type="checkbox" value="" />梨 </label>
</form>