HTML是什么?
HTML 是用来描述网页的一种语言: 超文本标记语言: HyperText Markup Language
HTML使用标记标签来描述网页。HTML文档包含了HTML标签及文本内容,HTML文档也叫作web页面
通常格式: <标签> 内容 </标签>,标签对中的第一个标签是开始标签,第二个标签是结束标签。
HTML的一般结构:
<html>--------以<html>开始,以</html>结束,表示之间的文档是HTML。
<head>-------HTML文档的头部,主要放文档的标题信息。
<title>---------文档标题</title>
</head>
<body>---------HTML的主体部分
<h1>----------一级标题</h1>(未使用CSS的HTML文件)
<hr>-----------在网页中插入一条水平线
<p>-----------段落 </p>(未使用CSS的HTML文件)
</body>
</html>
HTML元素:
元素 |
| 内容 |
---|---|---|
<h1> </h1> | 定义标题 | |
<p> </p> | 段落 | |
<i> </i> | 斜体 | |
<b> </b> | 加粗 | |
<br/> | 换行 | |
<hr/> | 分割横线 | |
<img src = "资源图片链接"/> | 插入图片 | |
<pre> 内容</pre> | 按内容格式输出 |
示例:
1、<h1>标题</h1>用法
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>day01</title>
<h1>厚颜无耻之人</h1>
<h2>厚颜无耻之人</h2>
<h3>厚颜无耻之人</h3>
<h4>厚颜无耻之人</h4>
<h5>厚颜无耻之人</h5>
<h6>厚颜无耻之人</h6>
</head>
<body>
</body>
</html>
效果:
2、段落
<p>一个段落</p>
<p>又一个段落</p>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>day01</title>
<p>第一段:也不过是为了想让这个世界知道,反复与坚持之后,柔水终成雕刀。</p>
<p>第二段:你是无意穿堂风,偏偏孤据引山洪</p>
</head>
<body>
</body>
</html>
效果:
3、斜体&&加粗
<i>斜体</i>
<b>加粗</b>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>day01</title>
<p> <i>嘿!我变好看了。。。。</i></p>
<p> <b>我变粗了,你看出来了吗?</b></p>
</head>
<body>
</body>
</html>
效果:
4、换行&&分割横线
<br/> 换行
<hr/> 加分割横线
<pre>原格式文本</pre>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>day01</title>
<p> 我要换行了<br/> </p>
<hr/>
<p> 我不想跟你一行,我在你下面加了一条分割线,嘻嘻</p>
<pre>
我听见了你的声音
也藏着颗不敢见的心
我躲进挑剔的人群
夜一深就找那颗星星
你听不到我的声音
怕脱口而出是你姓名
</pre>
</head>
<body>
</body>
</html>
效果:
5、插入图片
<img src = "图片资源连接路径"/>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>day01</title>
<img src ="E:\Dw练习\1564206847914.jpg"/>
</head>
<body>
</body>
</html>
效果:
整体组合:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>day01</title>
<h1>厚颜无耻之人</h1>
<p><pre>也不过是为了想让这个世界知道
反复与坚持之后
柔水终成雕刀。
---席慕容《雕刀》</pre></p>
<p><pre>
<b>觉醒吧!恶臭年青人。</b>
<i>青春如同奔流的江河</i>
<i>一去不回来不及道别</i>
<i>只剩下麻木的我没有了当年的热血</i>
<i>看那满天飘零的花朵</i>
<i> 在最美丽的时刻凋谢</i>
<i> 有谁会记得这世界它曾经来过</i>
</pre> </p>
<h6>厚颜无耻之人上一张图片<hr/></h6>
<img src ="E:\Dw练习\1564206847914.jpg"/>
</head>
<body>
</body>
</html>
效果: