html5 - 基础格式认识和标签用法(文本元素常用方法)

时间:2021-03-23 17:14:51
一:基础格式
<!DOCTYPE html><!-- 这是html5文档声明--><!-- 第一个html是开始标签。最后一个是结束标签。所有内容必须包含在html标签内--><html lang="zh-cn"> <!-- 这里设置国家编码--><head><meta charset="UTF-8"><!-- 编码格式。没有会乱码--><title>实例01</title><!--标题 --></head><body>第一个实例的html5</body></html>


二:标题,分割线,段落

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>实例01</title>
</head>
<body><!--显示可见内容-->
<!--<h1>h1-h6标签表示标题</h1>

<hr><!-- 分割线 单标签-->

<p>
p标签表示一个段落。两个是两个段落
</p> -->

<h1>静夜思</h1>
<h4>作者:李白</h4>
<!-- <p></p> -->
<hr>
<p>白日依山尽,黄河入海流</p>
<p>欲穷千里目,更上一层楼</p>
有了段落标签自动换行
</body>
</html>
显示效果:

html5 - 基础格式认识和标签用法(文本元素常用方法)


三:属性用法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性的使用</title>
</head>
<body bgcolor ="#cf0"><!-- 背景bgcolor十六进制-->
<!--属性使用格式-->
<!-- <标签 属性></标签> -->
<!-- <h1 align="left">居左。默认</h1>
<h1 align="center">居中</h1>
<h1 align="right">居右</h1> -->
<h1 align="center">静夜思</h1>
<h4 align="right">作者:李白</h4>
<hr>
<p align="center">白日依山尽,黄河入海流</p>
<p align="center">欲穷千里目,更上一层楼</p>
</body>
</html>


效果如下:
html5 - 基础格式认识和标签用法(文本元素常用方法)


四:常用文本元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实例03</title>
</head>
<body align="center">
<b>加粗文字</b>
<br><!-- 换行。没有间距。段落p标签有间距-->
<i>倾斜文字</i>
<br>
<del>文字中间加横线</del>
<br>
<strong>强调文本,加粗文字</strong>
<wbr></wbr>
安全换行。缩放浏览器大小看效果
<br>
<em>强调文本,文字倾斜</em>
<br>
<s>中间加线</s>
<br>
<u>给文字加下划线</u>
<br>
<ins>给文本加下划线</ins>
<br>
<small>添加小号字体</small>
<br>
H<sub>2</sub>0<!--下标,如化学程式 -->
<br>
m<sup>2</sup><!--上标,如m2 -->
<br>
<dfn>解释语言</dfn>
<br>
<q>加上双引号</q>
<br>
<!-- <code>代码片段</code>
<br>
<var>表示编程语言的变量</var> -->
<ruby>汉语拼音<rt>hanyupinyin</rt></ruby>
<br>
<cite>引用标题,倾斜</cite>
<br>
<bdo dir="">文字方向,ltr默认从左到右</bdo>
<br>
<bdo dir="rtl">文字从右到左</bdo>
<br>
<mark>加黄色背景</mark>
<br>
<time>显示时间</time>
<br>
<span>一般文本,没有显示效果</span>
</body>
</html>

显示效果:html5 - 基础格式认识和标签用法(文本元素常用方法)