HTML常用标签及其用法总结

最新推荐文章于 2024-03-14 23:17:43 发布
最新推荐文章于 2024-03-14 23:17:43 发布
阅读量2.6w 收藏 399
点赞数 57
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sun9979/article/details/85217699
版权

1、HTML分块--------< div>
说起HTML的标签，不得不提起的就是< div>，在制作一个网页的时候，应该先将他们划分为许多个块，再在这些块中进行操作。
整个电脑能够显示是因为显示屏上一个一个的小颗粒，如下宽度：1920px，高度1080px。
在这里插入图片描述
所以在定义< div>中width和height的像素值的时候可以以电脑的分辨率来大致估算。

2、HTML段落--------< p>
< p>标签代表的是段落，连续的两个< p>标签中间是有间距的，不是紧挨在一起的。

<p style="background-color:#888">Nice!</p>
<p style="background-color:#888">Good!</p>
<p style="background-color:#888">Perfect!</p>

在这里插入图片描述
3、HTML标题--------< h1>…< h6>
默认加粗，从< h1>到< h6>，字体大小越来越小。

<h1>这是1号标题</h1>
<font size="6">这是6号字体文本</font>

<h2>这是2号标题</h2>
<font size="5">这是5号字体文本</font>

<h3>这是3号标题</h3>
<font size="4">这是4号字体文本</font>

<h4>这是4号标题</h4>
<font size="3">这是3号字体文本</font>

<h5>这是5号标题</h5>
<font size="2">这是2号字体文本</font>

<h6>这是6号标题</h6>
<font size="1">这是1号字体文本</font>

4、HTML链接--------< a>
1)< a href=“http://www.baidu.com”>百度< /a>（点击百度，直接跳转到网页）
这里的百度也可以是自己放的一张图片，点击图片，跳转页面。

2)HTML链接中的target属性(默认是在本页面中跳转_self)

/*当涉及到在新窗口打开时，令target=_blank*/
< a href="http://www.baidu.com" target="_blank">百度< /a>

3)HTML链接中的id属性
直接跳转到id所在位置，（id前面要加#）这个例子本质就是一个书签。

<a href="#info">跳转到four</a>
<h1>one</h1>
<br><br><br><br><br><br>
<h2>two</h2>
<br><br><br><br><br><br>
<h3>three</h3>
<br><br><br><br><br><br>
<h4 id="info">four</h4>
<h5>five</h5>

5、HTML图像-------< img>
< img>有两个必要的属性：src和alt
< img src=“11.jpg” width=“100px”
height=“200px” />（放在一个目录下，可以直接写图片名字和格式）
图片的名称和尺寸是通过属性的形式提供的。
提示：（1）从技术上来讲，图像并不会插入HTML页面中，而是链接到HTML页面上。 < img>标签的作用是为被引用的图像创建占位符。
（2）通过在< a>标签中嵌套< img>标签，为图像添加到另一个文档的链接。

6、HTML换行--------< br>
直接空一行。（是一个没有关闭标签的空标签）

7、HTML水平线--------< hr>
创建水平线，用于分割内容。

8、HTML折行（让连续两行紧挨在一起）
< p>< br>< br>< /p>

9、HTML文本格式化
1）< b>加粗文体< /b>
通常标签 < strong> 替换加粗标签 < b> 来使用
2）< i>斜体< /i>
通常标签 < em> 替换加粗标签 < i> 来使用
3）< sub>510下标< /sub>
4）< sup>510上标< /sup>

10、HTML预格式文本
< pre>< /pre>对空行和空格进行控制。（这个写的就很随意）

<pre style="background-color:red;color:blue">
Nice!
	Good!
		Prefect!
</pre>

在这里插入图片描述

11、HTML定义缩写--------< abbr>
< abbr title=“World Wide Web”>www< /abbr>
当鼠标移动到缩略词语上时，title可用于显示完整版本。

12、HTML指定文本方向--------< bdo>
< p>< bdo dir=“rtl”>该段落文字从右到左显示。< /bdo>< /p>
rtl--------right to left;
ltr--------left to right;

13、HTML新插入文本和删除文本--------< ins>和< del>
浏览器一般会在已删除的文本上添加一条下划线,而在新添加的文本下添加一条下划线。

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

14、HTML中的< base>(必须写在< head>中)
< base>为页面上的所有相对链接规定默认的URL（每一个文件都有默认的url,它包含的信息指出文件的位置以及浏览器应该怎么处理它）
就可以写一个图片库，在调用的时候直接写它的名称就行。

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<base href="D://">
</head>
<body>
<a href="11.jpg">跳转到图片</a>
</body>
</html>

15、HTML表单

1）< form>标签，创建一个供用户输入的表单。
form标签里一般需要添加两个属性，一个是action,一个是method。

action的值是一个URL，它用来规定提交表单时向何处发送表单数据。

method的值有两个,get和post。它规定用于发送表单数据的HTTP方法。
在这里插入图片描述

2）< input>标签
该标签规定了用户可以在其中输入数据的输入字段。
< input>元素在< form> 元素中使用，用来声明允许用户输入数据的input控件。

（1）最重要的type属性（只列了常用的几个）。
button ： 普通按钮
text：普通的输入框
checkbox ： 复选框
radio：单选框
password ： 密码输入框（看不见输入的内容）
submit ：提交按钮
reset：重置按钮
email：邮箱输入框
url：资源地址（输入网址）
number：数值输入的空间（可以通过旁边的箭头上下浮动1）
date：就是日期选择控件（包含年月日）
datetime-local：本地日期时间选择控件（包含年月日几时几分）
tel：电话号码
color：颜色选择控件

（2）name属性 ------规定< input>元素的名称
它的值自己输入（text）
（3）checked属性------规定在页面加载时应该被预先选定的< input>元素。（只针对type="checkbox"或者type=“radio”）

（4）alt属性------定义图像输入的替代文本（只针对type=“image”）
它的值自己输入（text）

（5）src属性------规定显示为提交按钮的图像的URL
它的值为一个URL。

（6）height和width属性------规定< input>元素的高度和宽度（只针对type=“image”）

（7）value属性------指定< input>元素value的值
它的值是一个text类型。

3）< button>标签
该标签就是定义一个按钮。
在< button>元素内部，可以放置内容，比如文本和图像。这一点也是该元素与< input>元素创建的按钮之间的不同之处。
（必须为该元素规定type属性，因为不同浏览器，它的默认值不一样）

（1）type属性------规定按钮的类型
它的值包括button,reset,submit三种类型。

4）< select>标签
< select>元素用来创建下拉列表。
< select>元素中的 < option>标签定义了列表中的可用选项。

<form>
<p>You are a
<select>
<option value="Nice">Nice</option>
<option value="Handsome">Handsome</option>
<option value="Smart">Smart</option>
</select>
boy!</p>

value属性-----送往服务器的选项值。

5）< label>标签------为input元素定义标注（标记）
label元素不会向用户呈现任何特殊效果。不过，他为鼠标用户改进了可用性。如果在label元素内带年纪文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
（1）for属性------规定label与那个表单元素绑定。

<form>
<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>
</form>

< label>标签的for属性应当与相关元素的id属性相同

15、HTML Audio/Video
1）< source>标签
该标签为媒体元素（比如< video>和< audio>）定义媒体资源。
该标签允许规定两个视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

（1）src属性------规定媒体文件的URL。
它的值就是URL

（2）type属性------规定媒体资源的MIME类型。
它的值为MIME_type类型。

2）< audio>标签
用来定义声音，比如音乐或者其他音频流。
目前只支持三种格式：mp3,wav,ogg。
在这里插入图片描述
（1）controls属性
向用户显示音频控件（比如播放/暂停按钮）。

（2）autoplay属性
音频就绪后马上播放。

（3）src属性------规定媒体文件的URL。
它的值就是URL

3）< video>标签
定义视频，比如电影片段或者视频流。
目前只支持三种视频格式：mp4,webm,ogg。

（1）controls属性
向用户显示音频控件（比如播放/暂停按钮）。

（2）autoplay属性
音频就绪后马上播放。

（3）src属性------规定媒体文件的URL。
它的值就是URL

（4）height和width属性------设置视频播放器的高度和宽度。

<video width="230px" height="200px" controls>
<source src="1.mp4" type="video/mp4"> 
<source src="2.ogg" type="video/ogg"> 
</video>

16、HTML列表
1）< ul>标签------创建一个无序列表（通常与li一起使用）

2）< ol>标签------创建一个有序列表（通常与li一起使用）

3）< li>标签------定义一个列表项

<p>有序列表:</p>
<ol>
  <li>Nice</li>
  <li>Good</li>
  <li>Perfect</li>
</ol>

<p>无序列表:</p>
<ul>
  <li>Nice</li>
  <li>Good</li>
  <li>Perfect</li>
</ul>

4)< dl>标签------定义一个定义列表（与 < dt> （定义项目/名字）和 < dd> （描述每一个项目/名字）一起使用。）

5）< dt>标签------定义一个定义定义列表中的项目。

6）< dd>标签------顶一顶一列表中项目的描述。

<dl>
  <dt>Boy:</dt>
    <dd>Handsome and Strong</dd>
  <dt>Girl:</dt>
    <dd>Beautiful and Slim</dd>
</dl>
Sun990o
关注
  • 57
    点赞
  • 踩
  • 399
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML中文手册(适合新手)
09-02
里面详细讲述了html的各种常用的属性及标签的用法
HTML标签指令详解
03-25
介绍了常用的html标签及其用法，让你迅速掌握html
HTML常用知识总结
最新发布
2301_81804867的博客
03-14 837
align ---- 位置 （图片和文字的位置） 取值：top ----- 上对齐 middle ----- 居中对齐 bottom ------ 下对齐（默认对齐） right ----- 右对齐 left ------ 左对齐。以上标签都是双标签，两个尖括号之间的内容就是显示在浏览器的内容，strong和b标签会以粗体的方式显示内容，em 和 i 标签会以斜体的方式输出，u 和 del 标签也是这样的方式。cellspacing------ 表示的是表格的间距（表示的是单元格和单元格之间的距离）
H5+CSS3.zip
08-06
主要包含HTML5+CSS3基础知识，各种常用标签的意义及基本用法示例。 HTML5部分具体内容包括： 语义化标签：段落标签，标签自定义文字样式，标题标签，块，标签定义头部，标签定义底部，标签定义正文区段，标签定义侧边栏区域； 效果标签：标签实现换行效果，特殊字符 实现空格效果，标签实现水平线； 列表标签：使用实现无序列表，使用实现有序列表； 使用标签添加图片，使用标签添加链接，使用table添加表格，使用thead、tbody、tfood定义表格； 表单标签：使用创建表单，文本输入框，密码输入框，数字输入框，网址输入框，邮箱输入框，创建文本域，单选框，复选框，使用select、option创建下拉菜单，提交按钮，重置按钮； CSS3部分具体内同包括: css引入方式：内联式，嵌入式，外部式，三种链接方式优先级； css选择器：标签选择器，类选择器，ID选择器，后代选择器，通用选择器，伪类选择器（给html标签的某种状态设置样式），分组选择器； 样式继承，优先级，最高层级！important； css字体样式：font-family设置字体系列，font-size设置字体大小，font-weight设置字体粗细，font-style设置字体样式，color设置字体颜色的三种形式，font的简写； css文本样式：使用text-decoration添加文本修饰，text-indent：2em添加首行缩进俩字符，line-height设置行间距，letter-spacing设置字符间距，word-spacing设置英文单词间距，text-align设置文本对齐方式； css盒模型：块级元素，内联元素，内敛块状元素，none使元素隐身，设置宽度、高度、背景色、边框、圆角，padding内边距，margin外边距； css布局模型：流动模型flow，浮动模型float，层模型layer，层模型的绝对定位、相对定位、固定定位，相对定位与绝对定位组合； css弹性盒模型：flex属性，横轴排列，纵轴排列，flex占比； 行内元素水平居中设置； 定宽块状元素水平居中设置； 已知宽高实现盒子水平垂直居中； 不知宽高实现盒子水平垂直居中。
HTML常用标签库及演示实例
09-02
想学习或者提升自己网页设计的可以去下载看看，很有用的。
html中meta标签及用法详解
12-14
废话，就不多说了，开始今天的主题。 Html中meta标签 一、meta标签 含义 　　<meta> 元素 可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 　　<meta> 标签位于文档的头部，不包含任何内容。 　　<meta> 标签的属性定义了与文档相关联的名称/值对。 二、meta 中常用属性 1. charset  (字符集) 　　 说明：规定 HTML 文档的字符编码。 　　 用法： <meta charset="UTF-8">   2.  viewport (视区) 　　 说明：是用户网页的可视区域。 大家都知道移动设备的屏幕一
HTML基础
书启鸿蒙知秋枫
12-28 4498
HTML语言就是使用各种各样具有不同含义的标签对代码里的普通文字进行标注，让普通的文字具有自己特殊的含义。所以，各个标签到底具有哪些功能，就是我们需要学习的重点。注释标签结构标签超链接和图片标签列表标签表格标签表单标签'a'表示小写字母编号；'A'表示大写字母编号；'i'表示小写罗马数字编号；'I'表示大写罗马数字编号；'1'表示数字编号（默认值）start属性，这个属性值是一个整数，用来指定序号的开始值。尽管列表条目的序号可能不是数字顺序，但这个开始的顺序总是使用数字表示。
html中常见标签及其用法归纳大全
热门推荐
xu_yuxuyu的博客
10-28 3万+
html零基础必看——htmlHTML常见标签大全 第二章：html常见标签前言一、常见标签（一）1、body标签2、div盒子标签3、p文本段落标签4、h1~h6 标题标签5、b标签和strong标签（文字加粗标签）6、span文字包裹标签7、br换行标签和hr分隔符标签9、del删除标签10、center居中标签11、sup上标和sub下标12、pre预格式化标签二、常用标签（二）2.1.a标签（链接、超链接、锚点标签）2.1.1.超链接标签2.1.2 锚点链接2.1.3 空连接2.2 图片标签三、列表
HTML常见标签用法
weixin_60778429的博客
09-07 2007
type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.自定义列表[重要] dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕 着标题来展开的.target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.border 表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框.
HTML 中的常用标签用法
weixin_62292640的博客
05-05 2071
<dt>标题</dt><dd>数据1</dd><dd>数据2</dd><dd>数据3</dd><dd>数据4</dd>
HTML的常见标签及用法
hh_david的博客
09-20 6350
在HTML中，单纯的使用回车进行换行是不可行的，如上图p标签内的文段，使用回车换行并没有影响最后的呈现结果。4.width和height属性，对于图片的大小进行调整，一般可以只设置长或者宽，因为系统会根据你给出的数据对图片进行等比例的调整。这是最基础的超链接，点击跳转后是在同一个标签页，如果我们想要跳转到一个新的标签页，那我们可以使用target标签。对于这种选择框，，每个框都可以选中，为了实现单选框，我们可以将选项定义一个相同的值。观察发现标签分行写，但最终的结果在同一行，这样的标签称为行内标签。
java 面试题 总结
09-16
JAVA相关基础知识 1、面向对象的特征有哪些方面 1.抽象： 抽象就是忽略一个主题中与当前目标无关的那些方面，以便更充分地注意与当前目标有关的方面。抽象并不打算了解全部问题，而只是选择其中的一部分，暂时不用部分细节。抽象包括两个方面，一是过程抽象，二是数据抽象。 2.继承： 继承是一种联结类的层次模型，并且允许和鼓励类的重用，它提供了一种明确表述共性的方法。对象的一个新类可以从现有的类中派生，这个过程称为类继承。新类继承了原始类的特性，新类称为原始类的派生类（子类），而原始类称为新类的基类（父类）。派生类可以从它的基类那里继承方法和实例变量，并且类可以修改或增加新的方法使之更适合特殊的需要。 3.封装： 封装是把过程和数据包围起来，对数据的访问只能通过已定义的界面。面向对象计算始于这个基本概念，即现实世界可以被描绘成一系列完全自治、封装的对象，这些对象通过一个受保护的接口访问其他对象。 4. 多态性： 多态性是指允许不同类的对象对同一消息作出响应。多态性包括参数化多态性和包含多态性。多态性语言具有灵活、抽象、行为共享、代码共享的优势，很好的解决了应用程序函数同名问题。 2、String是最基本的数据类型吗? 基本数据类型包括byte、int、char、long、float、double、boolean和short。 java.lang.String类是final类型的，因此不可以继承这个类、不能修改这个类。为了提高效率节省空间，我们应该用StringBuffer类 3、int 和 Integer 有什么区别 Java 提供两种不同的类型：引用类型和原始类型（或内置类型）。Int是java的原始数据类型，Integer是java为int提供的封装类。Java为每个原始类型提供了封装类。 原始类型封装类 booleanBoolean charCharacter byteByte shortShort intInteger longLong floatFloat doubleDouble 引用类型和原始类型的行为完全不同，并且它们具有不同的语义。引用类型和原始类型具有不同的特征和用法，它们包括：大小和速度问题，这种类型以哪种类型的数据结构存储，当引用类型和原始类型用作某个类的实例数据时所指定的缺省值。对象引用实例变量的缺省值为 null，而原始类型实例变量的缺省值与它们的类型有关。 4、String 和StringBuffer的区别 JAVA平台提供了两个类：String和StringBuffer，它们可以储存和操作字符串，即包含多个字符的字符数据。这个String类提供了数值不可改变的字符串。而这个StringBuffer类提供的字符串进行修改。当你知道字符数据要改变的时候你就可以使用StringBuffer。典型地，你可以使用StringBuffers来动态构造字符数据。 5、运行时异常与一般异常有何异同？ 异常表示程序运行过程中可能出现的非正常状态，运行时异常表示虚拟机的通常操作中可能遇到的异常，是一种常见运行错误。java编译器要求方法必须声明抛出可能发生的非运行时异常，但是并不要求必须声明抛出未被捕获的运行时异常。 6、说出Servlet的生命周期，并说出Servlet和CGI的区别。 Servlet被服务器实例化后，容器运行其init方法，请求到达时运行其service方法，service方法自动派遣运行与请求对应的doXXX方法（doGet，doPost）等，当服务器决定将实例销毁的时候调用其destroy方法。 与cgi的区别在于servlet处于服务器进程中，它通过多线程方式运行其service方法，一个实例可以服务于多个请求，并且其实例一般不会销毁，而CGI对每个请求都产生新的进程，服务完成后就销毁，所以效率上低于servlet。 7、说出ArrayList,Vector, LinkedList的存储性能和特性 ArrayList和Vector都是使用数组方式存储数据，此数组元素数大于实际存储的数据以便增加和插入元素，它们都允许直接按序号索引元素，但是插入元素要涉及数组元素移动等内存操作，所以索引数据快而插入数据慢，Vector由于使用了synchronized方法（线程安全），通常性能上较ArrayList差，而LinkedList使用双向链表实现存储，按序号索引数据需要进行前向或后向遍历，但是插入数据时只需要记录本项的前后项即可，所以插入速度较快。 8、EJB是基于哪些技术实现的？并说出SessionBean和EntityBean的区别，StatefulBean和StatelessBean的区别。 EJB包括Session Bean、Entity Bean、Message Driven Bea
iframe标签用法详解(属性、透明、自适应高度)
01-19
1、iframe 定义和用法 iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。 HTML 与 XHTML 之间的差异 在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素。 提示和注释： 提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。 iframe标签是成对出现的,以<iframe>开始,</iframe>结束 iframe标签内的内容可以做为浏览器不支持iframe标签时显示 属性 属性 值 描述 DT
HTML常用标签
09-09
HTML常用标签，在实际中如何运用，虽然很多标签都能达到一行的效果，但是其本身的标签更具有体现性。
让相同的div浮动到同一行或者同一列
sun9979的博客
01-23 1609
既然要让div浮动起来，就要用到CSS中的float属性！ 先来说一说CSS中的float属性： float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。 //默认是浮动到同一列的 float:left; /...
Javascript创建动态的HTML
sun9979的博客
12-22 819
Javascript可以通过操作HTML DOM来创建动态的HTML。 Javascript可以改变页面中的所有HTML的元素和其属性 Javascript可以改变页面中的所有CSS样式 Javascript可以对页面中的所有时间做出反应 1、Javascript 通过操作HTML DOM 改变 HTML元素的内容。 1）改变HTML 的输出流。 在Javascript中，document.w...
HTML，CSS ,Javascript的简单介绍
sun9979的博客
12-14 784
前端三个基础HTML，CSS ,Javascript 。 首先需要说一下，这三个的区别和联系： HTML代表着结构，CSS代表着样式，Javascript代表着行为。 HTML和CSS通过选择器关联，常用的选择器有两个，一个是class,一个是id。class可以重复使用，而id只能使用一次（因为其唯一性，所以在于后台交互的时候用id）。 &amp;amp;amp;amp;lt;meta http-equiv=&amp;amp;amp;quot;Content-...
Javascript常用事件总结
sun9979的博客
12-22 232
1、onload和onunload事件。 onload和onunload会在用户进入和离开页面的时候触发。 例如：onload会在页面页面成功加载完成之后弹出来一个消息框。 &lt;body onload="mymessage()"&gt; &lt;script&gt; function mymessage(){ alert("消息在 onload 事件触发后弹出。"); } &lt;/scr...
HTML标记语言的常用标签及用法
03-05
HTML标记语言的常用标签包括： 1. <html>：定义HTML文档 2. <head>：定义文档头部 3. <title>：定义文档标题 4. <body>：定义文档主体 5. <h1>~<h6>：定义标题 6. <p>：定义段落 7. <a>：定义链接 8. <img>：定义图像 9. <ul>：定义无序列表 10. <ol>：定义有序列表 11. <li>：定义列表项 12. <table>：定义表格 13. <tr>：定义表格行 14. <td>：定义表格单元格 15. <form>：定义表单 16. <input>：定义输入框 17. <textarea>：定义文本域 18. <select>：定义下拉列表 19. <option>：定义下拉列表选项 20. <button>：定义按钮 这些标签可以用于创建网页的各种元素，如文本、图像、链接、表格、表单等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值