教服主们用HTML写自己的网页【pocketmine吧】

pocketmine吧关注：29,709贴子：235,550

8回复贴，共1页

教服主们用HTML写自己的网页

1.1.下载NotePad ++
首先，您需要下载NotePad ++，该网站是https://notepadplusplus.org/，最新支持系统：Win10
1.2.打开NotePad ++
当NotePad ++第一次打开时，会询问您需要的语言。如果您选择了中文版，您将看到中文版的NotePad ++。当您打开它时，它将为您打开一个名为new1的空白文件，你可以在白色的地方输入你需要的东西。
如果您想查看所有课程，请打开只看楼主模式井加Q群: 48 33 54 695

送TA礼物

1楼2017-08-28 21:55回复

1.3网页的基本结构
网页的基本结构主要由三组HTML标签所建立。
<html></html> - 定义为html档案，包裹着档案里所有标签的内容。
<head></head> - 档头，可包含网页标题，文字偏码，css，javacript，外部连接，关键字，网页描述等，所有有关网页的资料，不会在网页中显示出来。
<body></body> - 网页内容，网页的所有内容都会放在这个标签之间。
1.4 不可缺少的元素
除了基本结构外，还有几个标签是网页不可缺少的基本元素:
1.<!DOCTYPE html> - 文件种类，声明文件使用的是哪一个HTML版本，让浏览器根据HTML的版本的正确的显示网页内容。
2.<meta charset="utf-8"> - 网页文字编码，以往，不同的语言，使用不同的文字编码，如繁体中文使用big5 码，简体中文使用gb2312 码，utf-8表示网页采用适用于不同语言的Unicode文字编码，需要放在档头内。
3.<title></title> - 网页标题，出现在浏览器分页标签上，需要放在档头内。

来自Android客户端2楼2017-08-28 22:08

收起回复

学了二楼的几个HTML标签，便成了一个基本网页结构:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
我们称呼这些为源代码，在往后的例子中，将会重复使用这些基本结构，为了方便，各位可以将它储存使用。

来自Android客户端3楼2017-08-28 22:13

收起回复

1.5认识CSS
CSS，层叠样式表，英语设定网页上各元素的属性，如文字的大小，颜色，对齐方式，框线，背景，以及网页排版或者建立选单。
1.5.1 CSS的优点:
网页排版:
无需修改网页结构，只需修改css，就可以完全更改网页的面貌，实现了内容与设计分家的做法。
跨页共用:
假如网站内有一千个元素都用标题标签<h1>，即使它们分布于不同的页面上，我们只需要在档案中修改<h1>的属性，例如颜色，所有连接到CSS档案的网页，都会同时更改使用<h1>元素的颜色，不必逐个修改。

来自Android客户端6楼2017-08-28 22:30

收起回复

1.6 CSS语法
CSS主要分为选取项和属性设定两部分，例如:
h1 {color:blue;}
那么，h1就是选取项，{}的部分就是属性设定。
选取项指我们将会修改属性的元素，它可以是任何HTML标签，例如文要修改<h1>的颜色属性，便以<h1>为选取项，你也可以自定义选取项的名称，为他设定属性，在应用到不同的HTML标签上，这个我们之后会再说。
每种元素都有其属性设定，无文字的属性，有颜色，大小。设定属性的格式为{属性:值}，每组属性须以分号作为完结，并将所有属性置于{}之内，如上面设定了两组属性，分别是蓝色文字与文字大小。
要把CSS应用到HTML，可以使用标签:<style></style>。
用法是把<style></style>放到档头内，并将CSS码置于标签之内，这称为内置CSS，我们在之后会有详细说明。

来自Android客户端8楼2017-08-29 07:43

收起回复

1.7建立你第一个网页
在学了这些东西以后，你可以开始建立你自己的第一个网页:
1.请先在NotePad++，输入刚才学到的HTML和CSS码
2.在桌面生成一个名为www的文件夹
3.将档案储存到文件夹内，取名为index.html[副档名必须是.htm或.html]
4.双击index.html[或将档案拖曳到浏览器后]就可以看到你第一个作品了。

来自Android客户端12楼2017-08-30 09:22

2.1 基础标签
内容标题:
标签: <h1></h1> - <h6></h6>
将文字定义为标题，标题有六级大小，最大为<h1>，最少为<h6>，使用标签后，前后会出现换行。
段落
标签<p></p>
将文字之间有一段落，段落前后会出现换行。
换行
标签<br>
标签后的文字会安排在下一行
分隔线
标签<hr>
以横线分隔两个不同的主题。
注解
标签: 
注解中的文字不会在网页上显示。

来自Android客户端15楼2017-09-03 11:35

2.2文字格式
将内文定义为具有某种意义的文字，以特殊的方式出现
电脑程式码<code></code>
重要文字<strong></strong>
删除文字<del></del>
下标文字<sub></sub>
强调文字<em></em>
小文字<small></small>
插入文字<ins></ins>
上标文字<sup></sub>
电脑程式码我也不晓得有什么用。
强调文字呢就是有带微微的斜体。
重要文字就可以理解为粗体。
小文字呢其实也没什么用。
删除文字呢就是在文字上有一横。
插入文字不晓得有什么用。
下标文字是H2O的2用的
上标文字呢就像是2的2次方，就是那个二次方的那个数字用的。
[本人表达能力最近有所下降，希望你们能明白。]

来自Android客户端17楼2017-09-04 18:28

收起回复

2.3 置入图像
标签<img>
以下，我们将把image文件夹里的img.png置入网页，
<img src="image/img.png" width="200" height="150" alt="Image">
<img>的属性/值说明
src - 连结图像的位置
width - 图像宽度
height - 图像高度
alt - 鼠标放在图像上显示的文字

来自Android客户端20楼2017-09-05 21:05

收起回复

扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！

贴吧热议榜

8回复贴，共1页

<返回pocketmine吧

发表回复

发贴请遵守贴吧协议及“七条底线”贴吧投诉

内容:

使用签名档查看全部

发表

保存至快速回贴

日	一	二	三	四	五	六

教服主们用HTML写自己的网页

登录百度账号

扫二维码下载贴吧客户端