HTML入门讲解

论坛 期权论坛 期权     
程序员fm   2019-7-29 01:00   3342   0

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

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:5
帖子:1
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP