HTML的标签

最新推荐文章于 2024-07-25 11:52:08 发布

limlimit

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量78

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_45731526/article/details/128627417

版权

注释标签：
标题标签：<h1></h1> ... <h6></h6> →大到小
段落标签：<p></p> →默认其上方和下方会空出一行
换行标签：<br> →单标签
水平分隔线标签：<hr> →单标签
斜体标签：<i></i>
粗体标签：<b></b>

<meta>

meta是head标签内部的辅助标签，它提供了HTML文档的元数据，以名称/值的形式出现，内容会被浏览器解析但不会显示在客户端。

属性：

charset：定义HTML文档的字符编码

<!DOCTYPE html><!--约束，声明-->
<html lang="en"><!--HTML页面的开始-->
<head><!--HTML页面的头信息-->
    <meta charset="UTF-8"><!--定义当前文档的字符编码为UTF-8-->
    <title>Title</title><!--定义文档的标题-->
</head>

<img/>

定义图片
图片不是直接插入到页面中，而是链接到页面上

src：设置图片的路径
width、height：设置图片的宽和高
border：设置图片边框的大小
alt：设置当指定路径找不到图片时，用来代替显示的文本内容
loading：指定浏览器是延迟加载（lazy）还是立即加载（eager）图片

<a></a>

定义超链接

href：跳转的链接地址
download：下载的链接地址
target：跳转的页面的打开位置
_blank：新窗口打开
_parent：父框架中打开 → 包含超链接引用的框架的父框架。如果该引用是在顶级框架中（没有父框架），则相当于_self
_self：在当前框架中打开
_top：当前窗口中打开，覆盖原窗口
iframe的name属性值：在指定的内联框架中打开
tabindex：Tab键遍历该链接的顺序，从1开始

设置<a></a>标签的样式：

<style type = "text/css">
	a {font-size:16px}
	/* 设置链接的初始样式 */
	a:link {color: blue; text-decoration:none;/*无下划线*/}  
	/* 设置链接被点击后的样式 */
	a:visited {color:purple;text-decoration:none;}  
	/* 鼠标移动到链接上的样式 */
	a:hover {color: red; text-decoration:underline;}  
	/* 鼠标点击链接时的样式 */
	a:active:{color: red; } 
	</style>

<iframe></iframe>

定义一个内联框架：在当前页面再嵌入另外一个页面

src：框架内显示的url页面
name：iframe的名称
height、width：iframe的高和宽
frameborder：是否显示边框，1表示显示，0表示不显示
scrolling：是否显示滚动条，yes、no、auto
align：对齐方式，left、right、top、middle、bottom
srcdoc：显示HTML内容

iframe标签和a标签组合使用：a标签的target属性引用iframe标签的name属性值，表示在知道iframe中打开超链接的目标地址

<div></div>

div属于块级元素

块级元素：
1、默认情况下独占一行；
2、可以设置宽和高。
3、可以作为一个容器容纳其他的块元素和行内元素
【div，p，form，fieldset、hr，table，h1…h6，dl，dt，dd，ul，ol】
行内元素：
1、与其他元素在同一行；
2、不可以设置宽和高（自动匹配包含的文本）。
3、只能内嵌行内元素。
【a，span，label，i，b，strong，var，em】
行内块元素：
1、与其他元素在同一行；
2、可以设置宽和高。
【input，img】

属性：

style：设置样式
align：设置div内文本内容的对齐方式，left、center、right

style对象的属性：

margin：设置元素的外边距（上-右-下-左，顺时针）
padding：设置内边距（元素边框与包含内容的间距）
position：设置元素的定位方式
→ 绝对定位：absolute
→ 相对定位：related，相对于本身位置做偏移
→ 静态定位：static（默认）
→ 固定定位：fixed，相对于浏览器窗口

absolute：相对于父元素
1、父元素没有设置为相对定位或绝对定位时，该元素相对于根元素<html>进行定位。
2、父元素被设置为相对定位或绝对定位时，该元素相对于最近的设置了相对定位或绝对定位的父元素进行定位。

overflow：内容溢出元素框时显示的方式。如果设置了元素框的高和宽，其包含文本内容太多时就会溢出，可以使用overflow设置溢出的文本如何显示：

hidden：隐藏溢出的内容
auto：文本溢出时会显示滚动条
scroll：不管文本是否溢出都会显示滚动条
inherit：继承父元素的overflow属性
visible：直接显示（默认）

<ul><li>

块级元素

<ul>：定义一个无序列表

type：设置列表的符号形式【circle：空心圆；square：实心方块；disc：实心圆（默认）】

<li>：列表项

<ol><li>

块级元素

<ul>：定义一个有序列表

start：设置列表编号的初始值
type：设置列表的编号形式【a：小写字母；A：大写字母；i：小写罗马数字；I：大写罗马数字；1：阿拉伯数字（默认）】
reversed：列表编号降序显示

<li>：列表项

<dl></dt></dd>

块级元素

<dl>：定义一个描述列表
</dt>：定义列表项
</dd>：描述这个列表项

示例：

<dl style="border: black solid 1px">
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

在这里插入图片描述

短语标签

短语标签用来表示其包含的文本的结构含义

em：包含的文本被定义为被强调文本
strong：包含的文本被定义为重要文本
dfn：包含的文本被定义为一个项目
code：包含的文本被定义为计算机代码
samp：包含的文本被定义为样本
kbd：包含的文本被定义为键盘文本，表示文本是从键盘中输入
var：包含的文本被定义为变量
cite：包含的文本被定义为作品的标题
abbr：包含的文本被定义为缩写词/首字母缩略词（可以使用title属性设置它的完整版本，当鼠标移动到该文本上就会显示它的完整版本）
mark：包含的文本被定义为被标记文本，高亮显示

<pre></pre>

该标签可定义预格式化的文本。
被其包含的文本会保留空格和换行符，且文本呈现为等宽字体。

示例：

<pre style="background-color: pink">我是预格式化的文本，我的空格    和换行符
全部保留：
    我使用的是等宽字体
</pre>

在这里插入图片描述

limlimit

关注

0
点赞
踩
0

收藏

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

HTML的常用标签
复制链接

扫一扫