HTML入门编写
ShineEternal
2018-12-21 20:41:17
## 今天给大家带来的是HTML初步讲解（即第一趴）。
---------------
问题区：
# 1、什么是HTML？
先来个百度解说压阵。
> html，全称Hypertext Markup Language，也就是“超文本链接标示语言”。HTML文本是由 HTML命令组成的描述性文本，HTML 命令可以说明文字、 图形、动画、声音、表格、链接等。 即平常上网所看到的的网页。
HTML就是类似c++的语言，但今天的讲解中，并没有诸多的算法，简单的来说，就是一种模拟，用来制作网页，目前只能使自己看到。别急，还是可以公开的。
# 2、HTML需要什么专业的编译软件吗？
并不是。当然还是有的（VScode等等），只是我们现在最好的选择是记事本。因为记事本不会干扰我们的任何输入，能让我们自由的编写。
# 3、HTML有什么特点吗？
1、简易性：
> 超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
用更吸引你的方式来说就是用记事本编写即可。
2、可扩展性：
> 超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
这个主要是可以灵活的添加而不需要太多的改动。
3、平台无关性：
> 虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
就是大家都可以不经转化的解析此语言，
4、通用性：
> HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
这一项与平台无关性相似。
### 注：如果一行后带有$***$字样，即为这一步要学习的。
-----
## 开始学习：
# 编写环境的准备：
在任意位置单击鼠标右键，找到新建，再点击记事本即可，然后选择自己的重命名方式，将后缀改成$.html$,然后双击鼠标左键，就可以看到此html在您默认的浏览器中打开。
那么，想打开记事本编写怎么办？
单击鼠标右键将打开方式选为记事本即可。。。
------
好了好了，正式进入主题。
### 第零步，我们要先像准备头文件和括号一样，准备如下内容：
```html
<html>***
</html>***
```
从此开始，我们要注意一点：'< >'大多数成对出现，而且一般后面的比前面的多一个/，中间的地方来相应的写内容。
## 第一步：为自己的文章添加标题
PS：这里的标题指任务栏的页篇文字，即如果打开洛谷首页，上方会显示：**首页-洛谷|计算机科学新生态**
如何编写呢？
```html
<html>
<head>//注意要再开一对head，<html>里不能直接包含<title>***
<title>my first html!</title>***
</head>***
</html>
```
一般建议大家在中间空一些行，这样显示更清楚。
在记事本中输入以下内容，就能看到显示了。
## 第二步：写出一个段落。
```html
<html>
<head>
<title>my first html!</title>
</head>
<body>***
<p>hello world！</p>***
</body>***
</html>
```
这样就能打出一个段落，其实相当于打一行字之后换行。这次的别忘了要包含在body中哦，可以这样解释：
> html为整体的框架，任何网页必须包含，head为任务栏标题等不在页面显示的语句编写区，body为显示语句的编写区。
### 那有些人不禁要问：如何用分割线来隔开文字呢？
我们只需如下操作：
```html
<html>
<head>
<title>my first html!</title>
</head>
<body>
<p>hello world！</p>
<hr/>***
</body>
</html>
```
多简单，短短五个字符搞定！
不过，有没有细心的同学看到了这一次的$<>$和之前有何不同呢？
没错，就是**没有成对出现**
> 这是html中的个例，大多数的<>都是成对出现（格式见前面代码），而这个是独个出现，在今天的学习中，后面还会遇到这种情况。
哦，既然这样，那我顺便给大家介绍个吧。
### 换行：
刚才我们所知道的换行方式只有写个段落，现在我们可以自由的控制换行了！
```html
<html>
<head>
<title>my first html!</title>
</head>
<body>
<p>hello world！</p>
<hr/>
<br/>***
</body>
</html>
```
也是十分的easy呢~
> 其实，一般的已经不需要在此基础上添加任何内容的语句一般较为简易。
**PS：到现在为止，我想您已经知道编写的大概框架，为了大家的阅读效果，下面的代码语句将只放新添加的。
### 第三步：简易的修饰你的文字
#### NO.1:粗体
```html
<b>我是粗体</b>
```
#### NO.2:斜体
```html
<i>我是斜体</i>
```
#### NO.3:小字体
```html
<small>我是小字体</small>
```
目前先介绍这些，还要注意，标签对文字修饰可以多个，
e.g.：
```html
<b><i>我又粗又斜</i></b>
```
### 第四步：图片插入
```html
<img src="xxx.jpg" alt="对吗?" />
```
将你的图片存在本机上与此html在同一个目录下，然后将图片的名称连同后缀名一同放到src=“”里即可，然后后面的alt=“”可以添加文字解释图片。
### 第五步：插入链接：
```html
<a href="https://www.luogu.org/">这是一个指向洛谷的链接</a>
```
然后就是显示为‘这是一个指向洛谷的链接’，点击后跳转到洛谷首页。
### 第六步：跳转
相信你在知道以上步骤时就可以编写出很多的代码，那么，如何制作像目录一样点击便可跳转到某处呢？
我们只需编写如下代码：
```html
<p><a href="#heading1">转到标题1</a></p>
```
如想跳转到某处，就这样：
```html
<h1 id="heading1">标题1</h1>
```
在这一条下面键入内容，即可实现。
### 第六步：制作表格
~~相信这一步大家肯定非常期待~~
下面我来介绍一下表格的制作方法。
```html
<table border="1">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
```
以上是最简单的表格制作。
其中
```html
<tr>
</tr>
```
为表格的换行。
而
```html
<td>
</td>
```
即制作每一个格子。
```html
<table>
</table>
```
是每一个表格开始制作的区域。
# 最后，送给大家一个用法的总结：
```javascript
<html>
<head>
<title>html用法记录</title>
</head>
<body>
<p>我是一个段落</p>
<i>我是斜体</i>
<br/>
<small>我是小字体</small>
<br/>
<b>我是粗体</b>
<br/>
我是上一行<br/>我是下一行
<p>接下来是一条水平线</p>
<hr/>
<li>我是第一个列表项</li>
<li>我是第二个</li>
<a href="https://www.luogu.org/">这是一个指向洛谷的链接</a>
<br/>
<p><a href="#heading1">转到标题1</a></p>
<p><a href="#heading2">转到标题2</a></p>
<h1 id="heading1">标题1</h1>
<p>啦啦啦，过来喽</p>
<h1 id="heading2">标题2</h1>
<p>嘿嘿嘿，还是没毛病</p>
<br/>
<img src="76107.jpg" alt="对吗?" />
<br/><br/><br/>
<table border="1">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
</body>
</html>
```
期待下次再见！
# 本文完结，下一趴会介绍一下CSS与Javascript，敬请期待！