html网页设计培训 HTML网页设计零基础入门教程(一),两分钟学会设计第一个网页

HTML网页设计零基础入门教程(一),两分钟学会设计第一个网页

视频地址:

HTML网页设计零基础入门教程(一),两分钟学会设计第一个网页。

文案:

大家好,我是老K。一个码龄超过10年的程序员。从今天起,我会给大家介绍,Web网站开发的最基本语言:HTML。本期视频给大家介绍怎么编写第一个网页。什么是HTML呢?HTML就是超文本标记语言,用来标记通过互联网传输的网页的格式。用HTML标记的网页是静态网页,后缀名一般是.html或.htm。静态网页制作完成以后,其内容不会变化。如果要修改内容,必须修改源文件。

HTML用各种元素组织文档,用一对尖括号标记元素的开始和结束。两个尖括号里面的表示元素的内容。例如:<title>人工智能</title>,表示网页的标题是,人工智能。所有的,web,设计语言都以HTML为基础。编写HTML,很简单。使用windows自带的,记事本,就可以编写。首先,创建一个文本文档。用记事本打开文档,输入HTML代码。我们先来看一下效果,稍后我会详细介绍源文件的内容。保存以后,关闭记事本。重命名文本文件,把后缀名改为html。用浏览器打开网页,就看到效果了。

我们来看源文件。

第一个元素,HTML,是顶级元素。所有的元素都包含在它里面。

第二个元素,head,表示文档的头部信息。

第三个元素,title,是head的子元素,表示网页的标题.

第四个元素,body,是网页的主体部分。

body,元素的内容是一句文本:世界,你好。

好了,这就是本期视频的内容。谢谢观看!再见!

源文件:

<html>

<head>

<title>This is the fisrt page</title>

</head>

<body>

Hello, world!

</body>

</html>

html网页设计培训 HTML网页设计零基础入门教程(一),两分钟学会设计第一个网页

第二期html基础 惊!学习了这些知识居然可以做网页啦

很高兴铁铁们能来看html网页设计第二期~~~~撒花~~~~~

html网页设计培训 HTML网页设计零基础入门教程(一),两分钟学会设计第一个网页

哎呀呀~实在是抱歉备注标签我记错了QAQ

<!--内容打这里-->这个才是备注标签不是//

首先我们先来学习上节课留下的剧透,分别是:

1.标题标签h1~h6

有人就说了标题标签上次剧透不就只有h1标签吗?

嘿嘿,其实他还有兄弟姐妹啦~

看图,代码是从上往下从左往右执行的请记住这个顺序哦~

还有,左边是代码右边是网页上面的效果哦~

html网页设计培训 HTML网页设计零基础入门教程(一),两分钟学会设计第一个网页

源代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>页面标题</title>

</head>

<body>

<!--标题标签是h1~h6-->

<h1>1</h1><!--最大-->

<h2>2</h2>

<h3>3</h3>

<h4>4</h4>

<h5>5</h5>

<h6>6</h6><!--最小-->

</body>

</html>

如图所示,h1标签是最大的,h6标签是最小的

是不是很简单呀,现在已经学会了一个知识点了哦~

2.段落标签 p标签

html网页设计培训 HTML网页设计零基础入门教程(一),两分钟学会设计第一个网页

源代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<!--千万要记住内容是写在标签里面的哦~-->

<!--段落标签是独占一条的哦-->

<p>第一条p标签</p>

<p>第二条p标签</p>

<p>第三条p标签</p>

</body>

</html>

3.链接标签 a标签

链接标签是什么?顾名思义就是一个链接 看代码:

html网页设计培训 HTML网页设计零基础入门教程(一),两分钟学会设计第一个网页 html网页设计培训 HTML网页设计零基础入门教程(一),两分钟学会设计第一个网页

<a href="https://www.baidu.com">百度</a>

href是什么东西啊?是a标签的属性啦~ 里面用来输入你需要跳转到的网页的链接

属性里面的东西是不会出现在网页上面的出现的只有在a标签里面的内容哦

当我点击百度这两个字后就给我跳转到了我们href属性里面的https://www.baidu.com

当然我们也可以跳转到我们自己制作的网页上面但要求是同一个项目下面的网页

是不是很有趣~

看视频:

视频加载中...

视频中我们点击链接后就跳转到了山这个网页出现了一张山的图片,是不是有点小意思~

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<a href="new_file3.html">跳转到山的网页</a><!--只有同一个项目下面的网页才能相互跳转-->

</body>

</html>

4.图像标签 img标签

图像标签标签如其意,就是用来上传图像的一个标签~~

html网页设计培训 HTML网页设计零基础入门教程(一),两分钟学会设计第一个网页

我们这里介绍一下img的两个属性:

<img src="img/OIP-C.jpg" alt="山"/>

src就是用来放图片的地址的,他会根据地址去找图片然后把图片放到网页上面。

alt有什么用啊就是当图片显示失败的时候就会显示alt里面的文字

看视频:

视频加载中...

我们把图片的地址破坏后,就会显示一个图片错误的图标和alt里面的内容

怎么拖图片到img文件下,老师~~~我不知道

看视频

视频加载中...

嘿嘿就直接把文件拖进来就ok了是不是很简单~

okk,好快啊怎么一下就学完了今天的知识点~~~

嘻嘻今天可是有作业的~

请根据下面的网页仿写一下:

html网页设计培训 HTML网页设计零基础入门教程(一),两分钟学会设计第一个网页

完成后作业发再评论区哦,有什么不懂的可以留言包回答的。

加油呀,每天学一点争取做出属于自己的一个网页~

上一期

相关问答

0基础如何自学html和css-马天廷的回答-懂得

html5和以前的html语法上差别不大,多了几个标签而已,从哪个开始都无所谓html5多出来新功能比如web3D、画布或svg动画这些背后都是js的功劳,跟html5...

如何临摹一个网站,借而提高自己的网页设计能力-懂得

先把原网网页整个复制下来会有几个文件夹和网页格式的东西用Dreamweaver打开网页格式的用自己的东西替换掉它的东西最后加些动画之类的(关键是排版...

网页设计怎么学比较好?

网页设计大体上可以分为两块内容:UI设计和前端开发。任何一个网站的建立,都需要“分析策划”——“交互设计”——“视觉设计”——“前端制作”——“后端制...

html如何正确写网页?

html网页制作的基本步骤:第一步,打开电脑,选择C盘或者D盘(建议D盘),然后鼠标按右键,会出现新建-文本文档,新的文本文档就建立好了。第二步,在文档中输...ht...

html页面怎么生成随机数-ZOL问答

document.write(Math.random())...

html怎么做页面布局?

1、所谓HTML是超文本标记语言(HyperTextMarkupLanguage,简称:HTML)是一种用于创建网页的标准标记语言。2、HTML页面布局有两种方式,一种是TABLE布局,一......

javascript如何动态生成一张html页面,点击某个按钮后,生成一...

原理:fso读取asp运行页面后的html源代码,然后把读取到的html源代码再使用fso的写文件功能重写入一个html文件有用(0)回复cwr1979用javascript的文件处理功能.....

html页面用了什么方法?

html页面的加载用了onload方法,表示页面元素的加载完成。html页面的加载用了onload方法,表示页面元素的加载完成。

使用HTML5和CSS3制作登录页面完整步骤-OSCHINA-中文...

HTML5!ie8是较老的浏览器。。我的ie6情何以堪呵呵。如果工作需要用到IE6,那还好理解一点,如果不是的话...好吧,我不说了.输入框没有label作为提示是这个...

HTML网页制作:[9]创建超链接的方法?

1、其中,hello.html是主页面,我将在其中做一个链接,让他链接到另一个网www.html上。2、先看hello.html的代码1、其中,hello.html是主页面,我将在其中做一个链接....