前端学习之HTML

1、html的基本结构

a.首先是注释信息,在html中使用<!--xxx-->这样的方式来进行注释

b.DOCTYPE,这是告诉浏览器所使用规范,一般可以不加这个,因为现在的浏览器默认所使用的规范为html

c.head标签,表示网页的头部,其中会放入其他标签

d.meta标签,这是一个描述性的标签,它会描述一些网页的基本信息,如所使用的编码啦,关键词啦等等通常使用name和context的组合

e.title标签,这是html的标题

d.body标签,其中存放的是网页的主体部分

 

<!--这个是注释-->>
<!--DOCTYPE:告诉浏览器所使用规范(默认为html)-->>

<!DOCTYPE html>

<html lang="en">
<!--head标签代表网页头部-->>
<head>
<!--meta描述性标签,它用来描述网页的一些信息-->>
<meta charset="UTF-8">
<meta name="keyword" content="test">
<meta name="description" content="学习html">
<!--title标签代表网页标题-->
<title>我的第一个网页</title>
</head>
<!--body标签代表网页主题-->
<body>
hello,world
</body>
</html>

 

这样就可以制作一个基本的网页了

2、网页基本标签

a.标题标签<h1></h1> <h2></h2> <h3></h3>分别代表一级、二级、三级标签

b.段落标签<p></p>表示一段,无论中间是否有回车,换行最终都只会显示为一段

c.换行标签<br/>这是一个自闭合标签遇到这个标签会自动换行,并且换行标签和段落标签有所不同(后续代码中会有展示)

d.字体样式标签,粗体为strong,斜体为em

e.特殊符号,各种特殊符号会由&加上一段字符串表示,如 表示空格,在body中无论你连续输入多少空格,最终显示都只有一个

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本标签</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<!--段落标签-->
<p>两只老虎 两只老虎</p>

<p> 跑得快 跑得快</p>

<p> 一只没有耳朵 一只没有尾巴</p>

<p> 真奇怪 真奇怪</p>

<p> 两只老虎 两只老虎</p>

<p> 跑得快 跑得快</p>

<p> 一只没有耳朵 一只没有尾巴</p>

<p> 真奇怪 真奇怪</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
两只老虎 两只老虎<br/>

跑得快 跑得快<br/>

一只没有耳朵 一只没有尾巴<br/>

真奇怪 真奇怪<br/>

两只老虎 两只老虎<br/>

跑得快 跑得快<br/>

一只没有耳朵 一只没有尾巴<br/>

真奇怪 真奇怪<br/>

<!---->
<h1>字体样式标签</h1>
粗体:<strong>我爱前端</strong>
斜体:<em>我爱前端</em>
<br/>
<!--特殊符号-->
空 格
<br/>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格

</body>
</html>