学习网页制作并不难，HTML菜鸟教程，从这里开始第一课学习

很多朋友想学一下网页制作，上网一看，只要涉及到网页制作，都离不开HTML这个词语，HTML是HyperText Markup Language的简称，想学习HTML语言，先得了解一些基本知识，今天这边内容可以作为学习HTML的菜鸟教程第一课。

HTML是什么？

一般我们说HTML是指超文本标记语言，英文名称为HyperText Markup Language，简称HTML，它是目前互联网上应用最广泛的语言。

如何查看HTML？

拿最常见的网页为例，如果用大家熟悉的IE浏览器的话，直接在网页上点右键，选择“查看源”即可查看当前网页的HTML源码；如果是其他浏览器的话，多数情况下点击右键，选择“查看源码”或者类似“查看网页源代码”这样的选项即可查看。

当然也可以通过专业的网页制作软件以及各种文本编辑器来查看。

HTML有什么用？

HTML语言可以方便地将网络上存储于不同位置的文字、图片、声音、视频等内容组织起来，方便用户浏览。对于我们来说，HTML是学习网页制作的基本功，熟练掌握HTML这项基本功，可以为以后的学习和工作打下良好的基础。

HTML如何入门？

要学习任何编程语言，都不好好高骛远，HTML的入门很简单，但是也要遵循学习的基本步骤，选择一本入门书籍，循序渐进地去学习每一张的内容。一边学习，一边查看网页代码对照来学，提升入门速度。

HTML案例

下面就是最基本的HTML案例，在这个案例中，用的是HTML5，

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元（meta）数据，如 <meta charset=\”utf-8\”> 定义网页编码格式为 utf-8。
  • <title> 描述了网页的标题
  • <body> 元素包含了可见的页面内容，因为下面是最简单的案例，所以只有几行，实际网页一般都有很多行。
  • <h1> 定义一个大标题
  • <p> 元素定义一个段落，也就是大家常说的分段。

如何编辑HTML?

这个就很多了 ，比如最出名的Dreamweaver，当然如果熟练之后，可以选择任意自己喜欢的编辑器，一些小的改动或者一小段代码的话，也可以用各种常见的文本编辑器来处理，比如我们在wodows系统上常见的记事本，总之只要自己觉得方便就好。

总结

以上是学习HTML菜鸟教程的第一课，首先保持一个良好的心态来学习，有好的心态，知识方面只要循序渐进，学会就是水到渠成的事情了 。

（HTML完结篇）制作一个简单页面(详解)——零基础自学网页制作

演示视频在文章底部

1.页面内容居中显示方法

将这段代码<div style=\”width:50%;margin:auto;\”>放置在<body>标签之下。

将</div>放置在</body>之上。

将全部内容包裹在这个div中，就可以实现整个页面居中。

内容显示宽度为浏览器视窗宽度的50%。

margin（外边距）是在CSS布局中经常用到的属性，它指定了该div元素距离四周的距离。使用“auto”值，可以实现居中。

2.导航栏悬停顶端方法

把四个a标签装到一个div中。

将<div style=\”position:fixed; top:0px;\”>添加到<a style=\”margin: 0px 30px 0px 10px;\” href=\”#chapter1\”>试飞进程</a>之上。

将</div>添加到<a style=\”margin: 0px 30px 0px 0px;\”href=\”#chapter4\”>总体评价</a>之下。

position是css布局中指定位置的属性，“fixed”值是让该div悬停于固定位置。

默认下，该div距离视窗顶端有10px左右的距离，因此为了让它与视窗顶部对齐，添加top：0px。

3.鼠标滑过导航标题或链接时改变背景色提示

这就要介绍关于css的写法了。

简单来说，就是在<head></head>标签中添加

<style>

a:hover

{

background-color:#ffff00;

}

</style>

学过的小伙伴应该知道，CSS脚本是可以添加在head元素中的。

其中，a:hover中的a指的是所有<a></a>标签。

hover指的是：当鼠标悬停在a上面时的状态。

使用：连接。

这个状态下要执行的内容在{}中。

background-color:#ffff00;即背景色为黄色。

3.隐藏滚动条方法

首先，我们要明确一点，就是，滚动条是在内容长度超过视窗高度时产生的。

如果要取消视窗最右侧滚动条，就要控制内容高度。

把<p></p>和<img/><map></map>全部装进<div></div>中，控制该div的高度可以实现。

在<p>标签色上面添加<div>。

在</map>标签下面添加</div>。

下面，为div规定尺寸，添加style=\”width:610px; height:530px;\”。

这样，就不会超出视窗。但是代码写完后发现并不是，如图：

多出的文字内容超出div范围，右侧滚动条依然存在。

这就要在div的style中再增加一条语句\”overflow-y:scroll;\”

这句话的意思是“overflow-y”（超出最大高度）就显示滚动条（scroll）。而不是让内容超出div的边框。

<div style=\”width:610px; height:530px; overflow-y:scroll;\” >

如图：

因为图片宽度的问题，下方的x轴的scroll也出现了，我们不想看到它，影响美观。

添加“overflow-x：hidden”即可，hidden（隐藏）。

<div style=\”width:610px; height:530px; overflow-y:scroll; overflow-x:hidden;\” >

如图：hidden之后，将无法滚动或拖动画面。

最后，我们要把右侧的scroll也隐藏掉，因为点击鼠标，滚动滚轮就够了，滚动条实在碍眼。

从前面的例子可知，hidden是不行的，有没有别的办法？

那就是在盖div的外部再添加一个div，让这个div的宽度略小于里面div的宽度，小到刚刚挡住滚动条既可以。如图：

这个div这样写即可

<div style=\”margin:30px 0px 0px 0px;width:600px;overflow:hidden;\”>

</div>

同时还要给里面的div添加margin来让它们对齐

<div style=\”margin:30px 0px 0px 0px;width:600px;overflow:hidden;\”>

<div style=\”margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;\” >

<!–省略了p img map 请自行脑补或参考源码–>

</div>

</div>

完整代码：

4.图片区域链接

详见

具体过程请参照演示视频：

视频加载中…

几经周转，我还是坚持将HTML部分的内容写完了。

经过这段时间的实践，我确定的原则是：

第一，事无巨细，有用的话，就要用大白话解释清楚。

第二，不嫌琐碎，尽量把内容堆齐。堆到全看完后能够看懂常见页面代码、具有一定的开发能力。

第三，使用多媒体手段把操作过程演示清楚，什么时候忘了，打开就能看。

第四，控制篇幅，做碎片化学习。

无论怎样，写作本身是一件非常有趣的事，通过互联网还能分享出来也是件快乐的事。

HTML部分结束了。

下一步该筹备CSS部分了。

谢谢大家的支持与陪伴！也感谢自媒体平台免费提供的服务。

内容如有疏漏或错误，欢迎斧正！感激不尽。

使用碎片时间，学习完整知识！关注大鱼师兄，一起精研技艺。

前端入门——先从制作一个简单的html5网页开始

前端工作都是从创建一个网页文件开始的，一个最小的网页文件应该总是包含一些东西。

  • <!doctype html>– HTML5。
  • <title></title>-标题。
  • <meta charset=\”utf-8\”>– UTF8。
  • <meta name=\”viewport\” content=\”width=device-width, initial-scale=1\”> 针对移动设备进行优化并防止缩放或水平滚动。
  • css/style.css 样式文件 和 js/scripts.js js文件。
  • <meta http-equiv=\”x-ua-compatible\” content=\”ie=edge\”>-不是强制性的，但可能会有所帮助。

其中，head 主要包含，提供有关页面的元信息标签 <meta>，比如 针对搜索引擎 ，关键词和描述及编码类型等，网页标题，css样式文件。

一般建议，script 标签写在body 结束之前。

是不是很简单，这是一个网页的基本框架，要想制作一个内容丰富，漂亮的网页，还需要学习很多知识。

  • meta 标签，这个标签类型很多，可以参考这里以下：

https://www.w3school.com.cn/tags/tag_meta.asp

https://www.haorooms.com/post/html_meta_ds

  • 在HTML中使用css样式的方法有：行内式、内嵌式、外联式，而外联式又分：链接式（link）和导入式（@import）
  • script 脚本文件

到此，你基本已经了解了如何制作一个网页，建议能够亲手练习下，这样加深理解。

接下来，我会大概讲下，网页如何布局并填充内容，感谢您的关注。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场，未经允许不得转载。

继续阅读本文相关话题

TAG
全部
行业动态
C4D教程
C4D百科