HTML网页制作常用标签及说明前端开

上篇文章我们介绍了怎么创建一个最基本的网页,这篇我们介绍一下经常被使用的标签及用途。

显示在浏览器中的内容都要添加在基本模板中的body标签的中间,这点一定要记住!!

下面的body标签中各个标签,做了解释说明,大概了解各个标签长什么样子,能记住就更好了。

下面的HTML代码可以直接复制到你的网页中(创建HTML文件的方法上篇文章有介绍直接简单粗暴的教你如何制作一个网页)

!DOCTYPEhtml

htmllang=en

head

metacharset=UTF-8

metaname=viewportcontent=width=device-width,initial-scale=1.0

title这里是网页的标题,你看到在哪里显示的了吗?——橙先生/title

/head

body

divdiv标签可以理解为是个空盒子,什么都能装下/div

!--img标签用来插入图片,src=图片路径,alt属性可选,用来描述图片,imgsrc=图片路径alt=图片的说明(可选)--

这是一张图片,注意这里的img标签形式,这是个单标签

imgsrc=图片路径alt=图片的说明(可选)

!--a标签用来添加超链接,target=_blank属性用来点击链接后跳转到新的浏览器页签,href=需要跳转到的网址或是文件--

ahref=需要跳转到的网址或是文件,如target=_blank这个是文字的链接,也可以在其他内容上添加(比如图片)/a

!--p标签用来填入文字--

p在这里填入文字/p

p在这里填入文字/p

!--span标签用来添加文字等,属于行内元素--

span在这里添加你想要的内容/spanspan!!!!!!这里是另外一段内容/span

!--这里说说块元素和行内元素,像上面的P标签就是块元素,它独占一行,

span标签就是行内元素,可以在一行中显示多个span标签内容--

!--br标签用来换行--

br

!--h1至h6是有固定大小的标题/文字标签--

h1这是h1里的内容/h1

h2这是h2里的内容/h2

h3这是h3里的内容/h3

h4这是h4里的内容/h4

h5这是h5里的内容/h5

h6这是h6里的内容/h6

!--ul和li是固定的搭配,是无序列表,可以有N个li--

ul

li这里是无序列表1/li

li这里是无序列表2/li

li这里是无序列表3/li

/ul

!--ol和li是固定的搭配,是有序列表,可以有N个li--

ol

li这里是有序列表1/li

li这里是有序列表2/li

/ol

!--table、tr和td是固定搭配:table是表格,tr是表格里的行,td是表格里的列,表格里可以有N行N列--

table

tr

td表格中第一行的第1列/td

td表格中第一行的第2列/td

/tr

tr

td表格中第二行的第1列/td

td表格中第二行的第2列/td

td表格中第二行的第3列/td

/tr

/table

/body

/html

上面的内容已经大致了解了吧?我们将介绍各种常用到的样式,让各个标签更加的美观。记得


转载请注明:http://www.aierlanlan.com/grrz/2071.html