上篇文章我们介绍了怎么创建一个最基本的网页,这篇我们介绍一下经常被使用的标签及用途。
显示在浏览器中的内容都要添加在基本模板中的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
上面的内容已经大致了解了吧?我们将介绍各种常用到的样式,让各个标签更加的美观。记得