写在前面

这年头还有谁不会写个网页啊，，呜呜呜咱爬了…

​ 作为软工人一定都听说过web三件套叭，，反正咱就只是听过名字罢了 就是 HTML / CSS / JavaScript。这三样东西就构成了一个漂亮的小地盘，也就是网页啦 (｢･ω･)｢

三个东西分别是干啥的呢：

  • HTML: 网页的结构。即网页中包含哪些内容，就是图片，文字，视频什么的都要在这里插。拿盖房子来说，html相当于建一个骨架。
  • CSS: 样式。各种元素的表现样式。例如字体，颜色，动画效果等。相当于装饰房子。
  • JavaScript: 行为。控制网页要做什么。比如把鼠标放在这里就会怎么样啊，点击一下按钮会怎么样啊。js就很有编程的味道啦，条件 循环 函数什么的…跟咱现在学的C差不多的感觉呢。

注：现在HTML基本采用HTML5标准，学习时请注意这点，如果不会区分的话就找时间最近的教程学习。

咱这边仍然是主要在菜鸟教程学的，，有实例又有在线编辑器不香么~~（真的没收广告费）~~ w3school也不错啦

浏览器用的chrome，推荐还是chrome, edge, firefox这种主流的浏览器叭（11, 110, 0 爪巴）

在学习过程中遇到任何问题，请善用搜索引擎或在w3school/runoob查询

HTML文档

感受一下

先在浏览器中随便开个简单的网页 http://mytju.com/classcode/tools/messyCodeRecover.asp （至于为什么是这个网页而不是某度…待会您可以去看看某度的源代码试试。。）

我们按一下 Ctrl + U ，或者 右键 -> "查看网页源代码" 。弹出了一堆代码Σ(っ °Д °;)っ

莫方莫方，，现在就来细说，，

HTML文档的组成

我们可以看到， 网页中有许多像 <xxx> 这样的东西，一对 <xxx>（开始标签） 和 </xxx> （结束标签），有点类似C语言中的 { 和 } 我们称之为标签或元素。HTML 文档包含了HTML 标签 及 文本 内容。

HTML文档的结构

先来看一个实例：

1
2
3
4
5
6
7
8
9
<html>
    <head>
        <title> 页面标题 </title>
    </head>
    <body>
        <h1> 标题 </h1>
        随便写点什么qwq
    </body>
</html>

食用方法：复制这段内容到笔记本，后缀名改成.html，用浏览器打开即可。

或者用菜鸟在线编辑器:https://www.runoob.com/try/try.php?filename=tryhtml_intro

  • 总的来说，html文档由 head 和 body 两部分构成。

  • 其中head里可以插入样式，脚本，各种meta信息什么的~~（又不在讲人话了）~~。head内容是不被显示在网页里面的。目前我们只需要知道head里面可以插一个 <title> 页面标题 </title> 就行辣。对应的就是上图左上角那里的页面标题|･ω･｀)

  • body是文档内容的主体，各种东西比如 图片，段落，视频什么的都在这里插入。

如何掌握各种标签的使用

建议背诵HTML 参考手册- (HTML5 标准) （大雾）

跟cyq学长建议的一样，html这种东西应该边做边学，遇到哪里不会就去查一下，写得多了自然就都会了qwq

至于如何知道有什么标签及其用途，那自然要善用教程/搜索引擎啦，，

下面仅介绍一些简单的标签：

顺带一提 <!-- xxx --> 是html中的注释。

实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!--指定文档类型为html，初学省略也没啥关系（小声）-->
<!DOCTYPE html>
<html>
    <head>
        <!--指定字符集为utf-8，初学省略也没啥关系（小声）-->
        <meta charset="utf-8">
        <title> 页面标题 </title>
    </head>
    <body>
        <h1> 一级标题 </h1>
        <h2> 二级标题 </h2>
        <h6> 六级标题 </h6>
        <p> 插入一个段落 </p>
        <!--插入图片 src指定链接/路径 width设置大小-->
        <!--这里src用了url链接，也就是随时都可以通过网络访问-->
    	<img src="https://s3.ax1x.com/2020/11/19/DMEzYn.png" width = "500px">
        <!--插入音频 autoplay自动播放 loop循环 src指定路径-->
        <!--这里src用了本地路径，只能在本地访问-->
        <audio autoplay="autoplay" loop="loop" src="sources/bgm.mp3"> </audio>
        <!--换行-->
        <br>
        <!--在文字上插入链接 href指定链接-->
        <a href="https://eruihniyhbkbnf.github.io/"> 链接到自己blog的作者太屑了 </a>
    </body>
</html>

不放效果图了，按上述食用方法就可以自己看啦。

我们可以看到一个开始标签中并不只有标签名字，其他那些东西叫做属性。

标签的属性

比如这个 <img src="https://s3.ax1x.com/2020/11/19/DMEzYn.png" width = "500px"> 其中 src 和 width 就是属性，用于给元素提供附加信息。

  • 属性一般属于元素的开始标签。
  • 属性总是以名称/值对的形式出现，比如：name=“value”。

如何添加样式

CSS是啥？在学了在学了qwq

方便起见，这里仅展示给局部元素添加样式的方法。

实例：（以下代码插入在<body> </body>里）

1
2
3
<h1 style="color:blue;text-align:center">这是一个标题</h1>
<p style="color:green">这是一个段落。</p>
<img src="https://s3.ax1x.com/2020/11/20/DM3b6J.jpg" width = "150px">

运行结果：

这是一个标题

这是一个段落。

标签属性里有个叫style的东西就挺牛逼的(｀･ω･´)ﾉ

style属性的属性值就是 一个或多个由分号分隔的 CSS 属性和值。

比如上面代码中 color 和 text-align （文本对齐）都是css属性，blue 和 center 分别是对应值。

<标签名 style="CSS属性1:值1; CSS属性2:值2; ..."></标签名>

寻找合适的HTML编辑器

工欲善其事，必先利其器。（正经得我自己都怕了qwq

常见的html编辑工具有很多，咱这边用的vsc（u1s1, vsc这个自动补全实在是太香了(๑°3°๑)）

不过vsc好像配置起来有点难？（其实不难，就是 咱懒得写 比较麻烦hhh）

咱这边推荐的是Notepad++ （因为除了vsc，咱只认识Notepad++了）

安装包下载地址：v7.9.1 64-bit x64 Installer

Notepad装好就可以直接用啦，将新文件保存为 xxx.html，或者在外部新建一个html文档用Notepad打开。

保存文档为 .html 后，再写html就可以看到高亮了，可以正式开始写作啦(๑＞ڡ＜)☆

用Notepad++打开是编辑，用浏览器直接打开可以查看效果。

至此我们就可以吹牛逼说自己会写网页了，不是吗？～(￣▽￣～)~

先写到这里，，懒~~~_(:з」∠)_

这篇blog打算长期更新，后面因该会写一些css，js，还有白嫖GitHub pages 之类的内容，，

部分内容将在此参考：网页设计初学者可制作的简单网页——我的第二篇博客

反正最近是没时间写啦qwq

然而这会导致一直咕咕咕到寒假（迫真）

最后放一下咱写的网页：紅魔館の旅行アルバム

谁知道还能不能找到。。瞎push丢了也说不定qwq

最近GitHub又8大行，，可能要加载一大段时间，，进不去就算了QAQ

latest upd:2020-11-20