HTML重要基础标签及用法总结（1）

最新推荐文章于 2022-03-14 18:33:43 发布

命z

最新推荐文章于 2022-03-14 18:33:43 发布

阅读量349

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_41668547/article/details/80330146

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

标题:

  <h1>  这是h1  </h1>

        .....         

  <h6>  这是h6  </h6>

段落：
```
<p>  这是一个段落 </p>
```

链接：

<a  href="(链接地址)">  （显示的文本）  </a>

图像：

 <img src="（图像地址）"  width="（宽）" height="（高）">

换行：<br>
创建水平线：<hr>或者<hr/>

文本加粗：

<b>（需要加粗的文本）</b>（可由<string>代替）

文本斜体：
```
<i>.....</i>（可由<em>代替）
```
电脑输入：
```
<code>.....</code>
```

上下标：

<sub>（上）</sub>    <sup>（下）</sup>

对空格和回车的控制：
```
<pre>.....</pre>
```
键盘输入：
```
<kbd>....</kbd>
```
打字机文本：
```
<tt>....</tt>
```
计算机代码样本：
```
<samp>..</samp>
```
计算机变量：
```
<var>...</var>
```

缩写：

<abbr title="（原名）">（缩写名）</abbr>

首字母缩写：

<acronym title="（原名）">（缩写名）</acronym>

输出文本方向：

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

引用：
```
<q>....</q>
```

删除文本：

<del>...</del>插入文本：<ins>...</ins>

以新窗口打开：

<a href="（链接地址）" target="_blank">（链接文本）</a>

给文本定义一个id：

<a id="（变量名）">（有用的提示部分）</a>

访问id：

<a href=“#（id地址）”>（有用的提示部分的链接）</a>

创建图片的链接：

<a href="（图片中需要隐藏的链接）"<img  border="（图片边框大小）"src="（图片地址）" alt="（图片的文本模式 ）" width="（图片的宽度）"height="（图片的长度）"></a>

跳出框架（覆盖当前网页）：

<a href="（链接地址）" target="_top">（链接文本）</a>

发送邮件：

<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">

定义默认的链接和属性：

<base href="（链接地址）" target="_blank">

描述HTML文档的相关信息：

<meta name="description" content="免费在线教程">

30秒刷新一次：

<meta http-equiv="refresh" content="30">

链接到一个外部样式表：

<link  rel ="stylesheet（rel的属性指示被链接的文档是一个样式表）" type="text/css" href="mystyle.css"

用于加载脚本：
```
<script>....</script>
```
HTML的样式信息：

         <style type="text/css">

                h1{color:red}.....

         </style>

33. 没有下划线的链接：

<a href="（链接地址）" style="text-decoration:none">   （链接文本）  </a>

34. CSS可以通过以下方式添加到HTML中：

     1、内联样式：在HTML中使用style属性

     2、内部样式表：在<head>中使用style元素来包含CSS

     3、外部应用：使用外部CSS文件

35. 定义图像地图：

<map>....</map>

36. 定义图像地图中可点击区域：

<area shape="（形状）" coords="（形状的属相，要查相关资料）">

37. 创建表格：

<table border="1">  有无边框
<tr>（第一行的内容）
<td>...</td> 
<td>...</td> 

</tr>
<tr>（第二行的内容）
<td>...</td> 
<td>...</td> 
</tr>

38. 表头：

<tr>（表头内容）
<th>...</th> 
<th>...</th> 
</tr>

39. 表的标题：

<caption>（标题）</caption>

40. 横跨两格的标题：

<th colspan="2">（标题）</th>

41. 纵跨两列的标题：

<th rowspan="2">（标题）</th>

42. 无序列表：

 <ul> .... <li>（列表项）</li>.....</ul>

43. 有序列表：

  <ol start="（序号）">           或     <ol type="A">

      <li>（列表项）</li>                      <li>（列表项）</li>

  </ol>                                 </ol>

44. 自定义列表：

 <dl>

      <dt>（列表项）</dt>

            <dd>（列表项的定义）</dd>

 </dl>

45. 用于分割区块或一个区域部分：

<div>....</div>

46. 行内元素的组合：<span>

    <p>我有一颗<span style="color:bule;font-weight:bold">蓝色</span>的篮球</p>

47. 单表输入标签：

<form>

      First name:<input type="text" name="firstname"<br>

      Last name:<input type="text" name="lastname">

</form>

48. 密码字段：

<form>

      Password:<input type="password" name="pwd"

</form>

49. 单选按钮：

<form>

      <input type="radio" name="sex" value="male">Male<br>

      <input type="radio" name="sex" value="female">Female

</form>

50. 复选按钮：

<form>

     <input type="checkbox" name="vehicle" value="bike">I have bike<br>

     <input type="checkbox" name="vehicle" value="car">I have car 

</form>

注意：属性一般描述于开始标签，且总是以值对的形式出现。

属性值一般被包括在双引号内，如果属性中有双引号，那么就必须使用单引号。