HTML中部分标签总结

最新推荐文章于 2024-09-30 14:01:51 发布

AlgorithmAce

最新推荐文章于 2024-09-30 14:01:51 发布

阅读量239

点赞数 8

文章标签： html 前端

本文链接：https://blog.csdn.net/2301_80224944/article/details/139371872

版权

一.文本类标签

<h1>最大的标题</h1>  
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6>最小的标题</h6>
//从h1到h6逐渐减小 

<p></p>            //段落标签
<br>               //换行标签
<hr>               //水平分割线
<!-- 这是注释 -->  //HTML里注释的方法

<b>粗体文本</b>             //文本加粗显示
<code>计算机代码</code>     //字体和编译器内的显示的代码字体差不多
<em>强调文本</em>           //会使字体倾斜等,用来强调
<i>斜体文本</i>             //使文本倾斜
<strong>重要的文本</strong> //加粗,提示用户文本内容重要

{
<sub> （下标文本） //用于化学表达式等
<sup> （上标文本）
}

二.链接

<a href="http://www.example.com/">链接文本</a>    //文本超链接
<a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>  //图片超链接
<a href="mailto:webmaster@example.com">发送e-mail</a>   //邮件超链接


//锚点,一般用于页面内跳转
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

三.列表

无序列表
<ul>
    <li>内容</li>
    <li>内容</li>
</ul>

有序列表
<ol>
    <li>第一个内容</li>
    <li>第二个内容</li>
</ol>

定义列表
<dl>
  <dt>项目 1</dt>
    <dd>描述项目 1</dd>
  <dt>项目 2</dt>
    <dd>描述项目 2</dd>
</dl>

四.表格

<table border="1">
  <tr>
    <th>表格标题</th>  
    <th>表格标题</th>   
  </tr>
  <tr>
    <td>表格数据</td>
    <td>表格数据</td>
  </tr>
</table>

//rowspan='n' 跨行n个单元格
//colspan='m' 跨列m个单元格
//注意这个跨行和跨列的概念,别搞混

五.框架

<iframe src="链接"></iframe>

//在网页内镶嵌一个小窗口,用来展示链接指向的内容

六.图片

<img src="URL" alt="替换文本" title="鼠标悬停时显示的文本内容">

七.区块

<div></div>  //一般叫做盒子,块级元素,即独占一行
<span></span>   //行内元素,一行显示多个
<h></h>         //标题同样独占一行,块级元素

八.表单

 <form>  //表单区域

    <input type="text" name="email" size="40" maxlength="50">
//name是以后配合js使用起的名字  size是文本框长度 maxlength是最长输入文字数量 type指input的类型


    <input type="password">
//密码输入框,会隐藏输入的内容


    <input type="checkbox" checked="checked">
//复选框,checked指默认选中状态
  
    <input type="radio" checked="checked" name="名字">
    <input type="radio" checked="checked" name="名字">
//单选框,实现单选功能要保持name相同

    <input type="submit" value="Send">
//提交按钮,配合js使用

    <input type="reset">
//重置按钮,重置范围是form表单区域范围

    <input type="hidden">
//代表要传递回服务器的隐藏数据的字符串值,不可更改

    <select>
    <option>javascript基础教程</option>
    <option selected="selected">html基础教程</option>
    <option>css基础教程</option>
    </select>
//下拉框,selected为默认选中的菜单项

    <textarea name="comment" rows="20" cols="20"></textarea>
//文本域,name用作js传值,rows指文本域行数,cols指文本域列数.

 <input type="time">
//让用户选择时间

 <input type="file" >
//让用户从本地选择文件上传,添加multiple属性可以使用户上传多个文件
     
 </form>

九.实体符号

&#32;	//普通的英文半角空格
&#160; &nbsp; &#xA0;	//普通的英文半角空格但不换行
&#12288;	//中文全角空格（一个中文宽度）
&#8194; &ensp;	//半角(en)空格 （半个中文宽度，不受字体影响）
&#8195; &emsp;	//全角(em)空格 （一个中文宽度，不受字体影响）
&#8197;	//四分之一全角(em)空格 （四分之一中文宽度）
&#32;	//普通空格
&nbsp;	//相比普通空格，不间断,按下space键产生的空格,不累加

十.音频视频

1.音频
<audio src="" loop controls></audio>
   //loop属性指循环播放,controls指跳出控制台
2.视频
 <video src="" loop controls></video>
//属性作用同音频

十一.其他标签

     <marquee behavior="" direction=""></marquee>
//marquee是跑马灯元素,behavior指滚动方式,可选值有 scroll、slide 和 alternate。如果未指定值，默认值为 scroll。;direction指滚动方向,可选值有 left、right、up 和 down。如果未指定值，默认值为 left。

十二.html模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

至于HTML5新增的标签在这里就不介绍了.