admin 管理员组

文章数量: 1086019

Web网页设计之HTML

上一节我们认识了Web，认识了HTML，还介绍了一个工具WebStorm，这一节，我们就用这个工具学习一下HTML中的一些常用标签元素。

一、HTML基本结构

首先我们来说一下这个HTML的基本结构啊，打开我们的工具，然后创建一个文件夹，叫 case1

接着我们创建一个HTML，叫 class1

这个就是 HTML 的结构，HTML 标签中 有 HEAD（头标记），有BODY（主标记体）。这个就和人一样，HTML就是证明这个是个人，HEAD就是这个人的头，我们以后会在这个 HEAD 里面写很多关于这个HTML文件的信息，索引，定义的css、jQuery啥的。这个 BODY 里面就是写的网页主要显示的内容，比如说文本啊，图片啊都是在 BODY 里面的。

HEAD 里面的 这个 meta 就是可以设置网页的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

title 就是网页的名称，这个和文件名称不一样，这个 title 是显示在

这个地方的

我们来修改一下网站的 title ，然后在 body 中添加一些内容，然后使用浏览器打开

是不是很简单？

二、HTML 元素

HTML 元素其实我们已经接触到了，上面的 head 、body、title 这些都是，除了这些之外，还有很多啊，这个需要大家慢慢积累，然后去尝试的使用，每个元素都有自己独特的地方。

HTML 元素都是成对出现，当然，有一些特殊的，可以单独出现，不过不是很多。

而且，这些元素可以嵌套，这样就可以出来不同的效果，后面我们也会去说的

三、HTML 文本排版

HTML 我们已经说了，就是由 文本 和标签组成，文本的排版是很重要的，这里 HTML 给我们提供了很多文本排版的种类，我介绍其中的几种。

1.  span

span 标签是用来组合文档中的行内元素（这个行内元素啥的我们放后头讲，先认识就好），这个只有给它增加样式，它才会显示出不同的效果，不然就和普通文字一样。我们来试一下

2. p

p 标签被称为段落标签，啥叫段落标签呢？我们不换行，跟着这个上面的 span 标签往后写

可以看到啊，这个 HTML 中换行和页面上换不换行是没有任何关系的。段落标签就是从新另起一行，然后输出里面的内容

3. h1 h2 h3 ...

这个 h1、h2 啊这个标签，我们以后也会常常用到，数字越大，文字越小，这里我们来试一下

4. b

b 这个标签，表示的是粗体，就是比我们正常文字要加粗一些

5. br 、hr

br 是换行，这个和上面的不一样，这个可以单独写哦，hr 是表示 间隔线 我们来看一下

可以看到，hahahah 被换到下一行了

了

可以看到 3333 被 hr 隔离开来

大家如果想知道更多标签，我直接给你一个连接，自己去看， 里面有好多常用的：W3school

四、设置文字列表

这个文字列表啊，就是可以将文字按照顺序进行整齐排列，使用到的是 ul 元素，还有一个是 ol 元素，我们来看一下

1. ul

可以看到啊，我们将这些数字很工整的排列出来了，再看一下ol

2. ol

我们会发现，诶，为啥样子变了

这里我说一下，这个 ul 啊，样子就是点点，有序的，就是由数字，我是感觉各有各的用处，我们到时候会用这个去做菜单，到时候大家体验一下

五、 特殊符号

HTML 和 Java 一样啊，都是有特殊符号的，比如说 >  < 这玩意就是属于特殊符号，当然有很多啊，这个用到的时候去查看就好了，平时积累积累

<    &lt;
>    &gt;
©    &copy;
空格 &nbsp;
...

演示一下

这里我要和大家说一下，HTML 中空格是使用 &nbsp; 的啊，单纯打空格是没啥用的

六、HTML 属性

这个可以说是 HTML 中的一个重点，页面啥的好不好看，布局样子，都得靠这个属性啊，先来说说啥叫 HTML 属性

就用上面的 span 元素去说，如果我们想让里面的文字变成红色、然后尺寸是 26号，怎么去弄？这里就涉及到我们的标签属性了，每个标签都有自己的一套属性，不是说所有的属性可以用在任何标签上，这就好比穿衣服，平时穿 xxxl ，忽然给你一个 m 码的，你怎么穿？就算穿上了也肯定不好看。

这些属性我们都写在开始标签里面，每一个标签和每一个标签用这个空格隔开，举例一下

<xxx标签 属性1 属性2="xxxx" 属性3="xxxx" 属性4>asdfasdfasdf
</xxx标签>

接着，我们来简单介绍一些标签的属性，这个同样在于积累，一下子是学不会的。

可以看到啊，我们给 p 标签设置了一个属性，align 让这个 align="center"，也就是居中，然后我们的这些个数字就居中了，接着我们继续，这次给整个 body 设置一个颜色的属性，我们再来看一下

我们来刷新一下页面

整个的背景色就都被改变了

这里再说一点，这个颜色除去上面这个英文，我们还可以使用单词，比如说 red white black 等等，还能用 R/G/B 这个东西表示，这个 R/G/B 是 红绿蓝三个颜色的英文名称缩写，这个代表工业界的色彩标准，具体大家可以百度百科。这里我们来用一下

这个 R/G/B 的代码是固定的，去那里都是一样的，我这里给大家一个配色表，大家可以上去自己看  R/G/B 颜色 配色表

 

暂时就到这里，大家慢慢积累，下去以后多练习一下，熟悉熟悉，有需要可以加我QQ：2100363119 

 

 

 

 

 

本文标签： Web网页设计之HTML

版权声明：本文标题：Web网页设计之HTML 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1686561503a10513.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。