今天给大家带来的是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>***

</html>***

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

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

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

如何编写呢?

<html>

<head>//注意要再开一对head,<html>里不能直接包含<title>***

<title>my first html!</title>***

</head>***

</html>

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

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

第二步:写出一个段落。

<html>

<head>

<title>my first html!</title>

</head>

<body>***

<p>hello world!</p>***

</body>***

</html>

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

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

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

我们只需如下操作:

<html>

<head>

<title>my first html!</title>

</head>

<body>

<p>hello world!</p>

<hr/>***

</body>

</html>

多简单,短短五个字符搞定!

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

没错,就是没有成对出现

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

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

换行:

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

<html>

<head>

<title>my first html!</title>

</head>

<body>

<p>hello world!</p>

<hr/>

<br/>***

</body>

</html>

也是十分的easy呢~

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

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

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

NO.1:粗体


<b>我是粗体</b>

NO.2:斜体

<i>我是斜体</i>

NO.3:小字体

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

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

e.g.:

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

第四步:图片插入

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

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

第五步:插入链接:

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

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

第六步:跳转

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

我们只需编写如下代码:

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

如想跳转到某处,就这样:

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

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

第六步:制作表格

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

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

<table border="1">

<tr>

<td>单元格1</td>

<td>单元格2</td>

</tr>

<tr>

<td>单元格3</td>

<td>单元格4</td>

</tr>

</table>

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

其中

<tr>
</tr>

为表格的换行。

<td>
</td>

即制作每一个格子。

<table>
</table>

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

最后,送给大家一个用法的总结:

<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,敬请期待!

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. EF日志记录,包括记录Linq生成的Sql

    <interceptors> <interceptor type="System.Data.Entity.Infrastructure.Interception.Datab ...

  2. Win10的UWP之标题栏的返回键(一)

    原文:Win10的UWP之标题栏的返回键(一) 关于返回键,放在标题栏是目前较为完美的一种方案.继前一篇的Hello World,博主进行一些修改实现该方法. - - - - - - - - - - ...

  3. Linux数据流的重定向

    >覆盖内容:>>追加内容:<和>的区别在于重定向方向不一致,>表示重定向从左到右:>>和<<类似 简单的重定向 0 /dev/stdin 标 ...

  4. JavaScript语言核心--词法结构

    编程语言的词法结构是一套基础性规则,用来描述如何使用这门语言来编写程序.作为语法的基础,它规定了诸如变量名是什么样的.怎么写注释,以及程序语言之间如何分隔等规则. 1. 字符集 JavaScript程 ...

  5. QT---Winsocket获取网关(Gateway) 主机IP等信息

      基于WinPcap库做开发,需要利用到局域网的默认网关地址和Mac地址,但是WinPcap实现获取网关IP地址没有很好的思路,可以知道的是网关的接收和发出的数据包数量一般是比局域网内的各主机要多的 ...

  6. property的使用(事件可能就是回调函数)

    TOnUserInfoShow = procedure(userName:string;userAge:Integer)of object;//定义事件模型中的回调函数原型 TUserInfo = c ...

  7. 使用VS2012开发基于Office 2013的AddIn程序

    默认VS2012开发的Office Add是基于2010的,如下所示: 如果你机器上安装的Office版本是2013,那么使用VS2012创建的工程是无法运行的,弹出如下的错误: 那么此时怎么办呢?将 ...

  8. 关于案例中核心dao的解释

    很多小伙伴不太理解核心dao,说这是干什么的,接下来我将一一为大家解答: 1.说到核心dao不得不说到单表操作,单表操作顾名思义是对单张数据库表的CRUD操作,实际情况中我们追求将表与表的关系映射到对 ...

  9. Linux上read命令的使用

    一:read倾听是一种美德       1.倾听键盘的输入并保存到变量中              例如:#! /bin/bash            echo  "please inpu ...

  10. 升级vue全家桶过程记录

    背景 如果你使用了element-ui的el-tabs组件,并且想要单独升级element-ui至2.10.0,你会发现,使用了el-tabs组件的页面只要打开就卡死.原因是element-ui~2. ...