WordPress 主题开发—HTML 基础

2019-06-2219:48:40 8 126 人看过

很久以前就说要开发一款自己的 WordPress 主题,由于没有时间和基础薄弱,一直没有开始。我又是非常倾向于把所有吹过的牛都实现的人,所以我决定从最基础的开始,一点一点完成它。

最基础的,就不得不从 HTML 超文本标记语言、CSS 样式表、JavaScript 编程语言开始说起,因为他们都是 WordPress 网页的基础组成部分,今天先说第一部分——HTML 基础部分。

WordPress 主题开发—HTML 基础

一、HTML 概述

 

1、网页的组成

一个网页由三个基本元素组成,分别是 HTML 超文本标记语言,CSS 层叠样式表和 JavaScript 编程语言。

HTML CSS JavaScript
网页框架 网页风格样式 网页交互(动作)

 

2、什么是 HTML?

HTML 指的是超文本标记语言(Hyper Text Markup Language),用来描述网页的一种语言。最基本的语法就是<开始标签>内容<结束标签>。一般成对出现,由开始标记符(标签)和结束标记符组成。
如:描述网页中的一个段落:<p>这是一个段落</p>

 

3、什么是 HTML 标签

1、HTML 标签是由尖括号包围的关键词,比如<html>

2、HTML 标签通常成对出现,比如<p></p>

3、标签对中第一个标签是开始标签,第二个是结束标签。

4、结束标签比开始标签多一个"/"。

 

4、HTML 文件的结构

一个 HTML 文件(网页)主要由两个部分组成,网页头部(head)、网页主体(body)。

WordPress 主题开发—HTML 基础

一个 HTML 文档的基本结构如下所示:

<html>
    <head>
        文件头内容放在 head 标签之间
    </head>
    <body>
        文件主体内容放在 body 标签之间
    </body>
</html>

二、HTML 标签

HTML 元素由 HTML 标签和内容组成。基本格式为<开始标签>内容<结束标签>

 

1、头部<head>标签

常用的头部标签有以下几个:

头部标签:<head></head>

标题标签:<title></title>(用于定义网页标题)

元信息标签:<meta>(定义关键词、描述、重定向)

链接标签:<link>(链接外部资源,如样式表)

样式标签:<style></style>(内部引入样式)

注:一般情况下,<meta>标签和<link>标签只需要写开始标签,不需要写结束标签。

 

2、主体标签

主体标签是用来定义网页得主体内容得,所以相对头部标签就多得多,常用的有标题标签、段落标签、图像标签、列表标签、表格标签、超链接标签等。

主体标签:<body></body>

标题标签:<h1></h1><h2></h2>、……<h6></h6>

段落标签:<p></p>

图像标签:<img>

列表标签:<ol></ol>(有序列表)、<ul></ul>(无序列表)

表格标签:<table></table>

超链接标签:<a></a>

注:一般情况下,<img />标签只需要写开始标签,不需要写结束标签。

 

WordPress 主题开发—HTML 基础

三、HTML 属性

HTML 标签被标注属性,提供更多信息或实现更多效果。

HTML 属性语法格式:属性名称:属性值,如:中,align 是属性名称"对齐方式",lefe 是属性值"左对齐"。

HTML 属性一般都在开始标签中进行标注。

weinxin
博客小程序【一起行动派】
欢迎访问行动派博客小程序,小程序和博客同步更新,查看内容更加方便!
Action

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:8   其中:访客  6   博主  2

    • avatar boke112导航 4

      WordPress主题折腾起来容易点,懂得HTML\CSS\PHP\WordPress函数知识就差不多可以动手折腾了

        • avatar Action Admin

          @boke112导航 嗯嗯,决定从最简单的开始做起。

        • avatar 猫客工作室 0

          一口气阅读了好几篇,这篇写得最好!
          ———— 剑眉大侠博客(专门写引流文章的)

          • avatar wordpress建站吧 4

            主题开发从入门到放弃

            • avatar 子午物联网 1

              这个挺入门的

              • avatar 杂烩网 3

                看文章很容易 实战了脑子一片空白

                • avatar 留芳网 1

                  看着简单,做着难。