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:

说点什么吧




wireless earbuds moscow mule mugs bluetooth speakers waterproof camera best wireless earbuds best vacuum cleaner best drugstore foundation best dishwasher best waist trainer wireless headphones best vacuum 0594918 best bluetooth earbuds waterproof bluetooth speaker tattoo cover up action camera
订阅本站