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

最新推荐文章于 2024-04-24 18:49:11 发布

为明天

最新推荐文章于 2024-04-24 18:49:11 发布

阅读量2.1k

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/li5685918/article/details/50198891

版权

html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一：基础格式

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

显示效果：