今天给大家带来的是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在您默认的浏览器中打开。

那么，想打开记事本编写怎么办？

单击鼠标右键将打开方式选为记事本即可。。。

好了好了，正式进入主题。

第零步，我们要先像准备头文件和括号一样，准备如下内容：

  1. <html>***
  3. </html>***

从此开始，我们要注意一点：’< >'大多数成对出现，而且一般后面的比前面的多一个/，中间的地方来相应的写内容。

第一步：为自己的文章添加标题

PS：这里的标题指任务栏的页篇文字，即如果打开洛谷首页，上方会显示：首页-洛谷|计算机科学新生态

如何编写呢？

  1. <html>
  3. <head>//注意要再开一对head，<html>里不能直接包含<title>***
  5. <title>my first html!</title>***
  7. </head>***
  9. </html>

一般建议大家在中间空一些行，这样显示更清楚。

在记事本中输入以下内容，就能看到显示了。

第二步：写出一个段落。

  1. <html>
  3. <head>
  5. <title>my first html!</title>
  7. </head>
  9. <body>***
  11. <p>hello world！</p>***
  13. </body>***
  15. </html>

这样就能打出一个段落，其实相当于打一行字之后换行。这次的别忘了要包含在body中哦，可以这样解释：

html为整体的框架，任何网页必须包含，head为任务栏标题等不在页面显示的语句编写区，body为显示语句的编写区。

那有些人不禁要问：如何用分割线来隔开文字呢？

我们只需如下操作：

  1. <html>
  3. <head>
  5. <title>my first html!</title>
  7. </head>
  9. <body>
  11. <p>hello world！</p>
  13. <hr/>***
  15. </body>
  17. </html>

多简单，短短五个字符搞定！

不过，有没有细心的同学看到了这一次的&lt;&gt;&lt;&gt;<>和之前有何不同呢？

没错，就是没有成对出现

这是html中的个例，大多数的<>都是成对出现（格式见前面代码），而这个是独个出现，在今天的学习中，后面还会遇到这种情况。

哦，既然这样，那我顺便给大家介绍个吧。

换行：

刚才我们所知道的换行方式只有写个段落，现在我们可以自由的控制换行了！

  1. <html>
  3. <head>
  5. <title>my first html!</title>
  7. </head>
  9. <body>
  11. <p>hello world！</p>
  13. <hr/>
  15. <br/>***
  17. </body>
  19. </html>

也是十分的easy呢~

其实，一般的已经不需要在此基础上添加任何内容的语句一般较为简易。

**PS：到现在为止，我想您已经知道编写的大概框架，为了大家的阅读效果，下面的代码语句将只放新添加的。

第三步：简易的修饰你的文字

NO.1:粗体


  2. <b>我是粗体</b>

NO.2:斜体

  1. <i>我是斜体</i>

NO.3:小字体

  1. <small>我是小字体</small>

目前先介绍这些，还要注意，标签对文字修饰可以多个，

e.g.：

  1. <b><i>我又粗又斜</i></b>

第四步：图片插入

  1. <img src="xxx.jpg" alt="对吗?" />

将你的图片存在本机上与此html在同一个目录下，然后将图片的名称连同后缀名一同放到src=“”里即可，然后后面的alt=“”可以添加文字解释图片。

第五步：插入链接：

  1. <a href="https://www.luogu.org/">这是一个指向洛谷的链接</a>

然后就是显示为‘这是一个指向洛谷的链接’，点击后跳转到洛谷首页。

第六步：跳转

相信你在知道以上步骤时就可以编写出很多的代码，那么，如何制作像目录一样点击便可跳转到某处呢？

我们只需编写如下代码：

  1. <p><a href="#heading1">转到标题1</a></p>

如想跳转到某处，就这样：

  1. <h1 id="heading1">标题1</h1>

在这一条下面键入内容，即可实现。

第六步：制作表格

相信这一步大家肯定非常期待

下面我来介绍一下表格的制作方法。

  1. <table border="1">
  3. <tr>
  5. <td>单元格1</td>
  7. <td>单元格2</td>
  9. </tr>
  11. <tr>
  13. <td>单元格3</td>
  15. <td>单元格4</td>
  17. </tr>
  19. </table>

以上是最简单的表格制作。

其中

  1. <tr>
  2. </tr>

为表格的换行。

而

  1. <td>
  2. </td>

即制作每一个格子。

  1. <table>
  2. </table>

是每一个表格开始制作的区域。

最后，送给大家一个用法的总结：

  1. <html>
  3. <head>
  5. <title>html用法记录</title>
  7. </head>
  9. <body>
  11. <p>我是一个段落</p>
  13. <i>我是斜体</i>
  15. <br/>
  17. <small>我是小字体</small>
  19. <br/>
  21. <b>我是粗体</b>
  23. <br/>
  25. 我是上一行<br/>我是下一行
  27. <p>接下来是一条水平线</p>
  29. <hr/>
  31. <li>我是第一个列表项</li>
  33. <li>我是第二个</li>
  35. <a href="https://www.luogu.org/">这是一个指向洛谷的链接</a>
  37. <br/>
  39. <p><a href="#heading1">转到标题1</a></p>
  41. <p><a href="#heading2">转到标题2</a></p>
  43. <h1 id="heading1">标题1</h1>
  45. <p>啦啦啦，过来喽</p>
  47. <h1 id="heading2">标题2</h1>
  49. <p>嘿嘿嘿，还是没毛病</p>
  51. <br/>
  53. <img src="76107.jpg" alt="对吗?" />
  55. <br/><br/><br/>
  57. <table border="1">
  59. <tr>
  61. <td>单元格1</td>
  63. <td>单元格2</td>
  65. </tr>
  67. <tr>
  69. <td>单元格3</td>
  71. <td>单元格4</td>
  73. </tr>
  75. </table>
  77. </body>
  79. </html>

期待下次再见！

本文完结，下一趴会介绍一下CSS与Javascript，敬请期待！

HTML入门编写的更多相关文章

  1. Java入门——编写并运行第一个程序

    Java入门——编写并运行第一个程序 摘要:本文主要介绍如何使用Java语言编写并通过DOS运行简单的程序. 编写简单的程序 在D盘新建一个文本文档,输入如下代码: class Hello { pub ...

  2. SpringMVC入门--编写一个SpringMVC小程序

    一.SpringMVC的优势 Spring 为展现层提供的基于 MVC 设计理念的优秀的Web 框架,是目前最主流的 MVC 框架之一.Spring3.0 后全面超越 Struts2,成为最优秀的 M ...

  3. 一步步入门编写PHP扩展

    1.写在最前 随着互联网飞速发展,lamp架构的流行,php支持的扩展也越来越多,这样直接促进了php的发展. 但是php也有脚本语言不可避免的问题,性能比例如C等编译型语言相差甚多,所以在考虑性能问 ...

  4. Python入门-编写抓取网站图片的爬虫-正则表达式

    //生命太短 我用Python! //Python真是让一直用c++的村里孩子长知识了! 这个仅仅是一个测试,成功抓取了某网站1000多张图片. 下一步要做一个大新闻 大工程 #config = ut ...

  5. 12-网页,网站,微信公众号基础入门(编写后台PHP程序,实现Airkiss配网)

    https://www.cnblogs.com/yangfengwu/p/11067590.html 首先说一下,这两个地方需要配置一样 网站根目录建个文件夹 airkiss的文件夹 里面放上 ind ...

  6. jquery插件开发基础入门

    jquery插件开发基础入门 入门 编写一个jquery插件开始于给jquery.fn加入新的功能属性,此处添加的对象属性的名称就是你的插件名称 jQuery.fn,myPlugin = functi ...

  7. jQuery插件开发入门

    扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间.这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱. 入门 编写一个jQuery插件开始于给jQuery.fn加入 ...

  8. 纯JS编写打地鼠游戏

    这个游戏是本人前不久刚入门编写的游戏,感觉里面代码很LOW但是对于新手来说很一般般吧~ 没有上传音乐文件了 运行效果: 上代码(HTML+JS): <!DOCTYPE html> < ...

  9. day01_12/11/2016_Spring入门PPT

    s1 s2 s3 s4 s5 s6 s7 s8 IOC1 IOC2 入门编写1 入门编写2 入门编写3 入门编写4---心得

随机推荐

  1. Android零基础入门第83节：Activity间数据传递方法汇总

    在Activity间传递的数据一般比较简单,但是有时候实际开发中也会传一些比较复杂的数据,本节一起来学习更多Activity间数据的传递. 一.常用数据类型 在前面几节我们只学习了一些常用类型的数据传 ...

  2. Android零基础入门第79节：Intent 属性详解（上）

    Android应用将会根据Intent来启动指定组件,至于到底启动哪个组件,则取决于Intent的各属性.本期将详细介绍Intent的各属性值,以及 Android如何根据不同属性值来启动相应的组件. ...

  3. ThinkPHP 提供Auth 权限管理、支付宝、微信支付、阿里oss、友盟推送、融云即时通讯、云通讯短信、Email、Excel、PDF 等等

    多功能 THinkPHP 开源框架 项目简介:使用 THinkPHP 开发项目的过程中把一些常用的功能或者第三方 sdk 整合好,开源供亲们参考,如 Auth 权限管理.支付宝.微信支付.阿里oss. ...

  4. Tomcat Java SSL

    转自 - http://blog.csdn.net/szzt_lingpeng/article/details/51247980 转载自:http://my.oschina.net/cimu/blog ...

  5. 一个类的实例化对象所占空间的大小（对象大小= vptr(可能不止一个) + 所有非静态数据成员大小 + Aligin字节大小（依赖于不同的编译器））

    注意不要说类的大小,是类的对象的大小. 首先,类的大小是什么?确切的说,类只是一个类型定义,它是没有大小可言的. 用sizeof运算符对一个类型名操作,得到的是具有该类型实体的大小. 如果 Class ...

  6. Building PySide on Microsoft Windows

    Prerequisites MS Visual Studio Express 2008 [microsoft.com] NOTE: Visual Studio Express 2010 is not ...

  7. [書訊]《.NET 依賴注入》 (2014-12-08 更新)

    书 名:.NET 依赖注入 页 数:235 格 式:PDF.EPUB.MOBI难易度:中阶至进阶出版日期:2014 年 12 月 8 日ISBN:9789574320684 简介 本书内容是关于 .N ...

  8. ObjectForScripting 注册

                c#和javascript函数的相互调用(ObjectForScripting 的类必须对 COM 可见.请确认该对象是公共的,或考虑向您的类添加 ComVisible 属性. ...

  9. UITableViewStyleGrouped 设置表头出现section不为0的问题

    UITableViewStyleGrouped 设置表头出现section不为0的问题 1.如果使用UITableViewStylePlain样式的表格,那么header是会在表格滑动的时候在顶部悬浮 ...

  10. epoll模型的探索与实践

    我们知道nginx的效率非常高,能处理上万级的并发,其之所以高效离不开epoll的支持, epoll是什么呢?,epoll是IO模型中的一种,属于多路复用IO模型; 到这里你应该想到了,select, ...