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

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

2015-12-06 23:29 267 查看

一：基础格式

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

显示效果：

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

标签：

相关文章推荐

新的分享

章节导航