WordPress主题(模板)修改教程(五):需要了解的html标签和属性

十一月 24
磊子 2011年 2 条评论

昨天讲了常用的wordpress主题函数和作用,今天磊子就来说下更基础的东西,html标签和属性,我这里讲一些比较用的多的,其余的就需要大家去查阅了和搜索网站了。我这边也有精通div+css的教材,因为容量比较大所以就没有上传,如果有需要的可以来联系我。我们在制作的和修改主题的时候,大部分都是使用html和css来对主题进行样式和排版上的修改。可以说制作一个简单的主题并不需要知道太多的wordpress函数和php代码,而html的话你就得非常了解和熟悉,你才能更好的去下手修改。

首先是基本的结构标签组成(大家可以对照着自己的html文件看一下)

<html>,表示是html文件

<head>,标签里面可以加网站标题,描述,样式还有js脚本等。

<title></title>,包含文件的标题,标题出现在浏览器标题栏中

</head>是<head> 的结束标签

<body>,放置浏览器中显示信息的所有标志和属性,其中内容在浏览器中显示.

</body>,是<body>的结束标签

</html>,是<html>的结束标签

然后在<body></body>标签之间就是我们主要用到的标签了。

1.<div></div> 是一个块级元素,浏览器通常会在 div 元素前后放置一个换行符。它常用的属性有id, class, title, style。写法例如:

<div class="test" id="test1" style="color:#FF0000",title="一个例子">这是一个例子</div>

//class值可以定义多个中间用空格隔开就可以,id只能有一个,style是直接给div里面的内容进行

//样式定义的,比如上面直接加了一个文件显示红色的css代码。title是对div内容的提示。

//我们用鼠标放在‘这是一个例子’上面时就会有这个提示告诉用户这是做什么的。

//通过定义class或者id的值我们就可以在css文件里面来给这个div内容加样式上去,写法是

// .test{}或者#test1 第一个是class的写法第二个是id值的写法,这样我们以后如果要给

//这个div加样式就可以去找下它的id值或者class值,然后在{}之间添加css代码。其他的html

//标签也是一样的,都可以用来定义,比如<a></a><p></p><h1></h2>等等

2.<a href=”” title=””></a>这个标签大家应该很熟悉主要是做链接用的,href里面填写链接的地址,我们也叫他锚文本。

3.<img src=”” alt=”” title=”” />图片标签,src里面填写图片的地址,alt图片说明,一般做seo的alt也需要添加内容上去。

4.<h1></h1>,<h2></h2>,<h3><h3>,<h4><h4>,<h5></h5>,<h6></h6>这些都是标题标签,标题大小由数字逐渐变小。

5.<form action=”” method=”” name=”” id=”” ></form>表单标签,用来提交一些信息,比如我们评论就需要用这个标签。属性以此是:需要把内容提交的地址,提交的方法,表单的名称,id值。

6.<input type=”” name=”” size=”” value=”” />可以用在<form>里面然后把内容提交给action地址,属性type定义它的类型,可以是文本框,复选框,密码框,按钮,单选按钮等

7.<p></p>段落标签,浏览器默认给它一个换行符。主要用在文章中。

8.<span></span>标签因为它不换行所以常用来内容组合。然后分别给定义样式。

9.<iframe src=””></iframe>框架标签,常常用来嵌入视频地址来显示在网站上面。src里面输入视频地址。常用属性包含有可以定义宽度width,高度height,是否显示滚动scrolling=””,yes显示no不显示。

10.<b></b>加粗标签可以给文件进行加粗,也可以用<strong></strong>

11.<center></center>居中标签,对文字或者图片等进行居中。

12.<br />换行标签,可以对文章进行强制换行。

13.<em></em>可以将文字斜体显示

14.<small></small>可以文件缩小对应的<big></big>将文件变大

15.<textarea cols=”” rows=”” ></textarea>文本域标签可以定义多行,如评论输入框,cols规定它的宽度,rows规定显示的行数。

16.<label> </label>标签为 input 元素定义标注(标记).

17.<style></style> 标签用于直接 html 文件中定义样式.

18.<table></table> 标签定义 html 表格,简单的 html 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成,tr 元素定义表格的行,th 元素定义表头,td 元素定义表格的单元。

以上这些呢,就是我们比较常用的标签了,这些标签用的多了慢慢的就记住了。html标签属性中还有一个事件属性,这个属性主要是用来执行和触发JavaScript事件。比如磊子首页的图片滚动,我们在某些网站注册时会弹出一个框来提示你注册哪些内容。这些都是事件触发后发生的。例如: onclick 鼠标点击后触发,onmousedown 鼠标按下时触发,onmousemove,鼠标移动时触发等等。有了这些属性我们就可以来执行javascript脚本。如果大家想了解的可以网上搜下html事件属性,磊子只是简单的介绍了下。

我们有了这些标签后,就可以做页面已经改一些简单的页面,但是直接用标签显示出来的东西是非常不美观的。我们还需要css来给这些标签定义样式,就像我们穿衣服一样。标签就相当于自己,而css定义的样式相当于我们穿的衣服。怎么打扮就看你自己的了。磊子会在明天给大家说下css常用到的样式属性。今天就是这些了,还是有什么问题和建议的希望大家多多留言,磊子会及时处理和改正的。

» 版权所有©转载必须以链接形式注明作者和原始出处:磊子的博客 » WordPress主题(模板)修改教程(五):需要了解的html标签和属性
» 地址:( Ctrl+C 复制 )
» 如果对本站感兴趣,请到网站右下方订阅本站,将为你带来更多精彩和实用的文章
» 如果您对这篇文章感兴趣,不妨小小的 捐助(Donate)一下博主吧,不管多少都是对博主最大的支持和鼓励哟,博主-磊子感谢大家的支持!!!

2 条留言 其中:访客:2 条, 博主:0 条

  1. 风往北吹说:

    多谢磊子老弟的分享!

  2. 520PC说:

    博主 我需要div+css教材 发给我哦 你自己说的 哈哈 :grin:

说点什么吧




订阅本站