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

来源：互联网发布：linux漏洞公布编辑：程序博客网时间：2024/06/14 09:54

一：基础格式

<!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>

显示效果：

三：属性用法

<!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>

效果如下：

四：常用文本元素

<!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>

显示效果：

0 0