您的位置：首页 > Web前端 > HTML

回顾html的常用标签及其属性

2017-10-24 21:34 531 查看

1.三个常用元素：p、h、br

2.常用的文本元素

B元素：作用是加粗文字

Br元素：强制换行

I元素：文字倾斜

del元素：删除文字

strong元素：强调一段文字，作用加粗文字、

wbr元素：安全换行

em作用是强调，也是让文字倾斜

s元素：实际作用删除，表示不准确删除

u元素：实际作用为文字加下划线

ins元素：实际作用是给文字加下划线，从语义上看是添加一段文字，起到强调作用

small元素：添加小号字体，语义上是免责声明和澄清声明

sub和sup元素：添加下标上标

dfn元素：定义术语，对一个词或短语的解释，实际效果是文字倾斜

abbr元素：表示一段文本的缩写，在文本显示上没任何效果

q元素：引用来自其他地方的内容，实际作用是加双引号

code元素：计算机代码片段

var用来表示编程语言的变量

samp元素表示程序或计算机的输出

kbd元素表示某部分内容是由客户利用键盘输入

ruby元素：表示位于文字上方或右方的注音符号

cite元素：表示引用其他作品的标题，实际效果是加粗文本

bdo元素：设置文字方向，必须使用dir属性才可以设置，共两个值，rtl（从右到左）；ltr（从左到右）【默认值】，

mark元素：突出显示文本，用于记号，实际作用加一个黄色背景

time元素：日期和时间

span元素：一般性文本，没特殊效果

代码及实现效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html常用元素</title>
<style>
body{
background-color: #F0F8FF;
}
</style>
</head>
<body>
1.三个常用元素：p、h、br <br>
<p>p元素：这是一个段落</p>
<h3>h元素：这个是标题</h3>
br元素：这一行后自动换行<br>
2.常用的文本元素 <br>
<!-- B元素：作用是加粗文字 -->
<b>b元素：加粗文字</b><br>
<!-- Br元素：强制换行 -->
强制换行<br/><br>
<!-- I元素：文字倾斜 -->
<i>i元素：文字倾斜</i><br>
<!-- del元素：删除文字 -->
<del>del元素：删除文字</del><br>
<!-- strong元素：强调一段文字，作用加粗文字、 -->
<strong>strong元素：加粗文字</strong><br>
<!-- wbr元素：安全换行 -->
wbr元素：<br>
这行文字很长，在缩小浏览器窗口比例的时候，换行并不是所有都换，而是在加了标签wbr的那里换yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy <wbr/>yyyyyyyyyyyyyy <br>
<!-- em作用是强调，也是让文字倾斜 -->
<em>em元素：强调，让文字倾斜</em><br>
<!-- s元素：实际作用删除，表示不准确删除 -->
<s>s不准确元素：不准确删除</s><br>
u元素：实际作用为文字加下划线
<u>u元素：为文字加下划线</u><br>
<!-- ins元素：实际作用是给文字加下划线，从语义上看是添加一段文字，起到强调作用 -->
<ins>ins元素：为文字加下划线，语义是加一段文字</ins><br>
<!-- small元素：添加小号字体，语义上是免责声明和澄清声明 -->
<small>small元素：添加小号字体</small><br>
<!-- sub和sup元素：添加下标上标 -->
上标、下标元素：<br>
m<sup>2</sup>  H<sub>2</sub>O <br>
<!-- dfn元素：定义术语，对一个词或短语的解释，实际效果是文字倾斜 -->
<dfn>dfn元素：对一个词或短语解释，实际效果是文字倾斜</dfn> <br>
<!-- abbr元素：表示一段文本的缩写，在文本显示上没任何效果 -->
表示一段文本的缩写，比如世贸组织<abbr>WTO</abbr> <br>
<!-- q元素：引用来自其他地方的内容，实际作用是加双引号 -->
引用来自其他地方的内容<q>q元素：加双引号</q><br>
<!-- code元素：计算机代码片段
var用来表示编程语言的变量
samp元素表示程序或计算机的输出
kbd元素表示某部分内容是由客户利用键盘输入 -->
<!-- ruby元素：表示位于文字上方或右方的注音符号 -->
<ruby>语言<rt>(yu) (yan)</rt></ruby><br>
<!-- cite元素：表示引用其他作品的标题，实际效果是加粗文本 -->
<cite>实际效果是加粗文本</cite><br>
<!-- bdo元素：设置文字方向，必须使用dir属性才可以设置，共两个值，rtl（从右到左）；ltr（从左到右）【默认值】， -->
<bdo dir="rtl">文字方向</bdo><br>
<!-- mark元素：突出显示文本，用于记号，实际作用加一个黄色背景 -->
<mark>突出显示文本，实际效果是加一个黄色背景</mark><br>
<!-- time元素：日期和时间 -->
<time>2017-10-24</time><br>
<!-- span元素：一般性文本，没特殊效果 -->
<span>一般性文本，没效果</span>
<hr>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html

相关文章推荐

新的分享

章节导航