重视:本专栏内的教程适用于0基本的新手。
什么是HTML?
按照百度百科上的解释:HTML叫作为超文本标记语言,是一种标识性的语言。它包含一系列标签.经过这些标签能够将网络上的文档格式统一,使分散的Internet资源连接为一个规律整体。HTML文本是由于HTML命令构成的描述性文本,HTML命令能够说明文字,图形、动画、声音、表格、链接等。它的全叫作是Hyper Text Markup Language。
简单来讲,HTML是编写网页的语言,用来告诉浏览器应该怎样表示网页。HTML的编程环境不算太苛刻,大都数能编辑.txt后缀文件的软件,就能够编写HTML代码,例如Windows的记事本。只是倘若想要查看效果,必须另存为HTML文档(后缀为.html),或桌面上选中文件并重命名,而后手动更改后缀亦能够。
下面起始实战操作:(运用专业的研发工具很要紧,之后我会举荐几款软件。)
桌面右键-新建-文本文档,而后打开这个文本文档,最好用记事本打开。此时候并不必须每次都手动选取记事本,能够设置默认程序。要认识更加多信息,详见:
打开后,咱们先输入:
<!DOCTYPE html>
这暗示什么呢?
所有的HTML文档都必要以此开头,用来声明这是一个HTML文档,让浏览器更方便地判断文档类型。每一个HTML文档的开头必要是这行代码,并且只显现一次。
回车以进行换行。
咱们再输入:
<html>
</html>
这又是什么意思?
HTML文档的本身要以<html>起始,以</html>结束。
而后在中间空出的一行中,再输入:
<body>
</body>
这又是什么意思?
顾名思义,这中间相当于HTML文档的「身体」。
主体结构已完工:
下面进行网页的主体编写。先写些什么呢?不如先添加一个标题吧。输入:
<h1>Hello world! </h1>
至于为何要输入 Hello world! ,参见:
倘若想要调节标题的要紧性(亦便是体积),前面和后面能够调节成<h2>和</h2>,始终到<h6>和</h6>:
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
效果如下:
添加完标题之后,再添加一段文字吧。回车进入新的一行,输入:
<p>这是一段文字,能够按照自己的需求进行替换。</p>
至此,记事本里便是这些代码,不爱学习的小伙伴们直接拿去复制:
<!DOCTYPE html>
<html>
<body>
<h1>Hello world! </h1>
<p>这是一段文字,能够按照自己的需求进行替换。</p>
</body>
</html>
保留后关闭。右键-重命名-将后缀名改为.html-完成!
倘若无表示后缀名,请参见这篇文案:
而后用浏览器打开。
倘若浏览器表示出的是以下界面,那样恭喜你,成功了。
重视:倘若你的浏览器窗口够长,你只会看到一个标题和一行文字。上面的截图由于窗口太小,因此会经过换行的方式调节文本格式,实质上并无换行。
总结及重视事项:
1.HTML文档的主体结构长这般(这是最最基本的):
照片源自于W3School,侵删。其中白色部分是表示在浏览器上的内容。
2.HTML文档的元素结构:
<标记(属性)>这儿是详细内容</标记>
重视:元素是能够嵌套的。例如我在<html>和</html>之间插进<body>与</body>,再在中间加入<h1>与</h1>、<p>与</p>等等。
3.虽然有时HTML文档会自己检测出丢失的标记并补上,然则为了保险并养成良好的习惯,请务必检测自己的前标记(首标记)和后标记(末标记)是不是无缺失。例如输入<p>和段落内容后,不要忘记输入</p>!
4.有时候,HTML标记不区分体积写。例如<>会自动转换成<p>,然则为了规范,在输入标记时,尽可能运用小写。
5.除了用中文输入法输入文本内容外,在输入代码时始终运用英文输入法。
这篇文案的内容到这儿就结束了,附上参考资料:W3Schools。
下期文案:
panda456:HTML中 针对颜色的应用 19 赞同 · 0 评论文案
|