HTML学习笔记(1)

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>

效果:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值