一、html整体结构

首先，代码的一个整体结构，可以通过输入一个英文!来实现

加个备注：

二、常使用的一些标签

1、段落标记：p

段落名

截图：

网页中的显示：

2、换行标签：br

例：

网页中的显示：

3、项目列表：ul、li

项目名称

例：

网页中的显示：

4、超链接：a

链接名称

有两种使用方式：

1. 使用的网页链接：网页中的显示：
2. 使用的是本地的文件：网页中的显示：

这里链接地址是图片，按理说应该直接是显示图片的，但是这里为什么没有直接显示图片，而只是链接呢，等会再搜搜原因。

5、图片引用标签：img

例：在这个新建网页下的文件夹中的1.png：

网页中的显示：

6、空链接：#

名称

例：

网页中的显示：

7、生成随机文本：lorem

lorem*n 

例：这里生成的以lorem开头，然后生成相应的行数。

8、锚记链接

（1）作用：简单的总结就是可以方便的跳转到所需的地方。

（2）使用方法：这里直接举个例子进行演示。

题目要求：就以前面生成的随机文本为例，该文本分成3个段，然后在文本的最前面显示一二三段，点击后直接跳到相应的段落。

实现步骤：

1. 首先在每个段落前面使用name锚记和a标签标记每个段落：
2. 然后在最前面写上想要跳转的位置：

当然，这个跳转是在文本很长的情况下才会显示出跳转的那个过程，如果文本过短，是看不出跳转的过程的。

9、块状元素：div

（1）作用：通常做布局使用，每个div里面的文本独占一行

（2）使用方式：

文本内容

例：

网页中的显示：

三、样式位置

常用的样式位置分为三种：行内样式span、内部样式、链接式。（通过谷歌彩蛋案例说明三种你样式位置之间的区别）

示例一：谷歌彩蛋案例

1、行内样式

（1）作用

通常做修饰用，多个span里面的文本共享一行

（2）使用方式

内容

（3）行内元素：span

文本内容

例：

网页中的显示：

（4）示例

修改文本的颜色：

Google

显示的结果：

但是可以看得出来，这个字母很小，如果想要调整大小，可以使用div和span结合使用：

Google

显示的结果：

问题：如果说一个html中有很多修改Google中的某个字母的颜色，使用行内样式修改的内容太多，所以，这是就可以使用到下面的一个样式了。

2、内部样式

（1）定义

在和之间.类型名{属性：属性名}，写的时候，要写在之间。

（2）调用

使用class=”类型名”进行调用。

（3）示例

定义代码（要放在和之间）

.g1{color:antiquewhite;}.o1{color:rgb(212, 132, 26);}.o2{color:rgb(64, 189, 6);}.g2{color:rgb(49, 7, 217);}.l1{color:rgb(221, 5, 131);}.e1{color:rgb(217, 15, 15);}

调用代码（在body中）：

Google

显示界面：

（4）注意优先级问题

前面我们说了两种颜色的定义方式，一个是直接一个一个定义，一个是使用内部样式一次定义。那么就会出现两种定义方式一起出现的情况，这时候就需要考虑到优先级了。它们两的优先级谁高呢，那么就来实际操作观察一下吧。

就是用Google中的e作为例子吧。

内部样式中定义为红色：

行内样式中定义为绿色：

最终结果：

可以看到，最终结果为绿色，所以行内样式的优先级是高于内部优先级的。

使用内部样式能够解决一次性修改多个字母的问题，如果出现新的要求：在多个网页中显示与这个相同的内容，那么就得每次都复制一遍，所以，下面得样式就能解决这个每次都复制的问题，实现只定义一次。

3、链接式

（1）定义

新建一个后缀为.css的文件，然后在里面编辑，内容就和内部样式style里面的内容一样。

（2）使用

1. 先将内部样式style中的内容存到.css文件中
2. 在.html（即网页代码）中的题目后面写上调用.css的文件名。即（以css.css文件为例）

   截图：

（3）示例

结果显示：

那么这种方式和行内样式对比，哪个优先级高呢？依旧以e为例，设置行内样式的e为red

最终结果：

可以看到颜色变成了红色，所以，行内样式的优先级比链接式高。

再判断一下，内部样式和链接式的优先级（但是没啥必要，只是好奇）

内部样式，定义为红色：

链接式，定义为紫色：

最终结果，是红色。

所以，内部样式的优先级高于链接式。

样式位置优先级

根据三种样式位置的优先级按从高到低为：

行内样式>内部样式>链接式

四、样式类型

常用的样式类型有四种：类别选择器、标记选择器、ID选择器、伪类选择器。

１、类别选择器

自定义的一种类型

（1）定义：.类型名{属性：属性值；}

（2）调用：class=”类型名“

感觉内部样式和链接式就属于类别选择器的一种，不知道理解对不对，先记一下吧。

２、标记选择器

改变html标记的默认效果

（1）定义

html标记{属性：属性值；}

（2）调用

不需要调用

（3）示例

如果放在网页中，即.html文件下:

可以看到span是不会变色的，就说明在这里面不能使用，要在.css文件中使用：

结果演示：

可以看到，只要实在span中的内容，都会变成我们在.css中设置的span的格式，即实现了html默认模式下的格式。

（4）几种字体大小

常用的字体大小有5中，用h来表示，根据h后的数字不同，大小不同，一共有h1,h2,h3,h4,h5物种，h1最大，h5最小。

例：

111
222
333
444
555

结果演示：

３、ID选择器

一般用来布局，具有唯一性（原则上不能重名）。

（1）定义

在.css文件中，定义为#ID{属性，属性值；}

（2）调用

（3）示例

在.html文件中调用：

效果图：

（4）设置某ID下的格式

例：#top a{}

在.html文件下：

top石河子大学教务处

在.css文件下：

#top a{color:rgb(0, 255, 89);}

结果演示：

#ID ul{}

首先查看未设置top下ul的格式：

.html文件中：

top
石河子大学教务处
aaa
bbb
ccc

结果：

然后在.css文件下设置：

#top ul{list-style-type: none; /* 表示将top类型下的ul标签的默认格式清零*/}

结果如下：

4、伪类选择器

（1）定义

内容

（2）类型

有四种类型（在.css文件下使用），如下：

a:link { /* 选择处于未访问状态的超链接 */color: aqua; /* 设置超链接文字颜色为青色 */}a:visited { /* 选择处于已访问状态的超链接 */color: brown; /* 设置已访问超链接文字颜色为棕色 */}a:hover { /* 选择鼠标悬停在超链接上的状态，即鼠标经过状态*/color: chartreuse; /* 设置鼠标悬停时超链接文字颜色为黄绿色 */}a:active { /* 选择用户点击超链接但还未释放鼠标按钮的状态 ，即长按状态*/color: red; /* 设置活动中（被点击）超链接文字颜色为红色 */}

（3）示例

结果：

未点击：

已点击：

鼠标经过：

鼠标长按：

五、盒子模型

1. 任何对象有宽度和高度
2. 任何对象都有边框border
3. 对象内容和边框之间的距离叫做内边距padding。padding:10px(表示上下左右均为10px)padding:10px 20px 30px 40px(顺序是：上右左下)padding-top:10px(表示与上边的距离是10px)

虽然上面的知识感觉自己都会，但是如果真的要设置一个简单的网页，那么我还是会出很多错，所以，下面就开始一步一步练习吧。

六、常用属性

1、margin

外边距：边框与边框外部的内容距离。

margin：10px；表示上下左右外边距均为10px

margin:0px auto；表示上下为0，左右为自适应

如果两个部分都设置外边距了，那么这两个部分之间的距离该怎么计算呢？

规则：两部分为上下关系时：求两者margin的最大值作为两者的距离；

两部分为左右关系时：求两者的和作为两者的距离。

2、padding

内边距：边框里面的内容和边框之间的距离。

padding-top:表示内容的上边距。

3、background

修改背景相关的属性。

说明：background-image:url(图片名) 用来将该图片设置为网页的背景。

但是，需要注意的是，默认的是图片无限的填充形成整个背景，如果想要值填充一行或者一列的话，就可以使用padding-repeat:x(表示填充背景图片为横向的一行)；padding-repeat:y表示填充背景图片为纵向的一行。

4、font-size

设置字体大小。例如：font-size：10px;

5、color

设置颜色。例如：color：blue;

6、text-align

设置内容的对齐方式。

center：居中对齐

justify：两边对齐

这两者的区别就是，居中的时候不管一行中字数的多少，都是居中。

7、float

表示浮动，常用的有两种，left和right。

如果想详细了解，可以参考这位博主的文章（侵权联系删除）：

html—-float属性详解，小白学习笔记_htmlfloat属性-CSDN博客

8、width、height

内容的宽度和高度。

七、实际操作

示例一：设置三部分

设置三部分，然后中间的部分分为左部分和右部分。即（忽略掉箭头）：

实现过程：

首先，需要先分三个部分，上中下，然后再到中间的部分进行划分。

实现这个功能，就需要在.css文件中使用定义三个ID选择器，然后在.html文件中使用id=”ID名”来调用。两部分代码如图所示（这里就不加代码了，直接发个图片，后面实现了，再将代码全部粘上来）

下面，将中间的部分进行分块。分块方式和前面的三个部分没什么区别，只是前面的三个是在body中间直接使用块状元素div，而这个分块是在中间部分进行调用。所以，按照这个思路进行分块，设置名称就为left和right。

但是，设置left和right的宽度的时候就需要计算了，因为它们两个是共同分配中间部分了。如果中间部分没有设置内边距的话，就直接将两部分相加得到总的值就可。

但是一般情况下，是会设置内边距的，这样就需要减掉两个内边距。像这个例子中，总的是1000px,内边距为10px,左右都有，所以就是可以分配的距离为1000px-20px=980px,然后将这两者分成480px和500px。

但是我发现，我的这个结果出来的时候两部分之间有空隙，所以就是说明，我的计算可能出错了。

所以，我就重新去学习怎么计算了……

设置的width和height是内容的宽度和高度，所以减掉的应该就是这两部分左右的边框，左右最后会重合，所以是减3，总长即为997。（暂时理解是这样，后面请教一下别人，在修改吧。）

.html文件内容：

topleftrightbottom

.css文件内容：

#top { /* 选择id为 "top" 的元素 */width: 1000px; /* 设置元素宽度为 300 像素 */height:200px; /* 设置元素高度为 100 像素 */border: 1px solid black; /* 设置边框为 1像素宽的实线黑色边框 */padding:10px;text-align: center;}#content {width: 1000px; height:500px; border: 1px solid black;padding:10px;/* margin: 10px; */text-align: justify;}#left{width: 497px; height:500px; border: 1px solid black;/* padding:10px; */float: left; /*设置向左浮动*/text-align: center;}#right{width: 500px; height:500px; border: 1px solid black;/* padding:10px 20px 30px 40px; */float: right;text-align: center;}#bottom{ width: 1000px; height:200px; border: 1px solid black; padding:10px;text-align: center;}

最终结果：

示例二：生成一个简单的网页

要求的最终效果：

出现的问题：

问题一：为什么设置了list-style-type: none;但是依旧是竖直排列？

出错点：修改的是ul而不是li，要清除li的默认格式，才会成功取消。

问题二：为什么在content中输入的字是靠右的，而不是靠左？

出错点：不清楚

解决办法：先输入文字内容，然后使用
换行。

问题三：如何解决content的right中的文字的大小格式？

如果按照h3和h2的话，是有点错位的。

解决办法：我现在唯一想到的办法就是修改h2、h3的字体大小了。等后面再有办法再改吧。

根据我薄弱的基础，我最终生成的结果如下（中间的有一部分我没有做，因为看起来和前面的字体一样，如果我的方法是错误的，那么也没有做的必要，等到我学会其他比较好的方法，再继续吧）：

.html文件内容：

<!-- .e1{color:rgb(254, 63, 5);} -->
About
Experiences
Achievement
Skills
Hi,I'm Draco the Dragon

I LIVE IN
FAR NORTHERN SKY
Draco is a constellation in the far northern sky.Its name is Latin for dragon.Draco is
circumpolar(that is,never setting)for many observers in the northern hemisphere.It was
one of the 48 constellations listed by the 2nd century astronomer Ptolemy.
~~~~~~
Work
EXPERIENCES
2014-2015
PT Traveloka Indonesia
Web Designer

2013-2014
Wego
UI/UX Desig ner

2014-2015
Garuda Indonesia
System Designer

~~~~~~

Handcrafted by Afnizar Nur Ghifari

.css文件内容：

 body{ /*这里将默认模式下的格式清0 */margin:0px;padding:0px;}#top { /* 选择id为 "top" 的元素 */width: 900px; /* 设置元素宽度为 300 像素 */height:80px; /* 设置元素高度为 100 像素 */border: 1px solid black; /* 设置边框为 1像素宽的实线黑色边框 */padding:10px;text-align: center;margin:0px auto;}#top li{ /*这里设置li*/list-style-type: none;/*将竖行的项目变成横向的样式*/float:left;margin:10px 60px;}#content {width: 900px; height:130px; border: 1px solid black;padding:10px;/* margin: 10px; */text-align: justify;margin:0px auto;background-image: url(draco.png);}#left{width: 83px; height:82px; border: 1px solid black;/* padding:10px; */float: left;/* 设置向左浮动*/text-align: center;background-image: url(girl.png);}#right{width: 814px; height:82px; border: 1px solid black;/* padding:10px 20px 30px 40px; */float: right;text-align: justify;}#right h3{font-size: 16px;}#right h2{font-size: 20px;}#bottom{ width: 900px; height:800px; border: 1px solid black; padding:10px;text-align: justify;margin:0px auto;}#bottom h5{font-size: 14px;color: rgb(16, 15, 15);}#bottom h4{font-size: 13px;color: rgb(142, 147, 150);}#di{width: 900px; height:425px; border: 1px solid black; padding:10px;text-align: center;margin:0px auto;}#shang{width: 900px; height:375px; border: 1px solid black; text-align: center;margin:0px auto;background-image: url(bottom.png);}#xia{width: 900px; height:47px; border: 1px solid black; text-align: center;margin:0px auto;}#zuo{width: 500px; height:27px; border: 1px solid black; float: left;margin:0px auto;padding: 10px 0px;font-size: 18px;color:darkgray;}#you{width: 397px; height:47px; border: 1px solid black; margin:0px auto;float: right;}#tb{width: 131px; height:26px; background-image: url(tb.PNG);text-align: center;

加油吧，毕竟别人一遍过的东西，我敲好几遍也不一定会用，还有什么理由摆烂呢？加油加油，都会好的。。。