zoukankan      html  css  js  c++  java
  • HTML入门编写

    说句闲话:成为洛谷管理员的最好方式——

    学习HTML

    emm好,正文开始。

    今天给大家带来的是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>
    
    <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,敬请期待!

  • 相关阅读:
    Hibernate 3入門
    如何调整液晶显示器保护你的视力
    WEB前端开发经验总结实战篇
    【JS】引用类型之Array
    Oracle的DBA管理常用sql
    使用cos组建上传文件
    前台js将json转换成json对象的方法
    关于父页面访问iframe中元素和js的那点事
    数据库中IN和EXISTS的区别
    关于google浏览器有时莫名自动提交表单的问题
  • 原文地址:https://www.cnblogs.com/vercont/p/10210019.html
Copyright © 2011-2022 走看看